From 79bfafa5fb4f69dc110c15179eb125e1e8a41fc4 Mon Sep 17 00:00:00 2001
From: Antonio Villagra De La Cruz <antonio.villagra.de.la.cruz@gmail.com>
Date: Sun, 6 Aug 2023 15:24:25 +0800
Subject: [PATCH] Reimplement bar charts

---
 app/components/BarChart.client.tsx | 165 +++++++++++++++--------------
 app/routes/app/dashboard.$id.tsx   |  20 +++-
 2 files changed, 102 insertions(+), 83 deletions(-)

diff --git a/app/components/BarChart.client.tsx b/app/components/BarChart.client.tsx
index 36440b4..ac3a85e 100644
--- a/app/components/BarChart.client.tsx
+++ b/app/components/BarChart.client.tsx
@@ -1,114 +1,121 @@
-/* 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: "Page 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: {
+        categories: displayData.map(({ label }) => label),
+        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 right-[70px] top-[-20px] text-xs text-slate-500 hover:text-slate-400">
diff --git a/app/routes/app/dashboard.$id.tsx b/app/routes/app/dashboard.$id.tsx
index a03e936..006511a 100644
--- a/app/routes/app/dashboard.$id.tsx
+++ b/app/routes/app/dashboard.$id.tsx
@@ -182,7 +182,10 @@ export default function DashboardRoute() {
           <H2>Pages</H2>
           <div className="mt-1 cursor-pointer">
             {isMounted ? (
-              <BarChart dataKey="bar-pages" data={data.paths} />
+              <BarChart
+                key={`bar-pages-${data.website.id}`}
+                data={data.paths}
+              />
             ) : (
               <div className="flex flex-col items-center">
                 <Loading />
@@ -194,7 +197,10 @@ export default function DashboardRoute() {
           <H2>Referrers</H2>
           <div className="mt-1 cursor-pointer">
             {isMounted ? (
-              <BarChart dataKey="bar-referrers" data={data.referrers} />
+              <BarChart
+                key={`bar-referrers-${data.website.id}`}
+                data={data.referrers}
+              />
             ) : (
               <div className="flex flex-col items-center">
                 <Loading />
@@ -206,7 +212,10 @@ export default function DashboardRoute() {
           <H2>Browsers</H2>
           <div className="mt-1 cursor-pointer">
             {isMounted ? (
-              <BarChart dataKey="bar-browsers" data={data.browsers} />
+              <BarChart
+                key={`bar-browsers-${data.website.id}`}
+                data={data.browsers}
+              />
             ) : (
               <div className="flex flex-col items-center">
                 <Loading />
@@ -218,7 +227,10 @@ export default function DashboardRoute() {
           <H2>Platforms</H2>
           <div className="mt-1 cursor-pointer">
             {isMounted ? (
-              <BarChart dataKey="bar-platforms" data={data.platforms} />
+              <BarChart
+                key={`bar-platforms-${data.website.id}`}
+                data={data.platforms}
+              />
             ) : (
               <div className="flex flex-col items-center">
                 <Loading />