fix: force highcharts to redraw when container's width changes (#2351) (

#2356) Co-authored-by: Farhad <[email protected]>
vaadin · Aug 19, 2021 · e6bccb0 · e6bccb0
1 parent cb82240
commit e6bccb0
Show file tree

Hide file tree

Showing 5 changed files with 146 additions and 12 deletions.
diff --git a/packages/vaadin-charts/test/visual/lumo/chart.test.js b/packages/vaadin-charts/test/visual/lumo/chart.test.js
@@ -3,13 +3,77 @@ import { visualDiff } from '@web/test-runner-visual-regression';
 import '../../../vaadin-chart.js';
 
 describe('chart', () => {
-  let element;
-
-  beforeEach(() => {
-    element = fixtureSync('<vaadin-chart title="The chart title"></vaadin-chart>');
-  });
-
   it('empty with title', async () => {
+    const element = fixtureSync('<vaadin-chart title="The chart title"></vaadin-chart>');
     await visualDiff(element, `${import.meta.url}_empty-title`);
   });
+
+  it('should update when container width changes', (done) => {
+    const element = fixtureSync(`
+      <div>
+        <style>
+          .root {
+            display: flex;
+            width: 100%;
+          }
+          .box {
+            min-width: 50%;
+          }
+          .chart-container {
+            flex-grow: 1;
+          }
+          .hidden {
+            display: none !important;
+          }
+        </style>
+        <div class="root">
+          <div class="box hidden"></div>
+          <div class="chart-container">
+            <vaadin-chart
+              type="line"
+              categories="[1750, 1800]"
+              stacking="normal"
+              no-legend
+              no-tooltip
+            >
+              <vaadin-chart-series title="Asia" values="[502, 635]"></vaadin-chart-series>
+            </vaadin-chart>
+          </div>
+        </div>
+      </div>
+    `);
+
+    const chart = element.querySelector('vaadin-chart');
+    const box = element.querySelector('.box');
+
+    chart.additionalOptions = {
+      chart: {
+        animation: false,
+        events: {
+          load() {
+            setTimeout(() => {
+              box.classList.toggle('hidden');
+              chart.__reflow();
+              setTimeout(async () => {
+                await visualDiff(element, `${import.meta.url}_responsive`);
+                done();
+              });
+            });
+          }
+        }
+      },
+      plotOptions: {
+        series: {
+          animation: {
+            duration: 0
+          }
+        }
+      },
+      drilldown: {
+        animation: {
+          duration: 0
+        }
+      }
+    };
+  });
 });
diff --git a/packages/vaadin-charts/test/visual/lumo/screenshots/chart/baseline/responsive.png b/packages/vaadin-charts/test/visual/lumo/screenshots/chart/baseline/responsive.png
diff --git a/packages/vaadin-charts/test/visual/material/chart.test.js b/packages/vaadin-charts/test/visual/material/chart.test.js
@@ -3,13 +3,77 @@ import { visualDiff } from '@web/test-runner-visual-regression';
 import '../../../vaadin-chart.js';
 
 describe('chart', () => {
-  let element;
-
-  beforeEach(() => {
-    element = fixtureSync('<vaadin-chart title="The chart title"></vaadin-chart>');
-  });
-
   it('empty with title', async () => {
+    const element = fixtureSync('<vaadin-chart title="The chart title"></vaadin-chart>');
     await visualDiff(element, `${import.meta.url}_empty-title`);
   });
+
+  it('should update when container width changes', (done) => {
+    const element = fixtureSync(`
+      <div>
+        <style>
+          .root {
+            display: flex;
+            width: 100%;
+          }
+          .box {
+            min-width: 50%;
+          }
+          .chart-container {
+            flex-grow: 1;
+          }
+          .hidden {
+            display: none !important;
+          }
+        </style>
+        <div class="root">
+          <div class="box hidden"></div>
+          <div class="chart-container">
+            <vaadin-chart
+              type="line"
+              categories="[1750, 1800]"
+              stacking="normal"
+              no-legend
+              no-tooltip
+            >
+              <vaadin-chart-series title="Asia" values="[502, 635]"></vaadin-chart-series>
+            </vaadin-chart>
+          </div>
+        </div>
+      </div>
+    `);
+
+    const chart = element.querySelector('vaadin-chart');
+    const box = element.querySelector('.box');
+
+    chart.additionalOptions = {
+      chart: {
+        animation: false,
+        events: {
+          load() {
+            setTimeout(() => {
+              box.classList.toggle('hidden');
+              chart.__reflow();
+              setTimeout(async () => {
+                await visualDiff(element, `${import.meta.url}_responsive`);
+                done();
+              });
+            });
+          }
+        }
+      },
+      plotOptions: {
+        series: {
+          animation: {
+            duration: 0
+          }
+        }
+      },
+      drilldown: {
+        animation: {
+          duration: 0
+        }
+      }
+    };
+  });
 });
diff --git a/...es/vaadin-charts/test/visual/material/screenshots/chart/baseline/responsive.png b/...es/vaadin-charts/test/visual/material/screenshots/chart/baseline/responsive.png
diff --git a/packages/vaadin-charts/theme/vaadin-chart-default-theme.js b/packages/vaadin-charts/theme/vaadin-chart-default-theme.js
@@ -31,6 +31,12 @@ registerStyles(
       font-size: 12px;
     }
 
+    .highcharts-container svg {
+      /* https://github.com/highcharts/highcharts/issues/4649 */
+      /* https://github.com/vaadin/web-components/issues/2171 */
+      width: 100% !important;
+    }
+
     .highcharts-root {
       display: block;
     }