Refactor RecsCycleBarChart component and update package dependencies

lil-lab · Mar 1, 2024 · 7a479e6 · 7a479e6
1 parent dcd7ec9
commit 7a479e6
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 4 deletions.
diff --git a/apps/recnet/src/app/admin/stats/user-rec/RecsCycleBarChart.tsx b/apps/recnet/src/app/admin/stats/user-rec/RecsCycleBarChart.tsx
@@ -14,13 +14,12 @@ interface RecsCycleBarChartProps {
   data: Record<Timestamp, number>;
 }
 
-const verticalMargin = 70;
-
 function BarChart(props: RecsCycleBarChartProps) {
   const { parentWidth, parentHeight, data } = props;
   // bounds
+  const margin = { top: 40, right: 0, bottom: 0, left: 0 };
   const xMax = parentWidth;
-  const yMax = parentHeight - verticalMargin;
+  const yMax = parentHeight - margin.top;
 
   // data
   const timestamps = Object.keys(data).map((ts) => parseInt(ts, 10));
@@ -44,7 +43,7 @@ function BarChart(props: RecsCycleBarChartProps) {
 
   return (
     <svg width={parentWidth} height={parentHeight}>
-      <Group top={verticalMargin / 2}>
+      <Group top={margin.top}>
         {Object.keys(data)
           .map((key) => {
             const ts = parseInt(key, 10);

diff --git a/package.json b/package.json
@@ -12,10 +12,12 @@
     "@radix-ui/themes": "^2.0.3",
     "@react-email/components": "0.0.14",
     "@react-email/render": "^0.0.12",
+    "@visx/axis": "^3.8.0",
     "@visx/group": "^3.3.0",
     "@visx/responsive": "^3.3.0",
     "@visx/scale": "^3.5.0",
     "@visx/shape": "^3.5.0",
+    "@visx/vendor": "^3.5.0",
     "chance": "^1.1.11",
     "clsx": "^2.1.0",
     "firebase": "^10.7.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml