feat(saas): Reusable Line Chart Component using recharts

starterkits/saas/src/app/(app)/admin/dashboard/_components/users-chart.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { LineChart } from "@/components/charts";
+import { formatDate, thousandToK } from "@/lib/utils";
+
+type UsersChartProps = {
+    data: unknown[];
+};
+
+export function UsersChart({ data }: UsersChartProps) {
+    return (
+        <LineChart
+            data={data}
+            lineDataKeys={["Users", "Active Users"]}
+            xAxisDataKey="Date"
+            yAxisDataKey="Users"
+            yAxisProps={{
+                tickFormatter: (value) => {
+                    if (value >= 10000) {
+                        return `${thousandToK(Number(value)).toFixed(1)}k`;
+                    } else {
+                        return value as string;
+                    }
+                },
+            }}
+            xAxisProps={{
+                tickFormatter: formatDate,
+            }}
+        />
+    );
+}

starterkits/saas/src/app/(app)/admin/dashboard/page.tsx

@@ -1,13 +1,31 @@
 import { AppPageShell } from "@/app/(app)/_components/page-shell";
-import { Chart } from "@/app/(app)/admin/dashboard/_components/chart";
 import { StatsCard } from "@/app/(app)/admin/dashboard/_components/stats-card";
+import { UsersChart } from "@/app/(app)/admin/dashboard/_components/users-chart";
 import { adminDashConfig } from "@/app/(app)/admin/dashboard/_constants/page-config";
 import { buttonVariants } from "@/components/ui/button";
 import { siteUrls } from "@/config/urls";
 import { cn } from "@/lib/utils";
+import { formatDate } from "@/lib/utils";
 import { DollarSignIcon, Users2Icon } from "lucide-react";
 import Link from "next/link";
 
