add spacing for long temperature chart tooltip (#1299)

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

@@ -41,6 +41,7 @@ import { useIntersectionObserver } from "@/lib/use-intersection-observer"
 import {
 	chartTimeData,
 	cn,
+	compareSemVer,
 	debounce,
 	decimalString,
 	formatBytes,
@@ -170,8 +171,9 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 	const [system, setSystem] = useState({} as SystemRecord)
 	const [systemStats, setSystemStats] = useState([] as SystemStatsRecord[])
 	const [containerData, setContainerData] = useState([] as ChartData["containerData"])
-	const netCardRef = useRef<HTMLDivElement>(null)
+	const temperatureChartRef = useRef<HTMLDivElement>(null)
 	const persistChartTime = useRef(false)
+	const [bottomSpacing, setBottomSpacing] = useState(0)
 	const [chartLoading, setChartLoading] = useState(true)
 	const isLongerChart = !["1m", "1h"].includes(chartTime) // true if chart time is not 1m or 1h
 	const userSettings = $userSettings.get()
@@ -396,6 +398,21 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 		}[]
 	}, [system, t])
 
+	/** Space for tooltip if more than 10 sensors and no containers table */
+	useEffect(() => {
+		const sensors = Object.keys(systemStats.at(-1)?.stats.t ?? {})
+		if (!temperatureChartRef.current || sensors.length < 10 || containerData.length > 0) {
+			setBottomSpacing(0)
+			return
+		}
+		const tooltipHeight = (sensors.length - 10) * 17.8 - 40
+		const wrapperEl = chartWrapRef.current as HTMLDivElement
+		const wrapperRect = wrapperEl.getBoundingClientRect()
+		const chartRect = temperatureChartRef.current.getBoundingClientRect()
+		const distanceToBottom = wrapperRect.bottom - chartRect.bottom
+		setBottomSpacing(tooltipHeight - distanceToBottom)
+	}, [])
+
 	// keyboard navigation between systems
 	useEffect(() => {
 		if (!systems.length) {
@@ -728,26 +745,20 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 					</ChartCard>
 
 					{containerFilterBar && containerData.length > 0 && (
-						<div
+						<ChartCard
-							ref={netCardRef}
+							empty={dataEmpty}
-							className={cn({
+							grid={grid}
-								"col-span-full": !grid,
+							title={dockerOrPodman(t`Docker Network I/O`, system)}
-							})}
+							description={dockerOrPodman(t`Network traffic of docker containers`, system)}
+							cornerEl={containerFilterBar}
 						>
-							<ChartCard
+							<ContainerChart
-								empty={dataEmpty}
+								chartData={chartData}
-								title={dockerOrPodman(t`Docker Network I/O`, system)}
+								chartType={ChartType.Network}
-								description={dockerOrPodman(t`Network traffic of docker containers`, system)}
+								dataKey="n"
-								cornerEl={containerFilterBar}
+								chartConfig={containerChartConfigs.network}
-							>
+							/>
-								<ContainerChart
+						</ChartCard>
-									chartData={chartData}
-									chartType={ChartType.Network}
-									dataKey="n"
-									chartConfig={containerChartConfigs.network}
-								/>
-							</ChartCard>
-						</div>
 					)}
 
 					{/* Swap chart */}
@@ -777,16 +788,21 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 
 					{/* Temperature chart */}
 					{systemStats.at(-1)?.stats.t && (
-						<ChartCard
+						<div
-							empty={dataEmpty}
+							ref={temperatureChartRef}
-							grid={grid}
+							className={cn("odd:last-of-type:col-span-full", { "col-span-full": !grid })}
-							title={t`Temperature`}
-							description={t`Temperatures of system sensors`}
-							cornerEl={<FilterBar store={$temperatureFilter} />}
-							legend={Object.keys(systemStats.at(-1)?.stats.t ?? {}).length < 12}
 						>
-							<TemperatureChart chartData={chartData} />
+							<ChartCard
-						</ChartCard>
+								empty={dataEmpty}
+								grid={grid}
+								title={t`Temperature`}
+								description={t`Temperatures of system sensors`}
+								cornerEl={<FilterBar store={$temperatureFilter} />}
+								legend={Object.keys(systemStats.at(-1)?.stats.t ?? {}).length < 12}
+							>
+								<TemperatureChart chartData={chartData} />
+							</ChartCard>
+						</div>
 					)}
 
 					{/* Battery chart */}
@@ -974,10 +990,13 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 						})}
 					</div>
 				)}
-				{id && containerData.length > 0 && (
+				{containerData.length > 0 && compareSemVer(chartData.agentVersion, parseSemVer("0.14.0")) >= 0 && (
 					<LazyContainersTable systemId={id} />
 				)}
 			</div>
+
+			{/* add space for tooltip if more than 12 containers */}
+			{bottomSpacing > 0 && <span className="block" style={{ height: bottomSpacing }} />}
 		</>
 	)
 })

supplemental/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 - Add `MFA_OTP` environment variable to enable email-based one-time password for users and/or superusers. 
 
+- Add spacing for long temperature chart tooltip. (#1299)
+
 ## 0.14.0
 
 - Add `/containers` page for viewing current status of all running containers. (#928)