update cpu / container axis datamax calculations

internal/site/src/components/charts/area-chart.tsx

@@ -11,6 +11,7 @@ import {
 import { chartMargin, cn, formatShortDate } from "@/lib/utils"
 import type { ChartData, SystemStatsRecord } from "@/types"
 import { useYAxisWidth } from "./hooks"
+import { AxisDomain } from "recharts/types/util/types"
 
 export type DataPoint = {
 	label: string
@@ -41,7 +42,7 @@ export default function AreaChartDefault({
 		tickFormatter: (value: number, index: number) => string
 		contentFormatter: ({ value, payload }: { value: number; payload: SystemStatsRecord }) => string
 		dataPoints?: DataPoint[]
-		domain?: [number, number]
+		domain?: AxisDomain
 		legend?: boolean
 		showTotal?: boolean
 		itemSorter?: (a: any, b: any) => number

internal/site/src/components/charts/container-chart.tsx

@@ -2,7 +2,7 @@
 import { useStore } from "@nanostores/react"
 import { memo, useMemo } from "react"
 import { Area, AreaChart, CartesianGrid, YAxis } from "recharts"
-import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent, xAxis } from "@/components/ui/chart"
+import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent, pinnedAxisDomain, xAxis } from "@/components/ui/chart"
 import { ChartType, Unit } from "@/lib/enums"
 import { $containerFilter, $userSettings } from "@/lib/stores"
 import { chartMargin, cn, decimalString, formatBytes, formatShortDate, toFixedFloat } from "@/lib/utils"
@@ -124,7 +124,7 @@ export default memo(function ContainerChart({
 					<CartesianGrid vertical={false} />
 					<YAxis
 						direction="ltr"
-						domain={[0, 'dataMax']}
+						domain={pinnedAxisDomain()}
 						orientation={chartData.orientation}
 						className="tracking-tighter"
 						width={yAxisWidth}

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

@@ -74,6 +74,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/
 import NetworkSheet from "./system/network-sheet"
 import CpuCoresSheet from "./system/cpu-sheet"
 import LineChartDefault from "../charts/line-chart"
+import { pinnedAxisDomain } from "../ui/chart"
 
 type ChartTimeData = {
 	time: number
@@ -603,6 +604,7 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 							]}
 							tickFormatter={(val) => `${toFixedFloat(val, 2)}%`}
 							contentFormatter={({ value }) => `${decimalString(value)}%`}
+							domain={pinnedAxisDomain()}
 						/>
 					</ChartCard>
 

internal/site/src/components/ui/chart.tsx

@@ -5,6 +5,7 @@ import * as RechartsPrimitive from "recharts"
 import { chartTimeData, cn } from "@/lib/utils"
 import type { ChartData } from "@/types"
 import { Separator } from "./separator"
+import { AxisDomain } from "recharts/types/util/types"
 
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: "", dark: ".dark" } as const
@@ -454,3 +455,15 @@ export {
 	xAxis,
 	// ChartStyle,
 }
+
+export function pinnedAxisDomain(): AxisDomain {
+	return [0, (dataMax: number) => {
+		if (dataMax > 10) {
+			return Math.round(dataMax)
+		}
+		if (dataMax > 1) {
+			return Math.round(dataMax / 0.1) * 0.1
+		}
+		return dataMax
+	}]
+}