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

chart tooltip sorting

Browse Source
This commit is contained in:
Henry Dollman
2024-07-12 17:37:49 -04:00
parent e7ff1172d5
commit 998fa6e03a
7 changed files with 50 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,13 +11,7 @@ import { useMemo } from 'react'
import { formatShortDate, formatShortTime } from '@/lib/utils'
import Spinner from '../spinner'
export default function ({
chartData,
max,
}: {
chartData: Record<string, number | string>[]
max: number
}) {
export default function ({ chartData }: { chartData: Record<string, number | string>[] }) {
const chartConfig = useMemo(() => {
let config = {} as Record<
string,
@@ -65,8 +59,7 @@ export default function ({
margin={{
top: 10,
}}
// reverseStackOrder={true}
reverseStackOrder={true}
>
<CartesianGrid vertical={false} />
<YAxis
@@ -88,10 +81,8 @@ export default function ({
<ChartTooltip
cursor={false}
labelFormatter={formatShortDate}
// itemSorter={(item) => {
// console.log('itemSorter', item)
// return -item.value
// }}
// @ts-ignore
itemSorter={(a, b) => b.value - a.value}
content={<ChartTooltipContent unit="%" indicator="line" />}
/>
{Object.keys(chartConfig).map((key) => (
@@ -100,7 +91,7 @@ export default function ({
// isAnimationActive={false}
animateNewValues={false}
dataKey={key}
type="bump"
type="monotone"
fill={chartConfig[key].color}
fillOpacity={0.4}
stroke={chartConfig[key].color}

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

@@ -11,14 +11,7 @@ import { useMemo } from 'react'
import { formatShortDate, formatShortTime } from '@/lib/utils'
import Spinner from '../spinner'
export default function ({
chartData,
max,
}: {
chartData: Record<string, number | string>[]
max: number
}) {
console.log('max', max)
export default function ({ chartData }: { chartData: Record<string, number | string>[] }) {
const chartConfig = useMemo(() => {
let config = {} as Record<
string,
@@ -63,6 +56,7 @@ export default function ({
<AreaChart
accessibilityLayer
data={chartData}
reverseStackOrder={true}
margin={{
top: 10,
}}
@@ -71,12 +65,16 @@ export default function ({
>
<CartesianGrid vertical={false} />
<YAxis
domain={[0, max]}
tickCount={9}
domain={[0, (max: number) => Math.ceil(max)]}
// tickCount={9}
allowDecimals={false}
tickLine={false}
axisLine={false}
tickFormatter={(v) => `${Math.ceil(v / 1024)} GiB`}
unit={' GiB'}
tickFormatter={(x) => {
x = x / 1024
return x % 1 === 0 ? x : x.toFixed(1)
}}
/>
<XAxis
dataKey="time"
@@ -89,10 +87,8 @@ export default function ({
<ChartTooltip
cursor={false}
labelFormatter={formatShortDate}
// itemSorter={(item) => {
// console.log('itemSorter', item)
// return -item.value
// }}
// @ts-ignore
itemSorter={(a, b) => b.value - a.value}
content={<ChartTooltipContent unit=" MiB" indicator="line" />}
/>
{Object.keys(chartConfig).map((key) => (
@@ -101,7 +97,7 @@ export default function ({
// isAnimationActive={false}
animateNewValues={false}
dataKey={key}
type="natural"
type="monotone"
fill={chartConfig[key].color}
fillOpacity={0.4}
stroke={chartConfig[key].color}

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

@@ -19,13 +19,7 @@ const chartConfig = {
},
} satisfies ChartConfig
export default function ({
chartData,
max,
}: {
chartData: { time: string; cpu: number }[]
max: number
}) {
export default function ({ chartData }: { chartData: { time: string; cpu: number }[] }) {
if (!chartData?.length) {
return <Spinner />
}
@@ -35,7 +29,7 @@ export default function ({
<AreaChart accessibilityLayer data={chartData} margin={{ top: 10 }}>
<CartesianGrid vertical={false} />
<YAxis
domain={[0, max]}
domain={[0, (max: number) => Math.ceil(max)]}
width={47}
// tickCount={5}
tickLine={false}

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

@@ -82,7 +82,7 @@ export default function ({
/>
<Area
dataKey="diskUsed"
type="bump"
type="monotone"
fill="var(--color-diskUsed)"
fillOpacity={0.4}
stroke="var(--color-diskUsed)"

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

@@ -61,12 +61,12 @@ export default function ({
<ChartTooltip
cursor={false}
content={
<ChartTooltipContent unit=" GiB" labelFormatter={formatShortDate} indicator="line" />
<ChartTooltipContent unit="GiB" labelFormatter={formatShortDate} indicator="line" />
}
/>
<Area
dataKey="memUsed"
type="bump"
type="monotone"
fill="var(--color-memUsed)"
fillOpacity={0.4}
stroke="var(--color-memUsed)"

46
site/src/components/routes/server.tsx
View File

@@ -31,14 +31,12 @@ export default function ServerDetail({ name }: { name: string }) {
const [containers, setContainers] = useState([] as ContainerStatsRecord[])
const [serverStats, setServerStats] = useState([] as SystemStatsRecord[])
const [cpuChartData, setCpuChartData] = useState(
{} as { max: number; data: { time: string; cpu: number }[] }
)
const [cpuChartData, setCpuChartData] = useState([] as { time: string; cpu: number }[])
const [memChartData, setMemChartData] = useState(
{} as { time: string; mem: number; memUsed: number }[]
[] as { time: string; mem: number; memUsed: number }[]
)
const [diskChartData, setDiskChartData] = useState(
{} as { time: string; disk: number; diskUsed: number }[]
[] as { time: string; disk: number; diskUsed: number }[]
)
const [containerCpuChartData, setContainerCpuChartData] = useState(
[] as Record<string, number | string>[]
@@ -51,7 +49,7 @@ export default function ServerDetail({ name }: { name: string }) {
document.title = name
return () => {
setContainerCpuChartData([])
setCpuChartData({} as { max: number; data: { time: string; cpu: number }[] })
setCpuChartData([])
setMemChartData([])
setDiskChartData([])
}
@@ -70,7 +68,7 @@ export default function ServerDetail({ name }: { name: string }) {
sort: '-created',
})
.then((records) => {
console.log('stats', records)
// console.log('sctats', records)
setServerStats(records.items)
})
}, [server])
@@ -80,35 +78,32 @@ export default function ServerDetail({ name }: { name: string }) {
if (!serverStats.length) {
return
}
let maxCpu = 0
// let maxCpu = 0
const cpuData = [] as { time: string; cpu: number }[]
const memData = [] as { time: string; mem: number; memUsed: number }[]
const diskData = [] as { time: string; disk: number; diskUsed: number }[]
for (let { created, stats } of serverStats) {
cpuData.push({ time: created, cpu: stats.c })
maxCpu = Math.max(maxCpu, stats.c)
// maxCpu = Math.max(maxCpu, stats.c)
memData.push({ time: created, mem: stats.m, memUsed: stats.mu })
diskData.push({ time: created, disk: stats.d, diskUsed: stats.du })
}
setCpuChartData({
max: Math.ceil(maxCpu),
data: cpuData.reverse(),
})
setCpuChartData(cpuData.reverse())
setMemChartData(memData.reverse())
setDiskChartData(diskData.reverse())
}, [serverStats])
useEffect(() => {
if ($servers.get().length === 0) {
console.log('skipping')
// console.log('skipping')
return
}
console.log('running')
// console.log('running')
const matchingServer = servers.find((s) => s.name === name) as SystemRecord
setServer(matchingServer)
console.log('matchingServer', matchingServer)
console.log('found server', matchingServer)
// pb.collection<SystemRecord>('systems')
// .getOne(serverId)
// .then((record) => {
@@ -129,7 +124,7 @@ export default function ServerDetail({ name }: { name: string }) {
// container stats for charts
useEffect(() => {
console.log('containers', containers)
// console.log('containers', containers)
const containerCpuData = [] as Record<string, number | string>[]
const containerMemData = [] as Record<string, number | string>[]
@@ -153,7 +148,7 @@ export default function ServerDetail({ name }: { name: string }) {
<Card className="pb-2">
<CardHeader>
<CardTitle className="flex gap-2 justify-between">
<span>CPU Usage</span>
<span>Total CPU Usage</span>
<CpuIcon className="opacity-70" />
</CardTitle>
<CardDescription>
@@ -162,7 +157,7 @@ export default function ServerDetail({ name }: { name: string }) {
</CardHeader>
<CardContent className={'pl-1 w-[calc(100%-2em)] h-52 relative'}>
<Suspense fallback={<Spinner />}>
<CpuChart chartData={cpuChartData.data} max={cpuChartData.max} />
<CpuChart chartData={cpuChartData} />
</Suspense>
</CardContent>
</Card>
@@ -177,15 +172,15 @@ export default function ServerDetail({ name }: { name: string }) {
</CardHeader>
<CardContent className={'pl-1 w-[calc(100%-2em)] h-52 relative'}>
<Suspense fallback={<Spinner />}>
<ContainerCpuChart chartData={containerCpuChartData} max={cpuChartData.max} />
<ContainerCpuChart chartData={containerCpuChartData} />
</Suspense>
</CardContent>
</Card>
)}
<Card className="pb-2">
<CardHeader>
<CardTitle>Memory Usage</CardTitle>
<CardDescription>Precise usage at the recorded time</CardDescription>
<CardTitle>Total Memory Usage</CardTitle>
<CardDescription>Precise utilization at the recorded time</CardDescription>
</CardHeader>
<CardContent className={'pl-1 w-[calc(100%-2em)] h-52 relative'}>
<Suspense fallback={<Spinner />}>
@@ -204,12 +199,7 @@ export default function ServerDetail({ name }: { name: string }) {
</CardHeader>
<CardContent className={'pl-1 w-[calc(100%-2em)] h-52 relative'}>
<Suspense fallback={<Spinner />}>
{server?.stats?.m && (
<ContainerMemChart
chartData={containerMemChartData}
max={server.stats.m * 1024}
/>
)}
{server?.stats?.m && <ContainerMemChart chartData={containerMemChartData} />}
</Suspense>
</CardContent>
</Card>

10
site/src/components/ui/chart.tsx
View File

@@ -118,11 +118,21 @@ const ChartTooltipContent = React.forwardRef<
nameKey,
labelKey,
unit,
itemSorter,
},
ref
) => {
const { config } = useChart()
payload = React.useMemo(() => {
if (itemSorter) {
return payload.sort(itemSorter)
}
return payload
}, [itemSorter, payload])
// console.log('iiiiii', itemSorter)
const tooltipLabel = React.useMemo(() => {
if (hideLabel || !payload?.length) {
return null