fix(hub): ui bug where charts didn't display 1m max until next update

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

@@ -67,8 +67,8 @@ export default function AreaChartDefault({
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
 	const { isIntersecting, ref } = useIntersectionObserver({ freeze: false })
 	const sourceData = customData ?? chartData.systemStats
-	// Only update the rendered data while the chart is visible
 	const [displayData, setDisplayData] = useState(sourceData)
+	const [displayMaxToggled, setDisplayMaxToggled] = useState(maxToggled)
 
 	// Reduce chart redraws by only updating while visible or when chart time changes
 	useEffect(() => {
@@ -78,7 +78,10 @@ export default function AreaChartDefault({
 		if (shouldUpdate) {
 			setDisplayData(sourceData)
 		}
-	}, [displayData, isIntersecting, sourceData])
+		if (isIntersecting && maxToggled !== displayMaxToggled) {
+			setDisplayMaxToggled(maxToggled)
+		}
+	}, [displayData, displayMaxToggled, isIntersecting, maxToggled, sourceData])
 
 	// Use a stable key derived from data point identities and visual properties
 	const areasKey = dataPoints?.map((d) => `${d.label}:${d.opacity}`).join("\0")
@@ -106,14 +109,14 @@ export default function AreaChartDefault({
 				/>
 			)
 		})
-	}, [areasKey, maxToggled])
+	}, [areasKey, displayMaxToggled])
 
 	return useMemo(() => {
 		if (displayData.length === 0) {
 			return null
 		}
 		// if (logRender) {
-		// console.log("Rendered at", new Date(), "for", dataPoints?.at(0)?.label)
+		// console.log("Rendered", dataPoints?.map((d) => d.label).join(", "), new Date())
 		// }
 		return (
 			<ChartContainer
@@ -163,5 +166,5 @@ export default function AreaChartDefault({
 				</AreaChart>
 			</ChartContainer>
 		)
-	}, [displayData, yAxisWidth, showTotal, filter])
+	}, [displayData, yAxisWidth, filter, Areas])
 }