From fdf0ce22dc980206904dcf331cf59e6c72f42fe5 Mon Sep 17 00:00:00 2001 From: Henry Dollman Date: Mon, 5 Aug 2024 19:17:54 -0400 Subject: [PATCH] improve chart scaling + add space below docker net chart for tooltip --- .../src/components/charts/bandwidth-chart.tsx | 17 ++++++------ .../components/charts/container-mem-chart.tsx | 13 +++++---- .../components/charts/container-net-chart.tsx | 27 +++++++++---------- .../src/components/charts/disk-io-chart.tsx | 17 ++++++------ hub/site/src/components/routes/system.tsx | 24 ++++++++++++----- hub/site/src/lib/utils.ts | 8 ++++-- 6 files changed, 61 insertions(+), 45 deletions(-) diff --git a/hub/site/src/components/charts/bandwidth-chart.tsx b/hub/site/src/components/charts/bandwidth-chart.tsx index 9eda231..2eca2f2 100644 --- a/hub/site/src/components/charts/bandwidth-chart.tsx +++ b/hub/site/src/components/charts/bandwidth-chart.tsx @@ -1,7 +1,13 @@ import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts' import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart' -import { chartTimeData, cn, formatShortDate, useYaxisWidth } from '@/lib/utils' +import { + chartTimeData, + cn, + formatShortDate, + toFixedWithoutTrailingZeros, + useYaxisWidth, +} from '@/lib/utils' // import Spinner from '../spinner' import { useStore } from '@nanostores/react' import { $chartTime } from '@/lib/stores' @@ -44,13 +50,8 @@ export default function BandwidthChart({ (max <= 0.4 ? 0.4 : Math.ceil(max))]} - tickFormatter={(value) => { - if (value >= 100) { - return value.toFixed(0) - } - return value.toFixed((value * 100) % 1 === 0 ? 1 : 2) - }} + // domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]} + tickFormatter={(value) => toFixedWithoutTrailingZeros(value, 2)} tickLine={false} axisLine={false} unit={' MB/s'} diff --git a/hub/site/src/components/charts/container-mem-chart.tsx b/hub/site/src/components/charts/container-mem-chart.tsx index 623d746..d0932ed 100644 --- a/hub/site/src/components/charts/container-mem-chart.tsx +++ b/hub/site/src/components/charts/container-mem-chart.tsx @@ -6,7 +6,13 @@ import { ChartTooltipContent, } from '@/components/ui/chart' import { useMemo, useRef } from 'react' -import { chartTimeData, cn, formatShortDate, useYaxisWidth } from '@/lib/utils' +import { + chartTimeData, + cn, + formatShortDate, + toFixedWithoutTrailingZeros, + useYaxisWidth, +} from '@/lib/utils' // import Spinner from '../spinner' import { useStore } from '@nanostores/react' import { $chartTime } from '@/lib/stores' @@ -87,10 +93,7 @@ export default function ContainerMemChart({ axisLine={false} unit={' GB'} width={yAxisWidth} - tickFormatter={(value) => { - value = value / 1024 - return value.toFixed((value * 100) % 1 === 0 ? 1 : 2) - }} + tickFormatter={(value) => toFixedWithoutTrailingZeros(value / 1024, 2)} /> (x % 1 === 0 ? x : x.toFixed(1))} + unit={' MB/s'} + tickFormatter={(value) => toFixedWithoutTrailingZeros(value, 2)} /> { - return ( - - {formatShortDate(data[0].payload.time)} -
- Total MB received / transmitted - - ) - }} + labelFormatter={(_, data) => formatShortDate(data[0].payload.time)} // @ts-ignore - itemSorter={(a, b) => b.value - a.value} content={ - {received.toLocaleString()} MB + {received.toLocaleString()} MB/s rx - {sent.toLocaleString()} MB tx + {sent.toLocaleString()} MB/s tx ) } catch (e) { diff --git a/hub/site/src/components/charts/disk-io-chart.tsx b/hub/site/src/components/charts/disk-io-chart.tsx index d13bb25..fba4bfc 100644 --- a/hub/site/src/components/charts/disk-io-chart.tsx +++ b/hub/site/src/components/charts/disk-io-chart.tsx @@ -1,7 +1,13 @@ import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts' import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart' -import { chartTimeData, cn, formatShortDate, useYaxisWidth } from '@/lib/utils' +import { + chartTimeData, + cn, + formatShortDate, + toFixedWithoutTrailingZeros, + useYaxisWidth, +} from '@/lib/utils' // import Spinner from '../spinner' import { useStore } from '@nanostores/react' import { $chartTime } from '@/lib/stores' @@ -48,13 +54,8 @@ export default function DiskIoChart({ (max <= 0.4 ? 0.4 : Math.ceil(max))]} - tickFormatter={(value) => { - if (value >= 100) { - return value.toFixed(0) - } - return value.toFixed((value * 100) % 1 === 0 ? 1 : 2) - }} + // domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]} + tickFormatter={(value) => toFixedWithoutTrailingZeros(value, 2)} tickLine={false} axisLine={false} unit={' MB/s'} diff --git a/hub/site/src/components/routes/system.tsx b/hub/site/src/components/routes/system.tsx index 36e4a4c..8a59077 100644 --- a/hub/site/src/components/routes/system.tsx +++ b/hub/site/src/components/routes/system.tsx @@ -246,13 +246,23 @@ export default function ServerDetail({ name }: { name: string }) { - {hasDockerStats && ( - - - + {hasDockerStats && dockerNetChartData.length > 0 && ( + <> + + + + {/* add space for tooltip if more than 12 containers */} + {Object.keys(dockerNetChartData[0]).length > 12 && ( +
+ )} + )}
) diff --git a/hub/site/src/lib/utils.ts b/hub/site/src/lib/utils.ts index 6187cb4..f7b87dd 100644 --- a/hub/site/src/lib/utils.ts +++ b/hub/site/src/lib/utils.ts @@ -191,10 +191,10 @@ export function useYaxisWidth(chartRef: React.RefObject) { const yAxisElement = chartRef?.current?.querySelector('.yAxis') if (yAxisElement) { // console.log('yAxisElement', yAxisElement) - setYAxisWidth(yAxisElement.getBoundingClientRect().width + 22) clearInterval(interval) + setYAxisWidth(yAxisElement.getBoundingClientRect().width + 22) } - }, 0) + }, 16) return () => clearInterval(interval) }, []) return yAxisWidth @@ -217,3 +217,7 @@ export function useClampedIsInViewport(options: HookOptions): [boolean | null, C return [wasInViewportAtleastOnce, wrappedTargetRef] } + +export function toFixedWithoutTrailingZeros(num: number, digits: number) { + return parseFloat(num.toFixed(digits)).toString() +}