jnd/beszel-ipv6
1
0
Fork 0
mirror of https://github.com/henrygd/beszel.git synced 2025-12-17 18:56:17 +01:00
Code Issues Packages Projects Releases 2 Wiki Activity

site charts and style updates

Browse Source
This commit is contained in:
Henry Dollman
2024-07-21 13:38:57 -04:00
parent 80e322d3d5
commit 1b7724017d
10 changed files with 38 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -46,11 +46,8 @@ export default function BandwidthChart({
<CartesianGrid vertical={false} />
<YAxis
className="tracking-tighter"
width={80}
domain={[0, 'auto']}
// ticks={ticks}
tickCount={9}
minTickGap={8}
width={75}
domain={[0, (max: number) => (max < 0.4 ? 0.4 : Math.ceil(max))]}
tickLine={false}
axisLine={false}
unit={' MB/s'}

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

@@ -36,8 +36,8 @@ export default function CpuChart({
<AreaChart accessibilityLayer data={chartData} margin={{ top: 10 }}>
<CartesianGrid vertical={false} />
<YAxis
domain={[0, (max: number) => Math.ceil(max)]}
width={47}
// domain={[0, (max: number) => Math.ceil(max)]}
width={48}
tickLine={false}
axisLine={false}
unit={'%'}

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

@@ -56,11 +56,9 @@ export default function DiskChart({
<CartesianGrid vertical={false} />
<YAxis
className="tracking-tighter"
width={75}
width={diskSize >= 1000 ? 75 : 65}
domain={[0, diskSize]}
// ticks={ticks}
tickCount={9}
minTickGap={8}
tickLine={false}
axisLine={false}
unit={' GB'}

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

@@ -46,11 +46,14 @@ export default function DiskIoChart({
<CartesianGrid vertical={false} />
<YAxis
className="tracking-tighter"
width={80}
domain={[0, 'auto']}
// ticks={ticks}
tickCount={9}
minTickGap={8}
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)
}}
tickLine={false}
axisLine={false}
unit={' MB/s'}

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

@@ -18,7 +18,8 @@ export default function MemChart({
ticks: number[]
}) {
const totalMem = useMemo(() => {
return Math.ceil(chartData[0]?.mem)
const maxMem = Math.ceil(chartData[0]?.mem)
return maxMem > 2 && maxMem % 2 !== 0 ? maxMem + 1 : maxMem
}, [chartData])
const chartConfig = useMemo(
@@ -52,11 +53,11 @@ export default function MemChart({
<YAxis
// use "ticks" instead of domain / tickcount if need more control
domain={[0, totalMem]}
tickCount={9}
tickLine={false}
allowDecimals={false}
width={totalMem >= 100 ? 65 : 58}
// allowDecimals={false}
axisLine={false}
tickFormatter={(v) => `${v} GB`}
unit={' GB'}
/>
{/* todo: short time if first date is same day, otherwise short date */}
<XAxis
@@ -77,7 +78,7 @@ export default function MemChart({
animationDuration={150}
content={
<ChartTooltipContent
unit="GB"
unit=" GB"
// @ts-ignore
itemSorter={(a, b) => a.name.localeCompare(b.name)}
labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}