Merge pull request #1944 from visualize-admin/fix/chart-sizing

fix: Chart sizing

CHANGELOG.md

@@ -18,6 +18,8 @@ You can also check the
     chart and the cube has been updated in the meantime and contains new values
     in the color dimension
   - Fixed preview via API (iframe)
+  - Fixed cut table scroll-bars and unnecessary scroll of bar charts when
+    switching between chart types
 
 # [5.0.2] - 2024-11-28
 

app/charts/shared/containers.tsx

@@ -7,6 +7,7 @@ import { useChartState } from "@/charts/shared/chart-state";
 import { CalculationToggle } from "@/charts/shared/interactive-filter-calculation-toggle";
 import { useObserverRef } from "@/charts/shared/use-size";
 import {
+  getChartConfig,
   hasChartConfigs,
   isLayoutingFreeCanvas,
   useConfiguratorState,
@@ -18,19 +19,26 @@ export const useStyles = makeStyles<{}, {}, "chartContainer">(() => ({
   chartContainer: {
     overflow: "hidden",
     position: "relative",
+    display: "flex",
+    flexDirection: "column",
     width: "100%",
     flexGrow: 1,
   },
 }));
 
 export const ChartContainer = ({ children }: { children: ReactNode }) => {
   const [state] = useConfiguratorState(hasChartConfigs);
+  const chartConfig = getChartConfig(state);
   const isFreeCanvas = isLayoutingFreeCanvas(state);
   const ref = useObserverRef();
   const { bounds } = useChartState();
   const classes = useStyles();
+
   return (
     <div
+      // Re-mount to prevent issues with useSize hook when switching between
+      // chart types (that might have different sizes).
+      key={chartConfig.chartType}
       ref={ref}
       aria-hidden="true"
       className={classes.chartContainer}