Merge pull request #696 from crystal4000/teamkimiko-userdashboard-graph

hngprojects · Jul 28, 2024 · af4f656 · af4f656
2 parents d511833 + da178bf
commit af4f656
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 0 deletions.
diff --git a/src/components/userDashboard/Chart.tsx b/src/components/userDashboard/Chart.tsx
@@ -0,0 +1,72 @@
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
+
+import { Card, CardContent } from "~/components/ui/card";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "~/components/ui/chart";
+
+type ChartProperties = {
+  chartData: { month: string; revenue: number }[];
+  chartConfig: ChartConfig;
+  chartTitle: string;
+};
+
+export function Chart({
+  chartData = [],
+  chartConfig,
+  chartTitle,
+}: ChartProperties) {
+  return (
+    <>
+      <Card className="basis-2/3 rounded-xl border border-border bg-white px-1.5 py-3 shadow-spread md:px-2 md:py-5">
+        <h2 className="mb-2 ml-3 text-xl font-semibold leading-4 text-zinc-950">
+          {chartTitle}
+        </h2>
+
+        <div className="h-full w-full">
+          <CardContent className="h-full w-full pl-0">
+            <ChartContainer
+              className="h-[250px] w-full p-0 md:h-full"
+              config={chartConfig}
+            >
+              <BarChart
+                className="w-full"
+                accessibilityLayer
+                data={chartData}
+                margin={{ top: 20, bottom: 2 }}
+              >
+                <CartesianGrid vertical={false} />
+                <XAxis
+                  dataKey="month"
+                  tickLine={false}
+                  tickMargin={10}
+                  axisLine={false}
+                  tickFormatter={(value) => value.slice(0, 3)}
+                />
+                <YAxis
+                  ticks={[0, 1500, 3000, 4500, 6000]}
+                  axisLine={false}
+                  tickLine={false}
+                  tickFormatter={(value) => `$${value}`}
+                />
+                <ChartTooltip
+                  cursor={false}
+                  content={<ChartTooltipContent hideLabel />}
+                />
+                <Bar
+                  dataKey="revenue"
+                  fill="var(--color-desktop)"
+                  radius={3}
+                  data-testid="bar"
+                />
+              </BarChart>
+            </ChartContainer>
+          </CardContent>
+        </div>
+      </Card>
+    </>
+  );
+}
diff --git a/src/components/userDashboard/chartData.ts b/src/components/userDashboard/chartData.ts
@@ -0,0 +1,30 @@
+import { ChartConfig } from "~/components/ui/chart";
+
+export const generateRandomRevenue = () =>
+  (Math.floor(Math.random() * 11) + 1) * 500;
+
+export const chartData = [
+  { month: "January", revenue: generateRandomRevenue() },
+  { month: "February", revenue: generateRandomRevenue() },
+  { month: "March", revenue: generateRandomRevenue() },
+  { month: "April", revenue: generateRandomRevenue() },
+  { month: "May", revenue: generateRandomRevenue() },
+  { month: "June", revenue: generateRandomRevenue() },
+  { month: "July", revenue: generateRandomRevenue() },
+  { month: "August", revenue: generateRandomRevenue() },
+  { month: "September", revenue: generateRandomRevenue() },
+  { month: "October", revenue: generateRandomRevenue() },
+  { month: "November", revenue: generateRandomRevenue() },
+  { month: "December", revenue: generateRandomRevenue() },
+];
+
+export const chartConfig: ChartConfig = {
+  desktop: {
+    label: "Revenue",
+    color: "#F97316",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "#F97316",
+  },
+};