uniform x axis on charts

hub/site/src/components/charts/bandwidth-chart.tsx

@@ -6,8 +6,10 @@ import {
 	ChartTooltip,
 	ChartTooltipContent,
 } from '@/components/ui/chart'
-import { formatShortDate, hourWithMinutes } from '@/lib/utils'
+import { chartTimeData, formatShortDate } from '@/lib/utils'
 import Spinner from '../spinner'
+import { useStore } from '@nanostores/react'
+import { $chartTime } from '@/lib/stores'
 
 const chartConfig = {
 	recv: {
@@ -27,6 +29,8 @@ export default function BandwidthChart({
 	chartData: { time: number; sent: number; recv: number }[]
 	ticks: number[]
 }) {
+	const chartTime = useStore($chartTime)
+
 	if (!chartData.length || !ticks.length) {
 		return <Spinner />
 	}
@@ -58,18 +62,16 @@ export default function BandwidthChart({
 					axisLine={false}
 					unit={' MB/s'}
 				/>
-				{/* 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}
+					minTickGap={35}
-					axisLine={false}
 					tickMargin={8}
-					minTickGap={30}
+					axisLine={false}
-					tickFormatter={hourWithMinutes}
+					tickFormatter={chartTimeData[chartTime].format}
 				/>
 				<ChartTooltip
 					animationEasing="ease-out"

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

@@ -8,8 +8,10 @@ import {
 	ChartTooltipContent,
 } from '@/components/ui/chart'
 import { useMemo } from 'react'
-import { formatShortDate, hourWithMinutes } from '@/lib/utils'
+import { chartTimeData, formatShortDate } from '@/lib/utils'
 import Spinner from '../spinner'
+import { useStore } from '@nanostores/react'
+import { $chartTime } from '@/lib/stores'
 
 export default function ContainerCpuChart({
 	chartData,
@@ -18,6 +20,8 @@ export default function ContainerCpuChart({
 	chartData: Record<string, number | string>[]
 	ticks: number[]
 }) {
+	const chartTime = useStore($chartTime)
+
 	const chartConfig = useMemo(() => {
 		let config = {} as Record<
 			string,
@@ -82,11 +86,10 @@ export default function ContainerCpuChart({
 					ticks={ticks}
 					type="number"
 					scale={'time'}
-					tickLine={true}
+					minTickGap={35}
-					axisLine={false}
 					tickMargin={8}
-					minTickGap={30}
+					axisLine={false}
-					tickFormatter={hourWithMinutes}
+					tickFormatter={chartTimeData[chartTime].format}
 				/>
 				<ChartTooltip
 					// cursor={false}

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

@@ -8,8 +8,10 @@ import {
 	ChartTooltipContent,
 } from '@/components/ui/chart'
 import { useMemo } from 'react'
-import { formatShortDate, hourWithMinutes } from '@/lib/utils'
+import { chartTimeData, formatShortDate } from '@/lib/utils'
 import Spinner from '../spinner'
+import { useStore } from '@nanostores/react'
+import { $chartTime } from '@/lib/stores'
 
 export default function ContainerMemChart({
 	chartData,
@@ -18,6 +20,8 @@ export default function ContainerMemChart({
 	chartData: Record<string, number | string>[]
 	ticks: number[]
 }) {
+	const chartTime = useStore($chartTime)
+
 	const chartConfig = useMemo(() => {
 		let config = {} as Record<
 			string,
@@ -87,11 +91,10 @@ export default function ContainerMemChart({
 					ticks={ticks}
 					type="number"
 					scale={'time'}
-					tickLine={true}
+					minTickGap={35}
-					axisLine={false}
 					tickMargin={8}
-					minTickGap={30}
+					axisLine={false}
-					tickFormatter={hourWithMinutes}
+					tickFormatter={chartTimeData[chartTime].format}
 				/>
 				<ChartTooltip
 					// cursor={false}

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

@@ -42,7 +42,6 @@ export default function CpuChart({
 					axisLine={false}
 					unit={'%'}
 				/>
-				{/* todo: short time if first date is same day, otherwise short date */}
 				<XAxis
 					dataKey="time"
 					domain={[ticks[0], ticks.at(-1)!]}

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

@@ -6,9 +6,11 @@ import {
 	ChartTooltip,
 	ChartTooltipContent,
 } from '@/components/ui/chart'
-import { formatShortDate, hourWithMinutes } from '@/lib/utils'
+import { chartTimeData, formatShortDate, hourWithMinutes } from '@/lib/utils'
 import { useMemo } from 'react'
 import Spinner from '../spinner'
+import { useStore } from '@nanostores/react'
+import { $chartTime } from '@/lib/stores'
 
 const chartConfig = {
 	diskUsed: {
@@ -24,6 +26,8 @@ export default function DiskChart({
 	chartData: { time: number; disk: number; diskUsed: number }[]
 	ticks: number[]
 }) {
+	const chartTime = useStore($chartTime)
+
 	const diskSize = useMemo(() => {
 		return Math.round(chartData[0]?.disk)
 	}, [chartData])
@@ -63,18 +67,16 @@ export default function DiskChart({
 					axisLine={false}
 					unit={' GB'}
 				/>
-				{/* 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}
+					minTickGap={35}
-					axisLine={false}
 					tickMargin={8}
-					minTickGap={30}
+					axisLine={false}
-					tickFormatter={hourWithMinutes}
+					tickFormatter={chartTimeData[chartTime].format}
 				/>
 				<ChartTooltip
 					animationEasing="ease-out"

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

@@ -6,8 +6,10 @@ import {
 	ChartTooltip,
 	ChartTooltipContent,
 } from '@/components/ui/chart'
-import { formatShortDate, hourWithMinutes } from '@/lib/utils'
+import { chartTimeData, formatShortDate } from '@/lib/utils'
 import Spinner from '../spinner'
+import { useStore } from '@nanostores/react'
+import { $chartTime } from '@/lib/stores'
 
 const chartConfig = {
 	read: {
@@ -27,6 +29,8 @@ export default function DiskIoChart({
 	chartData: { time: number; read: number; write: number }[]
 	ticks: number[]
 }) {
+	const chartTime = useStore($chartTime)
+
 	if (!chartData.length || !ticks.length) {
 		return <Spinner />
 	}
@@ -58,18 +62,16 @@ export default function DiskIoChart({
 					axisLine={false}
 					unit={' MB/s'}
 				/>
-				{/* 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}
+					minTickGap={35}
-					axisLine={false}
 					tickMargin={8}
-					minTickGap={30}
+					axisLine={false}
-					tickFormatter={hourWithMinutes}
+					tickFormatter={chartTimeData[chartTime].format}
 				/>
 				<ChartTooltip
 					animationEasing="ease-out"

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

@@ -6,9 +6,11 @@ import {
 	ChartTooltip,
 	ChartTooltipContent,
 } from '@/components/ui/chart'
-import { formatShortDate, hourWithMinutes } from '@/lib/utils'
+import { chartTimeData, formatShortDate } from '@/lib/utils'
 import { useMemo } from 'react'
 import Spinner from '../spinner'
+import { useStore } from '@nanostores/react'
+import { $chartTime } from '@/lib/stores'
 
 export default function MemChart({
 	chartData,
@@ -17,6 +19,8 @@ export default function MemChart({
 	chartData: { time: number; mem: number; memUsed: number; memCache: number }[]
 	ticks: number[]
 }) {
+	const chartTime = useStore($chartTime)
+
 	const totalMem = useMemo(() => {
 		const maxMem = Math.ceil(chartData[0]?.mem)
 		return maxMem > 2 && maxMem % 2 !== 0 ? maxMem + 1 : maxMem
@@ -59,18 +63,16 @@ export default function MemChart({
 					axisLine={false}
 					unit={' GB'}
 				/>
-				{/* 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}
+					minTickGap={35}
-					axisLine={false}
 					tickMargin={8}
-					minTickGap={30}
+					axisLine={false}
-					tickFormatter={hourWithMinutes}
+					tickFormatter={chartTimeData[chartTime].format}
 				/>
 				<ChartTooltip
 					// cursor={false}

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

@@ -142,7 +142,7 @@ export default function ServerDetail({ name }: { name: string }) {
 		const now = new Date()
 		const startTime = chartTimeData[chartTime].getOffset(now)
 		const scale = scaleTime([startTime.getTime(), now], [0, cpuChartData.length])
-		setTicks(scale.ticks().map((d) => d.getTime()))
+		setTicks(scale.ticks(chartTimeData[chartTime].ticks).map((d) => d.getTime()))
 	}, [chartTime, systemStats])
 
 	// get container stats

hub/site/src/lib/utils.ts

@@ -2,7 +2,7 @@ import { toast } from '@/components/ui/use-toast'
 import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 import { $alerts, $systems, pb } from './stores'
-import { AlertRecord, ChartTimes, SystemRecord } from '@/types'
+import { AlertRecord, ChartTimeData, ChartTimes, SystemRecord } from '@/types'
 import { RecordModel, RecordSubscription } from 'pocketbase'
 import { WritableAtom } from 'nanostores'
 import { timeDay, timeHour } from 'd3-time'
@@ -71,9 +71,22 @@ export const formatShortDate = (timestamp: string) => {
 	return shortDateFormatter.format(new Date(timestamp))
 }
 
+// const dayTimeFormatter = new Intl.DateTimeFormat(undefined, {
+// 	// day: 'numeric',
+// 	// month: 'short',
+// 	hour: 'numeric',
+// 	weekday: 'short',
+// 	minute: 'numeric',
+// 	// dateStyle: 'short',
+// })
+// export const formatDayTime = (timestamp: string) => {
+// 	// console.log('ts', timestamp)
+// 	return dayTimeFormatter.format(new Date(timestamp))
+// }
+
 const dayFormatter = new Intl.DateTimeFormat(undefined, {
 	day: 'numeric',
-	month: 'long',
+	month: 'short',
 	// dateStyle: 'medium',
 })
 export const formatDay = (timestamp: string) => {
@@ -130,16 +143,18 @@ export function getPbTimestamp(timeString: ChartTimes) {
 	return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
 }
 
-export const chartTimeData = {
+export const chartTimeData: ChartTimeData = {
 	'1h': {
 		type: '1m',
 		label: '1 hour',
+		// ticks: 12,
 		format: (timestamp: string) => hourWithMinutes(timestamp),
 		getOffset: (endTime: Date) => timeHour.offset(endTime, -1),
 	},
 	'12h': {
 		type: '10m',
 		label: '12 hours',
+		ticks: 12,
 		format: (timestamp: string) => hourWithMinutes(timestamp),
 		getOffset: (endTime: Date) => timeHour.offset(endTime, -12),
 	},
@@ -152,12 +167,14 @@ export const chartTimeData = {
 	'1w': {
 		type: '120m',
 		label: '1 week',
-		format: (timestamp: string) => formatDay(timestamp),
+		ticks: 7,
+		format: (timestamp: string) => formatShortDate(timestamp),
 		getOffset: (endTime: Date) => timeDay.offset(endTime, -7),
 	},
 	'30d': {
 		type: '480m',
 		label: '30 days',
+		ticks: 30,
 		format: (timestamp: string) => formatDay(timestamp),
 		getOffset: (endTime: Date) => timeDay.offset(endTime, -30),
 	},

hub/site/src/types.d.ts

@@ -81,3 +81,13 @@ export interface AlertRecord extends RecordModel {
 }
 
 export type ChartTimes = '1h' | '12h' | '24h' | '1w' | '30d'
+
+export interface ChartTimeData {
+	[key: string]: {
+		type: '1m' | '10m' | '20m' | '120m' | '480m'
+		label: string
+		ticks?: number
+		format: (timestamp: string) => string
+		getOffset: (endTime: Date) => Date
+	}
+}