update charts to use fixed time for x axis

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

@@ -8,10 +8,14 @@ import {
 	ChartTooltipContent,
 } from '@/components/ui/chart'
 import { useMemo } from 'react'
-import { formatShortDate, formatShortTime } from '@/lib/utils'
+import { calculateXaxisTicks, formatShortDate, formatShortTime } from '@/lib/utils'
 import Spinner from '../spinner'
 
-export default function ({ chartData }: { chartData: Record<string, number | string>[] }) {
+export default function ContainerCpuChart({
+	chartData,
+}: {
+	chartData: Record<string, number | string>[]
+}) {
 	const chartConfig = useMemo(() => {
 		let config = {} as Record<
 			string,
@@ -47,6 +51,8 @@ export default function ({ chartData }: { chartData: Record<string, number | str
 		return config satisfies ChartConfig
 	}, [chartData])
 
+	const ticks = useMemo(() => calculateXaxisTicks(chartData), [chartData])
+
 	if (!chartData.length) {
 		return <Spinner />
 	}
@@ -64,7 +70,7 @@ export default function ({ chartData }: { chartData: Record<string, number | str
 				<CartesianGrid vertical={false} />
 				<YAxis
 					domain={[0, (max: number) => Math.max(Math.ceil(max), 0.4)]}
-					// tickCount={5}
+					width={47}
 					tickLine={false}
 					axisLine={false}
 					unit={'%'}
@@ -72,6 +78,10 @@ export default function ({ chartData }: { chartData: Record<string, number | str
 				/>
 				<XAxis
 					dataKey="time"
+					domain={[ticks[0], ticks.at(-1)!]}
+					ticks={ticks}
+					type="number"
+					scale={'time'}
 					tickLine={true}
 					axisLine={false}
 					tickMargin={8}
@@ -79,8 +89,10 @@ export default function ({ chartData }: { chartData: Record<string, number | str
 					tickFormatter={formatShortTime}
 				/>
 				<ChartTooltip
-					cursor={false}
+					// cursor={false}
-					labelFormatter={formatShortDate}
+					animationEasing="ease-out"
+					animationDuration={150}
+					labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
 					// @ts-ignore
 					itemSorter={(a, b) => b.value - a.value}
 					content={<ChartTooltipContent unit="%" indicator="line" />}

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

@@ -8,10 +8,14 @@ import {
 	ChartTooltipContent,
 } from '@/components/ui/chart'
 import { useMemo } from 'react'
-import { formatShortDate, formatShortTime } from '@/lib/utils'
+import { calculateXaxisTicks, formatShortDate, formatShortTime } from '@/lib/utils'
 import Spinner from '../spinner'
 
 export default function ({ chartData }: { chartData: Record<string, number | string>[] }) {
+	if (!chartData.length) {
+		return <Spinner />
+	}
+
 	const chartConfig = useMemo(() => {
 		let config = {} as Record<
 			string,
@@ -47,9 +51,7 @@ export default function ({ chartData }: { chartData: Record<string, number | str
 		return config satisfies ChartConfig
 	}, [chartData])
 
-	if (!chartData.length) {
+	const ticks = useMemo(() => calculateXaxisTicks(chartData), [chartData])
-		return <Spinner />
-	}
 
 	return (
 		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
@@ -78,6 +80,10 @@ export default function ({ chartData }: { chartData: Record<string, number | str
 				/>
 				<XAxis
 					dataKey="time"
+					domain={[ticks[0], ticks.at(-1)!]}
+					ticks={ticks}
+					type="number"
+					scale={'time'}
 					tickLine={true}
 					axisLine={false}
 					tickMargin={8}
@@ -85,8 +91,10 @@ export default function ({ chartData }: { chartData: Record<string, number | str
 					tickFormatter={formatShortTime}
 				/>
 				<ChartTooltip
-					cursor={false}
+					// cursor={false}
-					labelFormatter={formatShortDate}
+					animationEasing="ease-out"
+					animationDuration={150}
+					labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
 					// @ts-ignore
 					itemSorter={(a, b) => b.value - a.value}
 					content={<ChartTooltipContent unit=" MiB" indicator="line" />}

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

@@ -6,8 +6,9 @@ import {
 	ChartTooltip,
 	ChartTooltipContent,
 } from '@/components/ui/chart'
-import { formatShortDate, formatShortTime } from '@/lib/utils'
+import { calculateXaxisTicks, formatShortDate, formatShortTime } from '@/lib/utils'
 import Spinner from '../spinner'
+import { useMemo } from 'react'
 
 const chartConfig = {
 	cpu: {
@@ -16,11 +17,13 @@ const chartConfig = {
 	},
 } satisfies ChartConfig
 
-export default function CpuChart({ chartData }: { chartData: { time: string; cpu: number }[] }) {
+export default function CpuChart({ chartData }: { chartData: { time: number; cpu: number }[] }) {
 	if (!chartData?.length) {
 		return <Spinner />
 	}
 
+	const ticks = useMemo(() => calculateXaxisTicks(chartData), [chartData])
+
 	return (
 		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
 			<AreaChart accessibilityLayer data={chartData} margin={{ top: 10 }}>
@@ -35,15 +38,24 @@ export default function CpuChart({ chartData }: { chartData: { time: string; cpu
 				{/* todo: short time if first date is same day, otherwise short date */}
 				<XAxis
 					dataKey="time"
+					domain={[ticks[0], ticks.at(-1)!]}
+					ticks={ticks}
+					type="number"
+					scale={'time'}
 					axisLine={false}
 					tickMargin={8}
-					minTickGap={30}
+					minTickGap={35}
 					tickFormatter={formatShortTime}
 				/>
 				<ChartTooltip
-					cursor={false}
+					animationEasing="ease-out"
+					animationDuration={150}
 					content={
-						<ChartTooltipContent unit="%" labelFormatter={formatShortDate} indicator="line" />
+						<ChartTooltipContent
+							unit="%"
+							labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
+							indicator="line"
+						/>
 					}
 				/>
 				<Area

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

@@ -6,7 +6,7 @@ import {
 	ChartTooltip,
 	ChartTooltipContent,
 } from '@/components/ui/chart'
-import { formatShortDate, formatShortTime } from '@/lib/utils'
+import { calculateXaxisTicks, formatShortDate, formatShortTime } from '@/lib/utils'
 import { useMemo } from 'react'
 import Spinner from '../spinner'
 // for (const data of chartData) {
@@ -23,12 +23,18 @@ const chartConfig = {
 export default function DiskChart({
 	chartData,
 }: {
-	chartData: { time: string; disk: number; diskUsed: number }[]
+	chartData: { time: number; disk: number; diskUsed: number }[]
 }) {
+	if (!chartData.length) {
+		return <Spinner />
+	}
+
 	const diskSize = useMemo(() => {
 		return Math.round(chartData[0]?.disk)
 	}, [chartData])
 
+	const ticks = useMemo(() => calculateXaxisTicks(chartData), [chartData])
+
 	// const ticks = useMemo(() => {
 	// 	let ticks = [0]
 	// 	for (let i = 1; i < diskSize; i += diskSize / 5) {
@@ -38,10 +44,6 @@ export default function DiskChart({
 	// 	return ticks
 	// }, [diskSize])
 
-	if (!chartData.length) {
-		return <Spinner />
-	}
-
 	return (
 		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
 			<AreaChart
@@ -68,6 +70,10 @@ export default function DiskChart({
 				{/* todo: short time if first date is same day, otherwise short date */}
 				<XAxis
 					dataKey="time"
+					domain={[ticks[0], ticks.at(-1)!]}
+					ticks={ticks}
+					type="number"
+					scale={'time'}
 					tickLine={true}
 					axisLine={false}
 					tickMargin={8}
@@ -77,7 +83,11 @@ export default function DiskChart({
 				<ChartTooltip
 					cursor={false}
 					content={
-						<ChartTooltipContent unit=" GiB" labelFormatter={formatShortDate} indicator="line" />
+						<ChartTooltipContent
+							unit=" GiB"
+							labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
+							indicator="line"
+						/>
 					}
 				/>
 				<Area

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

@@ -6,15 +6,21 @@ import {
 	ChartTooltip,
 	ChartTooltipContent,
 } from '@/components/ui/chart'
-import { formatShortDate, formatShortTime } from '@/lib/utils'
+import { calculateXaxisTicks, formatShortDate, formatShortTime } from '@/lib/utils'
 import { useMemo } from 'react'
 import Spinner from '../spinner'
 
-export default function ({
+export default function MemChart({
 	chartData,
 }: {
-	chartData: { time: string; mem: number; memUsed: number; memCache: number }[]
+	chartData: { time: number; mem: number; memUsed: number; memCache: number }[]
 }) {
+	if (!chartData.length) {
+		return <Spinner />
+	}
+
+	const ticks = useMemo(() => calculateXaxisTicks(chartData), [chartData])
+
 	const totalMem = useMemo(() => {
 		return Math.ceil(chartData[0]?.mem)
 	}, [chartData])
@@ -33,10 +39,6 @@ export default function ({
 		[]
 	) satisfies ChartConfig
 
-	if (!chartData.length) {
-		return <Spinner />
-	}
-
 	return (
 		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
 			<AreaChart
@@ -59,6 +61,10 @@ export default function ({
 				{/* todo: short time if first date is same day, otherwise short date */}
 				<XAxis
 					dataKey="time"
+					domain={[ticks[0], ticks.at(-1)!]}
+					ticks={ticks}
+					type="number"
+					scale={'time'}
 					tickLine={true}
 					axisLine={false}
 					tickMargin={8}
@@ -66,13 +72,15 @@ export default function ({
 					tickFormatter={formatShortTime}
 				/>
 				<ChartTooltip
-					cursor={false}
+					// cursor={false}
+					animationEasing="ease-out"
+					animationDuration={150}
 					content={
 						<ChartTooltipContent
 							unit="GiB"
 							// @ts-ignore
 							itemSorter={(a, b) => a.name.localeCompare(b.name)}
-							labelFormatter={formatShortDate}
+							labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
 							indicator="line"
 						/>
 					}

site/src/components/routes/server.tsx

@@ -27,22 +27,34 @@ export default function ServerDetail({ name }: { name: string }) {
 	const [containers, setContainers] = useState([] as ContainerStatsRecord[])
 
 	const [serverStats, setServerStats] = useState([] as SystemStatsRecord[])
-	const [cpuChartData, setCpuChartData] = useState([] as { time: string; cpu: number }[])
+	const [cpuChartData, setCpuChartData] = useState([] as { time: number; cpu: number }[])
 	const [memChartData, setMemChartData] = useState(
-		[] as { time: string; mem: number; memUsed: number; memCache: number }[]
+		[] as { time: number; mem: number; memUsed: number; memCache: number }[]
 	)
 	const [diskChartData, setDiskChartData] = useState(
-		[] as { time: string; disk: number; diskUsed: number }[]
+		[] as { time: number; disk: number; diskUsed: number }[]
 	)
-	const [containerCpuChartData, setContainerCpuChartData] = useState(
+	const [dockerCpuChartData, setDockerCpuChartData] = useState(
 		[] as Record<string, number | string>[]
 	)
-	const [containerMemChartData, setContainerMemChartData] = useState(
+	const [dockerMemChartData, setDockerMemChartData] = useState(
 		[] as Record<string, number | string>[]
 	)
 
 	useEffect(() => {
 		document.title = `${name} / Beszel`
+		return () => {
+			console.log('unmounting')
+			setServer({} as SystemRecord)
+			setCpuChartData([])
+			setMemChartData([])
+			setDiskChartData([])
+			setDockerCpuChartData([])
+			setDockerMemChartData([])
+		}
+	}, [name])
+
+	useEffect(() => {
 		if (server?.id && server.name === name) {
 			return
 		}
@@ -97,14 +109,19 @@ export default function ServerDetail({ name }: { name: string }) {
 
 		console.log('stats', serverStats)
 		// let maxCpu = 0
-		const cpuData = [] as { time: string; cpu: number }[]
+		const cpuData = [] as typeof cpuChartData
-		const memData = [] as { time: string; mem: number; memUsed: number; memCache: number }[]
+		const memData = [] as typeof memChartData
-		const diskData = [] as { time: string; disk: number; diskUsed: number }[]
+		const diskData = [] as typeof diskChartData
 		for (let { created, stats } of serverStats) {
-			cpuData.push({ time: created, cpu: stats.cpu })
+			const time = new Date(created).getTime()
-			// maxCpu = Math.max(maxCpu, stats.c)
+			cpuData.push({ time, cpu: stats.cpu })
-			memData.push({ time: created, mem: stats.m, memUsed: stats.mu, memCache: stats.mb })
+			memData.push({
-			diskData.push({ time: created, disk: stats.d, diskUsed: stats.du })
+				time,
+				mem: stats.m,
+				memUsed: stats.mu,
+				memCache: stats.mb,
+			})
+			diskData.push({ time, disk: stats.d, diskUsed: stats.du })
 		}
 		setCpuChartData(cpuData.reverse())
 		setMemChartData(memData.reverse())
@@ -119,7 +136,6 @@ export default function ServerDetail({ name }: { name: string }) {
 				sort: '-created',
 			})
 			.then((records) => {
-				// console.log('containers', records)
 				setContainers(records)
 			})
 	}, [server])
@@ -127,22 +143,23 @@ export default function ServerDetail({ name }: { name: string }) {
 	// container stats for charts
 	useEffect(() => {
 		// console.log('containers', containers)
-		const containerCpuData = [] as Record<string, number | string>[]
+		const dockerCpuData = [] as Record<string, number | string>[]
-		const containerMemData = [] as Record<string, number | string>[]
+		const dockerMemData = [] as Record<string, number | string>[]
 
 		for (let { created, stats } of containers) {
-			let cpuData = { time: created } as Record<string, number | string>
+			const time = new Date(created).getTime()
-			let memData = { time: created } as Record<string, number | string>
+			let cpuData = { time } as (typeof dockerCpuChartData)[0]
+			let memData = { time } as (typeof dockerMemChartData)[0]
 			for (let container of stats) {
 				cpuData[container.n] = container.c
 				memData[container.n] = container.m
 			}
-			containerCpuData.push(cpuData)
+			dockerCpuData.push(cpuData)
-			containerMemData.push(memData)
+			dockerMemData.push(memData)
 		}
 		// console.log('containerMemData', containerMemData)
-		setContainerCpuChartData(containerCpuData.reverse())
+		setDockerCpuChartData(dockerCpuData.reverse())
-		setContainerMemChartData(containerMemData.reverse())
+		setDockerMemChartData(dockerMemData.reverse())
 	}, [containers])
 	const uptime = useMemo(() => {
 		console.log('making uptime')
@@ -206,18 +223,18 @@ export default function ServerDetail({ name }: { name: string }) {
 				<CpuChart chartData={cpuChartData} />
 			</ChartCard>
 
-			{containerCpuChartData.length > 0 && (
+			{dockerCpuChartData.length > 0 && (
 				<ChartCard title="Docker CPU Usage" description="CPU utilization of docker containers">
-					<ContainerCpuChart chartData={containerCpuChartData} />
+					<ContainerCpuChart chartData={dockerCpuChartData} />
 				</ChartCard>
 			)}
 			<ChartCard title="Total Memory Usage" description="Precise utilization at the recorded time">
 				<MemChart chartData={memChartData} />
 			</ChartCard>
 
-			{containerMemChartData.length > 0 && (
+			{dockerMemChartData.length > 0 && (
 				<ChartCard title="Docker Memory Usage" description="Memory usage of docker containers">
-					<ContainerMemChart chartData={containerMemChartData} />
+					<ContainerMemChart chartData={dockerMemChartData} />
 				</ChartCard>
 			)}
 			<ChartCard title="Disk Usage" description="Precise usage at the recorded time">

site/src/lib/utils.ts

@@ -50,7 +50,10 @@ const shortTimeFormatter = new Intl.DateTimeFormat(undefined, {
 	hour: 'numeric',
 	minute: 'numeric',
 })
-export const formatShortTime = (timestamp: string) => shortTimeFormatter.format(new Date(timestamp))
+export const formatShortTime = (timestamp: string) => {
+	// console.log('ts', timestamp)
+	return shortTimeFormatter.format(new Date(timestamp))
+}
 
 const shortDateFormatter = new Intl.DateTimeFormat(undefined, {
 	day: 'numeric',
@@ -60,7 +63,10 @@ const shortDateFormatter = new Intl.DateTimeFormat(undefined, {
 	hour: 'numeric',
 	minute: 'numeric',
 })
-export const formatShortDate = (timestamp: string) => shortDateFormatter.format(new Date(timestamp))
+export const formatShortDate = (timestamp: string) => {
+	console.log('ts', timestamp)
+	return shortDateFormatter.format(new Date(timestamp))
+}
 
 export const updateFavicon = (newIconUrl: string) =>
 	((document.querySelector("link[rel='icon']") as HTMLLinkElement).href = newIconUrl)
@@ -118,3 +124,12 @@ export function getPbTimestamp(timeString: string) {
 
 	return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
 }
+
+export const calculateXaxisTicks = (chartData: any[]) => {
+	const ticks: number[] = []
+	const lastDate = chartData.at(-1)!.time
+	for (let i = 60; i >= 0; i--) {
+		ticks.push(lastDate - i * 60 * 1000)
+	}
+	return ticks
+}