mirror of
https://github.com/fankes/beszel.git
synced 2025-10-20 18:29:29 +08:00
updates
This commit is contained in:
@@ -6,26 +6,25 @@ import {
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from '@/components/ui/chart'
|
||||
import { calculateXaxisTicks, formatShortDate, formatShortTime } from '@/lib/utils'
|
||||
import { formatShortDate, hourWithMinutes } from '@/lib/utils'
|
||||
import { useMemo } from 'react'
|
||||
import Spinner from '../spinner'
|
||||
// for (const data of chartData) {
|
||||
// data.month = formatDateShort(data.month)
|
||||
// }
|
||||
|
||||
const chartConfig = {
|
||||
diskUsed: {
|
||||
label: 'Disk Usage',
|
||||
color: 'hsl(var(--chart-3))',
|
||||
color: 'hsl(var(--chart-4))',
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function DiskChart({
|
||||
chartData,
|
||||
ticks,
|
||||
}: {
|
||||
chartData: { time: number; disk: number; diskUsed: number }[]
|
||||
ticks: number[]
|
||||
}) {
|
||||
if (!chartData.length) {
|
||||
if (!chartData.length || !ticks.length) {
|
||||
return <Spinner />
|
||||
}
|
||||
|
||||
@@ -33,8 +32,6 @@ export default function DiskChart({
|
||||
return Math.round(chartData[0]?.disk)
|
||||
}, [chartData])
|
||||
|
||||
const ticks = useMemo(() => calculateXaxisTicks(chartData), [chartData])
|
||||
|
||||
// const ticks = useMemo(() => {
|
||||
// let ticks = [0]
|
||||
// for (let i = 1; i < diskSize; i += diskSize / 5) {
|
||||
@@ -65,7 +62,7 @@ export default function DiskChart({
|
||||
minTickGap={8}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
unit={' GiB'}
|
||||
unit={' GB'}
|
||||
/>
|
||||
{/* todo: short time if first date is same day, otherwise short date */}
|
||||
<XAxis
|
||||
@@ -78,13 +75,13 @@ export default function DiskChart({
|
||||
axisLine={false}
|
||||
tickMargin={8}
|
||||
minTickGap={30}
|
||||
tickFormatter={formatShortTime}
|
||||
tickFormatter={hourWithMinutes}
|
||||
/>
|
||||
<ChartTooltip
|
||||
cursor={false}
|
||||
// cursor={false}
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
unit=" GiB"
|
||||
unit=" GB"
|
||||
labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
|
||||
indicator="line"
|
||||
/>
|
||||
@@ -92,7 +89,7 @@ export default function DiskChart({
|
||||
/>
|
||||
<Area
|
||||
dataKey="diskUsed"
|
||||
type="monotone"
|
||||
type="monotoneX"
|
||||
fill="var(--color-diskUsed)"
|
||||
fillOpacity={0.4}
|
||||
stroke="var(--color-diskUsed)"
|
||||
|
Reference in New Issue
Block a user