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