fix: Updating column charts height on vertical resize

visualize-admin · Jul 3, 2024 · 277e82a · 277e82a
1 parent 1663833
commit 277e82a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/app/charts/column/columns-grouped.tsx b/app/charts/column/columns-grouped.tsx
@@ -101,7 +101,7 @@ export const ColumnsGrouped = () => {
   const ref = useRef<SVGGElement>(null);
   const enableTransition = useTransitionStore((state) => state.enable);
   const transitionDuration = useTransitionStore((state) => state.duration);
-  const { margins } = bounds;
+  const { margins, height } = bounds;
   const bandwidth = xScaleIn.bandwidth();
   const y0 = yScale(0);
   const renderData: RenderColumnDatum[] = useMemo(() => {
@@ -121,6 +121,7 @@ export const ColumnsGrouped = () => {
         };
       });
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     colors,
     getSegment,
@@ -132,6 +133,7 @@ export const ColumnsGrouped = () => {
     yScale,
     y0,
     getRenderingKey,
+    height,
   ]);
 
   useEffect(() => {

diff --git a/app/charts/column/columns-stacked.tsx b/app/charts/column/columns-stacked.tsx
@@ -15,7 +15,7 @@ export const ColumnsStacked = () => {
   const transitionDuration = useTransitionStore((state) => state.duration);
   const { bounds, getX, xScale, yScale, colors, series, getRenderingKey } =
     useChartState() as StackedColumnsState;
-  const { margins } = bounds;
+  const { margins, height } = bounds;
   const bandwidth = xScale.bandwidth();
   const y0 = yScale(0);
   const renderData: RenderColumnDatum[] = useMemo(() => {
@@ -35,7 +35,18 @@ export const ColumnsStacked = () => {
         };
       });
     });
-  }, [bandwidth, colors, getX, series, xScale, yScale, getRenderingKey]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    bandwidth,
+    colors,
+    getX,
+    series,
+    xScale,
+    yScale,
+    getRenderingKey,
+    // Need to reset the yRange on height change
+    height,
+  ]);
 
   useEffect(() => {
     if (ref.current) {