From 09c2f6320971e2572cb74c52a7e69fac0223eba6 Mon Sep 17 00:00:00 2001
From: RedBeardEth <90423049+RedBeardEth@users.noreply.github.com>
Date: Sat, 5 Oct 2024 15:19:46 +1000
Subject: [PATCH] fix velords chart

---
 .../lords/velords/VeLordsRewardsChart.tsx     | 121 +++++++++++++-----
 1 file changed, 86 insertions(+), 35 deletions(-)

diff --git a/apps/nextjs/src/app/(app)/account/lords/velords/VeLordsRewardsChart.tsx b/apps/nextjs/src/app/(app)/account/lords/velords/VeLordsRewardsChart.tsx
index 5acbb94c..11fefae7 100644
--- a/apps/nextjs/src/app/(app)/account/lords/velords/VeLordsRewardsChart.tsx
+++ b/apps/nextjs/src/app/(app)/account/lords/velords/VeLordsRewardsChart.tsx
@@ -1,42 +1,93 @@
-"use client"
+"use client";
 
-import { Line, LineChart, CartesianGrid, YAxis, XAxis } from "recharts"
+import { Line, LineChart, CartesianGrid, YAxis, XAxis } from "recharts";
 import LordsIcon from "@/icons/lords.svg";
 
-import type { ChartConfig } from "@realms-world/ui/components/ui/chart"
-import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent } from "@realms-world/ui/components/ui/chart"
+import type { ChartConfig } from "@realms-world/ui/components/ui/chart";
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+} from "@realms-world/ui/components/ui/chart";
 
 const chartConfig = {
-    total_amount: {
-        label: "Lords",
-        color: "hsl(36 88.9% 85.9%)",
-        icon: LordsIcon
-    },
-    apy: {
-        label: "APY %",
-        color: "hsl(338.33 100% 78.82%)",
-    },
-} satisfies ChartConfig
+  total_amount: {
+    label: "Lords",
+    color: "hsl(36 88.9% 85.9%)",
+    icon: LordsIcon,
+  },
+  apy: {
+    label: "APY %",
+    color: "hsl(338.33 100% 78.82%)",
+  },
+} satisfies ChartConfig;
 
-export function VeLordsRewardsChart({ data, totalSupply }: { data?: { total_amount: string; week: string }[], totalSupply?: number }) {
-    const parsedData = totalSupply ? data?.map(item => ({
-        week: new Date(item.week).toISOString().split('T')[0], // Convert to YYYY-MM-DD
-        total_amount: parseFloat(item.total_amount).toFixed(3),
-        apy: parseInt(item.total_amount) * 52 / (totalSupply * 208) * 100
-    })) : [];
+export function VeLordsRewardsChart({
+  data,
+  totalSupply,
+}: {
+  data?: { total_amount: string; week: string }[];
+  totalSupply?: number;
+}) {
+  const parsedData = totalSupply
+    ? data?.map((item) => ({
+        week: new Date(item.week).toISOString().split("T")[0], // Convert to YYYY-MM-DD
+        total_amount: parseFloat(item.total_amount),
+        apy: ((parseInt(item.total_amount) * 52) / totalSupply) * 100,
+      }))
+    : [];
 
-    return (
-        <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
-            <LineChart data={parsedData}>
-                <CartesianGrid strokeDasharray="3 3" />
-                <XAxis dataKey="week" />
-                <YAxis yAxisId="apy" dataKey="apy" label={{ value: "% APY", angle: -90, position: 'insideLeft' }} />
-                <YAxis yAxisId="total_amount" orientation="right" dataKey="total_amount" label={{ value: "Total Lords Rewards", angle: -90, position: 'outsideLeft', }} />
-                <ChartTooltip content={<ChartTooltipContent />} />
-                <ChartLegend content={<ChartLegendContent />} />
-                <Line dataKey="total_amount" type="monotone" yAxisId="total_amount" stroke='var(--color-total_amount)' fill="var(--color-total_amount)" radius={4} activeDot={{ r: 8 }} />
-                <Line dataKey="apy" type="monotone" yAxisId="apy" fill="var(--color-apy)" stroke='var(--color-apy)' radius={4} activeDot={{ r: 8 }} />
-            </LineChart>
-        </ChartContainer>
-    )
-}
\ No newline at end of file
+  return (
+    <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
+      <LineChart data={parsedData}>
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis
+          dataKey="week"
+          label={{
+            value: "Week Starting",
+            position: "insideBottomLeft",
+            offset: -5,
+          }}
+        />
+        <YAxis
+          yAxisId="apy"
+          dataKey="apy"
+          label={{ value: "% APY", angle: -90, position: "insideLeft" }}
+        />
+        <YAxis
+          yAxisId="total_amount"
+          orientation="right"
+          dataKey="total_amount"
+          allowDataOverflow={true}
+          label={{
+            value: "Total Lords Rewards",
+            angle: -90,
+            position: "outsideLeft",
+          }}
+        />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        <ChartLegend content={<ChartLegendContent />} />
+        <Line
+          dataKey="total_amount"
+          type="monotone"
+          yAxisId="total_amount"
+          stroke="var(--color-total_amount)"
+          fill="var(--color-total_amount)"
+          radius={4}
+          activeDot={{ r: 8 }}
+        />
+        <Line
+          dataKey="apy"
+          type="monotone"
+          yAxisId="apy"
+          fill="var(--color-apy)"
+          stroke="var(--color-apy)"
+          radius={4}
+          activeDot={{ r: 8 }}
+        />
+      </LineChart>
+    </ChartContainer>
+  );
+}