fankes/beszel
2
0
Fork 0
mirror of https://github.com/fankes/beszel.git synced 2025-10-19 01:39:34 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

uniform x axis on charts

Browse Source
This commit is contained in:
Henry Dollman
2024-07-28 12:48:46 -04:00
parent f54faa6bd6
commit 517f949a30
10 changed files with 80 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
hub/site/src/components/charts/bandwidth-chart.tsx
View File

@@ -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}
axisLine={false}
minTickGap={35}
tickMargin={8}
minTickGap={30}
tickFormatter={hourWithMinutes}
axisLine={false}
tickFormatter={chartTimeData[chartTime].format}
/>
<ChartTooltip
animationEasing="ease-out"

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

@@ -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}
axisLine={false}
minTickGap={35}
tickMargin={8}
minTickGap={30}
tickFormatter={hourWithMinutes}
axisLine={false}
tickFormatter={chartTimeData[chartTime].format}
/>
<ChartTooltip
// cursor={false}

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

@@ -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}
axisLine={false}
minTickGap={35}
tickMargin={8}
minTickGap={30}
tickFormatter={hourWithMinutes}
axisLine={false}
tickFormatter={chartTimeData[chartTime].format}
/>
<ChartTooltip
// cursor={false}

1
hub/site/src/components/charts/cpu-chart.tsx
View File

@@ -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)!]}

14
hub/site/src/components/charts/disk-chart.tsx
View File

@@ -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}
axisLine={false}
minTickGap={35}
tickMargin={8}
minTickGap={30}
tickFormatter={hourWithMinutes}
axisLine={false}
tickFormatter={chartTimeData[chartTime].format}
/>
<ChartTooltip
animationEasing="ease-out"

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

@@ -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}
axisLine={false}
minTickGap={35}
tickMargin={8}
minTickGap={30}
tickFormatter={hourWithMinutes}
axisLine={false}
tickFormatter={chartTimeData[chartTime].format}
/>
<ChartTooltip
animationEasing="ease-out"

14
hub/site/src/components/charts/mem-chart.tsx
View File

@@ -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}
axisLine={false}
minTickGap={35}
tickMargin={8}
minTickGap={30}
tickFormatter={hourWithMinutes}
axisLine={false}
tickFormatter={chartTimeData[chartTime].format}
/>
<ChartTooltip
// cursor={false}

2
hub/site/src/components/routes/system.tsx
View File

@@ -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

25
hub/site/src/lib/utils.ts
View File

@@ -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),
},

10
hub/site/src/types.d.ts vendored
View File

@@ -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
}
}