feat: add yAxis

Selleo · Nov 19, 2024 · 53502a9 · 53502a9
1 parent c78f01f
commit 53502a9
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 10 deletions.
diff --git 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
@@ -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,17 +29,23 @@ 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>
       <p className="body-sm-md text-center text-neutral-800">Number of {resourceName} in 2024</p>
       <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}