Change brush chart with timeseries chart

app/components/BarChart.client.tsx

@@ -26,7 +26,7 @@ export default function BarChart({
 
     setSeries([
       {
-        name: "Page Views",
+        name: "Views",
         data: displayData.map(({ count, label }) => ({ x: label, y: count })),
       },
     ]);
@@ -87,7 +87,6 @@ export default function BarChart({
         },
       },
       xaxis: {
-        categories: displayData.map(({ label }) => label),
         axisBorder: {
           show: true,
           color: "#1e293b",

app/components/TimeSeriesChart.client.tsx

@@ -0,0 +1,118 @@
+import type { ApexOptions } from "apexcharts";
+import { useEffect, useState } from "react";
+import ReactApexChart from "react-apexcharts";
+import { DashboardElement } from "~/types/dashboard";
+
+type Props = {
+  data: Omit<DashboardElement, "id">[];
+};
+
+export default function TimeSeriesChart({ data }: Props) {
+  const [series, setSeries] = useState<ApexOptions["series"]>([]);
+  const [options, setOptions] = useState<ApexOptions>({});
+
+  useEffect(() => {
+    const seriesData = data.map(({ count, label }) => [
+      new Date(label).getTime(),
+      count,
+    ]);
+
+    setSeries([
+      {
+        name: "Page Views",
+        data: seriesData,
+      },
+    ]);
+
+    setOptions({
+      chart: {
+        id: "chart2",
+        type: "line",
+        zoom: {
+          type: "x",
+          enabled: true,
+          autoScaleYaxis: true,
+        },
+        height: 230,
+        offsetX: -10,
+        offsetY: 0,
+        toolbar: {
+          show: true,
+          autoSelected: "selection",
+        },
+      },
+      colors: ["#64748b"],
+      fill: {
+        opacity: 1,
+      },
+      stroke: {
+        width: 3,
+        curve: "smooth",
+        colors: ["#64748b"],
+      },
+      grid: {
+        show: false,
+      },
+      dataLabels: {
+        enabled: false,
+      },
+      markers: {
+        size: 0,
+      },
+      plotOptions: {
+        area: {
+          fillTo: "origin",
+        },
+      },
+      xaxis: {
+        type: "datetime",
+        tickAmount: 8,
+        labels: {
+          formatter(val) {
+            return new Date(val).toLocaleDateString(undefined, {
+              year: "2-digit",
+              month: "short",
+              day: "numeric",
+            });
+          },
+        },
+        axisBorder: {
+          show: true,
+          color: "#1e293b",
+        },
+        axisTicks: {
+          show: false,
+        },
+      },
+      yaxis: {
+        min: 0,
+        max: Math.max(...seriesData.map((d) => d[1])) + 1,
+        forceNiceScale: true,
+        labels: {
+          formatter(val) {
+            return String(Math.round(val));
+          },
+        },
+        axisBorder: {
+          show: true,
+          color: "#1e293b",
+        },
+        axisTicks: {
+          show: false,
+        },
+        tickAmount: 4,
+      },
+    });
+  }, [data]);
+
+  return (
+    <div>
+      <ReactApexChart
+        options={options}
+        series={series}
+        type={options.chart?.type || "line"}
+        height={options.chart?.height || 230}
+      />
+    </div>
+  );
+}

app/routes/app/dashboard.$id.tsx

@@ -16,7 +16,7 @@ import classNames from "~/utils/class-names";
 import { generateWebsiteColor, generateWebsiteInitials } from "~/utils/website";
 
 import BarChart from "~/components/BarChart.client";
-// import BrushChart from "~/components/BrushChart.client";
+import TimeSeriesChart from "~/components/TimeSeriesChart.client";
 import Button from "~/components/Button";
 import H2 from "~/components/SectionHeader";
 import LayoutGrid from "~/components/LayoutGrid";
@@ -30,7 +30,7 @@ type LoaderData = {
   website: Website;
   element: Path | Browser | Platform | Referrer | undefined;
   paths: DashboardElement[];
-  periods: DashboardElement[];
+  periods: Omit<DashboardElement, "id">[];
   browsers: DashboardElement[];
   platforms: DashboardElement[];
   referrers: DashboardElement[];
@@ -53,13 +53,12 @@ export const loader: LoaderFunction = async ({ request, params }) => {
   const [periods, browsers, paths, platforms, referrers] = await Promise.all([
     db.$queryRaw<DashboardElement[]>`
       SELECT
-        "Period"."id",
         MAKE_DATE("Period"."year", "Period"."month", "Period"."day") as "label",
         COUNT(*) as "count"
       FROM "Event" INNER JOIN "Period" ON "Event"."periodId" = "Period"."id"
       WHERE "Event"."websiteId" = ${website.id}
-      GROUP BY 1, 2
-      ORDER BY 2 ASC`,
+      GROUP BY 1
+      ORDER BY 1`,
     db.$queryRaw<DashboardElement[]>`
       SELECT
         "Browser"."id",
@@ -159,14 +158,10 @@ export default function DashboardRoute() {
         <H2>Page Views Chart</H2>
         <div className="mt-1">
           {isMounted ? (
-            // <BrushChart
-            //   key={data.element?.id || data.website.id}
-            //   data={data.periods.map((period) => [
-            //     new Date(period.value).getTime(),
-            //     period.count,
-            //   ])}
-            // />
-            <div></div>
+            <TimeSeriesChart
+              key={`brush-chart-${data.website.id}`}
+              data={data.periods}
+            />
           ) : (
             <div className="flex flex-col items-center">
               <Loading />