mirror of
https://github.com/fankes/beszel.git
synced 2025-10-20 10:19:27 +08:00
updates
This commit is contained in:
@@ -62,16 +62,20 @@ export default function ({
|
||||
<AreaChart
|
||||
accessibilityLayer
|
||||
data={chartData}
|
||||
margin={{
|
||||
top: 10,
|
||||
}}
|
||||
|
||||
// reverseStackOrder={true}
|
||||
>
|
||||
<CartesianGrid vertical={false} />
|
||||
<YAxis
|
||||
domain={[0, max]}
|
||||
tickCount={5}
|
||||
domain={[0, (max: number) => Math.ceil(max)]}
|
||||
// tickCount={5}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickFormatter={(v) => `${v}%`}
|
||||
unit={'%'}
|
||||
tickFormatter={(x) => (x % 1 === 0 ? x : x.toFixed(1))}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="time"
|
||||
@@ -88,7 +92,7 @@ export default function ({
|
||||
// console.log('itemSorter', item)
|
||||
// return -item.value
|
||||
// }}
|
||||
content={<ChartTooltipContent indicator="line" />}
|
||||
content={<ChartTooltipContent unit="%" indicator="line" />}
|
||||
/>
|
||||
{Object.keys(chartConfig).map((key) => (
|
||||
<Area
|
||||
@@ -96,7 +100,7 @@ export default function ({
|
||||
// isAnimationActive={false}
|
||||
animateNewValues={false}
|
||||
dataKey={key}
|
||||
type="natural"
|
||||
type="bump"
|
||||
fill={chartConfig[key].color}
|
||||
fillOpacity={0.4}
|
||||
stroke={chartConfig[key].color}
|
||||
|
@@ -63,6 +63,9 @@ export default function ({
|
||||
<AreaChart
|
||||
accessibilityLayer
|
||||
data={chartData}
|
||||
margin={{
|
||||
top: 10,
|
||||
}}
|
||||
|
||||
// reverseStackOrder={true}
|
||||
>
|
||||
@@ -70,6 +73,7 @@ export default function ({
|
||||
<YAxis
|
||||
domain={[0, max]}
|
||||
tickCount={9}
|
||||
allowDecimals={false}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickFormatter={(v) => `${Math.ceil(v / 1024)} GiB`}
|
||||
@@ -89,7 +93,7 @@ export default function ({
|
||||
// console.log('itemSorter', item)
|
||||
// return -item.value
|
||||
// }}
|
||||
content={<ChartTooltipContent indicator="line" />}
|
||||
content={<ChartTooltipContent unit=" MiB" indicator="line" />}
|
||||
/>
|
||||
{Object.keys(chartConfig).map((key) => (
|
||||
<Area
|
||||
|
@@ -7,7 +7,6 @@ import {
|
||||
ChartTooltipContent,
|
||||
} from '@/components/ui/chart'
|
||||
import { formatShortDate, formatShortTime } from '@/lib/utils'
|
||||
import { useEffect } from 'react'
|
||||
import Spinner from '../spinner'
|
||||
// for (const data of chartData) {
|
||||
// data.month = formatDateShort(data.month)
|
||||
@@ -33,14 +32,16 @@ export default function ({
|
||||
|
||||
return (
|
||||
<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
|
||||
<AreaChart accessibilityLayer data={chartData}>
|
||||
<AreaChart accessibilityLayer data={chartData} margin={{ top: 10 }}>
|
||||
<CartesianGrid vertical={false} />
|
||||
<YAxis
|
||||
domain={[0, max]}
|
||||
tickCount={5}
|
||||
width={47}
|
||||
// tickCount={5}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickFormatter={(v) => `${v}%`}
|
||||
unit={'%'}
|
||||
// tickFormatter={(v) => `${v}%`}
|
||||
/>
|
||||
{/* todo: short time if first date is same day, otherwise short date */}
|
||||
<XAxis
|
||||
@@ -54,16 +55,12 @@ export default function ({
|
||||
<ChartTooltip
|
||||
cursor={false}
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
labelFormatter={formatShortDate}
|
||||
defaultValue={'%'}
|
||||
indicator="line"
|
||||
/>
|
||||
<ChartTooltipContent unit="%" labelFormatter={formatShortDate} indicator="line" />
|
||||
}
|
||||
/>
|
||||
<Area
|
||||
dataKey="cpu"
|
||||
type="natural"
|
||||
type="monotone"
|
||||
fill="var(--color-cpu)"
|
||||
fillOpacity={0.4}
|
||||
stroke="var(--color-cpu)"
|
||||
|
@@ -50,17 +50,20 @@ export default function ({
|
||||
margin={{
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
top: 10,
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid vertical={false} />
|
||||
<YAxis
|
||||
width={75}
|
||||
domain={[0, diskSize]}
|
||||
// ticks={ticks}
|
||||
tickCount={9}
|
||||
minTickGap={8}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickFormatter={(v) => `${v} GiB`}
|
||||
unit={' GiB'}
|
||||
/>
|
||||
{/* todo: short time if first date is same day, otherwise short date */}
|
||||
<XAxis
|
||||
@@ -73,11 +76,13 @@ export default function ({
|
||||
/>
|
||||
<ChartTooltip
|
||||
cursor={false}
|
||||
content={<ChartTooltipContent labelFormatter={formatShortDate} indicator="line" />}
|
||||
content={
|
||||
<ChartTooltipContent unit=" GiB" labelFormatter={formatShortDate} indicator="line" />
|
||||
}
|
||||
/>
|
||||
<Area
|
||||
dataKey="diskUsed"
|
||||
type="natural"
|
||||
type="bump"
|
||||
fill="var(--color-diskUsed)"
|
||||
fillOpacity={0.4}
|
||||
stroke="var(--color-diskUsed)"
|
||||
|
@@ -36,10 +36,7 @@ export default function ({
|
||||
accessibilityLayer
|
||||
data={chartData}
|
||||
margin={{
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
top: 10,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid vertical={false} />
|
||||
@@ -48,6 +45,7 @@ export default function ({
|
||||
domain={[0, totalMem]}
|
||||
tickCount={9}
|
||||
tickLine={false}
|
||||
allowDecimals={false}
|
||||
axisLine={false}
|
||||
tickFormatter={(v) => `${v} GiB`}
|
||||
/>
|
||||
@@ -62,11 +60,13 @@ export default function ({
|
||||
/>
|
||||
<ChartTooltip
|
||||
cursor={false}
|
||||
content={<ChartTooltipContent labelFormatter={formatShortDate} indicator="line" />}
|
||||
content={
|
||||
<ChartTooltipContent unit=" GiB" labelFormatter={formatShortDate} indicator="line" />
|
||||
}
|
||||
/>
|
||||
<Area
|
||||
dataKey="memUsed"
|
||||
type="natural"
|
||||
type="bump"
|
||||
fill="var(--color-memUsed)"
|
||||
fillOpacity={0.4}
|
||||
stroke="var(--color-memUsed)"
|
||||
|
Reference in New Issue
Block a user