Use raw queries to fetch dashboard data

AntonioVdlC · Jul 30, 2023 · fe38011 · fe38011
1 parent 232f4fd
commit fe38011
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 282 deletions.
diff --git a/app/components/BarChart.client.tsx b/app/components/BarChart.client.tsx
@@ -1,62 +1,45 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-
 import { BarGroup, BarSeries, XYChart } from "@visx/xychart";
 import { useState } from "react";
-import type { BarDataPoint, DashboardElement } from "~/types/dashboard";
+import type { DashboardElement } from "~/types/dashboard";
 
 type Props = {
   data: DashboardElement[];
   dataKey: string;
   limit?: number;
-  onClick?: (id: string) => void;
 };
 
-const VIEW_LIMIT = 5;
+const VIEW_LIMIT = 4;
 
-export default function BarChart({
-  data,
-  dataKey,
-  limit = VIEW_LIMIT,
-  onClick = () => null,
-}: Props) {
+export default function BarChart({ data, dataKey, limit = VIEW_LIMIT }: Props) {
   const [viewAll, setViewAll] = useState(false);
 
-  const series: Array<BarDataPoint> = data
-    .filter((datum) => datum.count)
-    .sort((a, b) => a.count - b.count)
-    .map((datum) => ({
-      id: datum.id,
-      count: datum.count,
-      label: String(datum.value),
-      // new Date(
-      //   new Date(period.value).setHours(0, 0, 0, 0)
-      // ).toLocaleDateString(undefined, {
-      //   year: "2-digit",
-      //   month: "short",
-      //   day: "numeric",
-      // }),
-    }));
-
   const height =
     55 * (1 + (viewAll || data.length < limit ? data.length : limit));
 
   const accessors = {
-    xAccessor: (datum: BarDataPoint) => datum.count,
-    yAccessor: (datum: BarDataPoint) => datum.label,
+    xAccessor: (datum: DashboardElement) => datum.count,
+    yAccessor: (datum: DashboardElement) => datum.label,
   };
 
+  if (!data.length) {
+    return (
+      <div className="mt-1">
+        <p>No data.</p>
+      </div>
+    );
+  }
+
   return (
     <div className="relative">
       <XYChart
         height={height}
         xScale={{ type: "linear" }}
         yScale={{ type: "band" }}
-        onPointerUp={({ datum }) => onClick((datum as BarDataPoint).id)}
       >
         <BarGroup>
           <BarSeries
             dataKey={dataKey}
-            data={viewAll ? series : series.slice(0, limit)}
+            data={viewAll ? data : data.slice(0, limit)}
             {...accessors}
           ></BarSeries>
         </BarGroup>