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

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