chart tooltip sorting

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

@@ -11,13 +11,7 @@ import { useMemo } from 'react'
 import { formatShortDate, formatShortTime } from '@/lib/utils'
 import Spinner from '../spinner'
 
-export default function ({
+export default function ({ chartData }: { chartData: Record<string, number | string>[] }) {
-	chartData,
-	max,
-}: {
-	chartData: Record<string, number | string>[]
-	max: number
-}) {
 	const chartConfig = useMemo(() => {
 		let config = {} as Record<
 			string,
@@ -65,8 +59,7 @@ export default function ({
 				margin={{
 					top: 10,
 				}}
-
+				reverseStackOrder={true}
-				// reverseStackOrder={true}
 			>
 				<CartesianGrid vertical={false} />
 				<YAxis
@@ -88,10 +81,8 @@ export default function ({
 				<ChartTooltip
 					cursor={false}
 					labelFormatter={formatShortDate}
-					// itemSorter={(item) => {
+					// @ts-ignore
-					// 	console.log('itemSorter', item)
+					itemSorter={(a, b) => b.value - a.value}
-					// 	return -item.value
-					// }}
 					content={<ChartTooltipContent unit="%" indicator="line" />}
 				/>
 				{Object.keys(chartConfig).map((key) => (
@@ -100,7 +91,7 @@ export default function ({
 						// isAnimationActive={false}
 						animateNewValues={false}
 						dataKey={key}
-						type="bump"
+						type="monotone"
 						fill={chartConfig[key].color}
 						fillOpacity={0.4}
 						stroke={chartConfig[key].color}

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

@@ -11,14 +11,7 @@ import { useMemo } from 'react'
 import { formatShortDate, formatShortTime } from '@/lib/utils'
 import Spinner from '../spinner'
 
-export default function ({
+export default function ({ chartData }: { chartData: Record<string, number | string>[] }) {
-	chartData,
-	max,
-}: {
-	chartData: Record<string, number | string>[]
-	max: number
-}) {
-	console.log('max', max)
 	const chartConfig = useMemo(() => {
 		let config = {} as Record<
 			string,
@@ -63,6 +56,7 @@ export default function ({
 			<AreaChart
 				accessibilityLayer
 				data={chartData}
+				reverseStackOrder={true}
 				margin={{
 					top: 10,
 				}}
@@ -71,12 +65,16 @@ export default function ({
 			>
 				<CartesianGrid vertical={false} />
 				<YAxis
-					domain={[0, max]}
+					domain={[0, (max: number) => Math.ceil(max)]}
-					tickCount={9}
+					// tickCount={9}
 					allowDecimals={false}
 					tickLine={false}
 					axisLine={false}
-					tickFormatter={(v) => `${Math.ceil(v / 1024)} GiB`}
+					unit={' GiB'}
+					tickFormatter={(x) => {
+						x = x / 1024
+						return x % 1 === 0 ? x : x.toFixed(1)
+					}}
 				/>
 				<XAxis
 					dataKey="time"
@@ -89,10 +87,8 @@ export default function ({
 				<ChartTooltip
 					cursor={false}
 					labelFormatter={formatShortDate}
-					// itemSorter={(item) => {
+					// @ts-ignore
-					// 	console.log('itemSorter', item)
+					itemSorter={(a, b) => b.value - a.value}
-					// 	return -item.value
-					// }}
 					content={<ChartTooltipContent unit=" MiB" indicator="line" />}
 				/>
 				{Object.keys(chartConfig).map((key) => (
@@ -101,7 +97,7 @@ export default function ({
 						// isAnimationActive={false}
 						animateNewValues={false}
 						dataKey={key}
-						type="natural"
+						type="monotone"
 						fill={chartConfig[key].color}
 						fillOpacity={0.4}
 						stroke={chartConfig[key].color}

site/src/components/charts/cpu-chart.tsx

@@ -19,13 +19,7 @@ const chartConfig = {
 	},
 } satisfies ChartConfig
 
-export default function ({
+export default function ({ chartData }: { chartData: { time: string; cpu: number }[] }) {
-	chartData,
-	max,
-}: {
-	chartData: { time: string; cpu: number }[]
-	max: number
-}) {
 	if (!chartData?.length) {
 		return <Spinner />
 	}
@@ -35,7 +29,7 @@ export default function ({
 			<AreaChart accessibilityLayer data={chartData} margin={{ top: 10 }}>
 				<CartesianGrid vertical={false} />
 				<YAxis
-					domain={[0, max]}
+					domain={[0, (max: number) => Math.ceil(max)]}
 					width={47}
 					// tickCount={5}
 					tickLine={false}

site/src/components/charts/disk-chart.tsx

@@ -82,7 +82,7 @@ export default function ({
 				/>
 				<Area
 					dataKey="diskUsed"
-					type="bump"
+					type="monotone"
 					fill="var(--color-diskUsed)"
 					fillOpacity={0.4}
 					stroke="var(--color-diskUsed)"

site/src/components/charts/mem-chart.tsx

@@ -61,12 +61,12 @@ export default function ({
 				<ChartTooltip
 					cursor={false}
 					content={
-						<ChartTooltipContent unit=" GiB" labelFormatter={formatShortDate} indicator="line" />
+						<ChartTooltipContent unit="GiB" labelFormatter={formatShortDate} indicator="line" />
 					}
 				/>
 				<Area
 					dataKey="memUsed"
-					type="bump"
+					type="monotone"
 					fill="var(--color-memUsed)"
 					fillOpacity={0.4}
 					stroke="var(--color-memUsed)"

site/src/components/routes/server.tsx

@@ -31,14 +31,12 @@ export default function ServerDetail({ name }: { name: string }) {
 	const [containers, setContainers] = useState([] as ContainerStatsRecord[])
 
 	const [serverStats, setServerStats] = useState([] as SystemStatsRecord[])
-	const [cpuChartData, setCpuChartData] = useState(
+	const [cpuChartData, setCpuChartData] = useState([] as { time: string; cpu: number }[])
-		{} as { max: number; data: { time: string; cpu: number }[] }
-	)
 	const [memChartData, setMemChartData] = useState(
-		{} as { time: string; mem: number; memUsed: number }[]
+		[] as { time: string; mem: number; memUsed: number }[]
 	)
 	const [diskChartData, setDiskChartData] = useState(
-		{} as { time: string; disk: number; diskUsed: number }[]
+		[] as { time: string; disk: number; diskUsed: number }[]
 	)
 	const [containerCpuChartData, setContainerCpuChartData] = useState(
 		[] as Record<string, number | string>[]
@@ -51,7 +49,7 @@ export default function ServerDetail({ name }: { name: string }) {
 		document.title = name
 		return () => {
 			setContainerCpuChartData([])
-			setCpuChartData({} as { max: number; data: { time: string; cpu: number }[] })
+			setCpuChartData([])
 			setMemChartData([])
 			setDiskChartData([])
 		}
@@ -70,7 +68,7 @@ export default function ServerDetail({ name }: { name: string }) {
 				sort: '-created',
 			})
 			.then((records) => {
-				console.log('stats', records)
+				// console.log('sctats', records)
 				setServerStats(records.items)
 			})
 	}, [server])
@@ -80,35 +78,32 @@ export default function ServerDetail({ name }: { name: string }) {
 		if (!serverStats.length) {
 			return
 		}
-		let maxCpu = 0
+		// let maxCpu = 0
 		const cpuData = [] as { time: string; cpu: number }[]
 		const memData = [] as { time: string; mem: number; memUsed: number }[]
 		const diskData = [] as { time: string; disk: number; diskUsed: number }[]
 		for (let { created, stats } of serverStats) {
 			cpuData.push({ time: created, cpu: stats.c })
-			maxCpu = Math.max(maxCpu, stats.c)
+			// maxCpu = Math.max(maxCpu, stats.c)
 			memData.push({ time: created, mem: stats.m, memUsed: stats.mu })
 			diskData.push({ time: created, disk: stats.d, diskUsed: stats.du })
 		}
-		setCpuChartData({
+		setCpuChartData(cpuData.reverse())
-			max: Math.ceil(maxCpu),
-			data: cpuData.reverse(),
-		})
 		setMemChartData(memData.reverse())
 		setDiskChartData(diskData.reverse())
 	}, [serverStats])
 
 	useEffect(() => {
 		if ($servers.get().length === 0) {
-			console.log('skipping')
+			// console.log('skipping')
 			return
 		}
-		console.log('running')
+		// console.log('running')
 		const matchingServer = servers.find((s) => s.name === name) as SystemRecord
 
 		setServer(matchingServer)
 
-		console.log('matchingServer', matchingServer)
+		console.log('found server', matchingServer)
 		// pb.collection<SystemRecord>('systems')
 		// 	.getOne(serverId)
 		// 	.then((record) => {
@@ -129,7 +124,7 @@ export default function ServerDetail({ name }: { name: string }) {
 
 	// container stats for charts
 	useEffect(() => {
-		console.log('containers', containers)
+		// console.log('containers', containers)
 		const containerCpuData = [] as Record<string, number | string>[]
 		const containerMemData = [] as Record<string, number | string>[]
 
@@ -153,7 +148,7 @@ export default function ServerDetail({ name }: { name: string }) {
 				<Card className="pb-2">
 					<CardHeader>
 						<CardTitle className="flex gap-2 justify-between">
-							<span>CPU Usage</span>
+							<span>Total CPU Usage</span>
 							<CpuIcon className="opacity-70" />
 						</CardTitle>
 						<CardDescription>
@@ -162,7 +157,7 @@ export default function ServerDetail({ name }: { name: string }) {
 					</CardHeader>
 					<CardContent className={'pl-1 w-[calc(100%-2em)] h-52 relative'}>
 						<Suspense fallback={<Spinner />}>
-							<CpuChart chartData={cpuChartData.data} max={cpuChartData.max} />
+							<CpuChart chartData={cpuChartData} />
 						</Suspense>
 					</CardContent>
 				</Card>
@@ -177,15 +172,15 @@ export default function ServerDetail({ name }: { name: string }) {
 						</CardHeader>
 						<CardContent className={'pl-1 w-[calc(100%-2em)] h-52 relative'}>
 							<Suspense fallback={<Spinner />}>
-								<ContainerCpuChart chartData={containerCpuChartData} max={cpuChartData.max} />
+								<ContainerCpuChart chartData={containerCpuChartData} />
 							</Suspense>
 						</CardContent>
 					</Card>
 				)}
 				<Card className="pb-2">
 					<CardHeader>
-						<CardTitle>Memory Usage</CardTitle>
+						<CardTitle>Total Memory Usage</CardTitle>
-						<CardDescription>Precise usage at the recorded time</CardDescription>
+						<CardDescription>Precise utilization at the recorded time</CardDescription>
 					</CardHeader>
 					<CardContent className={'pl-1 w-[calc(100%-2em)] h-52 relative'}>
 						<Suspense fallback={<Spinner />}>
@@ -204,12 +199,7 @@ export default function ServerDetail({ name }: { name: string }) {
 						</CardHeader>
 						<CardContent className={'pl-1 w-[calc(100%-2em)] h-52 relative'}>
 							<Suspense fallback={<Spinner />}>
-								{server?.stats?.m && (
+								{server?.stats?.m && <ContainerMemChart chartData={containerMemChartData} />}
-									<ContainerMemChart
-										chartData={containerMemChartData}
-										max={server.stats.m * 1024}
-									/>
-								)}
 							</Suspense>
 						</CardContent>
 					</Card>

site/src/components/ui/chart.tsx

@@ -118,11 +118,21 @@ const ChartTooltipContent = React.forwardRef<
 			nameKey,
 			labelKey,
 			unit,
+			itemSorter,
 		},
 		ref
 	) => {
 		const { config } = useChart()
 
+		payload = React.useMemo(() => {
+			if (itemSorter) {
+				return payload.sort(itemSorter)
+			}
+			return payload
+		}, [itemSorter, payload])
+
+		// console.log('iiiiii', itemSorter)
+
 		const tooltipLabel = React.useMemo(() => {
 			if (hideLabel || !payload?.length) {
 				return null