jnd/beszel-ipv6
1
0
Fork 0
mirror of https://github.com/henrygd/beszel.git synced 2025-12-17 18:56:17 +01:00
Code Issues Packages Projects Releases 2 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

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

@@ -1,11 +1,12 @@
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
import { chartTimeData, formatShortDate } from '@/lib/utils'
import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
import Spinner from '../spinner'
import { useStore } from '@nanostores/react'
import { $chartTime } from '@/lib/stores'
import { SystemStatsRecord } from '@/types'
import { useRef } from 'react'
export default function CpuChart({
ticks,
@@ -14,6 +15,8 @@ export default function CpuChart({
ticks: number[]
systemData: SystemStatsRecord[]
}) {
const chartRef = useRef<HTMLDivElement>(null)
const yAxisWidth = useYaxisWidth(chartRef)
const chartTime = useStore($chartTime)
if (!systemData.length || !ticks.length) {
@@ -21,50 +24,52 @@ export default function CpuChart({
}
return (
<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
<AreaChart accessibilityLayer data={systemData} margin={{ top: 10 }}>
<CartesianGrid vertical={false} />
<YAxis
// domain={[0, (max: number) => Math.ceil(max)]}
width={48}
tickLine={false}
axisLine={false}
unit={'%'}
/>
<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
unit="%"
labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
indicator="line"
/>
}
/>
<Area
dataKey="stats.cpu"
name="CPU Usage"
type="monotoneX"
fill="hsl(var(--chart-1))"
fillOpacity={0.4}
stroke="hsl(var(--chart-1))"
animationDuration={1200}
// animationEasing="ease-out"
// animateNewValues={false}
/>
</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
// domain={[0, (max: number) => Math.ceil(max)]}
width={yAxisWidth}
tickLine={false}
axisLine={false}
unit={'%'}
/>
<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
unit="%"
labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
indicator="line"
/>
}
/>
<Area
dataKey="stats.cpu"
name="CPU Usage"
type="monotoneX"
fill="hsl(var(--chart-1))"
fillOpacity={0.4}
stroke="hsl(var(--chart-1))"
animationDuration={1200}
// animationEasing="ease-out"
// animateNewValues={false}
/>
</AreaChart>
</ChartContainer>
</div>
)
}