fankes/beszel
2
0
Fork 0
mirror of https://github.com/fankes/beszel.git synced 2025-10-20 02:09:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix bottom spacing

Browse Source
This commit is contained in:
Henry Dollman
2024-10-14 19:03:02 -04:00
parent c4400eb0a3
commit c1577d3ba5
1 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
beszel/site/src/components/routes/system.tsx
View File

@@ -107,6 +107,7 @@ export default function SystemDetail({ name }: { name: string }) {
const [containerData, setContainerData] = useState([] as ChartData['containerData']) const [containerData, setContainerData] = useState([] as ChartData['containerData'])
const netCardRef = useRef<HTMLDivElement>(null) const netCardRef = useRef<HTMLDivElement>(null)
const [containerFilterBar, setContainerFilterBar] = useState(null as null | JSX.Element) const [containerFilterBar, setContainerFilterBar] = useState(null as null | JSX.Element)
const [bottomSpacing, setBottomSpacing] = useState(0)
const isLongerChart = chartTime !== '1h' const isLongerChart = chartTime !== '1h'
useEffect(() => { useEffect(() => {
@@ -265,17 +266,18 @@ export default function SystemDetail({ name }: { name: string }) {
}, [system.info]) }, [system.info])
/** Space for tooltip if more than 12 containers */ /** Space for tooltip if more than 12 containers */
const bottomSpacing = useMemo(() => { useEffect(() => {
if (!netCardRef.current || !containerData.length) { if (!netCardRef.current || !containerData.length) {
return 0 setBottomSpacing(0)
return
} }
const tooltipHeight = (Object.keys(containerData[0]).length - 11) * 17.8 - 40 const tooltipHeight = (Object.keys(containerData[0]).length - 11) * 17.8 - 40
const wrapperEl = document.getElementById('chartwrap') as HTMLDivElement const wrapperEl = document.getElementById('chartwrap') as HTMLDivElement
const wrapperRect = wrapperEl.getBoundingClientRect() const wrapperRect = wrapperEl.getBoundingClientRect()
const chartRect = netCardRef.current.getBoundingClientRect() const chartRect = netCardRef.current.getBoundingClientRect()
const distanceToBottom = wrapperRect.bottom - chartRect.bottom const distanceToBottom = wrapperRect.bottom - chartRect.bottom
return tooltipHeight - distanceToBottom setBottomSpacing(tooltipHeight - distanceToBottom)
}, [netCardRef.current, containerData]) }, [netCardRef, containerData])
if (!system.id) { if (!system.id) {
return null return null