mirror of
https://github.com/fankes/beszel.git
synced 2025-10-19 01:39:34 +08:00
adapt y axis width in recharts
This commit is contained in:
Henry Dollman
@@ -1,11 +1,12 @@
|
||||
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
|
||||
|
||||
import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
|
||||
import { chartTimeData, formatShortDate } from '@/lib/utils'
|
||||
import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
|
||||
import Spinner from '../spinner'
|
||||
import { useStore } from '@nanostores/react'
|
||||
import { $chartTime } from '@/lib/stores'
|
||||
import { SystemStatsRecord } from '@/types'
|
||||
import { useRef } from 'react'
|
||||
|
||||
export default function BandwidthChart({
|
||||
ticks,
|
||||
@@ -14,6 +15,8 @@ export default function BandwidthChart({
|
||||
ticks: number[]
|
||||
systemData: SystemStatsRecord[]
|
||||
}) {
|
||||
const chartRef = useRef<HTMLDivElement>(null)
|
||||
const yAxisWidth = useYaxisWidth(chartRef)
|
||||
const chartTime = useStore($chartTime)
|
||||
|
||||
if (!systemData.length || !ticks.length) {
|
||||
@@ -21,73 +24,75 @@ export default function BandwidthChart({
|
||||
}
|
||||
|
||||
return (
|
||||
<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
|
||||
<AreaChart
|
||||
accessibilityLayer
|
||||
data={systemData}
|
||||
margin={{
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 10,
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid vertical={false} />
|
||||
<YAxis
|
||||
className="tracking-tighter"
|
||||
width={75}
|
||||
domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]}
|
||||
tickFormatter={(value) => {
|
||||
if (value >= 100) {
|
||||
return value.toFixed(0)
|
||||
}
|
||||
return value.toFixed((value * 100) % 1 === 0 ? 1 : 2)
|
||||
<div ref={chartRef}>
|
||||
<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
|
||||
<AreaChart
|
||||
accessibilityLayer
|
||||
data={systemData}
|
||||
margin={{
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 10,
|
||||
bottom: 0,
|
||||
}}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
unit={' MB/s'}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="created"
|
||||
domain={[ticks[0], ticks.at(-1)!]}
|
||||
ticks={ticks}
|
||||
type="number"
|
||||
scale={'time'}
|
||||
minTickGap={35}
|
||||
tickMargin={8}
|
||||
axisLine={false}
|
||||
tickFormatter={chartTimeData[chartTime].format}
|
||||
/>
|
||||
<ChartTooltip
|
||||
animationEasing="ease-out"
|
||||
animationDuration={150}
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
unit=" MB/s"
|
||||
labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
|
||||
indicator="line"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Area
|
||||
dataKey="stats.ns"
|
||||
name="Sent"
|
||||
type="monotoneX"
|
||||
fill="hsl(var(--chart-5))"
|
||||
fillOpacity={0.4}
|
||||
stroke="hsl(var(--chart-5))"
|
||||
animationDuration={1200}
|
||||
/>
|
||||
<Area
|
||||
dataKey="stats.nr"
|
||||
name="Received"
|
||||
type="monotoneX"
|
||||
fill="hsl(var(--chart-2))"
|
||||
fillOpacity={0.4}
|
||||
stroke="hsl(var(--chart-2))"
|
||||
animationDuration={1200}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
>
|
||||
<CartesianGrid vertical={false} />
|
||||
<YAxis
|
||||
className="tracking-tighter"
|
||||
width={yAxisWidth}
|
||||
domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]}
|
||||
tickFormatter={(value) => {
|
||||
if (value >= 100) {
|
||||
return value.toFixed(0)
|
||||
}
|
||||
return value.toFixed((value * 100) % 1 === 0 ? 1 : 2)
|
||||
}}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
unit={' MB/s'}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="created"
|
||||
domain={[ticks[0], ticks.at(-1)!]}
|
||||
ticks={ticks}
|
||||
type="number"
|
||||
scale={'time'}
|
||||
minTickGap={35}
|
||||
tickMargin={8}
|
||||
axisLine={false}
|
||||
tickFormatter={chartTimeData[chartTime].format}
|
||||
/>
|
||||
<ChartTooltip
|
||||
animationEasing="ease-out"
|
||||
animationDuration={150}
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
unit=" MB/s"
|
||||
labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
|
||||
indicator="line"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Area
|
||||
dataKey="stats.ns"
|
||||
name="Sent"
|
||||
type="monotoneX"
|
||||
fill="hsl(var(--chart-5))"
|
||||
fillOpacity={0.4}
|
||||
stroke="hsl(var(--chart-5))"
|
||||
animationDuration={1200}
|
||||
/>
|
||||
<Area
|
||||
dataKey="stats.nr"
|
||||
name="Received"
|
||||
type="monotoneX"
|
||||
fill="hsl(var(--chart-2))"
|
||||
fillOpacity={0.4}
|
||||
stroke="hsl(var(--chart-2))"
|
||||
animationDuration={1200}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -5,8 +5,8 @@ import {
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from '@/components/ui/chart'
|
||||
import { useMemo } from 'react'
|
||||
import { chartTimeData, formatShortDate } from '@/lib/utils'
|
||||
import { useMemo, useRef } from 'react'
|
||||
import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
|
||||
import Spinner from '../spinner'
|
||||
import { useStore } from '@nanostores/react'
|
||||
import { $chartTime } from '@/lib/stores'
|
||||
@@ -18,6 +18,8 @@ export default function ContainerCpuChart({
|
||||
chartData: Record<string, number | string>[]
|
||||
ticks: number[]
|
||||
}) {
|
||||
const chartRef = useRef<HTMLDivElement>(null)
|
||||
const yAxisWidth = useYaxisWidth(chartRef)
|
||||
const chartTime = useStore($chartTime)
|
||||
|
||||
const chartConfig = useMemo(() => {
|
||||
@@ -60,59 +62,61 @@ export default function ContainerCpuChart({
|
||||
}
|
||||
|
||||
return (
|
||||
<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
|
||||
<AreaChart
|
||||
accessibilityLayer
|
||||
data={chartData}
|
||||
margin={{
|
||||
top: 10,
|
||||
}}
|
||||
reverseStackOrder={true}
|
||||
>
|
||||
<CartesianGrid vertical={false} />
|
||||
<YAxis
|
||||
// domain={[0, (max: number) => Math.max(Math.ceil(max), 0.4)]}
|
||||
width={47}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
unit={'%'}
|
||||
tickFormatter={(x) => (x % 1 === 0 ? x : x.toFixed(1))}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="time"
|
||||
domain={[ticks[0], ticks.at(-1)!]}
|
||||
ticks={ticks}
|
||||
type="number"
|
||||
scale={'time'}
|
||||
minTickGap={35}
|
||||
tickMargin={8}
|
||||
axisLine={false}
|
||||
tickFormatter={chartTimeData[chartTime].format}
|
||||
/>
|
||||
<ChartTooltip
|
||||
// cursor={false}
|
||||
animationEasing="ease-out"
|
||||
animationDuration={150}
|
||||
labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
|
||||
// @ts-ignore
|
||||
itemSorter={(a, b) => b.value - a.value}
|
||||
content={<ChartTooltipContent unit="%" indicator="line" />}
|
||||
/>
|
||||
{Object.keys(chartConfig).map((key) => (
|
||||
<Area
|
||||
key={key}
|
||||
// isAnimationActive={chartData.length < 20}
|
||||
animateNewValues={false}
|
||||
animationDuration={1200}
|
||||
dataKey={key}
|
||||
type="monotoneX"
|
||||
fill={chartConfig[key].color}
|
||||
fillOpacity={0.4}
|
||||
stroke={chartConfig[key].color}
|
||||
stackId="a"
|
||||
<div ref={chartRef}>
|
||||
<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
|
||||
<AreaChart
|
||||
accessibilityLayer
|
||||
data={chartData}
|
||||
margin={{
|
||||
top: 10,
|
||||
}}
|
||||
reverseStackOrder={true}
|
||||
>
|
||||
<CartesianGrid vertical={false} />
|
||||
<YAxis
|
||||
// domain={[0, (max: number) => Math.max(Math.ceil(max), 0.4)]}
|
||||
width={yAxisWidth}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
unit={'%'}
|
||||
tickFormatter={(x) => (x % 1 === 0 ? x : x.toFixed(1))}
|
||||
/>
|
||||
))}
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
<XAxis
|
||||
dataKey="time"
|
||||
domain={[ticks[0], ticks.at(-1)!]}
|
||||
ticks={ticks}
|
||||
type="number"
|
||||
scale={'time'}
|
||||
minTickGap={35}
|
||||
tickMargin={8}
|
||||
axisLine={false}
|
||||
tickFormatter={chartTimeData[chartTime].format}
|
||||
/>
|
||||
<ChartTooltip
|
||||
// cursor={false}
|
||||
animationEasing="ease-out"
|
||||
animationDuration={150}
|
||||
labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
|
||||
// @ts-ignore
|
||||
itemSorter={(a, b) => b.value - a.value}
|
||||
content={<ChartTooltipContent unit="%" indicator="line" />}
|
||||
/>
|
||||
{Object.keys(chartConfig).map((key) => (
|
||||
<Area
|
||||
key={key}
|
||||
// isAnimationActive={chartData.length < 20}
|
||||
animateNewValues={false}
|
||||
animationDuration={1200}
|
||||
dataKey={key}
|
||||
type="monotoneX"
|
||||
fill={chartConfig[key].color}
|
||||
fillOpacity={0.4}
|
||||
stroke={chartConfig[key].color}
|
||||
stackId="a"
|
||||
/>
|
||||
))}
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -5,8 +5,8 @@ import {
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from '@/components/ui/chart'
|
||||
import { useMemo } from 'react'
|
||||
import { chartTimeData, formatShortDate } from '@/lib/utils'
|
||||
import { useMemo, useRef } from 'react'
|
||||
import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
|
||||
import Spinner from '../spinner'
|
||||
import { useStore } from '@nanostores/react'
|
||||
import { $chartTime } from '@/lib/stores'
|
||||
@@ -18,6 +18,8 @@ export default function ContainerMemChart({
|
||||
chartData: Record<string, number | string>[]
|
||||
ticks: number[]
|
||||
}) {
|
||||
const chartRef = useRef<HTMLDivElement>(null)
|
||||
const yAxisWidth = useYaxisWidth(chartRef)
|
||||
const chartTime = useStore($chartTime)
|
||||
|
||||
const chartConfig = useMemo(() => {
|
||||
@@ -60,64 +62,66 @@ export default function ContainerMemChart({
|
||||
}
|
||||
|
||||
return (
|
||||
<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
|
||||
<AreaChart
|
||||
accessibilityLayer
|
||||
data={chartData}
|
||||
reverseStackOrder={true}
|
||||
margin={{
|
||||
top: 10,
|
||||
}}
|
||||
|
||||
// reverseStackOrder={true}
|
||||
>
|
||||
<CartesianGrid vertical={false} />
|
||||
<YAxis
|
||||
// domain={[0, (max: number) => Math.ceil(max)]}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
unit={' GB'}
|
||||
width={70}
|
||||
tickFormatter={(value) => {
|
||||
value = value / 1024
|
||||
return value.toFixed((value * 100) % 1 === 0 ? 1 : 2)
|
||||
<div ref={chartRef}>
|
||||
<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
|
||||
<AreaChart
|
||||
accessibilityLayer
|
||||
data={chartData}
|
||||
reverseStackOrder={true}
|
||||
margin={{
|
||||
top: 10,
|
||||
}}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="time"
|
||||
domain={[ticks[0], ticks.at(-1)!]}
|
||||
ticks={ticks}
|
||||
type="number"
|
||||
scale={'time'}
|
||||
minTickGap={35}
|
||||
tickMargin={8}
|
||||
axisLine={false}
|
||||
tickFormatter={chartTimeData[chartTime].format}
|
||||
/>
|
||||
<ChartTooltip
|
||||
// cursor={false}
|
||||
animationEasing="ease-out"
|
||||
animationDuration={150}
|
||||
labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
|
||||
// @ts-ignore
|
||||
itemSorter={(a, b) => b.value - a.value}
|
||||
content={<ChartTooltipContent unit=" MB" indicator="line" />}
|
||||
/>
|
||||
{Object.keys(chartConfig).map((key) => (
|
||||
<Area
|
||||
key={key}
|
||||
isAnimationActive={chartData.length < 20}
|
||||
animateNewValues={false}
|
||||
animationDuration={1200}
|
||||
dataKey={key}
|
||||
type="monotoneX"
|
||||
fill={chartConfig[key].color}
|
||||
fillOpacity={0.4}
|
||||
stroke={chartConfig[key].color}
|
||||
stackId="a"
|
||||
|
||||
// reverseStackOrder={true}
|
||||
>
|
||||
<CartesianGrid vertical={false} />
|
||||
<YAxis
|
||||
// domain={[0, (max: number) => Math.ceil(max)]}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
unit={' GB'}
|
||||
width={yAxisWidth}
|
||||
tickFormatter={(value) => {
|
||||
value = value / 1024
|
||||
return value.toFixed((value * 100) % 1 === 0 ? 1 : 2)
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
<XAxis
|
||||
dataKey="time"
|
||||
domain={[ticks[0], ticks.at(-1)!]}
|
||||
ticks={ticks}
|
||||
type="number"
|
||||
scale={'time'}
|
||||
minTickGap={35}
|
||||
tickMargin={8}
|
||||
axisLine={false}
|
||||
tickFormatter={chartTimeData[chartTime].format}
|
||||
/>
|
||||
<ChartTooltip
|
||||
// cursor={false}
|
||||
animationEasing="ease-out"
|
||||
animationDuration={150}
|
||||
labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
|
||||
// @ts-ignore
|
||||
itemSorter={(a, b) => b.value - a.value}
|
||||
content={<ChartTooltipContent unit=" MB" indicator="line" />}
|
||||
/>
|
||||
{Object.keys(chartConfig).map((key) => (
|
||||
<Area
|
||||
key={key}
|
||||
isAnimationActive={chartData.length < 20}
|
||||
animateNewValues={false}
|
||||
animationDuration={1200}
|
||||
dataKey={key}
|
||||
type="monotoneX"
|
||||
fill={chartConfig[key].color}
|
||||
fillOpacity={0.4}
|
||||
stroke={chartConfig[key].color}
|
||||
stackId="a"
|
||||
/>
|
||||
))}
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -5,8 +5,8 @@ import {
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from '@/components/ui/chart'
|
||||
import { useMemo } from 'react'
|
||||
import { chartTimeData, formatShortDate } from '@/lib/utils'
|
||||
import { useMemo, useRef } from 'react'
|
||||
import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
|
||||
import Spinner from '../spinner'
|
||||
import { useStore } from '@nanostores/react'
|
||||
import { $chartTime } from '@/lib/stores'
|
||||
@@ -19,6 +19,8 @@ export default function ContainerCpuChart({
|
||||
chartData: Record<string, number | number[]>[]
|
||||
ticks: number[]
|
||||
}) {
|
||||
const chartRef = useRef<HTMLDivElement>(null)
|
||||
const yAxisWidth = useYaxisWidth(chartRef)
|
||||
const chartTime = useStore($chartTime)
|
||||
|
||||
const chartConfig = useMemo(() => {
|
||||
@@ -60,88 +62,91 @@ export default function ContainerCpuChart({
|
||||
}
|
||||
|
||||
return (
|
||||
<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
|
||||
<AreaChart
|
||||
accessibilityLayer
|
||||
data={chartData}
|
||||
margin={{
|
||||
top: 10,
|
||||
}}
|
||||
reverseStackOrder={true}
|
||||
>
|
||||
<CartesianGrid vertical={false} />
|
||||
<YAxis
|
||||
// domain={[0, (max: number) => Math.max(Math.ceil(max), 0.4)]}
|
||||
width={75}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
unit={' MB'}
|
||||
tickFormatter={(x) => (x % 1 === 0 ? x : x.toFixed(1))}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="time"
|
||||
domain={[ticks[0], ticks.at(-1)!]}
|
||||
ticks={ticks}
|
||||
type="number"
|
||||
scale={'time'}
|
||||
minTickGap={35}
|
||||
tickMargin={8}
|
||||
axisLine={false}
|
||||
tickFormatter={chartTimeData[chartTime].format}
|
||||
/>
|
||||
<ChartTooltip
|
||||
// cursor={false}
|
||||
animationEasing="ease-out"
|
||||
animationDuration={150}
|
||||
labelFormatter={(_, data) => {
|
||||
return (
|
||||
<span>
|
||||
{formatShortDate(data[0].payload.time)}
|
||||
<br />
|
||||
<small className="opacity-70">Total MB received / transmitted</small>
|
||||
</span>
|
||||
)
|
||||
<div ref={chartRef}>
|
||||
<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
|
||||
<AreaChart
|
||||
accessibilityLayer
|
||||
data={chartData}
|
||||
margin={{
|
||||
top: 10,
|
||||
}}
|
||||
// @ts-ignore
|
||||
|
||||
itemSorter={(a, b) => b.value - a.value}
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
indicator="line"
|
||||
contentFormatter={(item, key) => {
|
||||
try {
|
||||
const sent = item?.payload?.[key][0] ?? 0
|
||||
const received = item?.payload?.[key][1] ?? 0
|
||||
return (
|
||||
<span className="flex">
|
||||
{received.toLocaleString()} MB<span className="opacity-70 ml-0.5"> rx </span>
|
||||
<Separator orientation="vertical" className="h-3 mx-1.5 bg-primary/40" />
|
||||
{sent.toLocaleString()} MB<span className="opacity-70 ml-0.5"> tx</span>
|
||||
</span>
|
||||
)
|
||||
} catch (e) {
|
||||
return null
|
||||
}
|
||||
}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
{Object.keys(chartConfig).map((key) => (
|
||||
<Area
|
||||
key={key}
|
||||
name={key}
|
||||
// isAnimationActive={chartData.length < 20}
|
||||
animateNewValues={false}
|
||||
animationDuration={1200}
|
||||
dataKey={(data) => data?.[key]?.[2] ?? 0}
|
||||
type="monotoneX"
|
||||
fill={chartConfig[key].color}
|
||||
fillOpacity={0.4}
|
||||
stroke={chartConfig[key].color}
|
||||
stackId="a"
|
||||
reverseStackOrder={true}
|
||||
>
|
||||
<CartesianGrid vertical={false} />
|
||||
<YAxis
|
||||
// domain={[0, (max: number) => Math.max(Math.ceil(max), 0.4)]}
|
||||
width={yAxisWidth}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
unit={' MB'}
|
||||
tickFormatter={(x) => (x % 1 === 0 ? x : x.toFixed(1))}
|
||||
/>
|
||||
))}
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
<XAxis
|
||||
dataKey="time"
|
||||
domain={[ticks[0], ticks.at(-1)!]}
|
||||
ticks={ticks}
|
||||
type="number"
|
||||
scale={'time'}
|
||||
minTickGap={35}
|
||||
tickMargin={8}
|
||||
axisLine={false}
|
||||
tickFormatter={chartTimeData[chartTime].format}
|
||||
/>
|
||||
<ChartTooltip
|
||||
// cursor={false}
|
||||
animationEasing="ease-out"
|
||||
animationDuration={150}
|
||||
labelFormatter={(_, data) => {
|
||||
return (
|
||||
<span>
|
||||
{formatShortDate(data[0].payload.time)}
|
||||
<br />
|
||||
<small className="opacity-70">Total MB received / transmitted</small>
|
||||
</span>
|
||||
)
|
||||
}}
|
||||
// @ts-ignore
|
||||
|
||||
itemSorter={(a, b) => b.value - a.value}
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
indicator="line"
|
||||
contentFormatter={(item, key) => {
|
||||
try {
|
||||
const sent = item?.payload?.[key][0] ?? 0
|
||||
const received = item?.payload?.[key][1] ?? 0
|
||||
return (
|
||||
<span className="flex">
|
||||
{received.toLocaleString()} MB
|
||||
<span className="opacity-70 ml-0.5"> rx </span>
|
||||
<Separator orientation="vertical" className="h-3 mx-1.5 bg-primary/40" />
|
||||
{sent.toLocaleString()} MB<span className="opacity-70 ml-0.5"> tx</span>
|
||||
</span>
|
||||
)
|
||||
} catch (e) {
|
||||
return null
|
||||
}
|
||||
}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
{Object.keys(chartConfig).map((key) => (
|
||||
<Area
|
||||
key={key}
|
||||
name={key}
|
||||
// isAnimationActive={chartData.length < 20}
|
||||
animateNewValues={false}
|
||||
animationDuration={1200}
|
||||
dataKey={(data) => data?.[key]?.[2] ?? 0}
|
||||
type="monotoneX"
|
||||
fill={chartConfig[key].color}
|
||||
fillOpacity={0.4}
|
||||
stroke={chartConfig[key].color}
|
||||
stackId="a"
|
||||
/>
|
||||
))}
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
|
||||
|
||||
import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
|
||||
import { chartTimeData, formatShortDate } from '@/lib/utils'
|
||||
import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
|
||||
import Spinner from '../spinner'
|
||||
import { useStore } from '@nanostores/react'
|
||||
import { $chartTime } from '@/lib/stores'
|
||||
import { SystemStatsRecord } from '@/types'
|
||||
import { useRef } from 'react'
|
||||
|
||||
export default function CpuChart({
|
||||
ticks,
|
||||
@@ -14,6 +15,8 @@ export default function CpuChart({
|
||||
ticks: number[]
|
||||
systemData: SystemStatsRecord[]
|
||||
}) {
|
||||
const chartRef = useRef<HTMLDivElement>(null)
|
||||
const yAxisWidth = useYaxisWidth(chartRef)
|
||||
const chartTime = useStore($chartTime)
|
||||
|
||||
if (!systemData.length || !ticks.length) {
|
||||
@@ -21,50 +24,52 @@ export default function CpuChart({
|
||||
}
|
||||
|
||||
return (
|
||||
<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
|
||||
<AreaChart accessibilityLayer data={systemData} margin={{ top: 10 }}>
|
||||
<CartesianGrid vertical={false} />
|
||||
<YAxis
|
||||
// domain={[0, (max: number) => Math.ceil(max)]}
|
||||
width={48}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
unit={'%'}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="created"
|
||||
domain={[ticks[0], ticks.at(-1)!]}
|
||||
ticks={ticks}
|
||||
type="number"
|
||||
scale={'time'}
|
||||
minTickGap={35}
|
||||
tickMargin={8}
|
||||
axisLine={false}
|
||||
tickFormatter={chartTimeData[chartTime].format}
|
||||
/>
|
||||
<ChartTooltip
|
||||
animationEasing="ease-out"
|
||||
animationDuration={150}
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
unit="%"
|
||||
labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
|
||||
indicator="line"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Area
|
||||
dataKey="stats.cpu"
|
||||
name="CPU Usage"
|
||||
type="monotoneX"
|
||||
fill="hsl(var(--chart-1))"
|
||||
fillOpacity={0.4}
|
||||
stroke="hsl(var(--chart-1))"
|
||||
animationDuration={1200}
|
||||
// animationEasing="ease-out"
|
||||
// animateNewValues={false}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
<div ref={chartRef}>
|
||||
<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
|
||||
<AreaChart accessibilityLayer data={systemData} margin={{ top: 10 }}>
|
||||
<CartesianGrid vertical={false} />
|
||||
<YAxis
|
||||
// domain={[0, (max: number) => Math.ceil(max)]}
|
||||
width={yAxisWidth}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
unit={'%'}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="created"
|
||||
domain={[ticks[0], ticks.at(-1)!]}
|
||||
ticks={ticks}
|
||||
type="number"
|
||||
scale={'time'}
|
||||
minTickGap={35}
|
||||
tickMargin={8}
|
||||
axisLine={false}
|
||||
tickFormatter={chartTimeData[chartTime].format}
|
||||
/>
|
||||
<ChartTooltip
|
||||
animationEasing="ease-out"
|
||||
animationDuration={150}
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
unit="%"
|
||||
labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
|
||||
indicator="line"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Area
|
||||
dataKey="stats.cpu"
|
||||
name="CPU Usage"
|
||||
type="monotoneX"
|
||||
fill="hsl(var(--chart-1))"
|
||||
fillOpacity={0.4}
|
||||
stroke="hsl(var(--chart-1))"
|
||||
animationDuration={1200}
|
||||
// animationEasing="ease-out"
|
||||
// animateNewValues={false}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
|
||||
|
||||
import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
|
||||
import { chartTimeData, formatShortDate } from '@/lib/utils'
|
||||
import { useMemo } from 'react'
|
||||
import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
|
||||
import { useMemo, useRef } from 'react'
|
||||
import Spinner from '../spinner'
|
||||
import { useStore } from '@nanostores/react'
|
||||
import { $chartTime } from '@/lib/stores'
|
||||
@@ -15,6 +15,8 @@ export default function DiskChart({
|
||||
ticks: number[]
|
||||
systemData: SystemStatsRecord[]
|
||||
}) {
|
||||
const chartRef = useRef<HTMLDivElement>(null)
|
||||
const yAxisWidth = useYaxisWidth(chartRef)
|
||||
const chartTime = useStore($chartTime)
|
||||
|
||||
const diskSize = useMemo(() => {
|
||||
@@ -35,59 +37,61 @@ export default function DiskChart({
|
||||
}
|
||||
|
||||
return (
|
||||
<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
|
||||
<AreaChart
|
||||
accessibilityLayer
|
||||
data={systemData}
|
||||
margin={{
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 10,
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid vertical={false} />
|
||||
<YAxis
|
||||
className="tracking-tighter"
|
||||
width={diskSize >= 1000 ? 75 : 65}
|
||||
domain={[0, diskSize]}
|
||||
tickCount={9}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
unit={' GB'}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="created"
|
||||
domain={[ticks[0], ticks.at(-1)!]}
|
||||
ticks={ticks}
|
||||
type="number"
|
||||
scale={'time'}
|
||||
minTickGap={35}
|
||||
tickMargin={8}
|
||||
axisLine={false}
|
||||
tickFormatter={chartTimeData[chartTime].format}
|
||||
/>
|
||||
<ChartTooltip
|
||||
animationEasing="ease-out"
|
||||
animationDuration={150}
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
unit=" GB"
|
||||
labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
|
||||
indicator="line"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Area
|
||||
dataKey="stats.du"
|
||||
name="Disk Usage"
|
||||
type="monotoneX"
|
||||
fill="hsl(var(--chart-4))"
|
||||
fillOpacity={0.4}
|
||||
stroke="hsl(var(--chart-4))"
|
||||
animationDuration={1200}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
<div ref={chartRef}>
|
||||
<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
|
||||
<AreaChart
|
||||
accessibilityLayer
|
||||
data={systemData}
|
||||
margin={{
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 10,
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid vertical={false} />
|
||||
<YAxis
|
||||
className="tracking-tighter"
|
||||
width={yAxisWidth}
|
||||
domain={[0, diskSize]}
|
||||
tickCount={9}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
unit={' GB'}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="created"
|
||||
domain={[ticks[0], ticks.at(-1)!]}
|
||||
ticks={ticks}
|
||||
type="number"
|
||||
scale={'time'}
|
||||
minTickGap={35}
|
||||
tickMargin={8}
|
||||
axisLine={false}
|
||||
tickFormatter={chartTimeData[chartTime].format}
|
||||
/>
|
||||
<ChartTooltip
|
||||
animationEasing="ease-out"
|
||||
animationDuration={150}
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
unit=" GB"
|
||||
labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
|
||||
indicator="line"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Area
|
||||
dataKey="stats.du"
|
||||
name="Disk Usage"
|
||||
type="monotoneX"
|
||||
fill="hsl(var(--chart-4))"
|
||||
fillOpacity={0.4}
|
||||
stroke="hsl(var(--chart-4))"
|
||||
animationDuration={1200}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
|
||||
|
||||
import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
|
||||
import { chartTimeData, formatShortDate } from '@/lib/utils'
|
||||
import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
|
||||
import Spinner from '../spinner'
|
||||
import { useStore } from '@nanostores/react'
|
||||
import { $chartTime } from '@/lib/stores'
|
||||
import { SystemStatsRecord } from '@/types'
|
||||
import { useRef } from 'react'
|
||||
|
||||
export default function DiskIoChart({
|
||||
ticks,
|
||||
@@ -14,6 +15,8 @@ export default function DiskIoChart({
|
||||
ticks: number[]
|
||||
systemData: SystemStatsRecord[]
|
||||
}) {
|
||||
const chartRef = useRef<HTMLDivElement>(null)
|
||||
const yAxisWidth = useYaxisWidth(chartRef)
|
||||
const chartTime = useStore($chartTime)
|
||||
|
||||
if (!systemData.length || !ticks.length) {
|
||||
@@ -21,73 +24,75 @@ export default function DiskIoChart({
|
||||
}
|
||||
|
||||
return (
|
||||
<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
|
||||
<AreaChart
|
||||
accessibilityLayer
|
||||
data={systemData}
|
||||
margin={{
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 10,
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid vertical={false} />
|
||||
<YAxis
|
||||
className="tracking-tighter"
|
||||
width={75}
|
||||
domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]}
|
||||
tickFormatter={(value) => {
|
||||
if (value >= 100) {
|
||||
return value.toFixed(0)
|
||||
}
|
||||
return value.toFixed((value * 100) % 1 === 0 ? 1 : 2)
|
||||
<div ref={chartRef}>
|
||||
<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
|
||||
<AreaChart
|
||||
accessibilityLayer
|
||||
data={systemData}
|
||||
margin={{
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 10,
|
||||
bottom: 0,
|
||||
}}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
unit={' MB/s'}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="created"
|
||||
domain={[ticks[0], ticks.at(-1)!]}
|
||||
ticks={ticks}
|
||||
type="number"
|
||||
scale={'time'}
|
||||
minTickGap={35}
|
||||
tickMargin={8}
|
||||
axisLine={false}
|
||||
tickFormatter={chartTimeData[chartTime].format}
|
||||
/>
|
||||
<ChartTooltip
|
||||
animationEasing="ease-out"
|
||||
animationDuration={150}
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
unit=" MB/s"
|
||||
labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
|
||||
indicator="line"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Area
|
||||
dataKey="stats.dw"
|
||||
name="Write"
|
||||
type="monotoneX"
|
||||
fill="hsl(var(--chart-3))"
|
||||
fillOpacity={0.4}
|
||||
stroke="hsl(var(--chart-3))"
|
||||
animationDuration={1200}
|
||||
/>
|
||||
<Area
|
||||
dataKey="stats.dr"
|
||||
name="Read"
|
||||
type="monotoneX"
|
||||
fill="hsl(var(--chart-1))"
|
||||
fillOpacity={0.4}
|
||||
stroke="hsl(var(--chart-1))"
|
||||
animationDuration={1200}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
>
|
||||
<CartesianGrid vertical={false} />
|
||||
<YAxis
|
||||
className="tracking-tighter"
|
||||
width={yAxisWidth}
|
||||
domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]}
|
||||
tickFormatter={(value) => {
|
||||
if (value >= 100) {
|
||||
return value.toFixed(0)
|
||||
}
|
||||
return value.toFixed((value * 100) % 1 === 0 ? 1 : 2)
|
||||
}}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
unit={' MB/s'}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="created"
|
||||
domain={[ticks[0], ticks.at(-1)!]}
|
||||
ticks={ticks}
|
||||
type="number"
|
||||
scale={'time'}
|
||||
minTickGap={35}
|
||||
tickMargin={8}
|
||||
axisLine={false}
|
||||
tickFormatter={chartTimeData[chartTime].format}
|
||||
/>
|
||||
<ChartTooltip
|
||||
animationEasing="ease-out"
|
||||
animationDuration={150}
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
unit=" MB/s"
|
||||
labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
|
||||
indicator="line"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Area
|
||||
dataKey="stats.dw"
|
||||
name="Write"
|
||||
type="monotoneX"
|
||||
fill="hsl(var(--chart-3))"
|
||||
fillOpacity={0.4}
|
||||
stroke="hsl(var(--chart-3))"
|
||||
animationDuration={1200}
|
||||
/>
|
||||
<Area
|
||||
dataKey="stats.dr"
|
||||
name="Read"
|
||||
type="monotoneX"
|
||||
fill="hsl(var(--chart-1))"
|
||||
fillOpacity={0.4}
|
||||
stroke="hsl(var(--chart-1))"
|
||||
animationDuration={1200}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
|
||||
|
||||
import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
|
||||
import { chartTimeData, formatShortDate } from '@/lib/utils'
|
||||
import { useMemo } from 'react'
|
||||
import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
|
||||
import { useMemo, useRef } from 'react'
|
||||
import Spinner from '../spinner'
|
||||
import { useStore } from '@nanostores/react'
|
||||
import { $chartTime } from '@/lib/stores'
|
||||
@@ -16,6 +16,8 @@ export default function MemChart({
|
||||
systemData: SystemStatsRecord[]
|
||||
}) {
|
||||
const chartTime = useStore($chartTime)
|
||||
const chartRef = useRef<HTMLDivElement>(null)
|
||||
const yAxisWidth = useYaxisWidth(chartRef)
|
||||
|
||||
const totalMem = useMemo(() => {
|
||||
const maxMem = Math.ceil(systemData[0]?.stats.m)
|
||||
@@ -27,71 +29,72 @@ export default function MemChart({
|
||||
}
|
||||
|
||||
return (
|
||||
<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
|
||||
<AreaChart
|
||||
accessibilityLayer
|
||||
data={systemData}
|
||||
margin={{
|
||||
top: 10,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid vertical={false} />
|
||||
<YAxis
|
||||
// use "ticks" instead of domain / tickcount if need more control
|
||||
domain={[0, totalMem]}
|
||||
tickLine={false}
|
||||
width={totalMem >= 100 ? 65 : 58}
|
||||
// allowDecimals={false}
|
||||
axisLine={false}
|
||||
unit={' GB'}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="created"
|
||||
domain={[ticks[0], ticks.at(-1)!]}
|
||||
ticks={ticks}
|
||||
type="number"
|
||||
scale={'time'}
|
||||
minTickGap={35}
|
||||
tickMargin={8}
|
||||
axisLine={false}
|
||||
tickFormatter={chartTimeData[chartTime].format}
|
||||
/>
|
||||
<ChartTooltip
|
||||
// cursor={false}
|
||||
animationEasing="ease-out"
|
||||
animationDuration={150}
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
unit=" GB"
|
||||
// @ts-ignore
|
||||
itemSorter={(a, b) => a.name.localeCompare(b.name)}
|
||||
labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
|
||||
indicator="line"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Area
|
||||
dataKey="stats.mu"
|
||||
name="Used"
|
||||
type="monotoneX"
|
||||
fill="hsl(var(--chart-2))"
|
||||
fillOpacity={0.4}
|
||||
stroke="hsl(var(--chart-2))"
|
||||
stackId="a"
|
||||
animationDuration={1200}
|
||||
/>
|
||||
<Area
|
||||
dataKey="stats.mb"
|
||||
name="Cache / Buffers"
|
||||
type="monotoneX"
|
||||
fill="hsl(var(--chart-2))"
|
||||
fillOpacity={0.2}
|
||||
strokeOpacity={0.3}
|
||||
stroke="hsl(var(--chart-2))"
|
||||
stackId="a"
|
||||
animationDuration={1200}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
<div ref={chartRef}>
|
||||
<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
|
||||
<AreaChart
|
||||
accessibilityLayer
|
||||
data={systemData}
|
||||
margin={{
|
||||
top: 10,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid vertical={false} />
|
||||
<YAxis
|
||||
// use "ticks" instead of domain / tickcount if need more control
|
||||
domain={[0, totalMem]}
|
||||
width={yAxisWidth}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
unit={' GB'}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="created"
|
||||
domain={[ticks[0], ticks.at(-1)!]}
|
||||
ticks={ticks}
|
||||
type="number"
|
||||
scale={'time'}
|
||||
minTickGap={35}
|
||||
tickMargin={8}
|
||||
axisLine={false}
|
||||
tickFormatter={chartTimeData[chartTime].format}
|
||||
/>
|
||||
<ChartTooltip
|
||||
// cursor={false}
|
||||
animationEasing="ease-out"
|
||||
animationDuration={150}
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
unit=" GB"
|
||||
// @ts-ignore
|
||||
itemSorter={(a, b) => a.name.localeCompare(b.name)}
|
||||
labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
|
||||
indicator="line"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Area
|
||||
dataKey="stats.mu"
|
||||
name="Used"
|
||||
type="monotoneX"
|
||||
fill="hsl(var(--chart-2))"
|
||||
fillOpacity={0.4}
|
||||
stroke="hsl(var(--chart-2))"
|
||||
stackId="a"
|
||||
animationDuration={1200}
|
||||
/>
|
||||
<Area
|
||||
dataKey="stats.mb"
|
||||
name="Cache / Buffers"
|
||||
type="monotoneX"
|
||||
fill="hsl(var(--chart-2))"
|
||||
fillOpacity={0.2}
|
||||
strokeOpacity={0.3}
|
||||
stroke="hsl(var(--chart-2))"
|
||||
stackId="a"
|
||||
animationDuration={1200}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -6,6 +6,7 @@ import { AlertRecord, ChartTimeData, ChartTimes, SystemRecord } from '@/types'
|
||||
import { RecordModel, RecordSubscription } from 'pocketbase'
|
||||
import { WritableAtom } from 'nanostores'
|
||||
import { timeDay, timeHour } from 'd3-time'
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
@@ -179,3 +180,20 @@ export const chartTimeData: ChartTimeData = {
|
||||
getOffset: (endTime: Date) => timeDay.offset(endTime, -30),
|
||||
},
|
||||
}
|
||||
|
||||
/** Hacky solution to set the correct width of the yAxis in recharts */
|
||||
export function useYaxisWidth(chartRef: React.RefObject<HTMLDivElement>) {
|
||||
const [yAxisWidth, setYAxisWidth] = useState(90)
|
||||
useEffect(() => {
|
||||
let interval = setInterval(() => {
|
||||
// console.log('chartRef', chartRef.current)
|
||||
const yAxisElement = chartRef?.current?.querySelector('.yAxis')
|
||||
if (yAxisElement) {
|
||||
console.log('yAxisElement', yAxisElement)
|
||||
setYAxisWidth(yAxisElement.getBoundingClientRect().width + 22)
|
||||
clearInterval(interval)
|
||||
}
|
||||
}, 16)
|
||||
}, [])
|
||||
return yAxisWidth
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user