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

simplify container chart data and reduce rerenders

Browse Source
This commit is contained in:
Henry Dollman
2024-10-14 11:48:33 -04:00
parent d53b6be5b9
commit bea37d62b4
11 changed files with 281 additions and 500 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
beszel/site/src/components/charts/area-chart.tsx
View File

@@ -12,7 +12,7 @@ import {
} from '@/lib/utils' } from '@/lib/utils'
// import Spinner from '../spinner' // import Spinner from '../spinner'
import { ChartTimes, SystemStatsRecord } from '@/types' import { ChartTimes, SystemStatsRecord } from '@/types'
import { useMemo } from 'react' import { memo, useMemo } from 'react'
/** [label, key, color, opacity] */ /** [label, key, color, opacity] */
type DataKeys = [string, string, number, number] type DataKeys = [string, string, number, number]
@@ -27,23 +27,28 @@ const getNestedValue = (path: string, max = false, data: any): number | null =>
.reduce((acc: any, key: string) => acc?.[key] ?? (data.stats?.cpum ? 0 : null), data) .reduce((acc: any, key: string) => acc?.[key] ?? (data.stats?.cpum ? 0 : null), data)
} }
export default function AreaChartDefault({ export default memo(function AreaChartDefault({
ticks, maxToggled = false,
systemData,
showMax = false,
unit = ' MB/s', unit = ' MB/s',
chartName, chartName,
chartTime, systemChartData,
}: { }: {
ticks: number[] maxToggled?: boolean
systemData: SystemStatsRecord[]
showMax?: boolean
unit?: string unit?: string
chartName: string chartName: string
systemChartData: {
systemStats: SystemStatsRecord[]
ticks: number[]
domain: number[]
chartTime: ChartTimes chartTime: ChartTimes
}
}) { }) {
const { yAxisWidth, updateYAxisWidth } = useYAxisWidth() const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
const { chartTime } = systemChartData
const showMax = chartTime !== '1h' && maxToggled
const dataKeys: DataKeys[] = useMemo(() => { const dataKeys: DataKeys[] = useMemo(() => {
// [label, key, color, opacity] // [label, key, color, opacity]
if (chartName === 'CPU Usage') { if (chartName === 'CPU Usage') {
@@ -67,6 +72,8 @@ export default function AreaChartDefault({
return [] return []
}, []) }, [])
// console.log('Rendered at', new Date())
return ( return (
<div> <div>
<ChartContainer <ChartContainer
@@ -74,7 +81,7 @@ export default function AreaChartDefault({
'opacity-100': yAxisWidth, 'opacity-100': yAxisWidth,
})} })}
> >
<AreaChart accessibilityLayer data={systemData} margin={chartMargin}> <AreaChart accessibilityLayer data={systemChartData.systemStats} margin={chartMargin}>
<CartesianGrid vertical={false} /> <CartesianGrid vertical={false} />
<YAxis <YAxis
className="tracking-tighter" className="tracking-tighter"
@@ -88,11 +95,12 @@ export default function AreaChartDefault({
/> />
<XAxis <XAxis
dataKey="created" dataKey="created"
domain={[ticks[0], ticks.at(-1)!]} domain={systemChartData.domain}
ticks={ticks} ticks={systemChartData.ticks}
allowDataOverflow
type="number" type="number"
scale={'time'} scale="time"
minTickGap={35} minTickGap={30}
tickMargin={8} tickMargin={8}
axisLine={false} axisLine={false}
tickFormatter={chartTimeData[chartTime].format} tickFormatter={chartTimeData[chartTime].format}
@@ -104,7 +112,7 @@ export default function AreaChartDefault({
<ChartTooltipContent <ChartTooltipContent
labelFormatter={(_, data) => formatShortDate(data[0].payload.created)} labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
contentFormatter={(item) => decimalString(item.value) + unit} contentFormatter={(item) => decimalString(item.value) + unit}
indicator="line" // indicator="line"
/> />
} }
/> />
@@ -128,4 +136,4 @@ export default function AreaChartDefault({
</ChartContainer> </ChartContainer>
</div> </div>
) )
} })

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

@@ -5,7 +5,7 @@ import {
ChartTooltip, ChartTooltip,
ChartTooltipContent, ChartTooltipContent,
} from '@/components/ui/chart' } from '@/components/ui/chart'
import { useMemo } from 'react' import { memo, useMemo } from 'react'
import { import {
useYAxisWidth, useYAxisWidth,
chartTimeData, chartTimeData,
@@ -13,22 +13,32 @@ import {
formatShortDate, formatShortDate,
decimalString, decimalString,
chartMargin, chartMargin,
toFixedWithoutTrailingZeros,
} from '@/lib/utils' } from '@/lib/utils'
// import Spinner from '../spinner' // import Spinner from '../spinner'
import { useStore } from '@nanostores/react' import { useStore } from '@nanostores/react'
import { $chartTime, $containerFilter } from '@/lib/stores' import { $containerFilter } from '@/lib/stores'
import { ChartTimes, ContainerStats } from '@/types'
export default function ContainerCpuChart({ export default memo(function ContainerCpuChart({
chartData, dataKey,
ticks, unit = '%',
containerChartData,
}: { }: {
chartData: Record<string, number | string>[] dataKey: string
unit?: string
containerChartData: {
containerData: Record<string, number | ContainerStats>[]
ticks: number[] ticks: number[]
domain: number[]
chartTime: ChartTimes
}
}) { }) {
const chartTime = useStore($chartTime)
const filter = useStore($containerFilter) const filter = useStore($containerFilter)
const { yAxisWidth, updateYAxisWidth } = useYAxisWidth() const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
const { containerData, ticks, domain, chartTime } = containerChartData
const chartConfig = useMemo(() => { const chartConfig = useMemo(() => {
let config = {} as Record< let config = {} as Record<
string, string,
@@ -38,16 +48,16 @@ export default function ContainerCpuChart({
} }
> >
const totalUsage = {} as Record<string, number> const totalUsage = {} as Record<string, number>
for (let stats of chartData) { for (let stats of containerData) {
for (let key in stats) { for (let key in stats) {
if (key === 'time') { if (!key || typeof stats[key] === 'number') {
continue continue
} }
if (!(key in totalUsage)) { if (!(key in totalUsage)) {
totalUsage[key] = 0 totalUsage[key] = 0
} }
// @ts-ignore // @ts-ignore
totalUsage[key] += stats[key] totalUsage[key] += stats[key]?.[dataKey] ?? 0
} }
} }
let keys = Object.keys(totalUsage) let keys = Object.keys(totalUsage)
@@ -62,15 +72,12 @@ export default function ContainerCpuChart({
} }
} }
return config satisfies ChartConfig return config satisfies ChartConfig
}, [chartData]) }, [containerChartData])
// if (!chartData.length || !ticks.length) { // console.log('rendered at', new Date())
// return <Spinner />
// }
return ( return (
<div> <div>
{/* {!yAxisSet && <Spinner />} */}
<ChartContainer <ChartContainer
className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', { className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
'opacity-100': yAxisWidth, 'opacity-100': yAxisWidth,
@@ -79,45 +86,44 @@ export default function ContainerCpuChart({
<AreaChart <AreaChart
accessibilityLayer accessibilityLayer
// syncId={'cpu'} // syncId={'cpu'}
data={chartData} data={containerData}
margin={chartMargin} margin={chartMargin}
reverseStackOrder={true} reverseStackOrder={true}
> >
<CartesianGrid vertical={false} /> <CartesianGrid vertical={false} />
<YAxis <YAxis
className="tracking-tighter" className="tracking-tighter"
// domain={[0, (max: number) => Math.max(Math.ceil(max), 0.4)]}
width={yAxisWidth} width={yAxisWidth}
tickLine={false} tickFormatter={(value) => {
axisLine={false} const val = toFixedWithoutTrailingZeros(value, 2) + unit
tickFormatter={(x) => {
const val = (x % 1 === 0 ? x : x.toFixed(1)) + '%'
return updateYAxisWidth(val) return updateYAxisWidth(val)
}} }}
tickLine={false}
axisLine={false}
/> />
<XAxis <XAxis
dataKey="time" dataKey="created"
domain={[ticks[0], ticks.at(-1)!]} domain={domain}
allowDataOverflow
ticks={ticks} ticks={ticks}
type="number" type="number"
scale={'time'} scale="time"
minTickGap={35} minTickGap={35}
tickMargin={8} tickMargin={8}
axisLine={false} axisLine={false}
tickFormatter={chartTimeData[chartTime].format} tickFormatter={chartTimeData[chartTime].format}
/> />
<ChartTooltip <ChartTooltip
// cursor={false}
animationEasing="ease-out" animationEasing="ease-out"
animationDuration={150} animationDuration={150}
labelFormatter={(_, data) => formatShortDate(data[0].payload.time)} labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
// @ts-ignore // @ts-ignore
itemSorter={(a, b) => b.value - a.value} itemSorter={(a, b) => b.value - a.value}
content={ content={
<ChartTooltipContent <ChartTooltipContent
filter={filter} filter={filter}
contentFormatter={(item) => decimalString(item.value) + '%'} contentFormatter={(item) => decimalString(item.value) + unit}
indicator="line" // indicator="line"
/> />
} }
/> />
@@ -129,7 +135,8 @@ export default function ContainerCpuChart({
<Area <Area
key={key} key={key}
isAnimationActive={false} isAnimationActive={false}
dataKey={key} dataKey={`${key}.${dataKey}`}
name={key}
type="monotoneX" type="monotoneX"
fill={chartConfig[key].color} fill={chartConfig[key].color}
fillOpacity={fillOpacity} fillOpacity={fillOpacity}
@@ -144,4 +151,4 @@ export default function ContainerCpuChart({
</ChartContainer> </ChartContainer>
</div> </div>
) )
} })

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

@@ -1,147 +0,0 @@
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
import {
ChartConfig,
ChartContainer,
ChartTooltip,
ChartTooltipContent,
} from '@/components/ui/chart'
import { useMemo } from 'react'
import {
useYAxisWidth,
chartTimeData,
cn,
formatShortDate,
toFixedWithoutTrailingZeros,
decimalString,
chartMargin,
} from '@/lib/utils'
// import Spinner from '../spinner'
import { useStore } from '@nanostores/react'
import { $chartTime, $containerFilter } from '@/lib/stores'
export default function ContainerMemChart({
chartData,
ticks,
}: {
chartData: Record<string, number | string>[]
ticks: number[]
}) {
const chartTime = useStore($chartTime)
const filter = useStore($containerFilter)
const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
const chartConfig = useMemo(() => {
let config = {} as Record<
string,
{
label: string
color: string
}
>
const totalUsage = {} as Record<string, number>
for (let stats of chartData) {
for (let key in stats) {
if (key === 'time') {
continue
}
if (!(key in totalUsage)) {
totalUsage[key] = 0
}
// @ts-ignore
totalUsage[key] += stats[key]
}
}
let keys = Object.keys(totalUsage)
keys.sort((a, b) => (totalUsage[a] > totalUsage[b] ? -1 : 1))
const length = keys.length
for (let i = 0; i < length; i++) {
const key = keys[i]
const hue = ((i * 360) / length) % 360
config[key] = {
label: key,
color: `hsl(${hue}, 60%, 55%)`,
}
}
return config satisfies ChartConfig
}, [chartData])
// if (!chartData.length || !ticks.length) {
// return <Spinner />
// }
return (
<div>
{/* {!yAxisSet && <Spinner />} */}
<ChartContainer
className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
'opacity-100': yAxisWidth,
})}
>
<AreaChart
accessibilityLayer
data={chartData}
reverseStackOrder={true}
margin={chartMargin}
>
<CartesianGrid vertical={false} />
<YAxis
className="tracking-tighter"
// domain={[0, (max: number) => Math.ceil(max)]}
tickLine={false}
axisLine={false}
width={yAxisWidth}
tickFormatter={(value) => {
const val = toFixedWithoutTrailingZeros(value / 1024, 2) + ' GB'
return updateYAxisWidth(val)
}}
/>
<XAxis
dataKey="time"
domain={[ticks[0], ticks.at(-1)!]}
ticks={ticks}
type="number"
scale={'time'}
minTickGap={35}
tickMargin={8}
axisLine={false}
tickFormatter={chartTimeData[chartTime].format}
/>
<ChartTooltip
// cursor={false}
animationEasing="ease-out"
animationDuration={150}
labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
// @ts-ignore
itemSorter={(a, b) => b.value - a.value}
content={
<ChartTooltipContent
filter={filter}
contentFormatter={(item) => decimalString(item.value) + ' MB'}
indicator="line"
/>
}
/>
{Object.keys(chartConfig).map((key) => {
const filtered = filter && !key.includes(filter)
let fillOpacity = filtered ? 0.05 : 0.4
let strokeOpacity = filtered ? 0.1 : 1
return (
<Area
key={key}
isAnimationActive={false}
dataKey={key}
type="monotoneX"
fill={chartConfig[key].color}
strokeOpacity={strokeOpacity}
fillOpacity={fillOpacity}
stroke={chartConfig[key].color}
activeDot={filtered ? false : {}}
stackId="a"
/>
)
})}
</AreaChart>
</ChartContainer>
</div>
)
}

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

@@ -5,7 +5,7 @@ import {
ChartTooltip, ChartTooltip,
ChartTooltipContent, ChartTooltipContent,
} from '@/components/ui/chart' } from '@/components/ui/chart'
import { useMemo } from 'react' import { memo, useMemo } from 'react'
import { import {
useYAxisWidth, useYAxisWidth,
chartTimeData, chartTimeData,
@@ -15,22 +15,26 @@ import {
decimalString, decimalString,
chartMargin, chartMargin,
} from '@/lib/utils' } from '@/lib/utils'
// import Spinner from '../spinner'
import { useStore } from '@nanostores/react' import { useStore } from '@nanostores/react'
import { $chartTime, $containerFilter } from '@/lib/stores' import { $containerFilter } from '@/lib/stores'
import { Separator } from '@/components/ui/separator' import { Separator } from '@/components/ui/separator'
import { ChartTimes, ContainerStats } from '@/types'
export default function ContainerCpuChart({ export default memo(function ContainerCpuChart({
chartData, containerChartData,
ticks,
}: { }: {
chartData: Record<string, number | number[]>[] containerChartData: {
containerData: Record<string, ContainerStats | number>[]
ticks: number[] ticks: number[]
domain: number[]
chartTime: ChartTimes
}
}) { }) {
const chartTime = useStore($chartTime)
const filter = useStore($containerFilter) const filter = useStore($containerFilter)
const { yAxisWidth, updateYAxisWidth } = useYAxisWidth() const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
const { containerData, ticks, domain, chartTime } = containerChartData
const chartConfig = useMemo(() => { const chartConfig = useMemo(() => {
let config = {} as Record< let config = {} as Record<
string, string,
@@ -40,15 +44,16 @@ export default function ContainerCpuChart({
} }
> >
const totalUsage = {} as Record<string, number> const totalUsage = {} as Record<string, number>
for (let stats of chartData) { for (let stats of containerData) {
for (let key in stats) { for (let key in stats) {
if (!Array.isArray(stats[key])) { // continue if number and not container stats
if (!key || typeof stats[key] === 'number') {
continue continue
} }
if (!(key in totalUsage)) { if (!(key in totalUsage)) {
totalUsage[key] = 0 totalUsage[key] = 0
} }
totalUsage[key] += stats[key][2] ?? 0 totalUsage[key] += stats[key]?.ns ?? 0 + stats[key]?.nr ?? 0
} }
} }
let keys = Object.keys(totalUsage) let keys = Object.keys(totalUsage)
@@ -63,7 +68,9 @@ export default function ContainerCpuChart({
} }
} }
return config satisfies ChartConfig return config satisfies ChartConfig
}, [chartData]) }, [containerChartData])
// console.log('rendered at', new Date())
return ( return (
<div> <div>
@@ -75,7 +82,7 @@ export default function ContainerCpuChart({
> >
<AreaChart <AreaChart
accessibilityLayer accessibilityLayer
data={chartData} data={containerData}
margin={chartMargin} margin={chartMargin}
reverseStackOrder={true} reverseStackOrder={true}
> >
@@ -92,11 +99,12 @@ export default function ContainerCpuChart({
}} }}
/> />
<XAxis <XAxis
dataKey="time" dataKey="created"
domain={[ticks[0], ticks.at(-1)!]} domain={domain}
allowDataOverflow
ticks={ticks} ticks={ticks}
type="number" type="number"
scale={'time'} scale="time"
minTickGap={35} minTickGap={35}
tickMargin={8} tickMargin={8}
axisLine={false} axisLine={false}
@@ -106,17 +114,17 @@ export default function ContainerCpuChart({
// cursor={false} // cursor={false}
animationEasing="ease-out" animationEasing="ease-out"
animationDuration={150} animationDuration={150}
labelFormatter={(_, data) => formatShortDate(data[0].payload.time)} labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
// @ts-ignore // @ts-ignore
itemSorter={(a, b) => b.value - a.value} itemSorter={(a, b) => b.value - a.value}
content={ content={
<ChartTooltipContent <ChartTooltipContent
filter={filter} filter={filter}
indicator="line" // indicator="line"
contentFormatter={(item, key) => { contentFormatter={(item, key) => {
try { try {
const sent = item?.payload?.[key][0] ?? 0 const sent = item?.payload?.[key]?.ns ?? 0
const received = item?.payload?.[key][1] ?? 0 const received = item?.payload?.[key]?.nr ?? 0
return ( return (
<span className="flex"> <span className="flex">
{decimalString(received)} MB/s {decimalString(received)} MB/s
@@ -140,9 +148,8 @@ export default function ContainerCpuChart({
<Area <Area
key={key} key={key}
name={key} name={key}
// animationDuration={1200}
isAnimationActive={false} isAnimationActive={false}
dataKey={(data) => data?.[key]?.[2] ?? 0} dataKey={(data) => data?.[key]?.ns ?? 0 + data?.[key]?.nr ?? 0}
type="monotoneX" type="monotoneX"
fill={chartConfig[key].color} fill={chartConfig[key].color}
fillOpacity={fillOpacity} fillOpacity={fillOpacity}
@@ -157,4 +164,4 @@ export default function ContainerCpuChart({
</ChartContainer> </ChartContainer>
</div> </div>
) )
} })

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

@@ -1,91 +0,0 @@
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
import {
useYAxisWidth,
chartTimeData,
cn,
formatShortDate,
decimalString,
chartMargin,
} from '@/lib/utils'
// import Spinner from '../spinner'
import { useStore } from '@nanostores/react'
import { $chartTime, $cpuMax } from '@/lib/stores'
import { SystemStatsRecord } from '@/types'
import { useMemo } from 'react'
export default function CpuChart({
ticks,
systemData,
}: {
ticks: number[]
systemData: SystemStatsRecord[]
}) {
const chartTime = useStore($chartTime)
const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
const showMax = useStore($cpuMax)
const dataKey = useMemo(
() => `stats.cpu${showMax && chartTime !== '1h' ? 'm' : ''}`,
[showMax, systemData]
)
return (
<div>
<ChartContainer
className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
'opacity-100': yAxisWidth,
})}
>
<AreaChart
accessibilityLayer
data={systemData}
margin={chartMargin}
// syncId={'cpu'}
>
<CartesianGrid vertical={false} />
<YAxis
className="tracking-tighter"
// domain={[0, (max: number) => Math.ceil(max)]}
width={yAxisWidth}
tickLine={false}
axisLine={false}
tickFormatter={(value) => updateYAxisWidth(value + '%')}
/>
<XAxis
dataKey="created"
domain={[ticks[0], ticks.at(-1)!]}
ticks={ticks}
type="number"
scale={'time'}
minTickGap={35}
tickMargin={8}
axisLine={false}
tickFormatter={chartTimeData[chartTime].format}
/>
<ChartTooltip
animationEasing="ease-out"
animationDuration={150}
content={
<ChartTooltipContent
labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
contentFormatter={(item) => decimalString(item.value) + '%'}
indicator="line"
/>
}
/>
<Area
dataKey={dataKey}
name="CPU Usage"
type="monotoneX"
fill="hsl(var(--chart-1))"
fillOpacity={0.4}
stroke="hsl(var(--chart-1))"
isAnimationActive={false}
/>
</AreaChart>
</ChartContainer>
</div>
)
}

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

@@ -12,35 +12,35 @@ import {
getSizeUnit, getSizeUnit,
chartMargin, chartMargin,
} from '@/lib/utils' } from '@/lib/utils'
// import { useMemo } from 'react' import { ChartTimes, SystemStatsRecord } from '@/types'
// import Spinner from '../spinner' import { memo } from 'react'
import { useStore } from '@nanostores/react'
import { $chartTime } from '@/lib/stores'
import { SystemStatsRecord } from '@/types'
export default function DiskChart({ export default memo(function DiskChart({
ticks,
systemData,
dataKey, dataKey,
diskSize, diskSize,
systemChartData,
}: { }: {
ticks: number[]
systemData: SystemStatsRecord[]
dataKey: string dataKey: string
diskSize: number diskSize: number
systemChartData: {
systemStats: SystemStatsRecord[]
ticks: number[]
domain: number[]
chartTime: ChartTimes
}
}) { }) {
const chartTime = useStore($chartTime)
const { yAxisWidth, updateYAxisWidth } = useYAxisWidth() const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
// console.log('rendered at', new Date())
return ( return (
<div> <div>
{/* {!yAxisSet && <Spinner />} */}
<ChartContainer <ChartContainer
className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', { className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
'opacity-100': yAxisWidth, 'opacity-100': yAxisWidth,
})} })}
> >
<AreaChart accessibilityLayer data={systemData} margin={chartMargin}> <AreaChart accessibilityLayer data={systemChartData.systemStats} margin={chartMargin}>
<CartesianGrid vertical={false} /> <CartesianGrid vertical={false} />
<YAxis <YAxis
className="tracking-tighter" className="tracking-tighter"
@@ -56,14 +56,15 @@ export default function DiskChart({
/> />
<XAxis <XAxis
dataKey="created" dataKey="created"
domain={[ticks[0], ticks.at(-1)!]} domain={systemChartData.domain}
ticks={ticks} ticks={systemChartData.ticks}
allowDataOverflow
type="number" type="number"
scale={'time'} scale="time"
minTickGap={35} minTickGap={30}
tickMargin={8} tickMargin={8}
axisLine={false} axisLine={false}
tickFormatter={chartTimeData[chartTime].format} tickFormatter={chartTimeData[systemChartData.chartTime].format}
/> />
<ChartTooltip <ChartTooltip
animationEasing="ease-out" animationEasing="ease-out"
@@ -74,7 +75,7 @@ export default function DiskChart({
contentFormatter={({ value }) => contentFormatter={({ value }) =>
decimalString(getSizeVal(value)) + getSizeUnit(value) decimalString(getSizeVal(value)) + getSizeUnit(value)
} }
indicator="line" // indicator="line"
/> />
} }
/> />
@@ -92,4 +93,4 @@ export default function DiskChart({
</ChartContainer> </ChartContainer>
</div> </div>
) )
} })

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

@@ -10,24 +10,24 @@ import {
formatShortDate, formatShortDate,
chartMargin, chartMargin,
} from '@/lib/utils' } from '@/lib/utils'
import { useMemo } from 'react' import { memo } from 'react'
import { useStore } from '@nanostores/react' import { ChartTimes, SystemStatsRecord } from '@/types'
import { $chartTime } from '@/lib/stores'
import { SystemStatsRecord } from '@/types'
export default function MemChart({ export default memo(function MemChart({
ticks, systemChartData,
systemData,
}: { }: {
systemChartData: {
systemStats: SystemStatsRecord[]
ticks: number[] ticks: number[]
systemData: SystemStatsRecord[] domain: number[]
chartTime: ChartTimes
}
}) { }) {
const chartTime = useStore($chartTime)
const { yAxisWidth, updateYAxisWidth } = useYAxisWidth() const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
const totalMem = useMemo(() => { const totalMem = toFixedFloat(systemChartData.systemStats.at(-1)?.stats.m ?? 0, 1)
return toFixedFloat(systemData.at(-1)?.stats.m ?? 0, 1)
}, [systemData]) // console.log('rendered at', new Date())
return ( return (
<div> <div>
@@ -37,7 +37,7 @@ export default function MemChart({
'opacity-100': yAxisWidth, 'opacity-100': yAxisWidth,
})} })}
> >
<AreaChart accessibilityLayer data={systemData} margin={chartMargin}> <AreaChart accessibilityLayer data={systemChartData.systemStats} margin={chartMargin}>
<CartesianGrid vertical={false} /> <CartesianGrid vertical={false} />
{totalMem && ( {totalMem && (
<YAxis <YAxis
@@ -56,14 +56,15 @@ export default function MemChart({
)} )}
<XAxis <XAxis
dataKey="created" dataKey="created"
domain={[ticks[0], ticks.at(-1)!]} domain={systemChartData.domain}
ticks={ticks} ticks={systemChartData.ticks}
allowDataOverflow
type="number" type="number"
scale={'time'} scale="time"
minTickGap={35} minTickGap={30}
tickMargin={8} tickMargin={8}
axisLine={false} axisLine={false}
tickFormatter={chartTimeData[chartTime].format} tickFormatter={chartTimeData[systemChartData.chartTime].format}
/> />
<ChartTooltip <ChartTooltip
// cursor={false} // cursor={false}
@@ -75,7 +76,7 @@ export default function MemChart({
itemSorter={(a, b) => a.order - b.order} itemSorter={(a, b) => a.order - b.order}
labelFormatter={(_, data) => formatShortDate(data[0].payload.created)} labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
contentFormatter={(item) => decimalString(item.value) + ' GB'} contentFormatter={(item) => decimalString(item.value) + ' GB'}
indicator="line" // indicator="line"
/> />
} }
/> />
@@ -90,7 +91,7 @@ export default function MemChart({
stackId="1" stackId="1"
isAnimationActive={false} isAnimationActive={false}
/> />
{systemData.at(-1)?.stats.mz && ( {systemChartData.systemStats.at(-1)?.stats.mz && (
<Area <Area
name="ZFS ARC" name="ZFS ARC"
order={2} order={2}
@@ -119,4 +120,4 @@ export default function MemChart({
</ChartContainer> </ChartContainer>
</div> </div>
) )
} })

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

@@ -10,18 +10,19 @@ import {
decimalString, decimalString,
chartMargin, chartMargin,
} from '@/lib/utils' } from '@/lib/utils'
import { useStore } from '@nanostores/react' import { ChartTimes, SystemStatsRecord } from '@/types'
import { $chartTime } from '@/lib/stores' import { memo } from 'react'
import { SystemStatsRecord } from '@/types'
export default function SwapChart({ export default memo(function SwapChart({
ticks, systemChartData,
systemData,
}: { }: {
systemChartData: {
systemStats: SystemStatsRecord[]
ticks: number[] ticks: number[]
systemData: SystemStatsRecord[] domain: number[]
chartTime: ChartTimes
}
}) { }) {
const chartTime = useStore($chartTime)
const { yAxisWidth, updateYAxisWidth } = useYAxisWidth() const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
return ( return (
@@ -31,11 +32,15 @@ export default function SwapChart({
'opacity-100': yAxisWidth, 'opacity-100': yAxisWidth,
})} })}
> >
<AreaChart accessibilityLayer data={systemData} margin={chartMargin}> <AreaChart accessibilityLayer data={systemChartData.systemStats} margin={chartMargin}>
<CartesianGrid vertical={false} /> <CartesianGrid vertical={false} />
<YAxis <YAxis
className="tracking-tighter" className="tracking-tighter"
domain={[0, () => toFixedWithoutTrailingZeros(systemData.at(-1)?.stats.s ?? 0.04, 2)]} domain={[
0,
() =>
toFixedWithoutTrailingZeros(systemChartData.systemStats.at(-1)?.stats.s ?? 0.04, 2),
]}
width={yAxisWidth} width={yAxisWidth}
tickLine={false} tickLine={false}
axisLine={false} axisLine={false}
@@ -43,14 +48,15 @@ export default function SwapChart({
/> />
<XAxis <XAxis
dataKey="created" dataKey="created"
domain={[ticks[0], ticks.at(-1)!]} domain={systemChartData.domain}
ticks={ticks} ticks={systemChartData.ticks}
allowDataOverflow
type="number" type="number"
scale={'time'} scale="time"
minTickGap={35} minTickGap={30}
tickMargin={8} tickMargin={8}
axisLine={false} axisLine={false}
tickFormatter={chartTimeData[chartTime].format} tickFormatter={chartTimeData[systemChartData.chartTime].format}
/> />
<ChartTooltip <ChartTooltip
animationEasing="ease-out" animationEasing="ease-out"
@@ -59,7 +65,7 @@ export default function SwapChart({
<ChartTooltipContent <ChartTooltipContent
labelFormatter={(_, data) => formatShortDate(data[0].payload.created)} labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
contentFormatter={(item) => decimalString(item.value) + ' GB'} contentFormatter={(item) => decimalString(item.value) + ' GB'}
indicator="line" // indicator="line"
/> />
} }
/> />
@@ -76,4 +82,4 @@ export default function SwapChart({
</ChartContainer> </ChartContainer>
</div> </div>
) )
} })

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

@@ -16,19 +16,19 @@ import {
decimalString, decimalString,
chartMargin, chartMargin,
} from '@/lib/utils' } from '@/lib/utils'
import { useStore } from '@nanostores/react' import { ChartTimes, SystemStatsRecord } from '@/types'
import { $chartTime } from '@/lib/stores' import { memo, useMemo } from 'react'
import { SystemStatsRecord } from '@/types'
import { useMemo } from 'react'
export default function TemperatureChart({ export default memo(function TemperatureChart({
ticks, systemChartData,
systemData,
}: { }: {
systemChartData: {
systemStats: SystemStatsRecord[]
ticks: number[] ticks: number[]
systemData: SystemStatsRecord[] domain: number[]
chartTime: ChartTimes
}
}) { }) {
const chartTime = useStore($chartTime)
const { yAxisWidth, updateYAxisWidth } = useYAxisWidth() const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
/** Format temperature data for chart and assign colors */ /** Format temperature data for chart and assign colors */
@@ -38,7 +38,7 @@ export default function TemperatureChart({
colors: Record<string, string> colors: Record<string, string>
} }
const tempSums = {} as Record<string, number> const tempSums = {} as Record<string, number>
for (let data of systemData) { for (let data of systemChartData.systemStats) {
let newData = { created: data.created } as Record<string, number | string> let newData = { created: data.created } as Record<string, number | string>
let keys = Object.keys(data.stats?.t ?? {}) let keys = Object.keys(data.stats?.t ?? {})
for (let i = 0; i < keys.length; i++) { for (let i = 0; i < keys.length; i++) {
@@ -53,13 +53,14 @@ export default function TemperatureChart({
chartData.colors[key] = `hsl(${((keys.indexOf(key) * 360) / keys.length) % 360}, 60%, 55%)` chartData.colors[key] = `hsl(${((keys.indexOf(key) * 360) / keys.length) % 360}, 60%, 55%)`
} }
return chartData return chartData
}, [systemData]) }, [systemChartData])
const colors = Object.keys(newChartData.colors) const colors = Object.keys(newChartData.colors)
// console.log('rendered at', new Date())
return ( return (
<div> <div>
{/* {!yAxisSet && <Spinner />} */}
<ChartContainer <ChartContainer
className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', { className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
'opacity-100': yAxisWidth, 'opacity-100': yAxisWidth,
@@ -80,14 +81,15 @@ export default function TemperatureChart({
/> />
<XAxis <XAxis
dataKey="created" dataKey="created"
domain={[ticks[0], ticks.at(-1)!]} domain={systemChartData.domain}
ticks={ticks} ticks={systemChartData.ticks}
allowDataOverflow
type="number" type="number"
scale={'time'} scale="time"
minTickGap={35} minTickGap={30}
tickMargin={8} tickMargin={8}
axisLine={false} axisLine={false}
tickFormatter={chartTimeData[chartTime].format} tickFormatter={chartTimeData[systemChartData.chartTime].format}
/> />
<ChartTooltip <ChartTooltip
animationEasing="ease-out" animationEasing="ease-out"
@@ -98,7 +100,7 @@ export default function TemperatureChart({
<ChartTooltipContent <ChartTooltipContent
labelFormatter={(_, data) => formatShortDate(data[0].payload.created)} labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
contentFormatter={(item) => decimalString(item.value) + ' °C'} contentFormatter={(item) => decimalString(item.value) + ' °C'}
indicator="line" // indicator="line"
/> />
} }
/> />
@@ -119,4 +121,4 @@ export default function TemperatureChart({
</ChartContainer> </ChartContainer>
</div> </div>
) )
} })

162
beszel/site/src/components/routes/system.tsx
View File

@@ -1,5 +1,5 @@
import { $systems, pb, $chartTime, $containerFilter, $userSettings } from '@/lib/stores' import { $systems, pb, $chartTime, $containerFilter, $userSettings } from '@/lib/stores'
import { ContainerStatsRecord, SystemRecord, SystemStatsRecord } from '@/types' import { ContainerStats, ContainerStatsRecord, SystemRecord, SystemStatsRecord } from '@/types'
import React, { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from 'react' import React, { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { Card, CardHeader, CardTitle, CardDescription } from '../ui/card' import { Card, CardHeader, CardTitle, CardDescription } from '../ui/card'
import { useStore } from '@nanostores/react' import { useStore } from '@nanostores/react'
@@ -16,11 +16,10 @@ import { ChartAverage, ChartMax, Rows, TuxIcon } from '../ui/icons'
import { useIntersectionObserver } from '@/lib/use-intersection-observer' import { useIntersectionObserver } from '@/lib/use-intersection-observer'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
const ContainerCpuChart = lazy(() => import('../charts/container-cpu-chart'))
const MemChart = lazy(() => import('../charts/mem-chart'))
const ContainerMemChart = lazy(() => import('../charts/container-mem-chart'))
const DiskChart = lazy(() => import('../charts/disk-chart'))
const AreaChartDefault = lazy(() => import('../charts/area-chart')) const AreaChartDefault = lazy(() => import('../charts/area-chart'))
const ContainerChartDefault = lazy(() => import('../charts/container-chart'))
const MemChart = lazy(() => import('../charts/mem-chart'))
const DiskChart = lazy(() => import('../charts/disk-chart'))
const ContainerNetChart = lazy(() => import('../charts/container-net-chart')) const ContainerNetChart = lazy(() => import('../charts/container-net-chart'))
const SwapChart = lazy(() => import('../charts/swap-chart')) const SwapChart = lazy(() => import('../charts/swap-chart'))
const TemperatureChart = lazy(() => import('../charts/temperature-chart')) const TemperatureChart = lazy(() => import('../charts/temperature-chart'))
@@ -35,27 +34,22 @@ export default function SystemDetail({ name }: { name: string }) {
const bandwidthMaxStore = useState(false) const bandwidthMaxStore = useState(false)
const diskIoMaxStore = useState(false) const diskIoMaxStore = useState(false)
const [grid, setGrid] = useLocalStorage('grid', true) const [grid, setGrid] = useLocalStorage('grid', true)
const [ticks, setTicks] = useState([] as number[])
const [system, setSystem] = useState({} as SystemRecord) const [system, setSystem] = useState({} as SystemRecord)
const [systemStats, setSystemStats] = useState([] as SystemStatsRecord[]) const [systemStats, setSystemStats] = useState([] as SystemStatsRecord[])
const [containerData, setContainerData] = useState(
[] as Record<string, ContainerStats | number>[]
)
const netCardRef = useRef<HTMLDivElement>(null) const netCardRef = useRef<HTMLDivElement>(null)
const [containerFilterBar, setContainerFilterBar] = useState(null as null | JSX.Element) const [containerFilterBar, setContainerFilterBar] = useState(null as null | JSX.Element)
const [dockerCpuChartData, setDockerCpuChartData] = useState<Record<string, number | string>[]>(
[]
)
const [dockerMemChartData, setDockerMemChartData] = useState<Record<string, number | string>[]>(
[]
)
const [dockerNetChartData, setDockerNetChartData] = useState<Record<string, number | number[]>[]>(
[]
)
const isLongerChart = chartTime !== '1h' const isLongerChart = chartTime !== '1h'
useEffect(() => { useEffect(() => {
document.title = `${name} / Beszel` document.title = `${name} / Beszel`
return () => { return () => {
resetCharts()
$chartTime.set($userSettings.get().chartTime) $chartTime.set($userSettings.get().chartTime)
// resetCharts()
setSystemStats([])
setContainerData([])
setContainerFilterBar(null) setContainerFilterBar(null)
$containerFilter.set('') $containerFilter.set('')
cpuMaxStore[1](false) cpuMaxStore[1](false)
@@ -64,15 +58,14 @@ export default function SystemDetail({ name }: { name: string }) {
} }
}, [name]) }, [name])
function resetCharts() { // function resetCharts() {
setSystemStats([]) // setSystemStats([])
setDockerCpuChartData([]) // setContainerData([])
setDockerMemChartData([]) // }
setDockerNetChartData([])
}
useEffect(resetCharts, [chartTime]) // useEffect(resetCharts, [chartTime])
// find matching system
useEffect(() => { useEffect(() => {
if (system.id && system.name === name) { if (system.id && system.name === name) {
return return
@@ -96,6 +89,33 @@ export default function SystemDetail({ name }: { name: string }) {
} }
}, [system]) }, [system])
function getTimeData() {
const now = new Date()
const startTime = chartTimeData[chartTime].getOffset(now)
const scale = scaleTime([startTime.getTime(), now], [0, systemStats.length])
const ticks = scale.ticks(chartTimeData[chartTime].ticks).map((d) => d.getTime())
return {
ticks,
chartTime,
domain: [chartTimeData[chartTime].getOffset(now).getTime(), now.getTime()],
}
}
const systemChartData = useMemo(() => {
return {
systemStats,
...getTimeData(),
}
}, [systemStats])
const containerChartData = useMemo(() => {
return {
containerData,
...getTimeData(),
}
}, [containerData])
async function getStats<T>(collection: string): Promise<T[]> { async function getStats<T>(collection: string): Promise<T[]> {
const lastCached = cache.get(`${system.id}_${chartTime}_${collection}`)?.at(-1) const lastCached = cache.get(`${system.id}_${chartTime}_${collection}`)?.at(-1)
?.created as number ?.created as number
@@ -174,49 +194,24 @@ export default function SystemDetail({ name }: { name: string }) {
}) })
}, [system, chartTime]) }, [system, chartTime])
useEffect(() => {
if (!systemStats.length) {
return
}
const now = new Date()
const startTime = chartTimeData[chartTime].getOffset(now)
const scale = scaleTime([startTime.getTime(), now], [0, systemStats.length])
const newTicks = scale.ticks(chartTimeData[chartTime].ticks).map((d) => d.getTime())
if (newTicks[0] !== ticks[0]) {
setTicks(newTicks)
}
}, [chartTime, systemStats])
// make container stats for charts // make container stats for charts
const makeContainerData = useCallback((containers: ContainerStatsRecord[]) => { const makeContainerData = useCallback((containers: ContainerStatsRecord[]) => {
// console.log('containers', containers) // console.log('containers', containers)
const dockerCpuData = [] const containerData = [] as Record<string, ContainerStats | number>[]
const dockerMemData = []
const dockerNetData = []
for (let { created, stats } of containers) { for (let { created, stats } of containers) {
if (!created) { if (!created) {
let nullData = { time: null } as unknown let nullData = { created: null } as unknown
dockerCpuData.push(nullData as Record<string, number | string>) containerData.push(nullData as Record<string, ContainerStats | number>)
dockerMemData.push(nullData as Record<string, number | string>)
dockerNetData.push(nullData as Record<string, number | number[]>)
continue continue
} }
const time = new Date(created).getTime() created = new Date(created).getTime()
let cpuData = { time } as Record<string, number | string> let containerStats = { created } as Record<string, number | ContainerStats>
let memData = { time } as Record<string, number | string>
let netData = { time } as Record<string, number | number[]>
for (let container of stats) { for (let container of stats) {
cpuData[container.n] = container.c containerStats[container.n] = container
memData[container.n] = container.m
netData[container.n] = [container.ns, container.nr, container.ns + container.nr] // sent, received, total
} }
dockerCpuData.push(cpuData) containerData.push(containerStats)
dockerMemData.push(memData)
dockerNetData.push(netData)
} }
setDockerCpuChartData(dockerCpuData) setContainerData(containerData)
setDockerMemChartData(dockerMemData)
setDockerNetChartData(dockerNetData)
}, []) }, [])
// values for system info bar // values for system info bar
@@ -257,16 +252,16 @@ export default function SystemDetail({ name }: { name: string }) {
/** Space for tooltip if more than 12 containers */ /** Space for tooltip if more than 12 containers */
const bottomSpacing = useMemo(() => { const bottomSpacing = useMemo(() => {
if (!netCardRef.current || !dockerNetChartData.length) { if (!netCardRef.current || !containerData.length) {
return 0 return 0
} }
const tooltipHeight = (Object.keys(dockerNetChartData[0]).length - 11) * 17.8 - 40 const tooltipHeight = (Object.keys(containerData[0]).length - 11) * 17.8 - 40
const wrapperEl = document.getElementById('chartwrap') as HTMLDivElement const wrapperEl = document.getElementById('chartwrap') as HTMLDivElement
const wrapperRect = wrapperEl.getBoundingClientRect() const wrapperRect = wrapperEl.getBoundingClientRect()
const chartRect = netCardRef.current.getBoundingClientRect() const chartRect = netCardRef.current.getBoundingClientRect()
const distanceToBottom = wrapperRect.bottom - chartRect.bottom const distanceToBottom = wrapperRect.bottom - chartRect.bottom
return tooltipHeight - distanceToBottom return tooltipHeight - distanceToBottom
}, [netCardRef.current, dockerNetChartData]) }, [netCardRef.current, containerData])
if (!system.id) { if (!system.id) {
return null return null
@@ -365,12 +360,10 @@ export default function SystemDetail({ name }: { name: string }) {
cornerEl={isLongerChart ? <SelectAvgMax store={cpuMaxStore} /> : null} cornerEl={isLongerChart ? <SelectAvgMax store={cpuMaxStore} /> : null}
> >
<AreaChartDefault <AreaChartDefault
ticks={ticks} systemChartData={systemChartData}
systemData={systemStats}
chartName="CPU Usage" chartName="CPU Usage"
showMax={isLongerChart && cpuMaxStore[0]} maxToggled={cpuMaxStore[0]}
unit="%" unit="%"
chartTime={chartTime}
/> />
</ChartCard> </ChartCard>
@@ -381,7 +374,7 @@ export default function SystemDetail({ name }: { name: string }) {
description="Average CPU utilization of containers" description="Average CPU utilization of containers"
cornerEl={containerFilterBar} cornerEl={containerFilterBar}
> >
<ContainerCpuChart chartData={dockerCpuChartData} ticks={ticks} /> <ContainerChartDefault dataKey="c" containerChartData={containerChartData} />
</ChartCard> </ChartCard>
)} )}
@@ -390,7 +383,7 @@ export default function SystemDetail({ name }: { name: string }) {
title="Total Memory Usage" title="Total Memory Usage"
description="Precise utilization at the recorded time" description="Precise utilization at the recorded time"
> >
<MemChart ticks={ticks} systemData={systemStats} /> <MemChart systemChartData={systemChartData} />
</ChartCard> </ChartCard>
{containerFilterBar && ( {containerFilterBar && (
@@ -400,14 +393,17 @@ export default function SystemDetail({ name }: { name: string }) {
description="Memory usage of docker containers" description="Memory usage of docker containers"
cornerEl={containerFilterBar} cornerEl={containerFilterBar}
> >
<ContainerMemChart chartData={dockerMemChartData} ticks={ticks} /> <ContainerChartDefault
containerChartData={containerChartData}
dataKey="m"
unit=" MB"
/>
</ChartCard> </ChartCard>
)} )}
<ChartCard grid={grid} title="Disk Space" description="Usage of root partition"> <ChartCard grid={grid} title="Disk Space" description="Usage of root partition">
<DiskChart <DiskChart
ticks={ticks} systemChartData={systemChartData}
systemData={systemStats}
dataKey="stats.du" dataKey="stats.du"
diskSize={Math.round(systemStats.at(-1)?.stats.d ?? NaN)} diskSize={Math.round(systemStats.at(-1)?.stats.d ?? NaN)}
/> />
@@ -420,11 +416,9 @@ export default function SystemDetail({ name }: { name: string }) {
cornerEl={isLongerChart ? <SelectAvgMax store={diskIoMaxStore} /> : null} cornerEl={isLongerChart ? <SelectAvgMax store={diskIoMaxStore} /> : null}
> >
<AreaChartDefault <AreaChartDefault
ticks={ticks} systemChartData={systemChartData}
systemData={systemStats} maxToggled={diskIoMaxStore[0]}
showMax={isLongerChart && diskIoMaxStore[0]}
chartName="dio" chartName="dio"
chartTime={chartTime}
/> />
</ChartCard> </ChartCard>
@@ -435,15 +429,13 @@ export default function SystemDetail({ name }: { name: string }) {
description="Network traffic of public interfaces" description="Network traffic of public interfaces"
> >
<AreaChartDefault <AreaChartDefault
ticks={ticks} systemChartData={systemChartData}
systemData={systemStats} maxToggled={bandwidthMaxStore[0]}
showMax={isLongerChart && bandwidthMaxStore[0]}
chartName="bw" chartName="bw"
chartTime={chartTime}
/> />
</ChartCard> </ChartCard>
{containerFilterBar && dockerNetChartData.length > 0 && ( {containerFilterBar && containerData.length > 0 && (
<div <div
ref={netCardRef} ref={netCardRef}
className={cn({ className={cn({
@@ -455,20 +447,21 @@ export default function SystemDetail({ name }: { name: string }) {
description="Includes traffic between internal services" description="Includes traffic between internal services"
cornerEl={containerFilterBar} cornerEl={containerFilterBar}
> >
<ContainerNetChart chartData={dockerNetChartData} ticks={ticks} /> {/* @ts-ignore */}
<ContainerNetChart containerChartData={containerChartData} />
</ChartCard> </ChartCard>
</div> </div>
)} )}
{(systemStats.at(-1)?.stats.su ?? 0) > 0 && ( {(systemStats.at(-1)?.stats.su ?? 0) > 0 && (
<ChartCard grid={grid} title="Swap Usage" description="Swap space used by the system"> <ChartCard grid={grid} title="Swap Usage" description="Swap space used by the system">
<SwapChart ticks={ticks} systemData={systemStats} /> <SwapChart systemChartData={systemChartData} />
</ChartCard> </ChartCard>
)} )}
{systemStats.at(-1)?.stats.t && ( {systemStats.at(-1)?.stats.t && (
<ChartCard grid={grid} title="Temperature" description="Temperatures of system sensors"> <ChartCard grid={grid} title="Temperature" description="Temperatures of system sensors">
<TemperatureChart ticks={ticks} systemData={systemStats} /> <TemperatureChart systemChartData={systemChartData} />
</ChartCard> </ChartCard>
)} )}
</div> </div>
@@ -485,8 +478,7 @@ export default function SystemDetail({ name }: { name: string }) {
description={`Disk usage of ${extraFsName}`} description={`Disk usage of ${extraFsName}`}
> >
<DiskChart <DiskChart
ticks={ticks} systemChartData={systemChartData}
systemData={systemStats}
dataKey={`stats.efs.${extraFsName}.du`} dataKey={`stats.efs.${extraFsName}.du`}
diskSize={Math.round(systemStats.at(-1)?.stats.efs?.[extraFsName].d ?? NaN)} diskSize={Math.round(systemStats.at(-1)?.stats.efs?.[extraFsName].d ?? NaN)}
/> />
@@ -498,11 +490,9 @@ export default function SystemDetail({ name }: { name: string }) {
cornerEl={isLongerChart ? <SelectAvgMax store={diskIoMaxStore} /> : null} cornerEl={isLongerChart ? <SelectAvgMax store={diskIoMaxStore} /> : null}
> >
<AreaChartDefault <AreaChartDefault
ticks={ticks} systemChartData={systemChartData}
systemData={systemStats} maxToggled={diskIoMaxStore[0]}
showMax={isLongerChart && diskIoMaxStore[0]}
chartName={`efs.${extraFsName}`} chartName={`efs.${extraFsName}`}
chartTime={chartTime}
/> />
</ChartCard> </ChartCard>
</div> </div>

11
beszel/site/src/components/ui/chart.tsx
View File

@@ -95,7 +95,6 @@ const ChartTooltipContent = React.forwardRef<
React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
React.ComponentProps<'div'> & { React.ComponentProps<'div'> & {
hideLabel?: boolean hideLabel?: boolean
hideIndicator?: boolean
indicator?: 'line' | 'dot' | 'dashed' indicator?: 'line' | 'dot' | 'dashed'
nameKey?: string nameKey?: string
labelKey?: string labelKey?: string
@@ -109,9 +108,8 @@ const ChartTooltipContent = React.forwardRef<
active, active,
payload, payload,
className, className,
indicator = 'dot', indicator = 'line',
hideLabel = false, hideLabel = false,
hideIndicator = false,
label, label,
labelFormatter, labelFormatter,
labelClassName, labelClassName,
@@ -145,7 +143,7 @@ const ChartTooltipContent = React.forwardRef<
} }
const [item] = payload const [item] = payload
const key = `${labelKey || item.dataKey || item.name || 'value'}` const key = `${labelKey || item.name || 'value'}`
const itemConfig = getPayloadConfigFromPayload(config, item, key) const itemConfig = getPayloadConfigFromPayload(config, item, key)
const value = !labelKey && typeof label === 'string' ? label : itemConfig?.label const value = !labelKey && typeof label === 'string' ? label : itemConfig?.label
@@ -166,7 +164,8 @@ const ChartTooltipContent = React.forwardRef<
return null return null
} }
const nestLabel = payload.length === 1 && indicator !== 'dot' // const nestLabel = payload.length === 1 && indicator !== 'dot'
const nestLabel = false
return ( return (
<div <div
@@ -198,7 +197,6 @@ const ChartTooltipContent = React.forwardRef<
{itemConfig?.icon ? ( {itemConfig?.icon ? (
<itemConfig.icon /> <itemConfig.icon />
) : ( ) : (
!hideIndicator && (
<div <div
className={cn( className={cn(
'shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]', 'shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]',
@@ -217,7 +215,6 @@ const ChartTooltipContent = React.forwardRef<
} as React.CSSProperties } as React.CSSProperties
} }
/> />
)
)} )}
<div <div
className={cn( className={cn(