Add chart tick width estimation

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

@@ -1,7 +1,7 @@
 import { Legend, type LegendProps } from '@/components/legend';
 import { getFillColor, getStrokeColor } from '@/utils/colors';
 import { type FormatOptions, formatValue } from '@/utils/format';
-import type { ReactNode } from 'react';
+import { type ReactNode, useMemo } from 'react';
 import { Area, AreaChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis } from 'recharts';
 import type { AxisDomain } from 'recharts/types/util/types';
 
@@ -17,6 +17,11 @@ type Props = {
 };
 
 export const ChartCard = ({ data, domain, legend, hueOffset = 0, title, subtitle, formatOptions, total }: Props) => {
+  const estimateTickWidth = useMemo(
+    () => ((formatOptions?.units?.length ?? 0) + (formatOptions?.prefix === false ? 0 : 2)) * 8,
+    [formatOptions],
+  );
+
   return (
     <div className='chart-card'>
       <h2>{title}</h2>
@@ -32,7 +37,7 @@ export const ChartCard = ({ data, domain, legend, hueOffset = 0, title, subtitle
           data={data}
           margin={{
             bottom: -16,
-            left: 40,
+            left: estimateTickWidth,
           }}
         >
           <CartesianGrid vertical={false} stroke='var(--color-neutral1)' />

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

@@ -29,6 +29,7 @@ export const Memory = () => {
         values: [staticData.total_memory, staticData.total_swap],
         labels: ['Total memory', 'Total swap'],
       }}
+      domain={[0, Math.max(staticData.total_memory, staticData.total_swap)]}
       formatOptions={{ units: 'B' }}
       data={history}
       total={2}

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

@@ -31,7 +31,7 @@ export const Temps = () => {
         values: dynamicData.temps,
         labels: staticData.components,
       }}
-      formatOptions={{ units: 'ºC' }}
+      formatOptions={{ si: true, prefix: false, units: 'ºC' }}
       data={history}
       total={total_sensors}
     />

src/client/utils/format.ts

@@ -8,7 +8,7 @@ export const formatValue = (value: number, { decimals = 1, prefix = true, si, un
   }
 
   if (!prefix) {
-    return `${value}\u2009${units}`;
+    return `${Number(value.toFixed(Math.max(0, decimals)))}\u2009${units}`;
   }
 
   const k = si ? 1000 : 1024;