site updates

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

@@ -4,19 +4,21 @@ import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
 import {
 	ChartConfig,
 	ChartContainer,
-	ChartLegend,
-	ChartLegendContent,
 	ChartTooltip,
 	ChartTooltipContent,
 } from '@/components/ui/chart'
-import { useMemo, useState } from 'react'
+import { useMemo } from 'react'
 import { formatShortDate, formatShortTime } from '@/lib/utils'
+import Spinner from '../spinner'
 
-export default function ({ chartData }: { chartData: Record<string, number | string>[] }) {
-	const [containerNames, setContainerNames] = useState([] as string[])
-
+export default function ({
+	chartData,
+	max,
+}: {
+	chartData: Record<string, number | string>[]
+	max: number
+}) {
 	const chartConfig = useMemo(() => {
-		console.log('chartData', chartData)
 		let config = {} as Record<
 			string,
 			{
@@ -24,13 +26,21 @@ export default function ({ chartData }: { chartData: Record<string, number | str
 				color: string
 			}
 		>
-		const lastRecord = chartData.at(-1)
-		// @ts-ignore
-		let allKeys = new Set(Object.keys(lastRecord))
-		allKeys.delete('time')
-		const keys = Array.from(allKeys)
-		keys.sort((a, b) => (lastRecord![b] as number) - (lastRecord![a] as number))
-		setContainerNames(keys)
+		const totalUsage = {} as Record<string, number>
+		for (let stats of chartData) {
+			for (let key in stats) {
+				if (key === 'time') {
+					continue
+				}
+				if (!(key in totalUsage)) {
+					totalUsage[key] = 0
+				}
+				// @ts-ignore
+				totalUsage[key] += stats[key]
+			}
+		}
+		let keys = Object.keys(totalUsage)
+		keys.sort((a, b) => (totalUsage[a] > totalUsage[b] ? -1 : 1))
 		const length = keys.length
 		for (let i = 0; i < length; i++) {
 			const key = keys[i]
@@ -40,12 +50,11 @@ export default function ({ chartData }: { chartData: Record<string, number | str
 				color: `hsl(${hue}, 60%, 60%)`,
 			}
 		}
-		console.log('config', config)
 		return config satisfies ChartConfig
 	}, [chartData])
 
-	if (!containerNames.length) {
-		return null
+	if (!chartData.length) {
+		return <Spinner />
 	}
 
 	return (
@@ -53,20 +62,23 @@ export default function ({ chartData }: { chartData: Record<string, number | str
 			<AreaChart
 				accessibilityLayer
 				data={chartData}
-				margin={{
-					left: 12,
-					right: 12,
-					top: 12,
-				}}
+
 				// reverseStackOrder={true}
 			>
 				<CartesianGrid vertical={false} />
-				{/* <YAxis domain={[0, 250]} tickCount={5} tickLine={false} axisLine={false} tickMargin={8} /> */}
-				<XAxis
-					dataKey="time"
+				<YAxis
+					domain={[0, max]}
+					tickCount={5}
 					tickLine={false}
 					axisLine={false}
+					tickFormatter={(v) => `${v}%`}
+				/>
+				<XAxis
+					dataKey="time"
+					tickLine={true}
+					axisLine={false}
 					tickMargin={8}
+					minTickGap={30}
 					tickFormatter={formatShortTime}
 				/>
 				<ChartTooltip
@@ -76,19 +88,13 @@ export default function ({ chartData }: { chartData: Record<string, number | str
 					// 	console.log('itemSorter', item)
 					// 	return -item.value
 					// }}
-					content={
-						<ChartTooltipContent
-							// itemSorter={(item) => {
-							// 	console.log('itemSorter', item)
-							// 	return -item.value
-							// }}
-							indicator="line"
-						/>
-					}
+					content={<ChartTooltipContent indicator="line" />}
 				/>
-				{containerNames.map((key) => (
+				{Object.keys(chartConfig).map((key) => (
 					<Area
 						key={key}
+						// isAnimationActive={false}
+						animateNewValues={false}
 						dataKey={key}
 						type="natural"
 						fill={chartConfig[key].color}
@@ -97,15 +103,6 @@ export default function ({ chartData }: { chartData: Record<string, number | str
 						stackId="a"
 					/>
 				))}
-				{/* <Area
-					dataKey="other"
-					type="natural"
-					fill="var(--color-other)"
-					fillOpacity={0.4}
-					stroke="var(--color-other)"
-					stackId="a"
-				/> */}
-				{/* <ChartLegend content={<ChartLegendContent />} className="flex-wrap gap-y-2 mb-2" /> */}
 			</AreaChart>
 		</ChartContainer>
 	)