updates

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

@@ -6,9 +6,10 @@ import {
 	ChartTooltip,
 	ChartTooltipContent,
 } from '@/components/ui/chart'
-import { calculateXaxisTicks, formatShortDate, formatShortTime } from '@/lib/utils'
+import { chartTimeData, formatShortDate } from '@/lib/utils'
 import Spinner from '../spinner'
-import { useMemo } from 'react'
+import { useStore } from '@nanostores/react'
+import { $chartTime } from '@/lib/stores'
 
 const chartConfig = {
 	cpu: {
@@ -17,12 +18,17 @@ const chartConfig = {
 	},
 } satisfies ChartConfig
 
-export default function CpuChart({ chartData }: { chartData: { time: number; cpu: number }[] }) {
-	if (!chartData?.length) {
+export default function CpuChart({
+	chartData,
+	ticks,
+}: {
+	chartData: { time: number; cpu: number }[]
+	ticks: number[]
+}) {
+	if (!chartData.length || !ticks.length) {
 		return <Spinner />
 	}
-
-	const ticks = useMemo(() => calculateXaxisTicks(chartData), [chartData])
+	const chartTime = useStore($chartTime)
 
 	return (
 		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
@@ -42,10 +48,10 @@ export default function CpuChart({ chartData }: { chartData: { time: number; cpu
 					ticks={ticks}
 					type="number"
 					scale={'time'}
-					axisLine={false}
-					tickMargin={8}
 					minTickGap={35}
-					tickFormatter={formatShortTime}
+					tickMargin={8}
+					axisLine={false}
+					tickFormatter={chartTimeData[chartTime].format}
 				/>
 				<ChartTooltip
 					animationEasing="ease-out"
@@ -60,7 +66,7 @@ export default function CpuChart({ chartData }: { chartData: { time: number; cpu
 				/>
 				<Area
 					dataKey="cpu"
-					type="monotone"
+					type="monotoneX"
 					fill="var(--color-cpu)"
 					fillOpacity={0.4}
 					stroke="var(--color-cpu)"