This commit is contained in:
Henry Dollman
2024-07-12 16:45:44 -04:00
parent 2436e04705
commit e7ff1172d5
12 changed files with 157 additions and 129 deletions

View File

@@ -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}

View File

@@ -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

View File

@@ -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)"

View File

@@ -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)"

View File

@@ -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)"