Fix dashboard (#23)

* WIP: Fix dashboard * Use raw queries to fetch dashboard data * Update bar chart * Add back apexcharts * Reimplement bar charts * Change brush chart with timeseries chart
AntonioVdlC · Aug 6, 2023 · f466511 · f466511
1 parent 92999d7
commit f466511
Show file tree

Hide file tree

Showing 61 changed files with 6,753 additions and 6,876 deletions.
diff --git a/app/components/AppContainer.tsx b/app/components/AppContainer.tsx
@@ -1,5 +1,4 @@
 import { FC, ReactChild, useEffect, useState } from "react";
-import { useLocation } from "remix";
 import {
   GlobeIcon,
   DocumentReportIcon,
@@ -12,6 +11,7 @@ import type { User, Website } from "@prisma/client";
 import AppNavigationMobile from "~/components/AppNavigationMobile";
 import AppNavigationSide from "~/components/AppNavigationSide";
 import AppNavigationTop from "~/components/AppNavigationTop";
+import { useLocation } from "@remix-run/react";
 
 export type NavigationItem = {
   name: string;

diff --git a/app/components/AppNavigationMobile.tsx b/app/components/AppNavigationMobile.tsx
@@ -1,5 +1,4 @@
 import { Fragment } from "react";
-import { Link } from "remix";
 import { Transition, Dialog } from "@headlessui/react";
 import { XIcon } from "@heroicons/react/outline";
 
@@ -8,6 +7,7 @@ import classNames from "~/utils/class-names";
 import Logo from "~/components/Logo";
 
 import type { NavigationItem } from "~/components/AppContainer";
+import { Link } from "@remix-run/react";
 
 type Props = {
   sidebarOpen: boolean;
@@ -60,7 +60,7 @@ export default function AppNavigationMobile({
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
-              <div className="absolute top-0 right-0 -mr-12 pt-2">
+              <div className="absolute right-0 top-0 -mr-12 pt-2">
                 <button
                   type="button"
                   className="ml-1 flex h-10 w-10 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"

diff --git a/app/components/AppNavigationSide.tsx b/app/components/AppNavigationSide.tsx
@@ -1,10 +1,9 @@
-import { Link } from "remix";
-
 import classNames from "~/utils/class-names";
 
 import Logo from "~/components/Logo";
 
 import type { NavigationItem } from "~/components/AppContainer";
+import { Link } from "@remix-run/react";
 
 type Props = {
   navigation: {

diff --git a/app/components/BarChart.client.tsx b/app/components/BarChart.client.tsx
@@ -1,117 +1,123 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import ReactApexChart from "react-apexcharts";
+import { DashboardElement } from "~/types/dashboard";
+
+import type { ApexOptions } from "apexcharts";
 
 type Props = {
-  categories: string[];
-  data: number[];
-  elements: Array<{ id: string }>;
+  data: DashboardElement[];
   limit?: number;
   onClick?: (id: string) => void;
 };
 
-const VIEW_LIMIT = 5;
+const VIEW_LIMIT = 4;
 
 export default function BarChart({
-  categories,
   data,
-  elements,
   limit = VIEW_LIMIT,
   onClick = () => null,
 }: Props) {
   const [viewAll, setViewAll] = useState(false);
+  const [series, setSeries] = useState<ApexOptions["series"]>([]);
+  const [options, setOptions] = useState<ApexOptions>({});
 
-  const options = {
-    chart: {
-      type: "bar",
-      height: 55 * (viewAll || data.length < limit ? data.length : limit) + 55,
-      offsetX: -25,
-      offsetY: -25,
-      toolbar: {
-        show: true,
-        offsetX: -30,
-        offsetY: -23,
+  useEffect(() => {
+    const displayData = viewAll ? data : data.slice(0, limit);
+
+    setSeries([
+      {
+        name: "Views",
+        data: displayData.map(({ count, label }) => ({ x: label, y: count })),
       },
-      events: {
-        click(_: never, __: never, config: { dataPointIndex: number }) {
-          onClick(elements[config.dataPointIndex].id);
+    ]);
+
+    setOptions({
+      chart: {
+        type: "bar",
+        height:
+          55 *
+            (viewAll || displayData.length < limit
+              ? displayData.length
+              : limit) +
+          55,
+        offsetX: -25,
+        offsetY: -25,
+        toolbar: {
+          show: true,
+          offsetX: -30,
+          offsetY: -23,
         },
-      },
-    },
-    plotOptions: {
-      bar: {
-        borderRadius: 4,
-        horizontal: true,
-        barHeight: "80%",
-        dataLabels: {
-          position: "bottom",
+        events: {
+          click(_: never, __: never, config: { dataPointIndex: number }) {
+            onClick(data[config.dataPointIndex].id);
+          },
         },
       },
-    },
-    dataLabels: {
-      enabled: true,
-      textAnchor: "start",
-      style: {
-        colors: ["#1e293b"],
-        fontWeight: 400,
-      },
-      formatter: function (_: any, opt: any) {
-        return opt.w.globals.labels[opt.dataPointIndex];
-      },
-      offsetX: 10,
-      dropShadow: {
-        enabled: false,
-      },
-    },
-    colors: ["#e2e8f0"],
-    tooltip: {
-      y: {
-        formatter(val: number) {
-          return Math.round(val);
+      plotOptions: {
+        bar: {
+          borderRadius: 4,
+          horizontal: true,
+          barHeight: "80%",
+          dataLabels: {
+            position: "bottom",
+          },
         },
       },
-    },
-    xaxis: {
-      categories,
-      axisBorder: {
-        show: true,
-        color: "#1e293b",
+      dataLabels: {
+        enabled: true,
+        textAnchor: "start",
+        style: {
+          colors: ["#1e293b"],
+          fontWeight: 400,
+        },
+        formatter: function (_: any, opt: any) {
+          return opt.w.globals.labels[opt.dataPointIndex];
+        },
+        offsetX: 10,
+        dropShadow: {
+          enabled: false,
+        },
       },
-      axisTicks: {
-        show: false,
+      colors: ["#e2e8f0"],
+      tooltip: {
+        y: {
+          formatter(val: number) {
+            return String(Math.round(val));
+          },
+        },
       },
-      labels: {
-        formatter(val: number) {
-          return Math.round(val);
+      xaxis: {
+        axisBorder: {
+          show: true,
+          color: "#1e293b",
+        },
+        axisTicks: {
+          show: false,
+        },
+        labels: {
+          formatter(val: string) {
+            return String(Math.round(Number(val)));
+          },
         },
       },
-    },
-    yaxis: {
-      labels: {
-        show: false,
+      yaxis: {
+        labels: {
+          show: false,
+        },
       },
-    },
-  };
-
-  const series = [
-    {
-      name: "Page Views",
-      data: viewAll ? data : data.slice(0, limit),
-    },
-  ];
+    });
+  }, [viewAll, data, limit]);
 
   return (
     <div className="relative">
-      {/* @ts-ignore */}
       <ReactApexChart
         options={options}
         series={series}
-        type={options.chart.type}
-        height={options.chart.height}
+        type={"bar"}
+        height={options.chart?.height || 350}
       />
       {data.length > limit ? (
-        <div className="absolute top-[-20px] right-[70px] text-xs text-slate-500 hover:text-slate-400">
+        <div className="absolute right-[70px] top-[-20px] text-xs text-slate-500 hover:text-slate-400">
           <a onClick={() => setViewAll(!viewAll)}>
             {viewAll ? "View Less" : "View More"}
           </a>

diff --git a/app/components/Breadcrumbs.tsx b/app/components/Breadcrumbs.tsx
@@ -1,11 +1,11 @@
 import { useState, useEffect } from "react";
-import { Link, useLocation } from "remix";
 import { ChevronRightIcon } from "@heroicons/react/outline";
 import { HomeIcon } from "@heroicons/react/solid";
 
 import type { Website } from "@prisma/client";
 
 import isUUID from "~/utils/is-uuid";
+import { useLocation, Link } from "@remix-run/react";
 
 type CrumbItem = {
   name: string;