jnd/beszel-ipv6
1
0
Fork 0
mirror of https://github.com/henrygd/beszel.git synced 2025-12-17 10:46:16 +01:00
Code Issues Packages Projects Releases 2 Wiki Activity

fix wrapping of y axis chart labels

Browse Source
This commit is contained in:
Henry Dollman
2024-09-16 13:14:23 -04:00
parent c46879694d
commit e03e2b8d67
15 changed files with 117 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
beszel/site/src/components/charts/bandwidth-chart.tsx
View File

@@ -2,18 +2,17 @@ import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
import {
useYAxisWidth,
chartTimeData,
cn,
formatShortDate,
toFixedWithoutTrailingZeros,
twoDecimalString,
useYaxisWidth,
} from '@/lib/utils'
// import Spinner from '../spinner'
import { useStore } from '@nanostores/react'
import { $chartTime } from '@/lib/stores'
import { SystemStatsRecord } from '@/types'
import { useMemo, useRef } from 'react'
export default function BandwidthChart({
ticks,
@@ -22,19 +21,16 @@ export default function BandwidthChart({
ticks: number[]
systemData: SystemStatsRecord[]
}) {
const chartRef = useRef<HTMLDivElement>(null)
const yAxisWidth = useYaxisWidth(chartRef)
const chartTime = useStore($chartTime)
const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
return (
<div ref={chartRef}>
<div>
{/* {!yAxisSet && <Spinner />} */}
<ChartContainer
config={{}}
className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
'opacity-100': yAxisSet,
'opacity-100': yAxisWidth,
})}
>
<AreaChart
@@ -52,10 +48,13 @@ export default function BandwidthChart({
className="tracking-tighter"
width={yAxisWidth}
// domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]}
tickFormatter={(value) => toFixedWithoutTrailingZeros(value, 2)}
tickFormatter={(value) => {
const val = toFixedWithoutTrailingZeros(value, 2) + ' MB/s'
return updateYAxisWidth(val)
}}
tickLine={false}
axisLine={false}
unit={' MB/s'}
// unit={' MB/s'}
/>
<XAxis
dataKey="created"

19
beszel/site/src/components/charts/container-cpu-chart.tsx
View File

@@ -5,8 +5,8 @@ import {
ChartTooltip,
ChartTooltipContent,
} from '@/components/ui/chart'
import { useMemo, useRef } from 'react'
import { chartTimeData, cn, formatShortDate, twoDecimalString, useYaxisWidth } from '@/lib/utils'
import { useMemo } from 'react'
import { useYAxisWidth, chartTimeData, cn, formatShortDate, twoDecimalString } from '@/lib/utils'
// import Spinner from '../spinner'
import { useStore } from '@nanostores/react'
import { $chartTime, $containerFilter } from '@/lib/stores'
@@ -18,12 +18,9 @@ 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 filter = useStore($containerFilter)
const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
const chartConfig = useMemo(() => {
let config = {} as Record<
@@ -65,12 +62,12 @@ export default function ContainerCpuChart({
// }
return (
<div ref={chartRef}>
<div>
{/* {!yAxisSet && <Spinner />} */}
<ChartContainer
config={{}}
className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
'opacity-100': yAxisSet,
'opacity-100': yAxisWidth,
})}
>
<AreaChart
@@ -89,8 +86,10 @@ export default function ContainerCpuChart({
width={yAxisWidth}
tickLine={false}
axisLine={false}
unit={'%'}
tickFormatter={(x) => (x % 1 === 0 ? x : x.toFixed(1))}
tickFormatter={(x) => {
const val = (x % 1 === 0 ? x : x.toFixed(1)) + '%'
return updateYAxisWidth(val)
}}
/>
<XAxis
dataKey="time"

19
beszel/site/src/components/charts/container-mem-chart.tsx
View File

@@ -5,14 +5,14 @@ import {
ChartTooltip,
ChartTooltipContent,
} from '@/components/ui/chart'
import { useMemo, useRef } from 'react'
import { useMemo } from 'react'
import {
useYAxisWidth,
chartTimeData,
cn,
formatShortDate,
toFixedWithoutTrailingZeros,
twoDecimalString,
useYaxisWidth,
} from '@/lib/utils'
// import Spinner from '../spinner'
import { useStore } from '@nanostores/react'
@@ -26,11 +26,8 @@ export default function ContainerMemChart({
ticks: number[]
}) {
const chartTime = useStore($chartTime)
const chartRef = useRef<HTMLDivElement>(null)
const yAxisWidth = useYaxisWidth(chartRef)
const filter = useStore($containerFilter)
const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
const chartConfig = useMemo(() => {
let config = {} as Record<
@@ -72,12 +69,12 @@ export default function ContainerMemChart({
// }
return (
<div ref={chartRef}>
<div>
{/* {!yAxisSet && <Spinner />} */}
<ChartContainer
config={{}}
className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
'opacity-100': yAxisSet,
'opacity-100': yAxisWidth,
})}
>
<AreaChart
@@ -94,9 +91,11 @@ export default function ContainerMemChart({
// domain={[0, (max: number) => Math.ceil(max)]}
tickLine={false}
axisLine={false}
unit={' GB'}
width={yAxisWidth}
tickFormatter={(value) => toFixedWithoutTrailingZeros(value / 1024, 2)}
tickFormatter={(value) => {
const val = toFixedWithoutTrailingZeros(value / 1024, 2) + ' GB'
return updateYAxisWidth(val)
}}
/>
<XAxis
dataKey="time"

19
beszel/site/src/components/charts/container-net-chart.tsx
View File

@@ -5,14 +5,14 @@ import {
ChartTooltip,
ChartTooltipContent,
} from '@/components/ui/chart'
import { useMemo, useRef } from 'react'
import { useMemo } from 'react'
import {
useYAxisWidth,
chartTimeData,
cn,
formatShortDate,
toFixedWithoutTrailingZeros,
twoDecimalString,
useYaxisWidth,
} from '@/lib/utils'
// import Spinner from '../spinner'
import { useStore } from '@nanostores/react'
@@ -27,11 +27,8 @@ export default function ContainerCpuChart({
ticks: number[]
}) {
const chartTime = useStore($chartTime)
const chartRef = useRef<HTMLDivElement>(null)
const yAxisWidth = useYaxisWidth(chartRef)
const filter = useStore($containerFilter)
const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
const chartConfig = useMemo(() => {
let config = {} as Record<
@@ -72,12 +69,12 @@ export default function ContainerCpuChart({
// }
return (
<div ref={chartRef}>
<div>
{/* {!yAxisSet && <Spinner />} */}
<ChartContainer
config={{}}
className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
'opacity-100': yAxisSet,
'opacity-100': yAxisWidth,
})}
>
<AreaChart
@@ -95,8 +92,10 @@ export default function ContainerCpuChart({
width={yAxisWidth}
tickLine={false}
axisLine={false}
unit={' MB/s'}
tickFormatter={(value) => toFixedWithoutTrailingZeros(value, 2)}
tickFormatter={(value) => {
const val = toFixedWithoutTrailingZeros(value, 2) + ' MB/s'
return updateYAxisWidth(val)
}}
/>
<XAxis
dataKey="time"

14
beszel/site/src/components/charts/cpu-chart.tsx
View File

@@ -1,12 +1,11 @@
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
import { chartTimeData, cn, formatShortDate, twoDecimalString, useYaxisWidth } from '@/lib/utils'
import { useYAxisWidth, chartTimeData, cn, formatShortDate, twoDecimalString } from '@/lib/utils'
// import Spinner from '../spinner'
import { useStore } from '@nanostores/react'
import { $chartTime } from '@/lib/stores'
import { SystemStatsRecord } from '@/types'
import { useMemo, useRef } from 'react'
export default function CpuChart({
ticks,
@@ -16,17 +15,14 @@ export default function CpuChart({
systemData: SystemStatsRecord[]
}) {
const chartTime = useStore($chartTime)
const chartRef = useRef<HTMLDivElement>(null)
const yAxisWidth = useYaxisWidth(chartRef)
const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
return (
<div ref={chartRef}>
<div>
<ChartContainer
config={{}}
className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
'opacity-100': yAxisSet,
'opacity-100': yAxisWidth,
})}
>
<AreaChart
@@ -42,7 +38,7 @@ export default function CpuChart({
width={yAxisWidth}
tickLine={false}
axisLine={false}
unit={'%'}
tickFormatter={(value) => updateYAxisWidth(value + '%')}
/>
<XAxis
dataKey="created"

15
beszel/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, cn, formatShortDate, twoDecimalString, useYaxisWidth } from '@/lib/utils'
import { useMemo, useRef } from 'react'
import { useYAxisWidth, chartTimeData, cn, formatShortDate, twoDecimalString } from '@/lib/utils'
import { useMemo } from 'react'
// import Spinner from '../spinner'
import { useStore } from '@nanostores/react'
import { $chartTime } from '@/lib/stores'
@@ -16,22 +16,19 @@ export default function DiskChart({
systemData: SystemStatsRecord[]
}) {
const chartTime = useStore($chartTime)
const chartRef = useRef<HTMLDivElement>(null)
const yAxisWidth = useYaxisWidth(chartRef)
const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
const diskSize = useMemo(() => {
return Math.round(systemData.at(-1)?.stats.d ?? NaN)
}, [systemData])
return (
<div ref={chartRef}>
<div>
{/* {!yAxisSet && <Spinner />} */}
<ChartContainer
config={{}}
className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
'opacity-100': yAxisSet,
'opacity-100': yAxisWidth,
})}
>
<AreaChart
@@ -53,7 +50,7 @@ export default function DiskChart({
minTickGap={6}
tickLine={false}
axisLine={false}
unit={' GB'}
tickFormatter={(value) => updateYAxisWidth(value + ' GB')}
/>
<XAxis
dataKey="created"

22
beszel/site/src/components/charts/disk-io-chart.tsx
View File

@@ -2,18 +2,17 @@ import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
import {
useYAxisWidth,
chartTimeData,
cn,
formatShortDate,
toFixedWithoutTrailingZeros,
twoDecimalString,
useYaxisWidth,
} from '@/lib/utils'
// import Spinner from '../spinner'
import { useStore } from '@nanostores/react'
import { $chartTime } from '@/lib/stores'
import { SystemStatsRecord } from '@/types'
import { useMemo, useRef } from 'react'
export default function DiskIoChart({
ticks,
@@ -23,22 +22,15 @@ export default function DiskIoChart({
systemData: SystemStatsRecord[]
}) {
const chartTime = useStore($chartTime)
const chartRef = useRef<HTMLDivElement>(null)
const yAxisWidth = useYaxisWidth(chartRef)
const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
// if (!systemData.length || !ticks.length) {
// return <Spinner />
// }
const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
return (
<div ref={chartRef}>
<div>
{/* {!yAxisSet && <Spinner />} */}
<ChartContainer
config={{}}
className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
'opacity-100': yAxisSet,
'opacity-100': yAxisWidth,
})}
>
<AreaChart
@@ -56,10 +48,12 @@ export default function DiskIoChart({
className="tracking-tighter"
width={yAxisWidth}
// domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]}
tickFormatter={(value) => toFixedWithoutTrailingZeros(value, 2)}
tickFormatter={(value) => {
const val = toFixedWithoutTrailingZeros(value, 2) + ' MB/s'
return updateYAxisWidth(val)
}}
tickLine={false}
axisLine={false}
unit={' MB/s'}
/>
<XAxis
dataKey="created"

15
beszel/site/src/components/charts/extra-fs-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, cn, formatShortDate, twoDecimalString, useYaxisWidth } from '@/lib/utils'
import { useMemo, useRef } from 'react'
import { useYAxisWidth, chartTimeData, cn, formatShortDate, twoDecimalString } from '@/lib/utils'
import { useMemo } from 'react'
// import Spinner from '../spinner'
import { useStore } from '@nanostores/react'
import { $chartTime } from '@/lib/stores'
@@ -18,10 +18,7 @@ export default function ExFsDiskChart({
fs: string
}) {
const chartTime = useStore($chartTime)
const chartRef = useRef<HTMLDivElement>(null)
const yAxisWidth = useYaxisWidth(chartRef)
const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
const diskSize = useMemo(() => {
const size = systemData.at(-1)?.stats.efs?.[fs].d ?? 0
@@ -29,11 +26,11 @@ export default function ExFsDiskChart({
}, [systemData])
return (
<div ref={chartRef}>
<div>
<ChartContainer
config={{}}
className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
'opacity-100': yAxisSet,
'opacity-100': yAxisWidth,
})}
>
<AreaChart
@@ -52,7 +49,7 @@ export default function ExFsDiskChart({
minTickGap={6}
tickLine={false}
axisLine={false}
unit={' GB'}
tickFormatter={(value) => updateYAxisWidth(value + ' GB')}
/>
<XAxis
dataKey="created"

22
beszel/site/src/components/charts/extra-fs-disk-io-chart.tsx
View File

@@ -2,18 +2,17 @@ import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
import {
useYAxisWidth,
chartTimeData,
cn,
formatShortDate,
toFixedWithoutTrailingZeros,
twoDecimalString,
useYaxisWidth,
} from '@/lib/utils'
// import Spinner from '../spinner'
import { useStore } from '@nanostores/react'
import { $chartTime } from '@/lib/stores'
import { SystemStatsRecord } from '@/types'
import { useMemo, useRef } from 'react'
export default function ExFsDiskIoChart({
ticks,
@@ -25,22 +24,15 @@ export default function ExFsDiskIoChart({
fs: string
}) {
const chartTime = useStore($chartTime)
const chartRef = useRef<HTMLDivElement>(null)
const yAxisWidth = useYaxisWidth(chartRef)
const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
// if (!systemData.length || !ticks.length) {
// return <Spinner />
// }
const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
return (
<div ref={chartRef}>
<div>
{/* {!yAxisSet && <Spinner />} */}
<ChartContainer
config={{}}
className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
'opacity-100': yAxisSet,
'opacity-100': yAxisWidth,
})}
>
<AreaChart
@@ -58,10 +50,12 @@ export default function ExFsDiskIoChart({
className="tracking-tighter"
width={yAxisWidth}
// domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]}
tickFormatter={(value) => toFixedWithoutTrailingZeros(value, 2)}
tickFormatter={(value) => {
const val = toFixedWithoutTrailingZeros(value, 2)
return updateYAxisWidth(val + ' MB/s')
}}
tickLine={false}
axisLine={false}
unit={' MB/s'}
/>
<XAxis
dataKey="created"

18
beszel/site/src/components/charts/mem-chart.tsx
View File

@@ -2,14 +2,14 @@ import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
import {
useYAxisWidth,
chartTimeData,
cn,
formatShortDate,
toFixedFloat,
twoDecimalString,
useYaxisWidth,
} from '@/lib/utils'
import { useMemo, useRef } from 'react'
import { useMemo } from 'react'
// import Spinner from '../spinner'
import { useStore } from '@nanostores/react'
import { $chartTime } from '@/lib/stores'
@@ -22,23 +22,20 @@ export default function MemChart({
ticks: number[]
systemData: SystemStatsRecord[]
}) {
const chartRef = useRef<HTMLDivElement>(null)
const yAxisWidth = useYaxisWidth(chartRef)
const chartTime = useStore($chartTime)
const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
const totalMem = useMemo(() => {
return toFixedFloat(systemData.at(-1)?.stats.m ?? 0, 1)
}, [systemData])
return (
<div ref={chartRef}>
<div>
{/* {!yAxisSet && <Spinner />} */}
<ChartContainer
config={{}}
className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
'opacity-100': yAxisSet,
'opacity-100': yAxisWidth,
})}
>
<AreaChart
@@ -58,7 +55,10 @@ export default function MemChart({
width={yAxisWidth}
tickLine={false}
axisLine={false}
unit={' GB'}
tickFormatter={(value) => {
const val = toFixedFloat(value, 1)
return updateYAxisWidth(val + ' GB')
}}
/>
)}
<XAxis

14
beszel/site/src/components/charts/swap-chart.tsx
View File

@@ -2,18 +2,17 @@ import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
import {
useYAxisWidth,
chartTimeData,
cn,
formatShortDate,
toFixedWithoutTrailingZeros,
twoDecimalString,
useYaxisWidth,
} from '@/lib/utils'
// import Spinner from '../spinner'
import { useStore } from '@nanostores/react'
import { $chartTime } from '@/lib/stores'
import { SystemStatsRecord } from '@/types'
import { useMemo, useRef } from 'react'
export default function SwapChart({
ticks,
@@ -23,17 +22,14 @@ export default function SwapChart({
systemData: SystemStatsRecord[]
}) {
const chartTime = useStore($chartTime)
const chartRef = useRef<HTMLDivElement>(null)
const yAxisWidth = useYaxisWidth(chartRef)
const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
return (
<div ref={chartRef}>
<div>
<ChartContainer
config={{}}
className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
'opacity-100': yAxisSet,
'opacity-100': yAxisWidth,
})}
>
<AreaChart accessibilityLayer data={systemData} margin={{ top: 10 }}>
@@ -44,7 +40,7 @@ export default function SwapChart({
width={yAxisWidth}
tickLine={false}
axisLine={false}
unit={' GB'}
tickFormatter={(value) => updateYAxisWidth(value + ' GB')}
/>
<XAxis
dataKey="created"

19
beszel/site/src/components/charts/temperature-chart.tsx
View File

@@ -8,17 +8,17 @@ import {
ChartTooltipContent,
} from '@/components/ui/chart'
import {
useYAxisWidth,
chartTimeData,
cn,
formatShortDate,
toFixedWithoutTrailingZeros,
twoDecimalString,
useYaxisWidth,
} from '@/lib/utils'
import { useStore } from '@nanostores/react'
import { $chartTime } from '@/lib/stores'
import { SystemStatsRecord } from '@/types'
import { useMemo, useRef } from 'react'
import { useMemo } from 'react'
export default function TemperatureChart({
ticks,
@@ -27,9 +27,8 @@ export default function TemperatureChart({
ticks: number[]
systemData: SystemStatsRecord[]
}) {
const chartRef = useRef<HTMLDivElement>(null)
const yAxisWidth = useYaxisWidth(chartRef)
const chartTime = useStore($chartTime)
const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
/** Format temperature data for chart and assign colors */
const newChartData = useMemo(() => {
@@ -55,15 +54,13 @@ export default function TemperatureChart({
return chartData
}, [systemData])
const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
return (
<div ref={chartRef}>
<div>
{/* {!yAxisSet && <Spinner />} */}
<ChartContainer
config={{}}
className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
'opacity-100': yAxisSet,
'opacity-100': yAxisWidth,
})}
>
<LineChart
@@ -80,10 +77,12 @@ export default function TemperatureChart({
<YAxis
className="tracking-tighter"
width={yAxisWidth}
tickFormatter={(value) => toFixedWithoutTrailingZeros(value, 2)}
tickFormatter={(value) => {
const val = toFixedWithoutTrailingZeros(value, 2)
return updateYAxisWidth(val + ' °C')
}}
tickLine={false}
axisLine={false}
unit={' °C'}
/>
<XAxis
dataKey="created"