Allow dynamic size value in default area chart

- Fixes system pause / unpause rendering
- Some formatting

beszel/site/src/components/charts/area-chart.tsx

@@ -35,6 +35,7 @@ export default memo(function AreaChartDefault({
 	chartData,
 	max,
 	tickFormatter,
+	contentFormatter,
 }: {
 	maxToggled?: boolean
 	unit?: string
@@ -42,6 +43,7 @@ export default memo(function AreaChartDefault({
 	chartData: ChartData
 	max?: number
 	tickFormatter?: (value: number) => string
+	contentFormatter?: (value: number) => string
 }) {
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
 	const { i18n } = useLingui()
@@ -115,7 +117,12 @@ export default memo(function AreaChartDefault({
 						content={
 							<ChartTooltipContent
 								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
-								contentFormatter={(item) => decimalString(item.value) + unit}
+								contentFormatter={({ value }) => {
+									if (contentFormatter) {
+										return contentFormatter(value)
+									}
+									return decimalString(value) + unit
+								}}
 								// indicator="line"
 							/>
 						}

beszel/site/src/components/routes/system.tsx

@@ -125,7 +125,7 @@ export default function SystemDetail({ name }: { name: string }) {
 		document.title = `${name} / Beszel`
 		return () => {
 			if (!persistChartTime.current) {
-			$chartTime.set($userSettings.get().chartTime)
+				$chartTime.set($userSettings.get().chartTime)
 			}
 			persistChartTime.current = false
 			setSystemStats([])
@@ -294,7 +294,7 @@ export default function SystemDetail({ name }: { name: string }) {
 		const distanceToBottom = wrapperRect.bottom - chartRect.bottom
 		setBottomSpacing(tooltipHeight - distanceToBottom)
 	}, [netCardRef, containerData])
-	
+
 	// keyboard navigation between systems
 	useEffect(() => {
 		if (!systems.length) {
@@ -304,8 +304,8 @@ export default function SystemDetail({ name }: { name: string }) {
 			if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
 				return
 			}
-			const currentIndex = systems.findIndex(s => s.name === name)
-			if (currentIndex === -1 || systems.length <= 1) { 
+			const currentIndex = systems.findIndex((s) => s.name === name)
+			if (currentIndex === -1 || systems.length <= 1) {
 				return
 			}
 			switch (e.key) {
@@ -313,12 +313,12 @@ export default function SystemDetail({ name }: { name: string }) {
 				case "h":
 					const prevIndex = (currentIndex - 1 + systems.length) % systems.length
 					persistChartTime.current = true
-					return navigate(getPagePath($router, "system", { name: systems[prevIndex].name}))
+					return navigate(getPagePath($router, "system", { name: systems[prevIndex].name }))
 				case "ArrowRight":
 				case "l":
 					const nextIndex = (currentIndex + 1) % systems.length
 					persistChartTime.current = true
-					return navigate(getPagePath($router, "system", { name: systems[nextIndex].name}))
+					return navigate(getPagePath($router, "system", { name: systems[nextIndex].name }))
 			}
 		}
 		return listen(document, "keyup", handleKeyUp)
@@ -555,6 +555,10 @@ export default function SystemDetail({ name }: { name: string }) {
 					<div className="grid xl:grid-cols-2 gap-4">
 						{Object.keys(systemStats.at(-1)?.stats.g ?? {}).map((id) => {
 							const gpu = systemStats.at(-1)?.stats.g?.[id] as GPUData
+							const sizeFormatter = (value: number, decimals?: number) => {
+								const { v, u } = getSizeAndUnit(value, false)
+								return toFixedFloat(v, decimals || 1) + u
+							}
 							return (
 								<div key={id} className="contents">
 									<ChartCard
@@ -574,12 +578,9 @@ export default function SystemDetail({ name }: { name: string }) {
 										<AreaChartDefault
 											chartData={chartData}
 											chartName={`g.${id}.mu`}
-											unit=" MB"
 											max={gpu.mt}
-											tickFormatter={(value) => {
-												const { v, u } = getSizeAndUnit(value, false)
-												return toFixedFloat(v, 1) + u
-											}}
+											tickFormatter={sizeFormatter}
+											contentFormatter={(value) => sizeFormatter(value, 2)}
 										/>
 									</ChartCard>
 								</div>

beszel/site/src/components/systems-table/systems-table.tsx

@@ -554,7 +554,7 @@ const SystemTableRow = memo(
 					))}
 				</TableRow>
 			)
-		}, [system, colLength, t])
+		}, [system, system.status, colLength, t])
 	}
 )
 
@@ -627,9 +627,9 @@ const ActionsButton = memo(({ system }: { system: SystemRecord }) => {
 	const [editOpen, setEditOpen] = useState(false)
 	let editOpened = useRef(false)
 	const { t } = useLingui()
+	const { id, status, host, name } = system
 
 	return useMemo(() => {
-		const { id, status, host, name } = system
 		return (
 			<>
 				<DropdownMenu>
@@ -717,7 +717,7 @@ const ActionsButton = memo(({ system }: { system: SystemRecord }) => {
 				</AlertDialog>
 			</>
 		)
-	}, [system.id, t, deleteOpen, editOpen])
+	}, [id, status, host, name, t, deleteOpen, editOpen])
 })
 
 function IndicatorDot({ system, className }: { system: SystemRecord; className?: ClassValue }) {