diff --git a/src/client/components/chart-cards/common/card.tsx b/src/client/components/chart-cards/common/card.tsx index bb649b0..34c5f84 100644 --- a/src/client/components/chart-cards/common/card.tsx +++ b/src/client/components/chart-cards/common/card.tsx @@ -9,12 +9,13 @@ type Props = { legend?: Omit & Partial>; 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 (

{title}

@@ -23,7 +24,7 @@ export const ChartCard = ({ data, domain, legend, hueOffset = 0, title, subtitle {legend && } - +
); }; diff --git a/src/client/components/chart-cards/common/chart.tsx b/src/client/components/chart-cards/common/chart.tsx index 633d680..aa11fc1 100644 --- a/src/client/components/chart-cards/common/chart.tsx +++ b/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 = () => ( ); -export const CanvasChart = ({ total, hueOffset = 0, domain, data, formatOptions }: Props) => { +export const CanvasChart = ({ total, hueOffset = 0, domain, hardDomain, data, formatOptions }: Props) => { const canvasRef = useRef(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 (
- +
diff --git a/src/client/components/chart-cards/cpu.tsx b/src/client/components/chart-cards/cpu.tsx index 5566338..df245db 100644 --- a/src/client/components/chart-cards/cpu.tsx +++ b/src/client/components/chart-cards/cpu.tsx @@ -22,6 +22,7 @@ export const Cpu = () => { } domain={[0, 100]} + hardDomain formatOptions={{ prefix: false, units: '%' }} data={dynamicData.cpu_usage} total={total_cpus} diff --git a/src/client/components/chart-cards/memory.tsx b/src/client/components/chart-cards/memory.tsx index 78aea40..ed3e48b 100644 --- a/src/client/components/chart-cards/memory.tsx +++ b/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} diff --git a/src/client/components/chart-cards/temps.tsx b/src/client/components/chart-cards/temps.tsx index b963398..29620c8 100644 --- a/src/client/components/chart-cards/temps.tsx +++ b/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}