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 (
{title}
@@ -32,7 +37,7 @@ export const ChartCard = ({ data, domain, legend, hueOffset = 0, title, subtitle
data={data}
margin={{
bottom: -16,
- left: 40,
+ left: estimateTickWidth,
}}
>
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;