Animate cartesian grid on domain change

src/client/components/chart-cards/common/chart/cartesian-grid.tsx

@@ -1,30 +0,0 @@
-const width = 640;
-const height = 480;
-
-export const CartesianGrid = () => (
-  <svg
-    className='cartesian-grid'
-    version='1.1'
-    xmlns='http://www.w3.org/2000/svg'
-    width='100%'
-    height='100%'
-    viewBox={`0 0 ${width} ${height}`}
-    preserveAspectRatio='none'
-    vectorEffect='non-scaling-stroke'
-  >
-    <title>{'Cartesian grid'}</title>
-
-    {Array.from({ length: 5 }).map((_, index) => (
-      <line
-        x1={'0'}
-        x2={'100%'}
-        // biome-ignore lint/suspicious/noArrayIndexKey: supress react console error
-        key={index}
-        y1={Math.max(1, Math.min(height - 1, (height * index) / 4))}
-        y2={Math.max(1, Math.min(height - 1, (height * index) / 4))}
-        stroke='var(--color-background1)'
-        strokeWidth={1}
-      />
-    ))}
-  </svg>
-);

src/client/components/chart-cards/common/chart/index.css

@@ -2,7 +2,7 @@
   color: var(--color-text-subdued);
   display: grid;
   font-size: 16px;
-  gap: 4px;
+  gap: 6px;
   grid-template-columns: max-content 1fr;
   height: 100%;
   line-height: 1;
@@ -21,21 +21,13 @@
   }
 }
 
-.chart .cartesian-grid {
-  height: calc(100% - 16px);
-  position: absolute;
-  top: 8px;
-  width: 100%;
-}
-
 .chart .canvas-wrapper {
   position: relative;
 
   > canvas {
     height: calc(100% - 16px);
-    left: 8px;
     position: absolute;
     top: 8px;
-    width: calc(100% - 8px);
+    width: 100%;
   }
 }

src/client/components/chart-cards/common/chart/index.tsx

@@ -2,7 +2,6 @@ import { useAnimationFrame } from '@/hooks/use-animation-frame';
 import { getFillColor, getStrokeColor } from '@/utils/colors';
 import type { FormatOptions } from '@/utils/format';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { CartesianGrid } from './cartesian-grid';
 import './index.css';
 import { YAxis } from './y-axis';
 
@@ -26,20 +25,19 @@ const xFromTimestamp = (timestamp: number, width: number) =>
 export const CanvasChart = ({ total, hueOffset = 0, domain, hardDomain, data, formatOptions }: Props) => {
   const canvasRef = useRef<HTMLCanvasElement>(null!);
   const now = useMemo(() => Date.now(), []);
-  const [history, setHistory] = useState<[number, number[]][]>([[now, []]]);
+  const history = useRef<[number, number[]][]>([[now, []]]);
+  const [historyMax, setHistoryMax] = useState(0);
   const targetMax = useMemo(() => {
     if (domain && hardDomain) {
       return domain[1];
     }
 
-    const historyMax = history.reduce((max, [_, values]) => Math.max(max, ...values), 0);
-
     if (!domain || historyMax > domain[1]) {
       return 1.25 * historyMax;
     }
 
     return domain[1];
-  }, [history, domain, hardDomain]);
+  }, [domain, hardDomain, historyMax]);
   const max = useRef(targetMax);
 
   const [width, setWidth] = useState(640);
@@ -48,13 +46,12 @@ export const CanvasChart = ({ total, hueOffset = 0, domain, hardDomain, data, fo
   // Record data changes
   useEffect(() => {
     if (data) {
-      setHistory(history => {
+      while (xFromTimestamp(history.current[0][0], width) < -xMargin) {
-        const firstValidIndex = history.findIndex(([timestamp]) => xFromTimestamp(timestamp, width) >= -xMargin);
+        history.current.shift();
-        const newHistory = history.slice(firstValidIndex);
+      }
-        newHistory.push([Date.now(), data]);
 
-        return newHistory;
+      history.current.push([Date.now(), data]);
-      });
+      setHistoryMax(history.current.reduce((max, [_, values]) => Math.max(max, ...values), 0));
     }
   }, [data, width]);
 
@@ -81,14 +78,29 @@ export const CanvasChart = ({ total, hueOffset = 0, domain, hardDomain, data, fo
     }
 
     if (!hardDomain) {
-      max.current = (max.current + targetMax) / 2;
+      max.current = (4 * max.current + targetMax) / 5;
     }
 
     ctx.clearRect(0, 0, width, height);
-    ctx.lineWidth = 2 * window.devicePixelRatio;
+    ctx.lineWidth = window.devicePixelRatio;
     ctx.lineCap = 'round';
     ctx.lineJoin = 'round';
 
+    const mappedHeight = Math.floor((height * max.current) / targetMax);
+    if (mappedHeight) {
+      for (let i = mappedHeight; i >= 0; i -= mappedHeight / 4) {
+        const clamped = Math.max(Math.min(i, height - 1), 1);
+        ctx.strokeStyle = getComputedStyle(canvasRef.current).getPropertyValue('--color-background1');
+        ctx.beginPath();
+        ctx.moveTo(-xMargin, clamped);
+        ctx.lineTo(width + xMargin, clamped);
+        ctx.stroke();
+        ctx.closePath();
+      }
+    }
+
+    ctx.lineWidth = 2 * window.devicePixelRatio;
+
     const drawSeries = (type: 'fill' | 'stroke') => {
       for (let i = 0; i < total; i++) {
         if (type === 'fill') ctx.fillStyle = getFillColor(hueOffset + (360 * Number(i)) / total);
@@ -96,16 +108,16 @@ export const CanvasChart = ({ total, hueOffset = 0, domain, hardDomain, data, fo
 
         ctx.beginPath();
         ctx.moveTo(-xMargin, height);
-        ctx.lineTo(-xMargin, height - (height * (history[0][1][i] ?? 0)) / max.current);
+        ctx.lineTo(-xMargin, height - (height * (history.current[0][1][i] ?? 0)) / max.current);
 
-        for (const [timestamp, values] of history) {
+        for (const [timestamp, values] of history.current) {
           const x = xFromTimestamp(timestamp, width);
           const y = height - (height * (values[i] ?? 0)) / max.current;
 
           ctx.lineTo(x, y);
         }
 
-        ctx.lineTo(width + xMargin, height - (height * (history[0][1][i] ?? 0)) / max.current);
+        ctx.lineTo(width + xMargin, height - (height * (history.current[0][1][i] ?? 0)) / max.current);
         ctx.lineTo(width + xMargin, height);
 
         if (type === 'fill') ctx.fill();
@@ -124,8 +136,6 @@ export const CanvasChart = ({ total, hueOffset = 0, domain, hardDomain, data, fo
       <YAxis max={targetMax} formatOptions={formatOptions} />
 
       <div className='canvas-wrapper'>
-        <CartesianGrid />
-
         <canvas ref={canvasRef} width={width} height={height} />
       </div>
     </div>