+const data = [
+    { Date: formatDate("2023-01-01"), Users: 1000, "Active Users": 100 },
+    { Date: formatDate("2023-02-01"), Users: 1040, "Active Users": 120 },
+    { Date: formatDate("2023-03-01"), Users: 1190, "Active Users": 140 },
+    { Date: formatDate("2023-04-01"), Users: 1340, "Active Users": 160 },
+    { Date: formatDate("2023-05-01"), Users: 1390, "Active Users": 180 },
+    { Date: formatDate("2023-06-01"), Users: 1440, "Active Users": 200 },
+    { Date: formatDate("2023-07-01"), Users: 1490, "Active Users": 220 },
+    { Date: formatDate("2023-08-01"), Users: 1540, "Active Users": 240 },
+    { Date: formatDate("2023-09-01"), Users: 1890, "Active Users": 260 },
+    { Date: formatDate("2023-10-01"), Users: 2040, "Active Users": 280 },
+    { Date: formatDate("2023-11-01"), Users: 4000, "Active Users": 300 },
+    { Date: formatDate("2023-12-01"), Users: 10040, "Active Users": 320 },
+    { Date: formatDate("2024-01-01"), Users: 19090, "Active Users": 340 },
+    { Date: formatDate("2024-02-01"), Users: 25040, "Active Users": 360 },
+];
+
 export default async function AdminDashPage() {
     return (
         <AppPageShell
@@ -56,8 +74,7 @@ export default async function AdminDashPage() {
                 </div>
 
                 <div className="grid grid-cols-2 gap-4">
-                    <Chart />
-                    <Chart />
+                    <UsersChart data={data} />
                 </div>
             </div>
         </AppPageShell>

starterkits/saas/src/components/charts.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import React from "react";
+import {
+    ResponsiveContainer,
+    LineChart as LineReCharts,
+    Line,
+    CartesianGrid,
+    YAxis,
+    XAxis,
+    Tooltip,
+    type CartesianGridProps,
+    type YAxisProps,
+    type XAxisProps,
+} from "recharts";
+
+type LineChartProps = {
+    data: unknown[];
+    lineDataKeys: string[];
+    xAxisDataKey: string;
+    yAxisDataKey: string;
+    lineProps?: React.ComponentPropsWithoutRef<typeof Line>;
+    CartesionGridProps?: CartesianGridProps;
+    yAxisProps?: YAxisProps;
+    xAxisProps?: XAxisProps;
+};
+
+export const LineChart = ({
+    data,
+    lineDataKeys,
+    xAxisDataKey,
+    yAxisDataKey,
+    lineProps,
+    CartesionGridProps,
+    yAxisProps,
+    xAxisProps,
+}: LineChartProps) => {
+    return (
+        <ResponsiveContainer width="100%" minHeight={250}>
+            <LineReCharts data={data}>
+                {lineDataKeys.map((lineDataKey) => (
+                    <Line
+                        key={lineDataKey}
+                        type="monotone"
+                        dataKey={lineDataKey}
+                        stroke="hsl(var(--primary))"
+                        dot={false}
+                        {...lineProps}
+                    />
+                ))}
+
+                <CartesianGrid
+                    stroke="hsl(var(--border))"
+                    strokeDasharray="3 3"
+                    {...CartesionGridProps}
+                />
+
+                <YAxis
+                    stroke="hsl(var(--muted-foreground))"
+                    strokeOpacity={0.2}
+                    fontSize={"0.75rem"}
+                    fontWeight={500}
+                    tickCount={6}
+                    tickMargin={18}
+                    tickLine={false}
+                    axisLine={false}
+                    dataKey={yAxisDataKey}
+                    {...yAxisProps}
+                />
+
+                <XAxis
+                    dataKey={xAxisDataKey}
+                    tickCount={5}
+                    stroke="hsl(var(--muted-foreground))"
+                    strokeOpacity={0.2}
+                    fontSize={"0.75rem"}
+                    fontWeight={500}
+                    tickLine={false}
+                    axisLine={false}
+                    tickMargin={16}
+                    {...xAxisProps}
+                />
+
+                <Tooltip
+                    cursorStyle={{
+                        stroke: "hsl(var(--border))",
+                    }}
+                    content={({ active, payload }) => {
+                        if (active) {
+                            const payloadItem = payload?.[0]?.payload as Record<
+                                string,
+                                string
+                            >;
+
+                            const payloadItemArray = Object.entries(
+                                payloadItem,
+                            ).map(([key, value]) => ({ key, value }));
+
+                            console.log(payloadItemArray);
+
+                            return <CustomTooltip payload={payloadItemArray} />;
+                        }
+
+                        return null;
+                    }}
+                />
+            </LineReCharts>
+        </ResponsiveContainer>
+    );
+};
+
+type CustomTooltipProps = {
+    payload: { key: string; value: string }[];
+};
+
+export const CustomTooltip = ({ payload }: CustomTooltipProps) => {
+    return (
+        <div className="grid divide-y rounded-sm border border-border bg-background shadow-md">
+            {payload.map(({ key, value }) => (
+                <p key={key} className="flex flex-row gap-2 p-2 text-xs">
+                    <span className="font-medium text-muted-foreground">
+                        {key}:
+                    </span>
+                    <span className="font-medium">{value}</span>
+                </p>
+            ))}
+        </div>
+    );
+};

starterkits/saas/src/lib/utils.ts

@@ -1,6 +1,7 @@
 import { orgConfig } from "@/config/organization";
 import { env } from "@/env";
 import { type ClassValue, clsx } from "clsx";
+import { format } from "date-fns";
 import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
@@ -19,3 +20,11 @@ export function setOrgCookie(orgId: string) {
 export function getAbsoluteUrl(path: string) {
     return `${env.NEXTAUTH_URL}${path}`;
 }
+
+export function thousandToK(value: number) {
+    return value / 1000;
+}
+
+export function formatDate(date: string) {
+    return format(new Date(date), "PP");
+}