From 71c96b01d1b7ee51f62c85d07d5d55debe4ca843 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Mon, 6 Jan 2025 15:39:16 +0100
Subject: [PATCH 1/4] fix: Re-mount the chart container when chart type changes

...to prevent issues with useSize that gets a wrong size from a previous chart when changing chart type that results in scrollable containers.
---
 app/charts/shared/containers.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/charts/shared/containers.tsx b/app/charts/shared/containers.tsx
index f5749d91b..6a7810d20 100644
--- a/app/charts/shared/containers.tsx
+++ b/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,
@@ -25,12 +26,15 @@ export const useStyles = makeStyles<{}, {}, "chartContainer">(() => ({
 
 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
+      key={chartConfig.chartType}
       ref={ref}
       aria-hidden="true"
       className={classes.chartContainer}

From c559e088b702cea1d5d6cc61e2963cac09a3aabb Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Mon, 6 Jan 2025 15:41:31 +0100
Subject: [PATCH 2/4] fix: Use flex container so that the table correctly takes
 100% of remaining parent height

---
 app/charts/shared/containers.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/charts/shared/containers.tsx b/app/charts/shared/containers.tsx
index 6a7810d20..acad327c1 100644
--- a/app/charts/shared/containers.tsx
+++ b/app/charts/shared/containers.tsx
@@ -19,6 +19,8 @@ export const useStyles = makeStyles<{}, {}, "chartContainer">(() => ({
   chartContainer: {
     overflow: "hidden",
     position: "relative",
+    display: "flex",
+    flexDirection: "column",
     width: "100%",
     flexGrow: 1,
   },

From 64e67b4cd3c3424c124280f955d69234029d74dd Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Mon, 6 Jan 2025 15:59:30 +0100
Subject: [PATCH 3/4] docs: Update CHANGELOG

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 338dd5cbd..cc19681be 100644
--- a/CHANGELOG.md
+++ b/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
 

From 71879fd88c09c9339e02b01c6bf4bf89788bc40c Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Mon, 6 Jan 2025 16:12:37 +0100
Subject: [PATCH 4/4] docs: Add comment

---
 app/charts/shared/containers.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/charts/shared/containers.tsx b/app/charts/shared/containers.tsx
index acad327c1..be500bcbc 100644
--- a/app/charts/shared/containers.tsx
+++ b/app/charts/shared/containers.tsx
@@ -36,6 +36,8 @@ export const ChartContainer = ({ children }: { children: ReactNode }) => {
 
   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"