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

use one x axis component for all charts

Browse Source
This commit is contained in:
Henry Dollman
2024-10-17 16:05:20 -04:00
parent 12239808fc
commit 71aa9946f5
8 changed files with 45 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
beszel/site/src/components/charts/area-chart.tsx
View File

@@ -1,9 +1,8 @@
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
import { Area, AreaChart, CartesianGrid, YAxis } from 'recharts'
import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
import { ChartContainer, ChartTooltip, ChartTooltipContent, xAxis } from '@/components/ui/chart'
import {
useYAxisWidth,
chartTimeData,
cn,
formatShortDate,
toFixedWithoutTrailingZeros,
@@ -88,18 +87,7 @@ export default memo(function AreaChartDefault({
tickLine={false}
axisLine={false}
/>
<XAxis
dataKey="created"
domain={chartData.domain}
ticks={chartData.ticks}
allowDataOverflow
type="number"
scale="time"
minTickGap={30}
tickMargin={8}
axisLine={false}
tickFormatter={chartTimeData[chartTime].format}
/>
{xAxis(chartData)}
<ChartTooltip
animationEasing="ease-out"
animationDuration={150}

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

@@ -1,14 +1,14 @@
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
import { Area, AreaChart, CartesianGrid, YAxis } from 'recharts'
import {
ChartConfig,
ChartContainer,
ChartTooltip,
ChartTooltipContent,
xAxis,
} from '@/components/ui/chart'
import { memo, useMemo } from 'react'
import {
useYAxisWidth,
chartTimeData,
cn,
formatShortDate,
decimalString,
@@ -37,7 +37,7 @@ export default memo(function ContainerChart({
const filter = useStore($containerFilter)
const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
const { containerData, ticks, domain, chartTime } = chartData
const { containerData } = chartData
const isNetChart = chartName === 'net'
@@ -153,18 +153,7 @@ export default memo(function ContainerChart({
tickLine={false}
axisLine={false}
/>
<XAxis
dataKey="created"
domain={domain}
allowDataOverflow
ticks={ticks}
type="number"
scale="time"
minTickGap={35}
tickMargin={8}
axisLine={false}
tickFormatter={chartTimeData[chartTime].format}
/>
{xAxis(chartData)}
<ChartTooltip
animationEasing="ease-out"
animationDuration={150}

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

@@ -1,9 +1,8 @@
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
import { Area, AreaChart, CartesianGrid, YAxis } from 'recharts'
import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
import { ChartContainer, ChartTooltip, ChartTooltipContent, xAxis } from '@/components/ui/chart'
import {
useYAxisWidth,
chartTimeData,
cn,
formatShortDate,
decimalString,
@@ -25,8 +24,6 @@ export default memo(function DiskChart({
}) {
const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
// console.log('rendered at', new Date())
return (
<div>
<ChartContainer
@@ -49,18 +46,7 @@ export default memo(function DiskChart({
return updateYAxisWidth(toFixedFloat(v, 2) + u)
}}
/>
<XAxis
dataKey="created"
domain={chartData.domain}
ticks={chartData.ticks}
allowDataOverflow
type="number"
scale="time"
minTickGap={30}
tickMargin={8}
axisLine={false}
tickFormatter={chartTimeData[chartData.chartTime].format}
/>
{xAxis(chartData)}
<ChartTooltip
animationEasing="ease-out"
animationDuration={150}

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

@@ -1,9 +1,8 @@
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
import { Area, AreaChart, CartesianGrid, YAxis } from 'recharts'
import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
import { ChartContainer, ChartTooltip, ChartTooltipContent, xAxis } from '@/components/ui/chart'
import {
useYAxisWidth,
chartTimeData,
cn,
toFixedFloat,
decimalString,
@@ -45,18 +44,7 @@ export default memo(function MemChart({ chartData }: { chartData: ChartData }) {
}}
/>
)}
<XAxis
dataKey="created"
domain={chartData.domain}
ticks={chartData.ticks}
allowDataOverflow
type="number"
scale="time"
minTickGap={30}
tickMargin={8}
axisLine={false}
tickFormatter={chartTimeData[chartData.chartTime].format}
/>
{xAxis(chartData)}
<ChartTooltip
// cursor={false}
animationEasing="ease-out"

18
beszel/site/src/components/charts/swap-chart.tsx
View File

@@ -1,9 +1,8 @@
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
import { Area, AreaChart, CartesianGrid, YAxis } from 'recharts'
import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
import { ChartContainer, ChartTooltip, ChartTooltipContent, xAxis } from '@/components/ui/chart'
import {
useYAxisWidth,
chartTimeData,
cn,
formatShortDate,
toFixedWithoutTrailingZeros,
@@ -36,18 +35,7 @@ export default memo(function SwapChart({ chartData }: { chartData: ChartData })
axisLine={false}
tickFormatter={(value) => updateYAxisWidth(value + ' GB')}
/>
<XAxis
dataKey="created"
domain={chartData.domain}
ticks={chartData.ticks}
allowDataOverflow
type="number"
scale="time"
minTickGap={30}
tickMargin={8}
axisLine={false}
tickFormatter={chartTimeData[chartData.chartTime].format}
/>
{xAxis(chartData)}
<ChartTooltip
animationEasing="ease-out"
animationDuration={150}

17
beszel/site/src/components/charts/temperature-chart.tsx
View File

@@ -1,4 +1,4 @@
import { CartesianGrid, Line, LineChart, XAxis, YAxis } from 'recharts'
import { CartesianGrid, Line, LineChart, YAxis } from 'recharts'
import {
ChartContainer,
@@ -6,10 +6,10 @@ import {
ChartLegendContent,
ChartTooltip,
ChartTooltipContent,
xAxis,
} from '@/components/ui/chart'
import {
useYAxisWidth,
chartTimeData,
cn,
formatShortDate,
toFixedWithoutTrailingZeros,
@@ -70,18 +70,7 @@ export default memo(function TemperatureChart({ chartData }: { chartData: ChartD
tickLine={false}
axisLine={false}
/>
<XAxis
dataKey="created"
domain={chartData.domain}
ticks={chartData.ticks}
allowDataOverflow
type="number"
scale="time"
minTickGap={30}
tickMargin={8}
axisLine={false}
tickFormatter={chartTimeData[chartData.chartTime].format}
/>
{xAxis(chartData)}
<ChartTooltip
animationEasing="ease-out"
animationDuration={150}

2
beszel/site/src/components/routes/system.tsx
View File

@@ -612,7 +612,7 @@ function ChartCard({
</CardHeader>
<div className="pl-0 w-[calc(100%-1.6em)] h-52 relative">
{<Spinner />}
{isIntersecting && <Suspense>{children}</Suspense>}
{isIntersecting && children}
</div>
</Card>
)

26
beszel/site/src/components/ui/chart.tsx
View File

@@ -1,7 +1,8 @@
import * as React from 'react'
import * as RechartsPrimitive from 'recharts'
import { cn } from '@/lib/utils'
import { chartTimeData, cn } from '@/lib/utils'
import { ChartData } from '@/types'
// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: '', dark: '.dark' } as const
@@ -331,11 +332,34 @@ function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key:
return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config]
}
let cachedAxis: JSX.Element
const xAxis = function ({ domain, ticks, chartTime }: ChartData) {
if (cachedAxis && domain[0] === cachedAxis.props.domain[0]) {
return cachedAxis
}
cachedAxis = (
<RechartsPrimitive.XAxis
dataKey="created"
domain={domain}
ticks={ticks}
allowDataOverflow
type="number"
scale="time"
minTickGap={15}
tickMargin={8}
axisLine={false}
tickFormatter={chartTimeData[chartTime].format}
/>
)
return cachedAxis
}
export {
ChartContainer,
ChartTooltip,
ChartTooltipContent,
ChartLegend,
ChartLegendContent,
xAxis,
// ChartStyle,
}