From 6ddd10e6430ca371b2837b9df22f1078404482c8 Mon Sep 17 00:00:00 2001 From: rdob Date: Mon, 20 Jul 2026 16:59:14 +0200 Subject: [PATCH 1/2] Load chart rotated, values rounded --- src/components/charts/Load.tsx | 49 ++++++++++++---------------------- 1 file changed, 17 insertions(+), 32 deletions(-) diff --git a/src/components/charts/Load.tsx b/src/components/charts/Load.tsx index 27328a56..8f4f8693 100644 --- a/src/components/charts/Load.tsx +++ b/src/components/charts/Load.tsx @@ -1,14 +1,11 @@ -// SPDX-License-Identifier: AGPL-3.0-or-later +// SPDX-License-Identifier: AGPL-3.0-or-later // SPDX-FileCopyrightText: 2020-2026 grommunio GmbH - import React, { useCallback } from 'react'; import { makeStyles } from 'tss-react/mui'; import { Paper, Theme, Typography, useTheme } from '@mui/material'; import Chart from "react-apexcharts"; import { useTranslation } from 'react-i18next'; import { useAppSelector } from '../../store'; - - const useStyles = makeStyles()((theme: Theme) => ({ root: { flex: 1, @@ -22,20 +19,20 @@ const useStyles = makeStyles()((theme: Theme) => ({ display: 'flex', }, })); - - function Load() { const { classes } = useStyles(); const { t } = useTranslation(); const { load } = useAppSelector(state => state.dashboard); const theme = useTheme(); - - const formatYAxis = useCallback((value: number) => { - if(value === 0) return '0%'; - if(value < 0.1) return value.toFixed(2) + '%'; + const formatValue = useCallback((value: number) => { return value.toFixed(1) + '%'; }, []); - + const formatAxisLabel = useCallback((value: string) => { + return formatValue(Number(value)); + }, [formatValue]); + const formatTotalLabel = useCallback((value?: string) => { + return formatValue(Number(value)); + }, [formatValue]); return (
@@ -52,18 +49,18 @@ function Load() { plotOptions: { bar: { borderRadius: 8, - columnWidth: '60%', + horizontal: true, + barHeight: '60%', distributed: true, dataLabels: { total: { - formatter: (v) => v + "%", + formatter: formatTotalLabel, }, - orientation: "vertical", }, } }, dataLabels: { - formatter: (v) => v + "%", + formatter: formatValue, }, legend: { labels: { @@ -72,34 +69,24 @@ function Load() { }, xaxis: { labels: { - rotate: 0, style: { colors: theme.palette.text.primary, }, + formatter: formatAxisLabel, }, categories: [t("1 Min"), t("5 Mins"), t("15 Mins")], + tickAmount: 4, + max: 100, + min: 0, }, tooltip: { y: { - formatter: function(value) { - return value + '%'; - }, + formatter: formatValue, title: { formatter: () => "", } }, }, - yaxis: { - labels: { - style: { - colors: theme.palette.text.primary, - }, - formatter: formatYAxis, - }, - tickAmount: 4, - max: 100, - min: 0, - }, colors: ['#2E93fA', '#546E7A', '#E91E63', '#FF9800', '#8e9eab', '#66DA26'], }} series={[{ @@ -112,6 +99,4 @@ function Load() { ); } - - export default Load; From 1be3dcf63b108827662b3373459445aff8d025a5 Mon Sep 17 00:00:00 2001 From: rdob Date: Tue, 21 Jul 2026 17:48:09 +0200 Subject: [PATCH 2/2] Disk an Load Chart optimized --- src/components/charts/Disks.tsx | 31 +++++++++++++------------------ src/components/charts/Load.tsx | 26 +++++++++++++++++++------- 2 files changed, 32 insertions(+), 25 deletions(-) diff --git a/src/components/charts/Disks.tsx b/src/components/charts/Disks.tsx index 117dc4bf..11aeb58f 100644 --- a/src/components/charts/Disks.tsx +++ b/src/components/charts/Disks.tsx @@ -23,6 +23,9 @@ function Disks({ disks }: DisksProps) { const theme = useTheme(); const formatYAxis = (value: number) => { + return value.toString(); + }; + const formatXAxis = (value: string) => { return value + '%'; }; @@ -40,12 +43,10 @@ function Disks({ disks }: DisksProps) { }, plotOptions: { bar: { - borderRadius: 8, - columnWidth: '60%', + borderRadius: 4, + horizontal: true, + barHeight: '60%', distributed: true, - dataLabels: { - orientation: "vertical", - }, }, }, dataLabels: { @@ -64,30 +65,22 @@ function Disks({ disks }: DisksProps) { colors: theme.palette.text.primary, }, }, - tickAmount: 4, - max: 100, - min: 0, }, xaxis: { axisBorder: { show: false }, - axisTicks: { - show: false - }, labels: { rotate: 0, - hideOverlappingLabels: true, - trim: true, style: { colors: theme.palette.text.primary, - fontSize: '10px', - fontFamily: 'Helvetica, Arial, sans-serif', - fontWeight: 400, - cssClass: 'apexcharts-xaxis-label', }, + formatter: formatXAxis, }, - categories: disks.map(d => d.mountpoint) + categories: disks.map(d => d.mountpoint), + tickAmount: 4, + max: 100, + min: 0, }, tooltip: { y: { @@ -107,6 +100,8 @@ function Disks({ disks }: DisksProps) { }]} type="bar" height={200} + width="95%" + align="right" />
); diff --git a/src/components/charts/Load.tsx b/src/components/charts/Load.tsx index 8f4f8693..88789f9e 100644 --- a/src/components/charts/Load.tsx +++ b/src/components/charts/Load.tsx @@ -27,8 +27,10 @@ function Load() { const formatValue = useCallback((value: number) => { return value.toFixed(1) + '%'; }, []); - const formatAxisLabel = useCallback((value: string) => { - return formatValue(Number(value)); + + const formatXAxis = useCallback((value: string) => { + return value + '%'; + //formatValue(Number(value)); }, [formatValue]); const formatTotalLabel = useCallback((value?: string) => { return formatValue(Number(value)); @@ -48,7 +50,7 @@ function Load() { }, plotOptions: { bar: { - borderRadius: 8, + borderRadius: 4, horizontal: true, barHeight: '60%', distributed: true, @@ -63,22 +65,30 @@ function Load() { formatter: formatValue, }, legend: { - labels: { - colors: theme.palette.text.primary, - }, + show: false, }, xaxis: { + axisBorder: { + show: false + }, labels: { style: { colors: theme.palette.text.primary, }, - formatter: formatAxisLabel, + formatter: formatXAxis, }, categories: [t("1 Min"), t("5 Mins"), t("15 Mins")], tickAmount: 4, max: 100, min: 0, }, + yaxis: { + labels: { + style: { + colors: theme.palette.text.primary, + }, + }, + }, tooltip: { y: { formatter: formatValue, @@ -94,6 +104,8 @@ function Load() { }]} type="bar" height={200} + width="95%" + align="right" />