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

adapt y axis width in recharts

Browse Source
This commit is contained in:
Henry Dollman
2024-08-04 16:35:12 -04:00
parent b05184a654
commit e3ed07a999
9 changed files with 556 additions and 503 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,11 +1,12 @@
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
import { chartTimeData, formatShortDate } from '@/lib/utils'
import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
import Spinner from '../spinner'
import { useStore } from '@nanostores/react'
import { $chartTime } from '@/lib/stores'
import { SystemStatsRecord } from '@/types'
import { useRef } from 'react'
export default function BandwidthChart({
ticks,
@@ -14,6 +15,8 @@ export default function BandwidthChart({
ticks: number[]
systemData: SystemStatsRecord[]
}) {
const chartRef = useRef<HTMLDivElement>(null)
const yAxisWidth = useYaxisWidth(chartRef)
const chartTime = useStore($chartTime)
if (!systemData.length || !ticks.length) {
@@ -21,6 +24,7 @@ export default function BandwidthChart({
}
return (
<div ref={chartRef}>
<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
<AreaChart
accessibilityLayer
@@ -35,7 +39,7 @@ export default function BandwidthChart({
<CartesianGrid vertical={false} />
<YAxis
className="tracking-tighter"
width={75}
width={yAxisWidth}
domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]}
tickFormatter={(value) => {
if (value >= 100) {
@@ -89,5 +93,6 @@ export default function BandwidthChart({
/>
</AreaChart>
</ChartContainer>
</div>
)
}

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

@@ -5,8 +5,8 @@ import {
ChartTooltip,
ChartTooltipContent,
} from '@/components/ui/chart'
import { useMemo } from 'react'
import { chartTimeData, formatShortDate } from '@/lib/utils'
import { useMemo, useRef } from 'react'
import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
import Spinner from '../spinner'
import { useStore } from '@nanostores/react'
import { $chartTime } from '@/lib/stores'
@@ -18,6 +18,8 @@ export default function ContainerCpuChart({
chartData: Record<string, number | string>[]
ticks: number[]
}) {
const chartRef = useRef<HTMLDivElement>(null)
const yAxisWidth = useYaxisWidth(chartRef)
const chartTime = useStore($chartTime)
const chartConfig = useMemo(() => {
@@ -60,6 +62,7 @@ export default function ContainerCpuChart({
}
return (
<div ref={chartRef}>
<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
<AreaChart
accessibilityLayer
@@ -72,7 +75,7 @@ export default function ContainerCpuChart({
<CartesianGrid vertical={false} />
<YAxis
// domain={[0, (max: number) => Math.max(Math.ceil(max), 0.4)]}
width={47}
width={yAxisWidth}
tickLine={false}
axisLine={false}
unit={'%'}
@@ -114,5 +117,6 @@ export default function ContainerCpuChart({
))}
</AreaChart>
</ChartContainer>
</div>
)
}

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

@@ -5,8 +5,8 @@ import {
ChartTooltip,
ChartTooltipContent,
} from '@/components/ui/chart'
import { useMemo } from 'react'
import { chartTimeData, formatShortDate } from '@/lib/utils'
import { useMemo, useRef } from 'react'
import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
import Spinner from '../spinner'
import { useStore } from '@nanostores/react'
import { $chartTime } from '@/lib/stores'
@@ -18,6 +18,8 @@ export default function ContainerMemChart({
chartData: Record<string, number | string>[]
ticks: number[]
}) {
const chartRef = useRef<HTMLDivElement>(null)
const yAxisWidth = useYaxisWidth(chartRef)
const chartTime = useStore($chartTime)
const chartConfig = useMemo(() => {
@@ -60,6 +62,7 @@ export default function ContainerMemChart({
}
return (
<div ref={chartRef}>
<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
<AreaChart
accessibilityLayer
@@ -77,7 +80,7 @@ export default function ContainerMemChart({
tickLine={false}
axisLine={false}
unit={' GB'}
width={70}
width={yAxisWidth}
tickFormatter={(value) => {
value = value / 1024
return value.toFixed((value * 100) % 1 === 0 ? 1 : 2)
@@ -119,5 +122,6 @@ export default function ContainerMemChart({
))}
</AreaChart>
</ChartContainer>
</div>
)
}

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

@@ -5,8 +5,8 @@ import {
ChartTooltip,
ChartTooltipContent,
} from '@/components/ui/chart'
import { useMemo } from 'react'
import { chartTimeData, formatShortDate } from '@/lib/utils'
import { useMemo, useRef } from 'react'
import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
import Spinner from '../spinner'
import { useStore } from '@nanostores/react'
import { $chartTime } from '@/lib/stores'
@@ -19,6 +19,8 @@ export default function ContainerCpuChart({
chartData: Record<string, number | number[]>[]
ticks: number[]
}) {
const chartRef = useRef<HTMLDivElement>(null)
const yAxisWidth = useYaxisWidth(chartRef)
const chartTime = useStore($chartTime)
const chartConfig = useMemo(() => {
@@ -60,6 +62,7 @@ export default function ContainerCpuChart({
}
return (
<div ref={chartRef}>
<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
<AreaChart
accessibilityLayer
@@ -72,7 +75,7 @@ export default function ContainerCpuChart({
<CartesianGrid vertical={false} />
<YAxis
// domain={[0, (max: number) => Math.max(Math.ceil(max), 0.4)]}
width={75}
width={yAxisWidth}
tickLine={false}
axisLine={false}
unit={' MB'}
@@ -114,7 +117,8 @@ export default function ContainerCpuChart({
const received = item?.payload?.[key][1] ?? 0
return (
<span className="flex">
{received.toLocaleString()} MB<span className="opacity-70 ml-0.5"> rx </span>
{received.toLocaleString()} MB
<span className="opacity-70 ml-0.5"> rx </span>
<Separator orientation="vertical" className="h-3 mx-1.5 bg-primary/40" />
{sent.toLocaleString()} MB<span className="opacity-70 ml-0.5"> tx</span>
</span>
@@ -143,5 +147,6 @@ export default function ContainerCpuChart({
))}
</AreaChart>
</ChartContainer>
</div>
)
}

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

@@ -1,11 +1,12 @@
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
import { chartTimeData, formatShortDate } from '@/lib/utils'
import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
import Spinner from '../spinner'
import { useStore } from '@nanostores/react'
import { $chartTime } from '@/lib/stores'
import { SystemStatsRecord } from '@/types'
import { useRef } from 'react'
export default function CpuChart({
ticks,
@@ -14,6 +15,8 @@ export default function CpuChart({
ticks: number[]
systemData: SystemStatsRecord[]
}) {
const chartRef = useRef<HTMLDivElement>(null)
const yAxisWidth = useYaxisWidth(chartRef)
const chartTime = useStore($chartTime)
if (!systemData.length || !ticks.length) {
@@ -21,12 +24,13 @@ export default function CpuChart({
}
return (
<div ref={chartRef}>
<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
<AreaChart accessibilityLayer data={systemData} margin={{ top: 10 }}>
<CartesianGrid vertical={false} />
<YAxis
// domain={[0, (max: number) => Math.ceil(max)]}
width={48}
width={yAxisWidth}
tickLine={false}
axisLine={false}
unit={'%'}
@@ -66,5 +70,6 @@ export default function CpuChart({
/>
</AreaChart>
</ChartContainer>
</div>
)
}

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

@@ -1,8 +1,8 @@
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
import { chartTimeData, formatShortDate } from '@/lib/utils'
import { useMemo } from 'react'
import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
import { useMemo, useRef } from 'react'
import Spinner from '../spinner'
import { useStore } from '@nanostores/react'
import { $chartTime } from '@/lib/stores'
@@ -15,6 +15,8 @@ export default function DiskChart({
ticks: number[]
systemData: SystemStatsRecord[]
}) {
const chartRef = useRef<HTMLDivElement>(null)
const yAxisWidth = useYaxisWidth(chartRef)
const chartTime = useStore($chartTime)
const diskSize = useMemo(() => {
@@ -35,6 +37,7 @@ export default function DiskChart({
}
return (
<div ref={chartRef}>
<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
<AreaChart
accessibilityLayer
@@ -49,7 +52,7 @@ export default function DiskChart({
<CartesianGrid vertical={false} />
<YAxis
className="tracking-tighter"
width={diskSize >= 1000 ? 75 : 65}
width={yAxisWidth}
domain={[0, diskSize]}
tickCount={9}
tickLine={false}
@@ -89,5 +92,6 @@ export default function DiskChart({
/>
</AreaChart>
</ChartContainer>
</div>
)
}

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

@@ -1,11 +1,12 @@
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
import { chartTimeData, formatShortDate } from '@/lib/utils'
import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
import Spinner from '../spinner'
import { useStore } from '@nanostores/react'
import { $chartTime } from '@/lib/stores'
import { SystemStatsRecord } from '@/types'
import { useRef } from 'react'
export default function DiskIoChart({
ticks,
@@ -14,6 +15,8 @@ export default function DiskIoChart({
ticks: number[]
systemData: SystemStatsRecord[]
}) {
const chartRef = useRef<HTMLDivElement>(null)
const yAxisWidth = useYaxisWidth(chartRef)
const chartTime = useStore($chartTime)
if (!systemData.length || !ticks.length) {
@@ -21,6 +24,7 @@ export default function DiskIoChart({
}
return (
<div ref={chartRef}>
<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
<AreaChart
accessibilityLayer
@@ -35,7 +39,7 @@ export default function DiskIoChart({
<CartesianGrid vertical={false} />
<YAxis
className="tracking-tighter"
width={75}
width={yAxisWidth}
domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]}
tickFormatter={(value) => {
if (value >= 100) {
@@ -89,5 +93,6 @@ export default function DiskIoChart({
/>
</AreaChart>
</ChartContainer>
</div>
)
}

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

@@ -1,8 +1,8 @@
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
import { chartTimeData, formatShortDate } from '@/lib/utils'
import { useMemo } from 'react'
import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
import { useMemo, useRef } from 'react'
import Spinner from '../spinner'
import { useStore } from '@nanostores/react'
import { $chartTime } from '@/lib/stores'
@@ -16,6 +16,8 @@ export default function MemChart({
systemData: SystemStatsRecord[]
}) {
const chartTime = useStore($chartTime)
const chartRef = useRef<HTMLDivElement>(null)
const yAxisWidth = useYaxisWidth(chartRef)
const totalMem = useMemo(() => {
const maxMem = Math.ceil(systemData[0]?.stats.m)
@@ -27,6 +29,7 @@ export default function MemChart({
}
return (
<div ref={chartRef}>
<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
<AreaChart
accessibilityLayer
@@ -39,9 +42,8 @@ export default function MemChart({
<YAxis
// use "ticks" instead of domain / tickcount if need more control
domain={[0, totalMem]}
width={yAxisWidth}
tickLine={false}
width={totalMem >= 100 ? 65 : 58}
// allowDecimals={false}
axisLine={false}
unit={' GB'}
/>
@@ -93,5 +95,6 @@ export default function MemChart({
/>
</AreaChart>
</ChartContainer>
</div>
)
}

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

@@ -6,6 +6,7 @@ import { AlertRecord, ChartTimeData, ChartTimes, SystemRecord } from '@/types'
import { RecordModel, RecordSubscription } from 'pocketbase'
import { WritableAtom } from 'nanostores'
import { timeDay, timeHour } from 'd3-time'
import { useEffect, useState } from 'react'
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
@@ -179,3 +180,20 @@ export const chartTimeData: ChartTimeData = {
getOffset: (endTime: Date) => timeDay.offset(endTime, -30),
},
}
/** Hacky solution to set the correct width of the yAxis in recharts */
export function useYaxisWidth(chartRef: React.RefObject<HTMLDivElement>) {
const [yAxisWidth, setYAxisWidth] = useState(90)
useEffect(() => {
let interval = setInterval(() => {
// console.log('chartRef', chartRef.current)
const yAxisElement = chartRef?.current?.querySelector('.yAxis')
if (yAxisElement) {
console.log('yAxisElement', yAxisElement)
setYAxisWidth(yAxisElement.getBoundingClientRect().width + 22)
clearInterval(interval)
}
}, 16)
}, [])
return yAxisWidth
}