Merge pull request #16 from wri/fix-chart-dimensions

Resize chart with ResizeObserver

src/components/BarChart.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import * as d3 from "d3";
 import T from "prop-types";
 
@@ -7,15 +7,35 @@ const BarChart = ({ data }) => {
   const chartRef = useRef();
   const tooltipRef = useRef();
 
+  const [ chartDimensions, setChartDimentsions ] = useState([0, 0]);
+
+  useEffect(() => {
+    if (containerRef.current) {
+      const observer = new ResizeObserver(entries => {
+        const e = entries[0];
+        const parentElement = e.target.parentElement;
+        setChartDimentsions([parentElement.clientWidth, parentElement.clientHeight]);
+      });
+      observer.observe(containerRef.current);
+
+      return () => {
+        observer.disconnect();
+      };
+    }
+  }, []);
+
   useEffect(() => {
+    // Exit effect if at least one dimesion is 0
+    if (!chartDimensions.every(x => !!x)) return;
+
     const svg = d3.select(chartRef.current);
     svg.selectAll("*").remove();
 
     const tooltip = d3.select(tooltipRef.current);
 
-    const width = containerRef.current?.offsetWidth || 250;
-    const height = 230;
-    const margin = { top: 20, right: 20, bottom: 20, left: 60 };
+    const margin = { top: 24, right: 12, bottom: 36, left: 60 };
+    const width = chartDimensions[0];
+    const height = chartDimensions[1];
 
     const x = d3.scaleBand()
       .domain(data.map(d => d.category))
@@ -64,14 +84,14 @@ const BarChart = ({ data }) => {
       .on("mouseout", () => {
         tooltip.style("visibility", "hidden");
       });
-  }, [data]);
+  }, [data, chartDimensions]);
 
   return (
     <div style={{ position: "relative" }} ref={containerRef}>
       <svg
         ref={chartRef}
-        width={containerRef.current?.offsetWidth || 250}
-        height={230}
+        width={chartDimensions[0]}
+        height={chartDimensions[1]}
       />
       <div
         ref={tooltipRef}

src/components/ChatOutput.jsx

@@ -28,7 +28,6 @@ function ChatOutput() {
         observer.disconnect();
       };
     }
-
   }, []);
 
   return (