diff --git a/hub/site/src/components/charts/container-cpu-chart.tsx b/hub/site/src/components/charts/container-cpu-chart.tsx index 5e15c09..54ae989 100644 --- a/hub/site/src/components/charts/container-cpu-chart.tsx +++ b/hub/site/src/components/charts/container-cpu-chart.tsx @@ -82,6 +82,7 @@ export default function ContainerCpuChart({ > Math.max(Math.ceil(max), 0.4)]} width={yAxisWidth} tickLine={false} diff --git a/hub/site/src/components/charts/container-mem-chart.tsx b/hub/site/src/components/charts/container-mem-chart.tsx index d0932ed..3d277aa 100644 --- a/hub/site/src/components/charts/container-mem-chart.tsx +++ b/hub/site/src/components/charts/container-mem-chart.tsx @@ -88,6 +88,7 @@ export default function ContainerMemChart({ > Math.ceil(max)]} tickLine={false} axisLine={false} diff --git a/hub/site/src/components/charts/container-net-chart.tsx b/hub/site/src/components/charts/container-net-chart.tsx index fd248ca..a42ed6e 100644 --- a/hub/site/src/components/charts/container-net-chart.tsx +++ b/hub/site/src/components/charts/container-net-chart.tsx @@ -88,6 +88,7 @@ export default function ContainerCpuChart({ > Math.max(Math.ceil(max), 0.4)]} width={yAxisWidth} tickLine={false} diff --git a/hub/site/src/components/charts/cpu-chart.tsx b/hub/site/src/components/charts/cpu-chart.tsx index cbad2c9..82b67ba 100644 --- a/hub/site/src/components/charts/cpu-chart.tsx +++ b/hub/site/src/components/charts/cpu-chart.tsx @@ -21,10 +21,6 @@ export default function CpuChart({ const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth]) - // if (!systemData.length || !ticks.length) { - // return - // } - return (
Math.ceil(max)]} width={yAxisWidth} tickLine={false} diff --git a/hub/site/src/components/charts/mem-chart.tsx b/hub/site/src/components/charts/mem-chart.tsx index 723a5dd..a4eeadb 100644 --- a/hub/site/src/components/charts/mem-chart.tsx +++ b/hub/site/src/components/charts/mem-chart.tsx @@ -1,13 +1,7 @@ import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts' import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart' -import { - chartTimeData, - cn, - formatShortDate, - toFixedWithoutTrailingZeros, - useYaxisWidth, -} from '@/lib/utils' +import { chartTimeData, cn, formatShortDate, toFixedFloat, useYaxisWidth } from '@/lib/utils' import { useMemo, useRef } from 'react' // import Spinner from '../spinner' import { useStore } from '@nanostores/react' @@ -21,20 +15,15 @@ export default function MemChart({ ticks: number[] systemData: SystemStatsRecord[] }) { - const chartTime = useStore($chartTime) const chartRef = useRef(null) const yAxisWidth = useYaxisWidth(chartRef) + const chartTime = useStore($chartTime) const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth]) - // const totalMem = useMemo(() => { - // const maxMem = Math.ceil(systemData[0]?.stats.m) - // return maxMem > 2 && maxMem % 2 !== 0 ? maxMem + 1 : maxMem - // }, [systemData]) - - // if (!systemData.length || !ticks.length) { - // return - // } + const totalMem = useMemo(() => { + return toFixedFloat(systemData.at(-1)?.stats.m ?? 0, 1) + }, [systemData]) return (
@@ -53,14 +42,17 @@ export default function MemChart({ }} > - toFixedWithoutTrailingZeros(systemData.at(-1)?.stats.m ?? 0.04, 1)]} - width={yAxisWidth} - tickLine={false} - axisLine={false} - unit={' GB'} - /> + {totalMem && ( + + )} diff --git a/hub/site/src/components/charts/swap-chart.tsx b/hub/site/src/components/charts/swap-chart.tsx index fad4906..398427e 100644 --- a/hub/site/src/components/charts/swap-chart.tsx +++ b/hub/site/src/components/charts/swap-chart.tsx @@ -38,6 +38,7 @@ export default function SwapChart({ toFixedWithoutTrailingZeros(systemData.at(-1)?.stats.s ?? 0.04, 2)]} width={yAxisWidth} tickLine={false} diff --git a/hub/site/src/lib/utils.ts b/hub/site/src/lib/utils.ts index 11ca121..5bbe988 100644 --- a/hub/site/src/lib/utils.ts +++ b/hub/site/src/lib/utils.ts @@ -192,7 +192,7 @@ export function useYaxisWidth(chartRef: React.RefObject) { if (yAxisElement) { // console.log('yAxisElement', yAxisElement) clearInterval(interval) - setYAxisWidth(yAxisElement.getBoundingClientRect().width + 24) + setYAxisWidth(yAxisElement.getBoundingClientRect().width + 22) } }, 16) return () => clearInterval(interval) @@ -221,3 +221,7 @@ export function useClampedIsInViewport(options: HookOptions): [boolean | null, C export function toFixedWithoutTrailingZeros(num: number, digits: number) { return parseFloat(num.toFixed(digits)).toString() } + +export function toFixedFloat(num: number, digits: number) { + return parseFloat(num.toFixed(digits)) +}