Dynamically resize charts

frontend/src/components/EChart.tsx

@@ -1,6 +1,7 @@
 import { useTheme } from "@mui/material/styles";
 import * as echarts from "echarts";
 import { CSSProperties, useEffect, useRef } from "react";
+import { useComponentWidthOf } from "./hooks";
 
 interface EChartProps {
   width?: CSSProperties["width"];
@@ -14,6 +15,9 @@ export function EChart({ width, height, option }: EChartProps) {
   const theme = useTheme();
   const themeMode = theme.palette.mode;
 
+  /// Get the width of the parent div to resize dynamically
+  const parentDivWidth = useComponentWidthOf(ref);
+
   useEffect(() => {
     if (chartRef.current) {
       echarts.dispose(chartRef.current);
@@ -39,8 +43,16 @@ export function EChart({ width, height, option }: EChartProps) {
     }
 
     chart.setOption(option);
+    chart.resize();
     chartRef.current = chart;
   }, [option, themeMode]);
 
+  // Resize dynamically
+  useEffect(() => {
+    if (chartRef.current) {
+      chartRef.current.resize();
+    }
+  }, [parentDivWidth]);
+
   return <div ref={ref} style={{ width, height }}></div>;
 }

frontend/src/components/hooks.ts

@@ -0,0 +1,25 @@
+import { RefObject, useEffect, useState } from "react";
+
+/// A hook to get the component width of a Ref to a `HTMLElement`.
+export function useComponentWidthOf(ref: RefObject<HTMLElement>) {
+  // The state.
+  const [parentWidth, setParentWidth] = useState(0);
+  useEffect(() => {
+    // If the ref is null, we do nothing
+    if (ref.current) {
+      // Create the observer
+      const resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          setParentWidth(entry.contentRect.width);
+        }
+      });
+
+      // Initialize
+      resizeObserver.observe(ref.current);
+
+      // Disconnect the observer on disconnect
+      return () => resizeObserver.disconnect();
+    }
+  }, [ref]);
+  return parentWidth;
+}