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

improve y axis annoyances on charts

Browse Source
This commit is contained in:
Henry Dollman
2024-08-06 20:23:59 -04:00
parent f4332d69d5
commit 2eb691661c
7 changed files with 28 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -82,6 +82,7 @@ export default function ContainerCpuChart({
>
<CartesianGrid vertical={false} />
<YAxis
className="tracking-tighter"
// domain={[0, (max: number) => Math.max(Math.ceil(max), 0.4)]}
width={yAxisWidth}
tickLine={false}

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

@@ -88,6 +88,7 @@ export default function ContainerMemChart({
>
<CartesianGrid vertical={false} />
<YAxis
className="tracking-tighter"
// domain={[0, (max: number) => Math.ceil(max)]}
tickLine={false}
axisLine={false}

1
hub/site/src/components/charts/container-net-chart.tsx
View File

@@ -88,6 +88,7 @@ export default function ContainerCpuChart({
>
<CartesianGrid vertical={false} />
<YAxis
className="tracking-tighter"
// domain={[0, (max: number) => Math.max(Math.ceil(max), 0.4)]}
width={yAxisWidth}
tickLine={false}

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

@@ -21,10 +21,6 @@ export default function CpuChart({
const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
// if (!systemData.length || !ticks.length) {
// return <Spinner />
// }
return (
<div ref={chartRef}>
<ChartContainer
@@ -36,6 +32,7 @@ export default function CpuChart({
<AreaChart accessibilityLayer data={systemData} margin={{ top: 10 }}>
<CartesianGrid vertical={false} />
<YAxis
className="tracking-tighter"
// domain={[0, (max: number) => Math.ceil(max)]}
width={yAxisWidth}
tickLine={false}

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

@@ -1,13 +1,7 @@
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
import {
chartTimeData,
cn,
formatShortDate,
toFixedWithoutTrailingZeros,
useYaxisWidth,
} from '@/lib/utils'
import { chartTimeData, cn, formatShortDate, toFixedFloat, useYaxisWidth } from '@/lib/utils'
import { useMemo, useRef } from 'react'
// import Spinner from '../spinner'
import { useStore } from '@nanostores/react'
@@ -21,20 +15,15 @@ export default function MemChart({
ticks: number[]
systemData: SystemStatsRecord[]
}) {
const chartTime = useStore($chartTime)
const chartRef = useRef<HTMLDivElement>(null)
const yAxisWidth = useYaxisWidth(chartRef)
const chartTime = useStore($chartTime)
const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
// const totalMem = useMemo(() => {
// const maxMem = Math.ceil(systemData[0]?.stats.m)
// return maxMem > 2 && maxMem % 2 !== 0 ? maxMem + 1 : maxMem
// }, [systemData])
// if (!systemData.length || !ticks.length) {
// return <Spinner />
// }
const totalMem = useMemo(() => {
return toFixedFloat(systemData.at(-1)?.stats.m ?? 0, 1)
}, [systemData])
return (
<div ref={chartRef}>
@@ -53,14 +42,17 @@ export default function MemChart({
}}
>
<CartesianGrid vertical={false} />
<YAxis
// use "ticks" instead of domain / tickcount if need more control
domain={[0, () => toFixedWithoutTrailingZeros(systemData.at(-1)?.stats.m ?? 0.04, 1)]}
width={yAxisWidth}
tickLine={false}
axisLine={false}
unit={' GB'}
/>
{totalMem && (
<YAxis
// use "ticks" instead of domain / tickcount if need more control
domain={[0, totalMem]}
className="tracking-tighter"
width={yAxisWidth}
tickLine={false}
axisLine={false}
unit={' GB'}
/>
)}
<XAxis
dataKey="created"
domain={[ticks[0], ticks.at(-1)!]}
@@ -93,8 +85,7 @@ export default function MemChart({
fill="hsl(var(--chart-2))"
fillOpacity={0.4}
stroke="hsl(var(--chart-2))"
stackId="a"
// animationDuration={1200}
stackId="1"
isAnimationActive={false}
/>
<Area
@@ -105,8 +96,7 @@ export default function MemChart({
fillOpacity={0.2}
strokeOpacity={0.3}
stroke="hsl(var(--chart-2))"
stackId="a"
// animationDuration={1200}
stackId="1"
isAnimationActive={false}
/>
</AreaChart>

1
hub/site/src/components/charts/swap-chart.tsx
View File

@@ -38,6 +38,7 @@ export default function SwapChart({
<AreaChart accessibilityLayer data={systemData} margin={{ top: 10 }}>
<CartesianGrid vertical={false} />
<YAxis
className="tracking-tighter"
domain={[0, () => toFixedWithoutTrailingZeros(systemData.at(-1)?.stats.s ?? 0.04, 2)]}
width={yAxisWidth}
tickLine={false}

6
hub/site/src/lib/utils.ts
View File

@@ -192,7 +192,7 @@ export function useYaxisWidth(chartRef: React.RefObject<HTMLDivElement>) {
if (yAxisElement) {
// console.log('yAxisElement', yAxisElement)
clearInterval(interval)
setYAxisWidth(yAxisElement.getBoundingClientRect().width + 24)
setYAxisWidth(yAxisElement.getBoundingClientRect().width + 22)
}
}, 16)
return () => clearInterval(interval)
@@ -221,3 +221,7 @@ export function useClampedIsInViewport(options: HookOptions): [boolean | null, C
export function toFixedWithoutTrailingZeros(num: number, digits: number) {
return parseFloat(num.toFixed(digits)).toString()
}
export function toFixedFloat(num: number, digits: number) {
return parseFloat(num.toFixed(digits))
}