From 53502a901236cd876e8c1475a10b81d4e5136076 Mon Sep 17 00:00:00 2001
From: wielopolski <wielopolskim@gmail.com>
Date: Tue, 19 Nov 2024 12:15:59 +0100
Subject: [PATCH] feat: add yAxis

---
 .../modules/Statistics/Statistics.page.tsx    | 26 ++++++++++++++-----
 .../Statistics/components/RatesChart.tsx      | 12 ++++++---
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/apps/web/app/modules/Statistics/Statistics.page.tsx b/apps/web/app/modules/Statistics/Statistics.page.tsx
index aad72114..825175e4 100644
--- a/apps/web/app/modules/Statistics/Statistics.page.tsx
+++ b/apps/web/app/modules/Statistics/Statistics.page.tsx
@@ -12,14 +12,26 @@ export default function StatisticsPage() {
   const { data: user } = useCurrentUser();
 
   const chartData = [
-    { month: "January", completed: 186, started: 80 },
-    { month: "February", completed: 305, started: 200 },
-    { month: "March", completed: 237, started: 120 },
-    { month: "April", completed: 73, started: 190 },
-    { month: "May", completed: 209, started: 130 },
-    { month: "June", completed: 214, started: 140 },
+    { month: "January", completed: 2, started: 8 },
+    { month: "February", completed: 3, started: 5 },
+    { month: "March", completed: 2, started: 2 },
+    { month: "April", completed: 7, started: 9 },
+    { month: "May", completed: 2, started: 3 },
+    { month: "June", completed: 2, started: 4 },
+    { month: "July", completed: 4, started: 5 },
+    { month: "August", completed: 3, started: 6 },
+    { month: "September", completed: 6, started: 7 },
+    { month: "October", completed: 1, started: 8 },
+    { month: "November", completed: 7, started: 9 },
+    { month: "December", completed: 8, started: 10 },
   ];
 
+  const chartData2 = chartData.map((item) => ({
+    ...item,
+    completed: item.completed * 22,
+    started: item.started * 22,
+  }));
+
   return (
     <div className="flex flex-col gap-y-8">
       <div className="flex gap-x-4 items-center">
@@ -56,7 +68,7 @@ export default function StatisticsPage() {
           </div>
           <div className="flex gap-x-4 w-full h-full">
             <RatesChart resourceName="Courses" chartData={chartData} />
-            <RatesChart resourceName="Courses" chartData={chartData} />
+            <RatesChart resourceName="Courses" chartData={chartData2} />
           </div>
         </div>
         <div className="w-full h-full max-w-[480px] bg-white rounded-lg drop-shadow-card p-8 flex flex-col gap-6">
diff --git a/apps/web/app/modules/Statistics/components/RatesChart.tsx b/apps/web/app/modules/Statistics/components/RatesChart.tsx
index bf84f01e..8c25bdd3 100644
--- a/apps/web/app/modules/Statistics/components/RatesChart.tsx
+++ b/apps/web/app/modules/Statistics/components/RatesChart.tsx
@@ -1,4 +1,4 @@
-import { CartesianGrid, XAxis, Bar, BarChart } from "recharts";
+import { CartesianGrid, XAxis, Bar, BarChart, YAxis } from "recharts";
 
 import { CategoryChip } from "~/components/ui/CategoryChip";
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from "~/components/ui/chart";
@@ -29,6 +29,11 @@ export const RatesChart = ({
   resourceName: string;
   chartData: ChartData[];
 }) => {
+  const dataMax = Math.max(...chartData.map((d) => d.started));
+  const step = Math.ceil(dataMax / 10);
+  const yAxisMax = dataMax + step;
+  const ticks = Array.from({ length: Math.floor(yAxisMax / step) }, (_, i) => (i + 1) * step);
+
   return (
     <div className="w-full h-full bg-white rounded-lg  gap-6 drop-shadow-card p-8 flex flex-col">
       <h2 className="body-lg-md text-neutral-950 text-center">{resourceName} Rates</h2>
@@ -36,10 +41,11 @@ export const RatesChart = ({
       <div className="grid place-items-center h-full">
         <ChartContainer
           config={chartConfig}
-          className="mx-auto aspect-square max-h-[250px] w-full h-full"
+          className="mx-auto aspect-square max-h-[450px] w-full h-full"
         >
           <BarChart accessibilityLayer data={chartData}>
-            <CartesianGrid vertical={false} />
+            <CartesianGrid horizontal={true} vertical={false} />
+            <YAxis ticks={ticks} tickLine={false} axisLine={false} domain={[0, dataMax]} />
             <XAxis
               dataKey="month"
               tickLine={false}