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

uniform x axis on charts

Browse Source
This commit is contained in:
Henry Dollman
2024-07-28 12:48:46 -04:00
parent f54faa6bd6
commit 517f949a30
10 changed files with 80 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
hub/site/src/components/charts/bandwidth-chart.tsx
View File

@@ -6,8 +6,10 @@ import {
ChartTooltip,
ChartTooltipContent,
} from '@/components/ui/chart'
import { formatShortDate, hourWithMinutes } from '@/lib/utils'
import { chartTimeData, formatShortDate } from '@/lib/utils'
import Spinner from '../spinner'
import { useStore } from '@nanostores/react'
import { $chartTime } from '@/lib/stores'
const chartConfig = {
recv: {
@@ -27,6 +29,8 @@ export default function BandwidthChart({
chartData: { time: number; sent: number; recv: number }[]
ticks: number[]
}) {
const chartTime = useStore($chartTime)
if (!chartData.length || !ticks.length) {
return <Spinner />
}
@@ -58,18 +62,16 @@ export default function BandwidthChart({
axisLine={false}
unit={' MB/s'}
/>
{/* todo: short time if first date is same day, otherwise short date */}
<XAxis
dataKey="time"
domain={[ticks[0], ticks.at(-1)!]}
ticks={ticks}
type="number"
scale={'time'}
tickLine={true}
axisLine={false}
minTickGap={35}
tickMargin={8}
minTickGap={30}
tickFormatter={hourWithMinutes}
axisLine={false}
tickFormatter={chartTimeData[chartTime].format}
/>
<ChartTooltip
animationEasing="ease-out"

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

@@ -8,8 +8,10 @@ import {
ChartTooltipContent,
} from '@/components/ui/chart'
import { useMemo } from 'react'
import { formatShortDate, hourWithMinutes } from '@/lib/utils'
import { chartTimeData, formatShortDate } from '@/lib/utils'
import Spinner from '../spinner'
import { useStore } from '@nanostores/react'
import { $chartTime } from '@/lib/stores'
export default function ContainerCpuChart({
chartData,
@@ -18,6 +20,8 @@ export default function ContainerCpuChart({
chartData: Record<string, number | string>[]
ticks: number[]
}) {
const chartTime = useStore($chartTime)
const chartConfig = useMemo(() => {
let config = {} as Record<
string,
@@ -82,11 +86,10 @@ export default function ContainerCpuChart({
ticks={ticks}
type="number"
scale={'time'}
tickLine={true}
axisLine={false}
minTickGap={35}
tickMargin={8}
minTickGap={30}
tickFormatter={hourWithMinutes}
axisLine={false}
tickFormatter={chartTimeData[chartTime].format}
/>
<ChartTooltip
// cursor={false}

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

@@ -8,8 +8,10 @@ import {
ChartTooltipContent,
} from '@/components/ui/chart'
import { useMemo } from 'react'
import { formatShortDate, hourWithMinutes } from '@/lib/utils'
import { chartTimeData, formatShortDate } from '@/lib/utils'
import Spinner from '../spinner'
import { useStore } from '@nanostores/react'
import { $chartTime } from '@/lib/stores'
export default function ContainerMemChart({
chartData,
@@ -18,6 +20,8 @@ export default function ContainerMemChart({
chartData: Record<string, number | string>[]
ticks: number[]
}) {
const chartTime = useStore($chartTime)
const chartConfig = useMemo(() => {
let config = {} as Record<
string,
@@ -87,11 +91,10 @@ export default function ContainerMemChart({
ticks={ticks}
type="number"
scale={'time'}
tickLine={true}
axisLine={false}
minTickGap={35}
tickMargin={8}
minTickGap={30}
tickFormatter={hourWithMinutes}
axisLine={false}
tickFormatter={chartTimeData[chartTime].format}
/>
<ChartTooltip
// cursor={false}

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

@@ -42,7 +42,6 @@ export default function CpuChart({
axisLine={false}
unit={'%'}
/>
{/* todo: short time if first date is same day, otherwise short date */}
<XAxis
dataKey="time"
domain={[ticks[0], ticks.at(-1)!]}

14
hub/site/src/components/charts/disk-chart.tsx
View File

@@ -6,9 +6,11 @@ import {
ChartTooltip,
ChartTooltipContent,
} from '@/components/ui/chart'
import { formatShortDate, hourWithMinutes } from '@/lib/utils'
import { chartTimeData, formatShortDate, hourWithMinutes } from '@/lib/utils'
import { useMemo } from 'react'
import Spinner from '../spinner'
import { useStore } from '@nanostores/react'
import { $chartTime } from '@/lib/stores'
const chartConfig = {
diskUsed: {
@@ -24,6 +26,8 @@ export default function DiskChart({
chartData: { time: number; disk: number; diskUsed: number }[]
ticks: number[]
}) {
const chartTime = useStore($chartTime)
const diskSize = useMemo(() => {
return Math.round(chartData[0]?.disk)
}, [chartData])
@@ -63,18 +67,16 @@ export default function DiskChart({
axisLine={false}
unit={' GB'}
/>
{/* todo: short time if first date is same day, otherwise short date */}
<XAxis
dataKey="time"
domain={[ticks[0], ticks.at(-1)!]}
ticks={ticks}
type="number"
scale={'time'}
tickLine={true}
axisLine={false}
minTickGap={35}
tickMargin={8}
minTickGap={30}
tickFormatter={hourWithMinutes}
axisLine={false}
tickFormatter={chartTimeData[chartTime].format}
/>
<ChartTooltip
animationEasing="ease-out"

14
hub/site/src/components/charts/disk-io-chart.tsx
View File

@@ -6,8 +6,10 @@ import {
ChartTooltip,
ChartTooltipContent,
} from '@/components/ui/chart'
import { formatShortDate, hourWithMinutes } from '@/lib/utils'
import { chartTimeData, formatShortDate } from '@/lib/utils'
import Spinner from '../spinner'
import { useStore } from '@nanostores/react'
import { $chartTime } from '@/lib/stores'
const chartConfig = {
read: {
@@ -27,6 +29,8 @@ export default function DiskIoChart({
chartData: { time: number; read: number; write: number }[]
ticks: number[]
}) {
const chartTime = useStore($chartTime)
if (!chartData.length || !ticks.length) {
return <Spinner />
}
@@ -58,18 +62,16 @@ export default function DiskIoChart({
axisLine={false}
unit={' MB/s'}
/>
{/* todo: short time if first date is same day, otherwise short date */}
<XAxis
dataKey="time"
domain={[ticks[0], ticks.at(-1)!]}
ticks={ticks}
type="number"
scale={'time'}
tickLine={true}
axisLine={false}
minTickGap={35}
tickMargin={8}
minTickGap={30}
tickFormatter={hourWithMinutes}
axisLine={false}
tickFormatter={chartTimeData[chartTime].format}
/>
<ChartTooltip
animationEasing="ease-out"

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

@@ -6,9 +6,11 @@ import {
ChartTooltip,
ChartTooltipContent,
} from '@/components/ui/chart'
import { formatShortDate, hourWithMinutes } from '@/lib/utils'
import { chartTimeData, formatShortDate } from '@/lib/utils'
import { useMemo } from 'react'
import Spinner from '../spinner'
import { useStore } from '@nanostores/react'
import { $chartTime } from '@/lib/stores'
export default function MemChart({
chartData,
@@ -17,6 +19,8 @@ export default function MemChart({
chartData: { time: number; mem: number; memUsed: number; memCache: number }[]
ticks: number[]
}) {
const chartTime = useStore($chartTime)
const totalMem = useMemo(() => {
const maxMem = Math.ceil(chartData[0]?.mem)
return maxMem > 2 && maxMem % 2 !== 0 ? maxMem + 1 : maxMem
@@ -59,18 +63,16 @@ export default function MemChart({
axisLine={false}
unit={' GB'}
/>
{/* todo: short time if first date is same day, otherwise short date */}
<XAxis
dataKey="time"
domain={[ticks[0], ticks.at(-1)!]}
ticks={ticks}
type="number"
scale={'time'}
tickLine={true}
axisLine={false}
minTickGap={35}
tickMargin={8}
minTickGap={30}
tickFormatter={hourWithMinutes}
axisLine={false}
tickFormatter={chartTimeData[chartTime].format}
/>
<ChartTooltip
// cursor={false}

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

@@ -142,7 +142,7 @@ export default function ServerDetail({ name }: { name: string }) {
const now = new Date()
const startTime = chartTimeData[chartTime].getOffset(now)
const scale = scaleTime([startTime.getTime(), now], [0, cpuChartData.length])
setTicks(scale.ticks().map((d) => d.getTime()))
setTicks(scale.ticks(chartTimeData[chartTime].ticks).map((d) => d.getTime()))
}, [chartTime, systemStats])
// get container stats