const darkColors = { page_bg: "rgb(25,33,50)", horizen_bg: "#fff", header_bg: "rgb(49,62,89)", sideBar: { sideBar_bg: "rgb(49,62,89)", sideBar_color: "#fff", }, footer: { titlenelowBackground: "#806ce1", titleBackground: "#fff", fromBackground: "rgb(55,72,107)", toBackground: "rgb(55,72,107)", belowBackground: "rgb(210, 202, 250)", }, dynamic_header: { afterbrandcolor: "", color1brand: "#fff", color2brand: "rgb(210, 202, 250)", colordescription: "rgb(210, 202, 250)", background: "radial-gradient(circle, rgb(49,62,89) 0%, rgba(230,230,231,0.01) 0%, rgb(49,62,89) 100%, rgb(49,62,89) 100%, rgb(49,62,89) 100%, rgba(46,52,90,1) 100%);", }, search_sbt: { section_bg: "transparent", card_bg: "transparent)", search_btn_bg: "rgb(49,62,89)", search_btn_bg_hover: "rgba(49,62,89,0.8)", search_btn_text: "rgb(255,255,255)", input_bg: "rgb(49,62,89)", input_bg_hover: "rgba(49,62,89,0.8)", input_text_color: "rgb(255,255,255)", input_border: "rgba(49,62,89,0.8)", table_bg: "transparent", table_color: "rgb(255,255,255)", table_border_color: "", table_accent_bg: "", table_striped_color: "rgb(255,255,255)", table_striped_bg: "", table_hover_color: "rgb(255,255,255)", table_hover_bg: "", }, profileInlineBlock: { name: "#fff", accountId: "#fff", tag: "#fff", description: "#fff", }, table_pagination: { table_bg: "rgb(49,62,89)", table_color: "rgb(255,255,255)", table_border_color: "", table_accent_bg: "", table_striped_color: "rgb(255,255,255)", table_striped_bg: "", table_hover_color: "rgb(255,255,255)", table_hover_bg: "", btn_border: "rgb(25,33,50)", btn_bg: "rgb(49,62,89)", btn_bg_active: "rgb(25,33,50)", btn_color: "#fff", input_bg: "#2f3b54", }, card: { card_bg: "rgb(49,62,89)", tabSelect_bg: "#192132", tabSelect_text_color: "#fff", tabSelect_input_bg: "rgb(49,62,89)", tabSelect_btn_active_bg: "rgb(49,62,89)", text_color: "rgba(255,255,255,1)", }, chart: { title: "rgb(255,255,255)", subtitle: "rgba(255,255,255,0.7)", xAxis: "rgb(255,255,255)", yAxis: "rgb(255,255,255)", legend: "rgba(255,255,255,0.7)", legendHover: "rgb(255,255,255)", rangeSelector: { labels: "rgba(255,255,255,0.7)", inputColor: "rgb(255,255,255)", btn_bg: "rgba(25,33,50,0.3)", btn_color: "rgba(255,255,255,0.7)", btn_hover_bg: "rgba(25,33,50,0.5)", btn_hover_color: "rgba(255,255,255,0.8)", btn_active_bg: "rgba(25,33,50,0.8)", btn_active_color: "rgb(255,255,255)", }, }, tree: { subject: { color: "#fff", fontweight: 400, fontSize: "2em", }, nodes: { color: "#fff", // borderColor: "#fff", backgroundColor: "rgb(49,62,89)", }, overrideNodeStyles: { // backgroundColor: "red", }, }, spinnerColors: ["#6F61C0", "#241468"], chartColor: [ "#F79BD3", "#A084E8", "#EA1179", "#F79BD3", "#A084E8", "#6F61C0", "#241468", "#9F0D7F", ], }; const lightColors = { page_bg: "#fff", horizen_bg: "#391b86", header_bg: "rgb(210, 202, 250)", sideBar: { sideBar_bg: "rgb(210, 202, 250)", sideBar_color: "#fff", }, footer: { titlenelowBackground: "#806ce1", titleBackground: "#fff", fromBackground: "rgb(210, 202, 250)", toBackground: "rgb(210, 202, 250)", belowBackground: "#806ce1", }, dynamic_header: { afterbrandcolor: "#789efb", color1brand: "#000", color2brand: "#806ce1", colordescription: "#806ce1", background: "radial-gradient(circle, rgba(210,202,250,1) 0%, rgba(210,202,250,0.01) 0%, rgba(235,231,253,1) 100%, rgba(255,241,241,1) 100%, rgba(46,52,90,1) 100%);", }, search_sbt: { section_bg: "rgb(235, 231, 253)", card_bg: "", search_btn_bg: "rgb(210, 202, 250)", search_btn_bg_hover: "rgba(210, 202, 250,0.8)", search_btn_text: "rgb(0,0,0)", input_bg: "rgba(210, 202, 250,0.2)", input_bg_hover: "rgba(210, 202, 250,0.4)", input_text_color: "rgb(0,0,0)", input_border: "rgba(210, 202, 250,0.4)", table_bg: "transparent", table_color: "rgb(0,0,0)", table_border_color: "", table_accent_bg: "", table_striped_color: "rgb(0,0,0)", table_striped_bg: "", table_hover_color: "rgb(0,0,0)", table_hover_bg: "", }, profileInlineBlock: { name: "#000", accountId: "#000", tag: "#000", description: "#000", }, table_pagination: { table_bg: "rgb(255,255,255)", table_color: "rgb(0,0,0)", table_border_color: "", table_accent_bg: "", table_striped_color: "rgb(0,0,0)", table_striped_bg: "", table_hover_color: "rgb(0,0,0)", table_hover_bg: "", btn_border: "#000", btn_border: "#806ce1", btn_bg: "#fff", btn_bg_active: "rgb(235, 231, 253)", btn_color: "#000", }, card: { card_bg: "rgb(255, 255, 255)", tabSelect_bg: "#e6e6e7", tabSelect_text_color: "#000", tabSelect_input_bg: "rgb(210, 202, 250)", tabSelect_btn_active_bg: "rgb(210, 202, 250)", text_color: "rgba(0,0,0,1)", }, chart: { title: "rgba(0,0,0,1)", subtitle: "rgba(0,0,0,0.7)", xAxis: "rgba(0,0,0,1)", yAxis: "rgba(0,0,0,1)", legend: "rgba(0,0,0,0.7)", legendHover: "rgba(0,0,0,1)", rangeSelector: { labels: "rgba(0,0,0,0.7)", inputColor: "rgba(0,0,0,0.5)", btn_bg: "rgba(0,0,0,0.3)", btn_color: "rgba(0,0,0,0.8)", btn_hover_bg: "rgba(0,0,0,0.4)", btn_hover_color: "rgba(0,0,0,1)", btn_active_bg: "rgb(235, 231, 253)", btn_active_color: "rgba(0,0,0,1)", }, }, tree: { subject: { color: "#000", fontweight: 400, fontSize: "2em", }, nodes: { color: "#000", // borderColor: "#000", backgroundColor: "#fff", }, overrideNodeStyles: { // backgroundColor: "red", }, }, spinnerColors: ["#6F61C0", "#241468"], chartColor: [ "#F79BD3", "#A084E8", "#EA1179", "#F79BD3", "#A084E8", "#6F61C0", "#241468", "#9F0D7F", ], }; const themeColor = props.themeColor || lightColors; // const themeColor = props.themeColor || lightColors; // ##################################### State.init({ singer: props.accountId || context.accountId || "opencann.near", result: [], data: props.accountId || context.accountId || "opencann.near", isLoading: false, error: [], }); const inputHandler = ({ target }) => { const singer = target.value.toLowerCase().trim(); State.update({ singer: singer }); }; const handleData = () => { if (!state.singer.length) { State.update({ error: [...state.error, "please insert an address"] }); return; } if (state.data === state.singer) { State.update({ error: [...state.error, "please insert a new address"] }); return; } State.update({ data: state.singer }); }; if (state.error.length > 0) { function hide() { const errors = state.error; errors.shift(); if (errors.length > 0) setTimeout(hide, 2500); State.update({ error: errors }); } setTimeout(hide, 2500); } const Input = styled.input` color:${themeColor?.search_sbt?.input_text_color}; background-color:${themeColor?.search_sbt?.input_bg}; border: 1px solid ${themeColor?.search_sbt?.input_border}; &:focus{ background-color:${themeColor?.search_sbt?.input_bg}; color:${themeColor?.search_sbt?.input_text_color}; border: 1px solid ${themeColor?.search_sbt?.input_border}; }; &:hover{ background-color:${themeColor?.search_sbt?.input_bg_hover} }; `; const Button = styled.button` color: ${themeColor?.search_sbt?.search_btn_text}; font-size: 16px; padding: 0.5rem 1rem; font-weight: 400; background-color: ${themeColor?.search_sbt?.search_btn_bg}; &:hover {background-color: ${themeColor?.search_sbt?.search_btn_bg_hover}}; border: 1px solid ${themeColor?.search_sbt?.search_btn_bg}; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02); min-height: calc(1.5em + 1rem + 2px); border-radius: 40px; line-height: 29px; letter-spacing: 0.01em; `; // ------------------------------------------------------------------- const singer = state.data; const status = Social.index("notify", singer, { order: "desc" }) || []; const receivedPoke = status.filter( (notification) => notification?.value?.type === "poke" ); const numReceivedPoke = receivedPoke?.length || 0; const receivedLike = status.filter( (notification) => notification?.value?.type === "like" ); const numReceivedLike = receivedLike?.length || 0; const receivedComment = status.filter( (notification) => notification?.value?.type === "comment" ); const numReceivedComment = receivedComment?.length || 0; const receivedRepost = status.filter( (notification) => notification?.value?.type === "repost" ); const numReceivedRepost = receivedRepost?.length || 0; const nummention = status.filter((notification) => notification?.value?.type.includes?.("mention") ).length || 0; //---------------------------------------------------part1------------------------------------------------------ const following = Social.keys(`${singer}/graph/follow/*`, "final", { return_type: "BlockHeight", values_only: true, }); const numFollowing = following ? Object.keys(following[singer]?.graph?.follow || {}).length : 0; //--------------------------- const followers = Social.keys(`*/graph/follow/${singer}`, "final", { return_type: "BlockHeight", values_only: true, }); const numFollowers = followers ? Object.keys(followers || {}).length : 0; //-------------------------- const likes = Social.keys(`${singer}/index/like`, "final", { return_type: "History", }); const numlikes = likes ? Object.keys(likes[singer]?.index?.like || {}).length : 0; //-------------------------- const posts = Social.keys(`${singer}/index/post`, "final", { return_type: "History", }); const numposts = posts ? Object.keys(posts[singer]?.index?.post || {}).length : 0; //-------------------------- const comments = Social.keys(`${singer}/post/comment`, "final", { return_type: "History", }); const numcomments = comments ? Object.keys(comments[singer]?.post?.comment || {}).length : 0; //-------------------------- const tx_widgets = Social.keys(`${singer}/widget`, "final", { return_type: "History", }); const tx_numwidgets = tx_widgets ? Object.keys(tx_widgets[singer]?.widget || {}).length : 0; //-------------------------- const reposts = Social.keys(`${singer}/index/repost`, "final", { return_type: "History", }); const numreposts = reposts ? Object.keys(reposts[singer]?.index?.repost || {}).length : 0; //-------------------------- // const pokes = Social.keys(`${singer}/*`, "final", { // return_type: "History", // }); // const numPokes = pokes // ? Object.keys(pokes[singer].index.graph || {}).length // : 0; const numPokes = "N/A"; //-------------------------- const allTx = Social.keys(`${singer}/*`, "final", { return_type: "History", }) || { [singer]: [] }; const joinDateTimeBlock = Object.values(allTx[singer] || {}) .flat() .sort((a, b) => a - b)[0] || "-"; let joinDate = fetch( "https://api.near.social/time?blockHeight=" + joinDateTimeBlock ).body; joinDate = Number.isInteger(joinDate) ? `${new Date(joinDate).getFullYear()}/${ new Date(joinDate).getMonth() + 1 }/${new Date(joinDate).getDate()}` : "-"; //-------------------------- const hashtag = Social.keys(`${singer}/index/hashtag`, "final", { return_type: "History", }); const numHashtags = hashtag ? Object.keys(hashtag[singer]?.index?.hashtag || {}).length : 0; //-------------------------- const widgets = Social.keys(`${singer ?? "*"}/widget/*`, "final", { return_type: "History", }); // console.log("widgets", widgets); const numWidgets = widgets[singer]?.widget ? Object.keys(widgets[singer]?.widget || {}).length : 0; //-------------------------- const forkof = Social.keys(`${singer}/widget/*/metadata/fork_of`, "final", { return_type: "History", }); const numForkof = forkof ? Object.keys(forkof[singer]?.widget || {}).length : 0; //-------------------------- const un_star = Social.keys(`${singer}/index/star`, "final", { return_type: "History", }); const numUn_star = un_star ? Object.keys(un_star[singer]?.index?.star || {}).length : 0; //-------------------------- // const totalTx = Social.keys(`${singer}/*`, "final", { // return_type: "History", // }); // const numTotalTx = totalTx // ? new Set(Object.values(totalTx[singer] || {}).flat()).size // : 0; const totalTx = fetch( `https://api.nearblocks.io/v1/account/${singer}/txns/count?to=social.near` ).body; const numTotalTx = totalTx ? totalTx.txns[0]?.count ?? "-" : "-"; //-------------------------- //-----------------------------------------------part1---------------------------------------------------- //-----------------------------------------------part2---------------------------------------------------- const generaltheme = { height: "90px", align: "center", description: "", brand: "BOS Activity", fontsize: "35px", fontweight: "25px", afterbrand: "Profile", afterbrandcolor: themeColor?.dynamic_header?.afterbrandcolor || "#789efb", fontbrand: " Arial, sans-serif", color1brand: themeColor?.dynamic_header?.color1brand || "#000", color2brand: themeColor?.dynamic_header?.color2brand || "#806ce1", colordescription: themeColor?.dynamic_header?.colordescription || "#806ce1", fontsubtitle: " Arial, sans-serif", background: themeColor?.dynamic_header?.background || "radial-gradient(circle, rgba(210,202,250,1) 0%, rgba(230,230,231,0.01) 0%, rgba(235,238,255,1) 100%, rgba(235,231,253,1) 100%, rgba(255,241,241,1) 100%, rgba(46,52,90,1) 100%);", }; const baseHeaderDynamic = { height: "80px", align: "center", description: ``, brand: ``, fontsize: "15px", fontweight: "10px", afterbrand: "", afterbrandcolor: themeColor?.dynamic_header?.afterbrandcolor || "#789efb", fontbrand: " Arial, sans-serif", color1brand: themeColor?.dynamic_header?.color1brand || "#000", color2brand: themeColor?.dynamic_header?.color2brand || "#806ce1", colordescription: themeColor?.dynamic_header?.colordescription || "#806ce1", fontsubtitle: " Arial, sans-serif", background: themeColor?.dynamic_header?.background || "radial-gradient(circle, rgba(210,202,250,1) 0%, rgba(230,230,231,0.01) 0%, rgba(235,238,255,1) 100%, rgba(235,231,253,1) 100%, rgba(255,241,241,1) 100%, rgba(46,52,90,1) 100%);", }; const cardObjects = [ { name: "followers", description: `${numFollowers}`, brand: "Followers", afterbrand: "", }, { name: "followings", description: `${numFollowing}`, brand: "Followings", afterbrand: "", }, { name: "posts", description: `${numposts}`, brand: "Posts", afterbrand: "" }, { name: "reposts", description: `${numreposts}`, brand: "Reposts", afterbrand: "", }, { name: "comments", description: `${numcomments}`, brand: "Comments", afterbrand: "", }, { name: "likes", description: `${numlikes}`, brand: "Likes", afterbrand: "" }, { name: "pokes", description: `${numPokes}`, brand: "Pokes", afterbrand: "", offChart: true, }, { name: "tx_widgets", description: `${tx_numwidgets}`, brand: "Widgets (trx)", afterbrand: "", offChart: true, }, { name: "received_pokes", description: `${numReceivedPoke}`, brand: "Received", afterbrand: "Pokes", }, { name: "received_likes", description: `${numReceivedLike}`, brand: "Received", afterbrand: "Likes", }, { name: "received_comments", description: `${numReceivedComment}`, brand: "Received", afterbrand: "Comments", }, { name: "received_reposts", description: `${numReceivedRepost}`, brand: "Received", afterbrand: "Reposts", }, { name: "mentions", description: `${nummention}`, brand: "Mentions", afterbrand: "", offChart: true, }, { name: "widgets", description: `${numWidgets}`, brand: "Widgets", afterbrand: "", }, { name: "joinDate", description: `${joinDate}`, brand: "Join Date", afterbrand: "", offChart: true, offGrid: true, }, { name: "hashtags", description: `${numHashtags}`, brand: "Hashtags", afterbrand: "", offChart: true, }, { name: "forkof", description: `${numForkof}`, brand: "Forks", afterbrand: "", offChart: true, }, { name: "star-unstar", description: `${numUn_star}`, brand: "Un/star", afterbrand: "", }, { name: "total-tx", description: `${numTotalTx}`, brand: "Total trx", afterbrand: "", offChart: true, offGrid: true, }, ]; //--------------------------------------------------------------------------------------------------- const SearchInput = ( <div style={{ background: themeColor?.sbt_area?.section_bg }} className="search p-4" > <div className="row"> <div className="col-8 "> <Input onBlur={inputHandler} defaultValue={state.singer} type="input" className="form-control form-control-lg rounded-4" id="address" placeholder="jlw.near" /> </div> <div className="col-4 col-lg-auto"> <Button disabled={state.isLoading} onClick={handleData} className="btn-lg" type="button" > {state.isLoading ? ( <div className="text-center px-4"> <div className="spinner-border spinner-border-sm" role="status"> <span className="visually-hidden">Loading...</span> </div> </div> ) : ( "search" )} </Button> </div> </div> </div> ); const TableSection = ( <div style={{ background: themeColor?.sbt_area?.section_bg }} className="shadow-sm rounded-2 overflow-auto p-2" > <div className="container" style={{ boxShadow: "2px 10px 20px rgba(128, 117, 226, 0.2)", }} > <div className="row"> <div className="col-md-12"> <div className="row"> <div className="col-md-6"> <Widget src="lord1.near/widget/nearwidgetProfile" props={{ accountId: singer, themeColor: { profile_large: themeColor.profile_large, profileInlineBlock: { ...themeColor.profileInlineBlock }, }, }} /> </div> <div className="col-md-4"> <Widget src="lord1.near/widget/header-dynamic" props={{ ...baseHeaderDynamic, ...cardObjects.find((o) => o.name === "joinDate"), }} /> </div> <div className="col-md-2"> <Widget src="lord1.near/widget/header-dynamic" props={{ ...baseHeaderDynamic, ...cardObjects.find((o) => o.name === "total-tx"), }} /> </div> </div> </div> </div> <div className="row"> <div className="col-md-12"> <div className="row"> {cardObjects .filter((o) => !o.offGrid) .map((card) => ( <div key={card.name} className="col-md-2"> <Widget src="lord1.near/widget/header-dynamic" props={{ ...baseHeaderDynamic, ...card }} /> </div> ))} </div> </div> </div> </div> </div> ); // --------------------- pie chart ------------------------ const getPieProps = (data, [key, value], colors, chartOption) => { data = data || []; colors = colors || []; chartOption = chartOption || {}; const dataFormat = data.map((s) => [s[key], s[value]]); const props = { data: dataFormat, colors: colors, chartOption: { title: "chart title", type: "pie", legend: false, connector: false, ...chartOption, }, themeColor: { chart: themeColor.chart }, spinnerColors: themeColor.spinnerColors, }; return props; }; const pieChartData = () => { return cardObjects .filter((o) => !o.offChart) .map((o) => { return { title: `${o.brand} ${o.afterbrand}`, value: Number.parseInt(o.description), }; }); }; const PieChart = ( <div className="col-lg-8" style={{ boxShadow: "2px 10px 20px rgba(128, 117, 226, 0.2)", }} > <div style={{ backgroundColor: themeColor?.sbt_info?.card_bg }} className="shadow-sm rounded-4 " > <Widget src="lord1.near/widget/Pie-chart" props={getPieProps( pieChartData(), ["title", "value"], themeColor.chartColor, { title: "Social Actions", subtitle: "Social Actions", type: "pie", connector: true, legend: true, } )} /> </div> </div> ); // -------------------- mix chart ------------------- let blockHeightData = fetch( `https://api.flipsidecrypto.com/api/v2/queries/6b01d203-0d80-4e70-84ee-c6aa37578ce8/data/latest` ); blockHeightData = blockHeightData.body || []; const getMixData = (accountId) => { const myData = {}; const initDataValue = { follower: 0, follow: 0, like: 0, post: 0, comment: 0, repost: 0, un_star: 0, receivedComment: 0, receivedLike: 0, receivedPoke: 0, receivedRepost: 0, widgets: 0, }; followers && Object.values(followers).forEach((i) => { const count = myData[i.graph.follow[accountId]]; myData[i.graph.follow[accountId]] = { ...initDataValue, ...count, follower: (count.follower ?? 0) + 1, }; }); following && Object.values(following[accountId]?.graph?.follow || {}).forEach((i) => { const count = myData[i]; myData[i] = { ...initDataValue, ...count, follow: (count.follow ?? 0) + 1, }; }); likes && Object.values(likes[accountId]?.index?.like || {}).forEach((i) => { const count = myData[i]; myData[i] = { ...initDataValue, ...count, like: (count.like ?? 0) + 1, }; }); posts && Object.values(posts[accountId]?.index?.post || {}).forEach((i) => { const count = myData[i]; myData[i] = { ...initDataValue, ...count, post: (count.post ?? 0) + 1, }; }); comments && Object.values(comments[accountId]?.post?.comment || {}).forEach((i) => { const count = myData[i]; myData[i] = { ...initDataValue, ...count, comment: (count.comment ?? 0) + 1, }; }); reposts && Object.values(reposts[accountId]?.index?.repost || {}).forEach((i) => { const count = myData[i]; myData[i] = { ...initDataValue, ...count, repost: (count.repost ?? 0) + 1, }; }); un_star && Object.values(un_star[accountId]?.index?.star || {}).forEach((i) => { const count = myData[i]; myData[i] = { ...initDataValue, ...count, un_star: (count.un_star ?? 0) + 1, }; }); receivedComment.forEach(({ blockHeight }) => { const count = myData[blockHeight]; myData[blockHeight] = { ...initDataValue, ...count, receivedComment: (count.receivedComment ?? 0) + 1, }; }); receivedLike.forEach(({ blockHeight }) => { const count = myData[blockHeight]; myData[blockHeight] = { ...initDataValue, ...count, receivedLike: (count.receivedLike ?? 0) + 1, }; }); receivedPoke.forEach(({ blockHeight }) => { const count = myData[blockHeight]; myData[blockHeight] = { ...initDataValue, ...count, receivedPoke: (count.receivedPoke ?? 0) + 1, }; }); receivedRepost.forEach(({ blockHeight }) => { const count = myData[blockHeight]; myData[blockHeight] = { ...initDataValue, ...count, receivedRepost: (count.receivedRepost ?? 0) + 1, }; }); widgets && Object.values(widgets[accountId]?.widget || {}).forEach(([i]) => { const count = myData[i]; myData[i] = { ...initDataValue, ...count, widgets: (count.widgets ?? 0) + 1, }; }); return myData; }; const splitTime = () => { let timeIndex = 0; const splitedData = {}; Object.entries(getMixData(singer)).forEach(([blockTime, counts]) => { for (; timeIndex <= blockHeightData.length; ++timeIndex) { if ( timeIndex === 0 && Number(blockTime) < blockHeightData[timeIndex].min_block ) { break; } if ( (Number(blockTime) >= blockHeightData[timeIndex].min_block && Number(blockTime) <= blockHeightData[timeIndex].max_block) || (timeIndex === blockHeightData.length - 1 && Number(blockTime) > blockHeightData[timeIndex].max_block) ) { const prevCount = splitedData[blockHeightData[timeIndex].date] ?? { follower: 0, follow: 0, like: 0, post: 0, comment: 0, repost: 0, un_star: 0, receivedComment: 0, receivedLike: 0, receivedPoke: 0, receivedRepost: 0, widgets: 0, }; const newCount = { follower: prevCount.follower + counts.follower, follow: prevCount.follow + counts.follow, like: prevCount.like + counts.like, post: prevCount.post + counts.post, comment: prevCount.comment + counts.comment, repost: prevCount.repost + counts.repost, un_star: prevCount.un_star + counts.un_star, receivedComment: prevCount.receivedComment + counts.receivedComment, receivedLike: prevCount.receivedLike + counts.receivedLike, receivedPoke: prevCount.receivedPoke + counts.receivedPoke, receivedRepost: prevCount.receivedRepost + counts.receivedRepost, widgets: prevCount.widgets + counts.widgets, }; splitedData[blockHeightData[timeIndex].date] = newCount; break; } else { continue; } } }); return Object.entries(splitedData).map(([date, values]) => { return { date: new Date(date).getTime(), ...values }; }); }; const getMixProps = (data, dateKey, serieses, colors, chartOption) => { data = data || []; serieses = serieses || [{ key: "", seriesName: "", type: "", id: 1 }]; colors = colors || []; chartOption = chartOption || {}; const dataFormat = serieses.map((series) => { const dataFormated = data.map((d) => [d[dateKey], d[series.key] || null]); return { data: dataFormated, name: series.seriesName, type: series.type, axisId: series.id, }; }); const props = { series: dataFormat, colors: colors, chartOption: { title: "chart title", subtitle: "chart subtitle", legend: true, stacking: "false", ...chartOption, }, overrideOptions: { plotOptions: { column: { stacking: "false", }, series: { dataGrouping: { enabled: false }, }, }, }, themeColor: { chart: themeColor.chart }, spinnerColors: themeColor.spinnerColors, }; return props; }; const MixChart = ( <div className="col-lg-12"> <div style={{ backgroundColor: themeColor?.sbt_info?.card_bg }} className="shadow-sm rounded-4" > <Widget src="lord1.near/widget/mix-chart" props={getMixProps( splitTime(), "date", [ { key: "follow", seriesName: "Follow", type: "column", id: 1, }, { key: "follower", seriesName: "Follower", type: "column", id: 1, }, { key: "like", seriesName: "Like", type: "column", id: 1, }, { key: "post", seriesName: "Post", type: "column", id: 1, }, { key: "comment", seriesName: "Comment", type: "column", id: 1, }, { key: "repost", seriesName: "Repost", type: "column", id: 1, }, { key: "un_star", seriesName: "Un/Star", type: "column", id: 1, }, { key: "receivedRepost", seriesName: "Received Repost", type: "column", id: 1, }, { key: "receivedLike", seriesName: "Received Like", type: "column", id: 1, }, { key: "receivedComment", seriesName: "Received Comment", type: "column", id: 1, }, { key: "receivedPoke", seriesName: "Received Poke", type: "column", id: 1, }, { key: "widgets", seriesName: "widgets", type: "column", id: 1, }, ], themeColor.chartColor, { title: "", subtitle: "Daily social actions", } )} /> </div> </div> ); // --------------- social graph ------------------- const SocialGraph = ( <div className="col-lg-4" style={{ boxShadow: "2px 10px 20px rgba(128, 117, 226, 0.2)", }} > <div style={{ backgroundColor: themeColor?.sbt_info?.card_bg }} className="shadow-sm rounded-4" > <Widget key={state.data} src="lord1.near/widget/SocialGraph" props={{ accountIds: [state.data, ""], spinnerColors: themeColor.spinnerColors, }} /> </div> </div> ); // --------------- nodes ------------------- const Nodes = ( <div className="col-lg-12 pb-4" style={{ boxShadow: "2px 10px 20px rgba(128, 117, 226, 0.2)", }} > <div style={{ backgroundColor: themeColor?.sbt_info?.card_bg }} className="shadow-sm rounded-4" > <Widget key={state.data} src="forefront_tak.near/widget/Forefront.Widget.NearSocial.Explorer.Tree" props={{ rootPath: state.data, themeColor: themeColor.tree, }} /> </div> </div> ); // ------------------------------------------- return ( <div style={{ backgroundColor: themeColor.page_bg }}> {SearchInput} {TableSection} <div style={{ width: "100%", height: "30px" }}></div> <div className="row rounded-3" style={{ boxShadow: "2px 10px 20px rgba(128, 117, 226, 0.2)", }} > {PieChart} {SocialGraph} </div> <div style={{ width: "100%", height: "20px" }}></div> <div style={{ boxShadow: "2px 10px 20px rgba(128, 117, 226, 0.2)", backgroundColor: themeColor.card?.card_bg, }} className="p-2 rounded-3" > <div className="row">{MixChart}</div> <Widget src="lord1.near/widget/header-dynamic" props={generaltheme} /> <div className="row">{Nodes}</div> </div> <div className="toast-container position-fixed bottom-0 end-0 p-3"> {state.error.length > 0 && state.error.map((er) => ( <div className="toast show align-items-center text-bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true" > <div className="d-flex"> <div className="toast-body">{er}</div> </div> </div> ))} </div> </div> );