Skip to content

Commit

Permalink
fixing more data avail issues with pie chart
Browse files Browse the repository at this point in the history
  • Loading branch information
@mokelgit
mokelgit committed Jan 21, 2025
1 parent 03c8364 commit ae83cef
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 30 deletions.
33 changes: 28 additions & 5 deletions components/layout/DA-Overview/DAHeadCharts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -373,6 +373,34 @@ export default function DAHeadCharts({selectedTimespan, isMonthly, data}: {selec
<div className="absolute bottom-[40%] left-0 right-0 flex items-center justify-center pointer-events-none z-0 opacity-20">
<ChartWatermark className="w-[128.54px] h-[25.69px] text-forest-300 dark:text-[#EAECEB] mix-blend-darken dark:mix-blend-lighten" />
</div>
<div className="opacity-100 transition-opacity duration-[900ms] z-20 group-hover:opacity-0 absolute left-[7px] bottom-[3px] flex items-center px-[4px] py-[1px] gap-x-[3px] rounded-full bg-forest-50/50 dark:bg-[#344240]/70 pointer-events-none">
<div className="w-[5px] h-[5px] bg-[#CDD8D3] rounded-full"></div>
<div className="text-[#CDD8D3] text-[9px] font-medium leading-[150%]">
{new Date(
timespans[selectedTimespan].xMin,
).toLocaleDateString("en-GB", {
timeZone: "UTC",
month: "short",
// day: "numeric",
year: "numeric",
})}

</div>
</div>
<div className=" duration-[900ms] group-hover:opacity-0 z-20 absolute right-[15px] bottom-[3px] flex items-center px-[4px] py-[1px] gap-x-[3px] rounded-full bg-forest-50/50 dark:bg-[#344240]/70 pointer-events-none">
<div className="text-[#CDD8D3] text-[9px] font-medium leading-[150%]">
{new Date(
timespans[selectedTimespan].xMax,
).toLocaleDateString("en-GB", {
timeZone: "UTC",
month: "short",
// day: "numeric",
year: "numeric",
})}

</div>
<div className="w-[5px] h-[5px] bg-[#CDD8D3] rounded-full"></div>
</div>

<div className="h-[232px] pt-[15px]">
<HighchartsProvider Highcharts={Highcharts}>
Expand Down Expand Up @@ -435,12 +463,7 @@ export default function DAHeadCharts({selectedTimespan, isMonthly, data}: {selec
spacingTop={40}
spacingLeft={10}
spacingRight={10}
onLoad={function (event) {
console.log(this);



}}
onRender={function (chartData) {
const chart = chartData.target as any; // Cast chartData.target to any
const chartRef = this; // Assign `this` to a variable for clarity
Expand Down
6 changes: 3 additions & 3 deletions components/layout/DA-Overview/DATable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -397,7 +397,7 @@ export default function DATable({breakdown_data, selectedTimespan, isMonthly}: {




//daconsumers breakdown_data[item.key][selectedTimespan].da_consumers
return (
<>
{chart_loading || !chart_data || !master ? (
Expand Down Expand Up @@ -774,8 +774,8 @@ export default function DATable({breakdown_data, selectedTimespan, isMonthly}: {
<span>{showUsd ? "$" : "Ξ"}</span>
{breakdown_data[item.key][selectedTimespan].fees_per_mb.total[typeIndex] < 0.001 ? Number(breakdown_data[item.key][selectedTimespan].fees_per_mb.total[typeIndex]).toExponential(2) : Intl.NumberFormat("en-GB", {
notation: "compact",
maximumFractionDigits: 3,
minimumFractionDigits: 3,
maximumFractionDigits: 2,
minimumFractionDigits: 2,
}).format(breakdown_data[item.key][selectedTimespan].fees_per_mb.total[typeIndex])}
</div>
<div
Expand Down
61 changes: 39 additions & 22 deletions components/layout/DA-Overview/DATableCharts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,7 +206,7 @@ export default function DATableCharts({selectedTimespan, data, isMonthly, da_nam
}else{
// Add non-selected chains
pie_data.data.forEach((d, index) => {
console.log(UNLISTED_CHAIN_COLORS[index])

pieRetData.push({
name: d[1] ? d[1] : d[0],
y: d[4] / pieTotal,
Expand Down Expand Up @@ -400,16 +400,20 @@ export default function DATableCharts({selectedTimespan, data, isMonthly, da_nam
<div class="w-4 h-1.5 rounded-r-full" style="background-color: ${this.color}"></div>
<div class="tooltip-point-name text-xs">${this.key}</div>
</div>
<div class="tooltip-point-name numbers-xs">${Intl.NumberFormat("en-GB", {
<div class="tooltip-point-name numbers-xs">${selectedChain === "all" ? Intl.NumberFormat("en-GB", {
notation: "standard",
maximumFractionDigits: 2,
minimumFractionDigits: 2,
}).format(this.y * 100) + " %"}</div>
}).format((this.y * 100)) + " %"
:
(formatBytes(this.y))
}</div>
</div>`;


}, [showUsd])
}, [showUsd, selectedChain])


const getNameFromKey = useMemo<Record<string, string>>(() => {
Expand Down Expand Up @@ -502,6 +506,8 @@ export default function DATableCharts({selectedTimespan, data, isMonthly, da_nam


}}



/>
<Tooltip
Expand Down Expand Up @@ -694,18 +700,18 @@ export default function DATableCharts({selectedTimespan, data, isMonthly, da_nam

</HighchartsProvider>
</div>
<ChartLegend
selectedTimespan={selectedTimespan}
data={data}
isMonthly={isMonthly}
setSelectedChain={setSelectedChain}
selectedChain={selectedChain}
isPie={true}
pie_data={pie_data}
pieChartComponent={pieChartComponent}
chartComponent={chartComponent}
getNameFromKey={getNameFromKey}
/>
<ChartLegend
selectedTimespan={selectedTimespan}
data={data}
isMonthly={isMonthly}
setSelectedChain={setSelectedChain}
selectedChain={selectedChain}
isPie={true}
pie_data={pie_data}
pieChartComponent={pieChartComponent}
chartComponent={chartComponent}
getNameFromKey={getNameFromKey}
/>
<div className="min-w-[254px] flex items-center relative pt-[15px] ">
{/* Pie Chart */}
<div className="absolute left-[31%] w-[99px] flex items-center justify-center bottom-[49%] text-xxxs font-bold leading-[120%] ">{"% OF TOTAL USAGE"}</div>
Expand All @@ -724,7 +730,7 @@ export default function DATableCharts({selectedTimespan, data, isMonthly, da_nam

plotOptions={{
pie: {
allowPointSelect: true,
allowPointSelect: false,
cursor: "pointer",
dataLabels: {
enabled: true,
Expand All @@ -733,6 +739,7 @@ export default function DATableCharts({selectedTimespan, data, isMonthly, da_nam
showInLegend: true,
borderWidth: 10,
borderColor: "transparent",

}
}}
>
Expand Down Expand Up @@ -927,11 +934,21 @@ export default function DATableCharts({selectedTimespan, data, isMonthly, da_nam
}}
type="pie"
data={formattedPieData}

point={{
events: {
update: function (event) {

},
click: function (event) {

if(event.point.options.name){
const key = Object.entries(getNameFromKey).find(([_, value]) => value === event.point.options.name)?.[0];
if(key && key !== selectedChain){
setSelectedChain(key)
}else if(key === selectedChain){
setSelectedChain("all")
}

}
}
},
}}

Expand Down Expand Up @@ -995,9 +1012,9 @@ const ChartLegend = (

return (
<div key={key + "da_consumers_info"} className={`flex group/chain relative gap-x-[5px] px-[5px] text-xxs rounded-full py-[0.5px] items-center transition-all cursor-pointer bg-[#344240] ${(selectedChain === "all" || selectedChain === key) ? "bg-[#344240] border-[1px] border-transparent" : "bg-transparent border-[1px] border-[#344240]"}
${selectedChain === "all" ? "px-[5px]" : "pl-[5px] pr-[20px]"}
${selectedChain === "all" ? "px-[5px]" : "pl-[5px] pr-[20px]"}
}`}
}`}
onClick={() => {
setSelectedChain((prev) => {
if (selectedChain === key) {
Expand Down

0 comments on commit ae83cef

Please sign in to comment.