diff --git a/beszel/site/src/components/charts/disk-chart.tsx b/beszel/site/src/components/charts/disk-chart.tsx index 7b995e0..3b234d0 100644 --- a/beszel/site/src/components/charts/disk-chart.tsx +++ b/beszel/site/src/components/charts/disk-chart.tsx @@ -1,8 +1,17 @@ import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts' import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart' -import { useYAxisWidth, chartTimeData, cn, formatShortDate, twoDecimalString } from '@/lib/utils' -import { useMemo } from 'react' +import { + useYAxisWidth, + chartTimeData, + cn, + formatShortDate, + twoDecimalString, + toFixedFloat, + getSizeVal, + getSizeUnit, +} from '@/lib/utils' +// import { useMemo } from 'react' // import Spinner from '../spinner' import { useStore } from '@nanostores/react' import { $chartTime } from '@/lib/stores' @@ -11,17 +20,17 @@ import { SystemStatsRecord } from '@/types' export default function DiskChart({ ticks, systemData, + dataKey, + diskSize, }: { ticks: number[] systemData: SystemStatsRecord[] + dataKey: string + diskSize: number }) { const chartTime = useStore($chartTime) const { yAxisWidth, updateYAxisWidth } = useYAxisWidth() - const diskSize = useMemo(() => { - return Math.round(systemData.at(-1)?.stats.d ?? NaN) - }, [systemData]) - return (
{/* {!yAxisSet && } */} @@ -51,8 +60,8 @@ export default function DiskChart({ tickLine={false} axisLine={false} tickFormatter={(value) => -updateYAxisWidth(toFixedFloat(getSizeVal(value), 2) + getSizeUnit(value)) -} + updateYAxisWidth(toFixedFloat(getSizeVal(value), 2) + getSizeUnit(value)) + } /> { - const size = systemData.at(-1)?.stats.efs?.[fs].d ?? 0 - return size > 10 ? Math.round(size) : size - }, [systemData]) - - return ( -
- - - - updateYAxisWidth(value + ' GB')} - /> - - formatShortDate(data[0].payload.created)} - contentFormatter={(item) => twoDecimalString(item.value) + ' GB'} - indicator="line" - /> - } - /> - - - -
- ) -} diff --git a/beszel/site/src/components/routes/system.tsx b/beszel/site/src/components/routes/system.tsx index c70264d..345f4e1 100644 --- a/beszel/site/src/components/routes/system.tsx +++ b/beszel/site/src/components/routes/system.tsx @@ -38,7 +38,6 @@ const BandwidthChart = lazy(() => import('../charts/bandwidth-chart')) const ContainerNetChart = lazy(() => import('../charts/container-net-chart')) const SwapChart = lazy(() => import('../charts/swap-chart')) const TemperatureChart = lazy(() => import('../charts/temperature-chart')) -const ExFsDiskChart = lazy(() => import('../charts/extra-fs-disk-chart')) const ExFsDiskIoChart = lazy(() => import('../charts/extra-fs-disk-io-chart')) export default function SystemDetail({ name }: { name: string }) { @@ -377,7 +376,12 @@ export default function SystemDetail({ name }: { name: string }) { )} - + @@ -427,7 +431,12 @@ export default function SystemDetail({ name }: { name: string }) { title={`${extraFsName} Usage`} description={`Disk usage of ${extraFsName}`} > - +