From 4c2cb0ecec6b0c8dbee64ee292ebee2b761764a3 Mon Sep 17 00:00:00 2001
From: luisdralves <luisalves@untile.pt>
Date: Fri, 3 May 2024 00:52:31 +0100
Subject: [PATCH] Add chart tick width estimation

---
 src/client/App.css                           | 2 +-
 src/client/components/chart-cards/index.tsx  | 9 +++++++--
 src/client/components/chart-cards/memory.tsx | 1 +
 src/client/components/chart-cards/temps.tsx  | 2 +-
 src/client/utils/format.ts                   | 2 +-
 5 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/client/App.css b/src/client/App.css
index e0a2584..fd7ae39 100644
--- a/src/client/App.css
+++ b/src/client/App.css
@@ -23,4 +23,4 @@
 .chart-card {
   display: grid;
   grid-template-rows: repeat(2, max-content) 1fr;
-}
\ No newline at end of file
+}
diff --git a/src/client/components/chart-cards/index.tsx b/src/client/components/chart-cards/index.tsx
index 632eeea..7d8b92d 100644
--- a/src/client/components/chart-cards/index.tsx
+++ b/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)' />
diff --git a/src/client/components/chart-cards/memory.tsx b/src/client/components/chart-cards/memory.tsx
index 87c0252..3662a56 100644
--- a/src/client/components/chart-cards/memory.tsx
+++ b/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}
diff --git a/src/client/components/chart-cards/temps.tsx b/src/client/components/chart-cards/temps.tsx
index 3c40f3f..65d161f 100644
--- a/src/client/components/chart-cards/temps.tsx
+++ b/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}
     />
diff --git a/src/client/utils/format.ts b/src/client/utils/format.ts
index 9076487..e91b460 100644
--- a/src/client/utils/format.ts
+++ b/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;