improve chart scaling + add space below docker net chart for tooltip

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({
 					<YAxis
 						className="tracking-tighter"
 						width={yAxisWidth}
-						domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]}
+						// domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]}
-						tickFormatter={(value) => {
+						tickFormatter={(value) => toFixedWithoutTrailingZeros(value, 2)}
-							if (value >= 100) {
-								return value.toFixed(0)
-							}
-							return value.toFixed((value * 100) % 1 === 0 ? 1 : 2)
-						}}
 						tickLine={false}
 						axisLine={false}
 						unit={' MB/s'}

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) => {
+						tickFormatter={(value) => toFixedWithoutTrailingZeros(value / 1024, 2)}
-							value = value / 1024
-							return value.toFixed((value * 100) % 1 === 0 ? 1 : 2)
-						}}
 					/>
 					<XAxis
 						dataKey="time"

hub/site/src/components/charts/container-net-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'
@@ -86,8 +92,8 @@ export default function ContainerCpuChart({
 						width={yAxisWidth}
 						tickLine={false}
 						axisLine={false}
-						unit={' MB'}
+						unit={' MB/s'}
-						tickFormatter={(x) => (x % 1 === 0 ? x : x.toFixed(1))}
+						tickFormatter={(value) => toFixedWithoutTrailingZeros(value, 2)}
 					/>
 					<XAxis
 						dataKey="time"
@@ -104,17 +110,8 @@ export default function ContainerCpuChart({
 						// cursor={false}
 						animationEasing="ease-out"
 						animationDuration={150}
-						labelFormatter={(_, data) => {
+						labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
-							return (
-								<span>
-									{formatShortDate(data[0].payload.time)}
-									<br />
-									<small className="opacity-70">Total MB received / transmitted</small>
-								</span>
-							)
-						}}
 						// @ts-ignore
-
 						itemSorter={(a, b) => b.value - a.value}
 						content={
 							<ChartTooltipContent
@@ -125,10 +122,10 @@ export default function ContainerCpuChart({
 										const received = item?.payload?.[key][1] ?? 0
 										return (
 											<span className="flex">
-												{received.toLocaleString()} MB
+												{received.toLocaleString()} MB/s
 												<span className="opacity-70 ml-0.5"> rx </span>
 												<Separator orientation="vertical" className="h-3 mx-1.5 bg-primary/40" />
-												{sent.toLocaleString()} MB<span className="opacity-70 ml-0.5"> tx</span>
+												{sent.toLocaleString()} MB/s<span className="opacity-70 ml-0.5"> tx</span>
 											</span>
 										)
 									} catch (e) {

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({
 					<YAxis
 						className="tracking-tighter"
 						width={yAxisWidth}
-						domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]}
+						// domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]}
-						tickFormatter={(value) => {
+						tickFormatter={(value) => toFixedWithoutTrailingZeros(value, 2)}
-							if (value >= 100) {
-								return value.toFixed(0)
-							}
-							return value.toFixed((value * 100) % 1 === 0 ? 1 : 2)
-						}}
 						tickLine={false}
 						axisLine={false}
 						unit={' MB/s'}

hub/site/src/components/routes/system.tsx

@@ -246,13 +246,23 @@ export default function ServerDetail({ name }: { name: string }) {
 				<BandwidthChart ticks={ticks} systemData={systemStats} />
 			</ChartCard>
 
-			{hasDockerStats && (
+			{hasDockerStats && dockerNetChartData.length > 0 && (
-				<ChartCard
+				<>
-					title="Docker Network I/O"
+					<ChartCard
-					description="Includes traffic between internal services"
+						title="Docker Network I/O"
-				>
+						description="Includes traffic between internal services"
-					<ContainerNetChart chartData={dockerNetChartData} ticks={ticks} />
+					>
-				</ChartCard>
+						<ContainerNetChart chartData={dockerNetChartData} ticks={ticks} />
+					</ChartCard>
+					{/* add space for tooltip if more than 12 containers */}
+					{Object.keys(dockerNetChartData[0]).length > 12 && (
+						<div
+							style={{
+								height: (Object.keys(dockerNetChartData[0]).length - 13) * 18,
+							}}
+						/>
+					)}
+				</>
 			)}
 		</div>
 	)

hub/site/src/lib/utils.ts

@@ -191,10 +191,10 @@ export function useYaxisWidth(chartRef: React.RefObject<HTMLDivElement>) {
 			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()
+}