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

adapt y axis width in recharts

Browse Source
This commit is contained in:
Henry Dollman
2024-08-04 16:35:12 -04:00
parent b05184a654
commit e3ed07a999
9 changed files with 556 additions and 503 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,8 @@
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
import { chartTimeData, formatShortDate } from '@/lib/utils'
import { useMemo } from 'react'
import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
import { useMemo, useRef } from 'react'
import Spinner from '../spinner'
import { useStore } from '@nanostores/react'
import { $chartTime } from '@/lib/stores'
@@ -16,6 +16,8 @@ export default function MemChart({
systemData: SystemStatsRecord[]
}) {
const chartTime = useStore($chartTime)
const chartRef = useRef<HTMLDivElement>(null)
const yAxisWidth = useYaxisWidth(chartRef)
const totalMem = useMemo(() => {
const maxMem = Math.ceil(systemData[0]?.stats.m)
@@ -27,71 +29,72 @@ export default function MemChart({
}
return (
<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
<AreaChart
accessibilityLayer
data={systemData}
margin={{
top: 10,
}}
>
<CartesianGrid vertical={false} />
<YAxis
// use "ticks" instead of domain / tickcount if need more control
domain={[0, totalMem]}
tickLine={false}
width={totalMem >= 100 ? 65 : 58}
// allowDecimals={false}
axisLine={false}
unit={' GB'}
/>
<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
// cursor={false}
animationEasing="ease-out"
animationDuration={150}
content={
<ChartTooltipContent
unit=" GB"
// @ts-ignore
itemSorter={(a, b) => a.name.localeCompare(b.name)}
labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
indicator="line"
/>
}
/>
<Area
dataKey="stats.mu"
name="Used"
type="monotoneX"
fill="hsl(var(--chart-2))"
fillOpacity={0.4}
stroke="hsl(var(--chart-2))"
stackId="a"
animationDuration={1200}
/>
<Area
dataKey="stats.mb"
name="Cache / Buffers"
type="monotoneX"
fill="hsl(var(--chart-2))"
fillOpacity={0.2}
strokeOpacity={0.3}
stroke="hsl(var(--chart-2))"
stackId="a"
animationDuration={1200}
/>
</AreaChart>
</ChartContainer>
<div ref={chartRef}>
<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
<AreaChart
accessibilityLayer
data={systemData}
margin={{
top: 10,
}}
>
<CartesianGrid vertical={false} />
<YAxis
// use "ticks" instead of domain / tickcount if need more control
domain={[0, totalMem]}
width={yAxisWidth}
tickLine={false}
axisLine={false}
unit={' GB'}
/>
<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
// cursor={false}
animationEasing="ease-out"
animationDuration={150}
content={
<ChartTooltipContent
unit=" GB"
// @ts-ignore
itemSorter={(a, b) => a.name.localeCompare(b.name)}
labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
indicator="line"
/>
}
/>
<Area
dataKey="stats.mu"
name="Used"
type="monotoneX"
fill="hsl(var(--chart-2))"
fillOpacity={0.4}
stroke="hsl(var(--chart-2))"
stackId="a"
animationDuration={1200}
/>
<Area
dataKey="stats.mb"
name="Cache / Buffers"
type="monotoneX"
fill="hsl(var(--chart-2))"
fillOpacity={0.2}
strokeOpacity={0.3}
stroke="hsl(var(--chart-2))"
stackId="a"
animationDuration={1200}
/>
</AreaChart>
</ChartContainer>
</div>
)
}