Update bar chart

AntonioVdlC · Jul 30, 2023 · 5a6773d · 5a6773d
1 parent fe38011
commit 5a6773d
Show file tree

Hide file tree

Showing 3 changed files with 5,857 additions and 12,207 deletions.
diff --git a/app/components/BarChart.client.tsx b/app/components/BarChart.client.tsx
@@ -1,25 +1,56 @@
-import { BarGroup, BarSeries, XYChart } from "@visx/xychart";
-import { useState } from "react";
+import * as Plot from "@observablehq/plot";
+import { useEffect, useRef, useState } from "react";
 import type { DashboardElement } from "~/types/dashboard";
 
 type Props = {
   data: DashboardElement[];
-  dataKey: string;
   limit?: number;
 };
 
 const VIEW_LIMIT = 4;
 
-export default function BarChart({ data, dataKey, limit = VIEW_LIMIT }: Props) {
+export default function BarChart({ data, limit = VIEW_LIMIT }: Props) {
   const [viewAll, setViewAll] = useState(false);
+  const chartContainer = useRef<HTMLDivElement>(null);
 
-  const height =
-    55 * (1 + (viewAll || data.length < limit ? data.length : limit));
+  useEffect(() => {
+    if (!data.length) return;
 
-  const accessors = {
-    xAccessor: (datum: DashboardElement) => datum.count,
-    yAccessor: (datum: DashboardElement) => datum.label,
-  };
+    const max = data[0].count;
+    const plot = Plot.plot({
+      height: 55 * (1 + (viewAll || data.length < limit ? data.length : limit)),
+      x: { axis: "top", label: null },
+      y: { axis: null, inset: 6 },
+      marks: [
+        Plot.barX(viewAll ? data : data.slice(0, VIEW_LIMIT), {
+          x: "count",
+          y: "label",
+          fill: "steelblue",
+          sort: { y: "-x" },
+        }),
+        Plot.text(viewAll ? data : data.slice(0, VIEW_LIMIT), {
+          x: "count",
+          y: "label",
+          text: (d) => d.label,
+          textAnchor: "end",
+          dx: -30,
+          filter: (d) => d.count / max > 0.5,
+          fill: "white",
+        }),
+        Plot.text(viewAll ? data : data.slice(0, VIEW_LIMIT), {
+          x: "count",
+          y: "label",
+          text: (d) => d.label,
+          textAnchor: "start",
+          dx: 3,
+          filter: (d) => d.count / max <= 0.5,
+          fill: "currentColor",
+        }),
+      ],
+    });
+    chartContainer.current?.append(plot);
+    return () => plot.remove();
+  }, [data, viewAll]);
 
   if (!data.length) {
     return (
@@ -31,19 +62,7 @@ export default function BarChart({ data, dataKey, limit = VIEW_LIMIT }: Props) {
 
   return (
     <div className="relative">
-      <XYChart
-        height={height}
-        xScale={{ type: "linear" }}
-        yScale={{ type: "band" }}
-      >
-        <BarGroup>
-          <BarSeries
-            dataKey={dataKey}
-            data={viewAll ? data : data.slice(0, limit)}
-            {...accessors}
-          ></BarSeries>
-        </BarGroup>
-      </XYChart>
+      <div ref={chartContainer}></div>
       {data.length > limit ? (
         <div className="absolute right-[70px] top-[-20px] text-xs text-slate-500 hover:text-slate-400">
           <a onClick={() => setViewAll(!viewAll)}>