Add domain animation

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

@@ -9,12 +9,13 @@ type Props = {
   legend?: Omit<LegendProps, 'values'> & Partial<Pick<LegendProps, 'values'>>;
   formatOptions?: FormatOptions;
   domain?: [number, number];
+  hardDomain?: boolean;
   hueOffset?: number;
   data: number[];
   total: number;
 };
 
-export const ChartCard = ({ data, domain, legend, hueOffset = 0, title, subtitle, formatOptions, total }: Props) => {
+export const ChartCard = ({ data, legend, hueOffset = 0, title, subtitle, formatOptions, ...rest }: Props) => {
   return (
     <div className='chart-card'>
       <h2>{title}</h2>
@@ -23,7 +24,7 @@ export const ChartCard = ({ data, domain, legend, hueOffset = 0, title, subtitle
 
       {legend && <Legend hueOffset={hueOffset} formatOptions={formatOptions} values={data} {...legend} />}
 
-      <CanvasChart data={data} hueOffset={hueOffset} domain={domain} total={total} formatOptions={formatOptions} />
+      <CanvasChart data={data} hueOffset={hueOffset} formatOptions={formatOptions} {...rest} />
     </div>
   );
 };

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

@@ -16,6 +16,7 @@ type Props = {
   total: number;
   data: number[];
   domain?: [number, number];
+  hardDomain?: boolean;
   formatOptions?: FormatOptions;
   hueOffset?: number;
 };
@@ -60,18 +61,25 @@ const CartesianGrid = () => (
   </svg>
 );
 
-export const CanvasChart = ({ total, hueOffset = 0, domain, data, formatOptions }: Props) => {
+export const CanvasChart = ({ total, hueOffset = 0, domain, hardDomain, data, formatOptions }: Props) => {
   const canvasRef = useRef<HTMLCanvasElement>(null!);
   const ignored = useRef(0);
   const now = useMemo(() => Date.now(), []);
   const [history, setHistory] = useState<[number, number[]][]>([[now, []]]);
-  const max = useMemo(() => {
-    if (domain) {
+  const targetMax = useMemo(() => {
+    if (domain && hardDomain) {
       return domain[1];
     }
 
-    return 1.25 * history.reduce((max, [_, values]) => Math.max(max, ...values), 0);
-  }, [history, domain]);
+    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]);
+  const max = useRef(targetMax);
 
   useEffect(() => {
     if (data) {
@@ -102,11 +110,16 @@ export const CanvasChart = ({ total, hueOffset = 0, domain, data, formatOptions
       return;
     }
     ignored.current = 0;
+
     const ctx = canvasRef.current.getContext('2d');
     if (!ctx) {
       return;
     }
 
+    if (!hardDomain) {
+      max.current = (max.current + targetMax) / 2;
+    }
+
     ctx.clearRect(0, 0, width, height);
 
     for (let i = 0; i < total; i++) {
@@ -114,14 +127,14 @@ export const CanvasChart = ({ total, hueOffset = 0, domain, data, formatOptions
       ctx.strokeStyle = getStrokeColor(hueOffset + (360 * Number(i)) / total);
       ctx.beginPath();
       ctx.moveTo(-xMargin, height);
-      ctx.lineTo(-xMargin, height - (height * (history[0][1][i] ?? 0)) / max);
+      ctx.lineTo(-xMargin, height - (height * (history[0][1][i] ?? 0)) / max.current);
       for (const [timestamp, values] of history) {
         const x = xFromTimestamp(timestamp);
-        const y = height - (height * (values[i] ?? 0)) / max;
+        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);
+      ctx.lineTo(width + xMargin, height - (height * (history[0][1][i] ?? 0)) / max.current);
       ctx.lineTo(width + xMargin, height);
       ctx.stroke();
       ctx.fill();
@@ -131,7 +144,7 @@ export const CanvasChart = ({ total, hueOffset = 0, domain, data, formatOptions
 
   return (
     <div className='chart'>
-      <YAxis max={max} formatOptions={formatOptions} />
+      <YAxis max={targetMax} formatOptions={formatOptions} />
 
       <div className='canvas-wrapper'>
         <CartesianGrid />

src/client/components/chart-cards/cpu.tsx

@@ -22,6 +22,7 @@ export const Cpu = () => {
           </h3>
         }
         domain={[0, 100]}
+        hardDomain
         formatOptions={{ prefix: false, units: '%' }}
         data={dynamicData.cpu_usage}
         total={total_cpus}

src/client/components/chart-cards/memory.tsx

@@ -31,6 +31,7 @@ export const Memory = () => {
         labels: ['Memory', 'Swap'],
       }}
       domain={[0, Math.max(staticData.total_memory, staticData.total_swap)]}
+      hardDomain
       formatOptions={formatOptions}
       data={[dynamicData.mem_usage, dynamicData.swap_usage]}
       total={2}

src/client/components/chart-cards/temps.tsx

@@ -15,7 +15,7 @@ export const Temps = () => {
       legend={{
         labels: staticData.components,
       }}
-      domain={[0, 100]} //(max: number) => Math.max(100, Math.ceil(1.25 * max))]}
+      domain={[0, 100]}
       formatOptions={{ si: true, prefix: false, units: 'ºC' }}
       data={dynamicData.temps}
       total={staticData.components.length}