simplify container chart data and reduce rerenders

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

View File

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

View File

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

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

View File

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

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -1,5 +1,5 @@
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 { Card, CardHeader, CardTitle, CardDescription } from '../ui/card'
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 { 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 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 SwapChart = lazy(() => import('../charts/swap-chart'))
const TemperatureChart = lazy(() => import('../charts/temperature-chart'))
@@ -35,27 +34,22 @@ export default function SystemDetail({ name }: { name: string }) {
const bandwidthMaxStore = useState(false)
const diskIoMaxStore = useState(false)
const [grid, setGrid] = useLocalStorage('grid', true)
const [ticks, setTicks] = useState([] as number[])
const [system, setSystem] = useState({} as SystemRecord)
const [systemStats, setSystemStats] = useState([] as SystemStatsRecord[])
const [containerData, setContainerData] = useState(
[] as Record<string, ContainerStats | number>[]
)
const netCardRef = useRef<HTMLDivElement>(null)
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'
useEffect(() => {
document.title = `${name} / Beszel`
return () => {
resetCharts()
$chartTime.set($userSettings.get().chartTime)
// resetCharts()
setSystemStats([])
setContainerData([])
setContainerFilterBar(null)
$containerFilter.set('')
cpuMaxStore[1](false)
@@ -64,15 +58,14 @@ export default function SystemDetail({ name }: { name: string }) {
}
}, [name])
function resetCharts() {
setSystemStats([])
setDockerCpuChartData([])
setDockerMemChartData([])
setDockerNetChartData([])
}
// function resetCharts() {
// setSystemStats([])
// setContainerData([])
// }
useEffect(resetCharts, [chartTime])
// useEffect(resetCharts, [chartTime])
// find matching system
useEffect(() => {
if (system.id && system.name === name) {
return
@@ -96,6 +89,33 @@ export default function SystemDetail({ name }: { name: string }) {
}
}, [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[]> {
const lastCached = cache.get(`${system.id}_${chartTime}_${collection}`)?.at(-1)
?.created as number
@@ -174,49 +194,24 @@ export default function SystemDetail({ name }: { name: string }) {
})
}, [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
const makeContainerData = useCallback((containers: ContainerStatsRecord[]) => {
// console.log('containers', containers)
const dockerCpuData = []
const dockerMemData = []
const dockerNetData = []
const containerData = [] as Record<string, ContainerStats | number>[]
for (let { created, stats } of containers) {
if (!created) {
let nullData = { time: null } as unknown
dockerCpuData.push(nullData as Record<string, number | string>)
dockerMemData.push(nullData as Record<string, number | string>)
dockerNetData.push(nullData as Record<string, number | number[]>)
let nullData = { created: null } as unknown
containerData.push(nullData as Record<string, ContainerStats | number>)
continue
}
const time = new Date(created).getTime()
let cpuData = { time } as Record<string, number | string>
let memData = { time } as Record<string, number | string>
let netData = { time } as Record<string, number | number[]>
created = new Date(created).getTime()
let containerStats = { created } as Record<string, number | ContainerStats>
for (let container of stats) {
cpuData[container.n] = container.c
memData[container.n] = container.m
netData[container.n] = [container.ns, container.nr, container.ns + container.nr] // sent, received, total
containerStats[container.n] = container
}
dockerCpuData.push(cpuData)
dockerMemData.push(memData)
dockerNetData.push(netData)
containerData.push(containerStats)
}
setDockerCpuChartData(dockerCpuData)
setDockerMemChartData(dockerMemData)
setDockerNetChartData(dockerNetData)
setContainerData(containerData)
}, [])
// values for system info bar
@@ -257,16 +252,16 @@ export default function SystemDetail({ name }: { name: string }) {
/** Space for tooltip if more than 12 containers */
const bottomSpacing = useMemo(() => {
if (!netCardRef.current || !dockerNetChartData.length) {
if (!netCardRef.current || !containerData.length) {
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 wrapperRect = wrapperEl.getBoundingClientRect()
const chartRect = netCardRef.current.getBoundingClientRect()
const distanceToBottom = wrapperRect.bottom - chartRect.bottom
return tooltipHeight - distanceToBottom
}, [netCardRef.current, dockerNetChartData])
}, [netCardRef.current, containerData])
if (!system.id) {
return null
@@ -365,12 +360,10 @@ export default function SystemDetail({ name }: { name: string }) {
cornerEl={isLongerChart ? <SelectAvgMax store={cpuMaxStore} /> : null}
>
<AreaChartDefault
ticks={ticks}
systemData={systemStats}
systemChartData={systemChartData}
chartName="CPU Usage"
showMax={isLongerChart && cpuMaxStore[0]}
maxToggled={cpuMaxStore[0]}
unit="%"
chartTime={chartTime}
/>
</ChartCard>
@@ -381,7 +374,7 @@ export default function SystemDetail({ name }: { name: string }) {
description="Average CPU utilization of containers"
cornerEl={containerFilterBar}
>
<ContainerCpuChart chartData={dockerCpuChartData} ticks={ticks} />
<ContainerChartDefault dataKey="c" containerChartData={containerChartData} />
</ChartCard>
)}
@@ -390,7 +383,7 @@ export default function SystemDetail({ name }: { name: string }) {
title="Total Memory Usage"
description="Precise utilization at the recorded time"
>
<MemChart ticks={ticks} systemData={systemStats} />
<MemChart systemChartData={systemChartData} />
</ChartCard>
{containerFilterBar && (
@@ -400,14 +393,17 @@ export default function SystemDetail({ name }: { name: string }) {
description="Memory usage of docker containers"
cornerEl={containerFilterBar}
>
<ContainerMemChart chartData={dockerMemChartData} ticks={ticks} />
<ContainerChartDefault
containerChartData={containerChartData}
dataKey="m"
unit=" MB"
/>
</ChartCard>
)}
<ChartCard grid={grid} title="Disk Space" description="Usage of root partition">
<DiskChart
ticks={ticks}
systemData={systemStats}
systemChartData={systemChartData}
dataKey="stats.du"
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}
>
<AreaChartDefault
ticks={ticks}
systemData={systemStats}
showMax={isLongerChart && diskIoMaxStore[0]}
systemChartData={systemChartData}
maxToggled={diskIoMaxStore[0]}
chartName="dio"
chartTime={chartTime}
/>
</ChartCard>
@@ -435,15 +429,13 @@ export default function SystemDetail({ name }: { name: string }) {
description="Network traffic of public interfaces"
>
<AreaChartDefault
ticks={ticks}
systemData={systemStats}
showMax={isLongerChart && bandwidthMaxStore[0]}
systemChartData={systemChartData}
maxToggled={bandwidthMaxStore[0]}
chartName="bw"
chartTime={chartTime}
/>
</ChartCard>
{containerFilterBar && dockerNetChartData.length > 0 && (
{containerFilterBar && containerData.length > 0 && (
<div
ref={netCardRef}
className={cn({
@@ -455,20 +447,21 @@ export default function SystemDetail({ name }: { name: string }) {
description="Includes traffic between internal services"
cornerEl={containerFilterBar}
>
<ContainerNetChart chartData={dockerNetChartData} ticks={ticks} />
{/* @ts-ignore */}
<ContainerNetChart containerChartData={containerChartData} />
</ChartCard>
</div>
)}
{(systemStats.at(-1)?.stats.su ?? 0) > 0 && (
<ChartCard grid={grid} title="Swap Usage" description="Swap space used by the system">
<SwapChart ticks={ticks} systemData={systemStats} />
<SwapChart systemChartData={systemChartData} />
</ChartCard>
)}
{systemStats.at(-1)?.stats.t && (
<ChartCard grid={grid} title="Temperature" description="Temperatures of system sensors">
<TemperatureChart ticks={ticks} systemData={systemStats} />
<TemperatureChart systemChartData={systemChartData} />
</ChartCard>
)}
</div>
@@ -485,8 +478,7 @@ export default function SystemDetail({ name }: { name: string }) {
description={`Disk usage of ${extraFsName}`}
>
<DiskChart
ticks={ticks}
systemData={systemStats}
systemChartData={systemChartData}
dataKey={`stats.efs.${extraFsName}.du`}
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}
>
<AreaChartDefault
ticks={ticks}
systemData={systemStats}
showMax={isLongerChart && diskIoMaxStore[0]}
systemChartData={systemChartData}
maxToggled={diskIoMaxStore[0]}
chartName={`efs.${extraFsName}`}
chartTime={chartTime}
/>
</ChartCard>
</div>

View File

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