From e4e77b4cfd638b06ecf852e02f05b412c79587b8 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Tue, 7 Jan 2025 10:43:46 +0100
Subject: [PATCH] ui: resize chart on window

---
 frontend/app/components/Charts/BarChart.tsx  | 4 ++++
 frontend/app/components/Charts/LineChart.tsx | 3 +++
 frontend/app/components/Charts/PieChart.tsx  | 3 +++
 3 files changed, 10 insertions(+)

diff --git a/frontend/app/components/Charts/BarChart.tsx b/frontend/app/components/Charts/BarChart.tsx
index 15a6a4321..4c99efce4 100644
--- a/frontend/app/components/Charts/BarChart.tsx
+++ b/frontend/app/components/Charts/BarChart.tsx
@@ -22,6 +22,9 @@ function ORBarChart(props: BarChartProps) {
   React.useEffect(() => {
     if (!chartRef.current) return;
     const chart = echarts.init(chartRef.current);
+    const obs = new ResizeObserver(() => chart.resize())
+    obs.observe(chartRef.current);
+
     const categories = buildCategories(props.data);
     const { datasets, series } = buildBarDatasetsAndSeries(props, props.horizontal ?? false);
 
@@ -72,6 +75,7 @@ function ORBarChart(props: BarChartProps) {
 
     return () => {
       chart.dispose();
+      obs.disconnect();
       delete (window as any).__seriesValueMap[chartUuid.current];
       delete (window as any).__seriesColorMap[chartUuid.current];
       delete (window as any).__categoryMap[chartUuid.current];
diff --git a/frontend/app/components/Charts/LineChart.tsx b/frontend/app/components/Charts/LineChart.tsx
index 68a281bec..75f50d346 100644
--- a/frontend/app/components/Charts/LineChart.tsx
+++ b/frontend/app/components/Charts/LineChart.tsx
@@ -21,6 +21,8 @@ function ORLineChart(props: Props) {
   React.useEffect(() => {
     if (!chartRef.current) return;
     const chart = echarts.init(chartRef.current);
+    const obs = new ResizeObserver(() => chart.resize())
+    obs.observe(chartRef.current);
 
     const categories = buildCategories(props.data);
     const { datasets, series } = buildDatasetsAndSeries(props);
@@ -85,6 +87,7 @@ function ORLineChart(props: Props) {
 
     return () => {
       chart.dispose();
+      obs.disconnect();
       delete (window as any).__seriesValueMap[chartUuid.current];
       delete (window as any).__seriesColorMap[chartUuid.current];
       delete (window as any).__categoryMap[chartUuid.current];
diff --git a/frontend/app/components/Charts/PieChart.tsx b/frontend/app/components/Charts/PieChart.tsx
index c6ce13ef6..a172bee26 100644
--- a/frontend/app/components/Charts/PieChart.tsx
+++ b/frontend/app/components/Charts/PieChart.tsx
@@ -101,6 +101,8 @@ function PieChart(props: PieChartProps) {
     };
 
     chartInstance.setOption(option);
+    const obs = new ResizeObserver(() => chartInstance.resize())
+    obs.observe(chartRef.current);
 
     chartInstance.on('click', function (params) {
       onClick([{ name: params.name, value: params.value }]);
@@ -108,6 +110,7 @@ function PieChart(props: PieChartProps) {
 
     return () => {
       chartInstance.dispose();
+      obs.disconnect();
     };
   }, [data, label, onClick, inGrid]);