fix: graphs

Co-authored-by: PsicoThePato <[email protected]>
renlabs-dev · Oct 16, 2024 · d33c292 · d33c292
1 parent d0404b3
commit d33c292
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 22 deletions.
diff --git a/apps/commune-validator/src/app/components/charts/module-bar-chart.tsx b/apps/commune-validator/src/app/components/charts/module-bar-chart.tsx
@@ -17,8 +17,6 @@ import {
   CardHeader,
   CardTitle,
   ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
 } from "@commune-ts/ui";
 
 export const description = "A bar chart with a custom label";
@@ -85,10 +83,6 @@ export function ModuleBarChart({ chartData }: ModuleBarChartProps) {
               domain={xAxisDomain}
               hide
             />
-            <ChartTooltip
-              cursor={false}
-              content={<ChartTooltipContent indicator="line" />}
-            />
             <Bar
               dataKey="percWeight"
               layout="vertical"

diff --git a/apps/commune-validator/src/app/components/charts/subnet-pie-chart.tsx b/apps/commune-validator/src/app/components/charts/subnet-pie-chart.tsx
@@ -1,7 +1,8 @@
 "use client";
 
+import type { TooltipProps } from "recharts";
 import * as React from "react";
-import { Cell, Pie, PieChart } from "recharts";
+import { Cell, Label, Pie, PieChart } from "recharts";
 
 import type { ChartConfig } from "@commune-ts/ui";
 import {
@@ -12,7 +13,6 @@ import {
   CardTitle,
   ChartContainer,
   ChartTooltip,
-  ChartTooltipContent,
 } from "@commune-ts/ui";
 
 export const description = "A donut chart with text";
@@ -46,29 +46,42 @@ const chartConfig = {
   },
 } satisfies ChartConfig;
 
-export function SubnetPieChart({ chartData }: SubnetPieChartProps) {
-  const getFillColor = (index: number) => {
-    return chartColors[index % chartColors.length];
-  };
+const getFillColor = (index: number) => {
+  return chartColors[index % chartColors.length];
+};
+
+const CustomTooltipContent: React.FC<TooltipProps<number, string>> = ({
+  active,
+  payload,
+}) => {
+  if (active && payload?.length) {
+    const { subnetName, percWeight } = payload[0]?.payload as SubnetData;
+    const percentage = (percWeight * 100).toFixed(2);
+    return (
+      <Card className="flex justify-between gap-3 rounded-md p-2">
+        <p className="font-bold text-cyan-500">{subnetName}</p>
+        <p>{percentage}%</p>
+      </Card>
+    );
+  }
+  return null;
+};
 
+export function SubnetPieChart({ chartData }: SubnetPieChartProps) {
   return (
     <Card className="flex flex-col">
       <CardHeader className="items-center pb-0">
         <CardTitle>Current Subnet Allocation</CardTitle>
         <CardDescription>
-          Showing total stakeWeight for the last 6 months
+          Showing aggregated subnet allocation from user inputs.
         </CardDescription>
       </CardHeader>
       <CardContent className="flex-1 pb-0">
         <ChartContainer
           config={chartConfig}
-          className="mx-auto aspect-square max-h-[350px]"
+          className="mx-auto aspect-square max-h-[360px]"
         >
           <PieChart>
-            <ChartTooltip
-              cursor={false}
-              content={<ChartTooltipContent hideLabel />}
-            />
             <Pie
               data={chartData}
               dataKey="percWeight"
@@ -79,7 +92,37 @@ export function SubnetPieChart({ chartData }: SubnetPieChartProps) {
               {chartData.map((entry, index) => (
                 <Cell key={`cell-${index}`} fill={getFillColor(index)} />
               ))}
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                      >
+                        <tspan
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          className="fill-foreground text-3xl font-bold"
+                        >
+                          {chartData.length.toLocaleString()}
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy ?? 0) + 24}
+                          className="fill-muted-foreground"
+                        >
+                          Subnets
+                        </tspan>
+                      </text>
+                    );
+                  }
+                }}
+              />
             </Pie>
+            <ChartTooltip cursor={false} content={<CustomTooltipContent />} />
           </PieChart>
         </ChartContainer>
       </CardContent>

diff --git a/apps/commune-validator/src/app/page.tsx b/apps/commune-validator/src/app/page.tsx
@@ -167,14 +167,18 @@ export default function Page() {
             />
           </div>
         </div>
-        <div className="gird-cols-1 grid w-full gap-3 pb-3 md:grid-cols-3">
+        <div className="gird-cols-1 grid w-full animate-fade-down gap-3 pb-3 animate-delay-[650ms] md:grid-cols-3">
           {/* TODO: spinners */}
-          {moduleStakeData ? (
+          {moduleStakeData?.length ? (
             <ModuleBarChart chartData={moduleStakeData} />
           ) : (
-            <></>
+            <Card className="h-full w-full animate-pulse" />
+          )}
+          {subnetData?.length ? (
+            <SubnetPieChart chartData={subnetData} />
+          ) : (
+            <Card className="h-full w-full animate-pulse" />
           )}
-          {subnetData ? <SubnetPieChart chartData={subnetData} /> : <></>}
           <div className="p flex h-fit w-full animate-fade-down flex-col gap-3 animate-delay-700">
             <Card className="min-h-full w-full">
               <CardHeader className="flex flex-col items-end justify-between md:flex-row">