install axes libs

gessfred · Jan 23, 2024 · 334aa87 · 334aa87
1 parent 4c3ca99
commit 334aa87
Show file tree

Hide file tree

Showing 4 changed files with 190 additions and 47 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -15,11 +15,14 @@
     "@heroicons/react": "^2.1.1",
     "@uiw/codemirror-themes": "^4.21.21",
     "@uiw/react-codemirror": "^4.21.21",
+    "@visx/axis": "^3.5.0",
     "@visx/gradient": "^3.3.0",
+    "@visx/grid": "^3.5.0",
     "@visx/group": "^3.3.0",
     "@visx/mock-data": "^3.3.0",
     "@visx/scale": "^3.5.0",
     "@visx/shape": "^3.5.0",
+    "@visx/vendor": "^3.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "uniqid": "^5.4.0"

diff --git a/app/src/components/Chart.jsx b/app/src/components/Chart.jsx
@@ -3,34 +3,44 @@ import { Bar } from '@visx/shape'
 import { Group } from '@visx/group'
 import { GradientTealBlue } from '@visx/gradient'
 import { scaleBand, scaleLinear } from '@visx/scale'
+import { Grid } from '@visx/grid'
+import { AxisBottom } from '@visx/axis'
+import { timeParse, timeFormat } from '@visx/vendor/d3-time-format'
 
-const verticalMargin = 120
+const verticalMargin = 64
 
 function useSvgDimensions() {
   const ref = useRef(null);
-  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 })
 
   useEffect(() => {
     if (ref.current) {
-      const { width, height } = ref.current.getBoundingClientRect();
-      setDimensions({ width, height });
+      const { width, height } = ref.current.getBoundingClientRect()
+      setDimensions({ width, height })
     }
-  }, []);
+  }, [])
 
-  return [ref, dimensions];
+  return [ref, dimensions]
 }
 
-export default function Chart({ data }) {
+const parseDate = timeParse('%Y-%m-%d');
+const format = timeFormat('%h %m');
+const formatDate = (date) => format(parseDate(date))
+
+export default function Chart({ data, axes }) {
   const data_ = data || []
   const [svgRef, dimensions] = useSvgDimensions()
-  const xMax = dimensions.width;
-  const yMax = dimensions.height - verticalMargin;
+  const width = dimensions.width
+  const height = dimensions.height - verticalMargin
+  const xMax = width 
+  const yMax = height
+  console.log(data_, axes)
   // scales, memoize for performance
   const xScale = useMemo(
     () => scaleBand({
       range: [0, xMax],
       round: true,
-      domain: data_?.map(x => x.x),
+      domain: data_?.map(it => (axes?.x in it) && it[axes?.x]),
       padding: 0.4,
     }),
     [xMax, JSON.stringify(data)]
@@ -39,16 +49,28 @@ export default function Chart({ data }) {
     () => scaleLinear({
       range: [yMax, 0],
       round: true,
-      domain: [0, Math.max(...data_?.map(x => x.y))],
+      domain: [0, Math.max(...data_?.map(it => (axes?.y in it) && it[axes?.y]))],
     }),
     [yMax, JSON.stringify(data)],
   )
-  console.log("drawing", data_, dimensions)
-  if(!data) return null
+  console.log("dim", dimensions)
+  console.log("drawing", data_)
+  console.log("xaxis", data_?.map(it => (axes?.x in it) && it[axes?.x]))
+  console.log("yaxis", [0, Math.max(...data_?.map(it => (axes?.y in it) && it[axes?.y]))])
+  if(!data || !axes) return null
   return (
-    <svg className='w-full h-200' ref={svgRef}>
-      <GradientTealBlue id="teal" />
+    <svg className='w-full h-200 bg-slate-200 rounded-md' ref={svgRef}>
       <rect height="150px" width="100%" fill="url(#teal)" rx={14} />
+      {false && <Grid
+          top={8}
+          left={64}
+          xScale={xScale}
+          yScale={yScale}
+          width={width - 128}
+          height={yMax}
+          stroke="black"
+          strokeOpacity={0.1}
+        />}
       <Group top={verticalMargin / 2}>
         {data_?.map(({x, y}) => {
           const barWidth = xScale.bandwidth();
@@ -62,14 +84,28 @@ export default function Chart({ data }) {
               y={barY}
               width={barWidth}
               height={barHeight}
-              fill="rgba(23, 233, 217, .5)"
+              fill='dodgerblue'
               onClick={() => {
                 console.log("clicked graph")
               }}
             />
-          );
+
+          )
         })}
       </Group>
+      {false && <AxisBottom
+          top={yMax + 20}
+          scale={xScale}
+          stroke={'purple'}
+          tickStroke={'purple'}
+          tickFormat={formatDate}
+          tickLabelProps={{
+            fill: 'purple',
+            fontSize: 11,
+            textAnchor: 'middle',
+          }}
+        />}
     </svg>
   );
-}
+}
+//<GradientTealBlue id="teal" />