diff --git a/client/src/pages/Dashboard.jsx b/client/src/pages/Dashboard.jsx index 4f2543e..64a204a 100644 --- a/client/src/pages/Dashboard.jsx +++ b/client/src/pages/Dashboard.jsx @@ -15,9 +15,8 @@ const styles = ` .d-stats-card { padding: 16px !important; } .d-stats-value { font-size: 28px !important; } .d-bottom { grid-template-columns: 1fr !important; gap: 12px !important; } - .d-chart { height: 200px !important; padding: 12px !important; } - .d-chart-empty { padding-top: 75px !important; } - .d-section-gap { margin-bottom: 24px !important; } + .d-chart { height: 200px !important; } + .d-section-gap { margin-bottom: 24px !important; } .d-container { padding: 16px !important; } .d-body { padding: 12px !important; } .d-trend-header { flex-direction: column !important; gap: 8px !important; } @@ -45,6 +44,7 @@ export default function Dashboard({ onLogout }) { const hourlyInstance = useRef(null); const trendInstance = useRef(null); const intervalRef = useRef(null); + const chartContainerRef = useRef(null); const loadData = useCallback(async () => { try { @@ -68,6 +68,17 @@ export default function Dashboard({ onLogout }) { }; }, [loadData]); + useEffect(() => { + const container = chartContainerRef.current; + if (!container) return; + const ro = new ResizeObserver(() => { + hourlyInstance.current?.resize(); + trendInstance.current?.resize(); + }); + ro.observe(container); + return () => ro.disconnect(); + }, []); + useEffect(() => { const today = dayjs().format('YYYY-MM-DD'); setIsToday(chartDate === today); @@ -325,7 +336,7 @@ export default function Dashboard({ onLogout }) { const todayCost = currentData?.todayCost ?? 0; return ( -
+