use shadcnui charts

aabassiouni · Jul 8, 2024 · 8fcd0c0 · 8fcd0c0
1 parent a247673
commit 8fcd0c0
Show file tree

Hide file tree

Showing 8 changed files with 418 additions and 53 deletions.
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -55,7 +55,7 @@
     "react-dom": "^18",
     "react-email": "2.0.0",
     "react-hook-form": "^7.49.2",
-    "recharts": "^2.9.0",
+    "recharts": "^2.11.0",
     "resend": "^3.1.0",
     "stripe": "^14.9.0",
     "tailwind-merge": "^1.14.0",

diff --git a/.../web/src/app/(authenticated)/dashboard/(waitlist-dashboard)/[waitlist]/analytics/page.tsx b/.../web/src/app/(authenticated)/dashboard/(waitlist-dashboard)/[waitlist]/analytics/page.tsx
@@ -73,10 +73,11 @@ async function AnalyticsPage({ params, searchParams }: { params: { waitlist: str
         <CardContent>
           <Chart
             data={signups.entries}
-            margin={{
+            chartMargin={{
               right: 30,
               left: -30,
             }}
+            className="h-96"
           />
         </CardContent>
         <CardFooter />
@@ -91,10 +92,10 @@ async function AnalyticsPage({ params, searchParams }: { params: { waitlist: str
               </TableRow>
             </TableHeader>
             <TableBody>
-              {signups.entries.map((row: any, i: number) => (
+              {signups.entries.map((row, i) => (
                 <TableRow className="even:bg-zinc-950/50" key={i}>
-                  <TableCell className="w-fit border-neutral-700 border-r">{row.label}</TableCell>
-                  <TableCell className="w-fit">{row.value}</TableCell>
+                  <TableCell className="w-fit border-neutral-700 border-r">{row.day}</TableCell>
+                  <TableCell className="w-fit">{row.signups}</TableCell>
                 </TableRow>
               ))}
             </TableBody>

diff --git a/apps/web/src/app/(authenticated)/dashboard/(waitlist-dashboard)/[waitlist]/page.tsx b/apps/web/src/app/(authenticated)/dashboard/(waitlist-dashboard)/[waitlist]/page.tsx
@@ -142,7 +142,7 @@ async function PastWeekChart({ waitlistID }: { waitlistID: string }) {
       <CardContent className="p-4">
         <Chart
           data={pastWeekSignupsData.entries}
-          margin={{
+          chartMargin={{
             top: 5,
             right: 20,
             left: 0,

diff --git a/apps/web/src/components/Chart.tsx b/apps/web/src/components/Chart.tsx
@@ -1,29 +1,28 @@
 "use client";
+
 import { useRealtimeCount } from "@/lib/store";
+import { cn } from "@/lib/utils";
 import type { Entry } from "@/types";
 import React, { useDeferredValue } from "react";
-import { Area, AreaChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
-import type { TooltipProps } from "recharts";
-import type { NameType, ValueType } from "recharts/types/component/DefaultTooltipContent";
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
 import type { Margin } from "recharts/types/util/types";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "./ui/chart";
 
-function CustomTooltip({ active, payload }: TooltipProps<ValueType, NameType>) {
-  if (active && payload && payload.length) {
-    return (
-      <div className="custom-tooltip rounded-lg bg-white px-2 py-3">
-        <p className="text-black">{payload[0]?.payload.tooltipLabel}</p>
-      </div>
-    );
-  }
-}
-
-function renderLegend(_value: string, entry: any) {
-  const { color } = entry;
+const chartConfig = {
+  signups: {
+    label: "Signups",
+    color: "#4BE7AE",
+  },
+} satisfies ChartConfig;
 
-  return <span style={{ color }}>Signups</span>;
-}
-
-function Chart({ data, margin }: { data: Entry[]; margin: Margin }) {
+function Chart({ data, chartMargin, className }: { data: Entry[]; chartMargin: Margin; className?: string }) {
   const { realtimeCount } = useRealtimeCount();
   const deferredCount = useDeferredValue(realtimeCount);
 
@@ -32,30 +31,35 @@ function Chart({ data, margin }: { data: Entry[]; margin: Margin }) {
   const realtimeData: Entry[] = [
     ...data.slice(0, -1),
     {
-      label: lastValue?.label ?? "",
-      value: (lastValue?.value ?? 0) + deferredCount,
-      tooltipLabel: lastValue?.tooltipLabel ?? "",
+      day: lastValue?.day ?? "",
+      signups: (lastValue?.signups ?? 0) + deferredCount,
     },
   ];
 
   return (
-    <ResponsiveContainer width="100%" minHeight={350}>
-      <AreaChart data={realtimeData} margin={margin}>
+    <ChartContainer config={chartConfig} className={cn("min-h-[350px] w-full", className)}>
+      <AreaChart accessibilityLayer data={realtimeData} margin={chartMargin}>
+        <CartesianGrid vertical={false} strokeOpacity={0.1} />
         <defs>
-          <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
-            <stop offset="5%" stopColor="#4BE7AE" stopOpacity={0.8} />
-            <stop offset="95%" stopColor="#4BE7AE" stopOpacity={0} />
+          <linearGradient id="fillSignups" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="5%" stopColor="var(--color-signups)" stopOpacity={0.8} />
+            <stop offset="95%" stopColor="var(--color-signups)" stopOpacity={0.1} />
           </linearGradient>
         </defs>
-        <XAxis tickLine={false} dataKey="label" />
-        <YAxis scale={"auto"} allowDecimals={false} tickLine={false} />
-
-        <Tooltip content={<CustomTooltip />} />
-        <Legend formatter={renderLegend} />
-        <CartesianGrid vertical={false} strokeOpacity={0.1} strokeDasharray={"3 3"} />
-        <Area dot={true} type={"monotone"} dataKey="value" stroke="#AFF4DB" fillOpacity={1} fill="url(#colorUv)" />
+        <XAxis tickMargin={8} tickLine={false} axisLine={false} dataKey="day" />
+        <YAxis tickMargin={8} axisLine={false} scale={"auto"} allowDecimals={false} tickLine={false} />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        <ChartLegend content={<ChartLegendContent />} />
+        <Area
+          dot={true}
+          type={"monotone"}
+          dataKey="signups"
+          stroke="#AFF4DB"
+          fillOpacity={1}
+          fill="url(#fillSignups)"
+        />
       </AreaChart>
-    </ResponsiveContainer>
+    </ChartContainer>
   );
 }