feat: add chart-end-resize event (#9973)

Author: DiegoCardoso

packages/charts/src/vaadin-chart-mixin.d.ts

@@ -85,6 +85,11 @@ export type ChartRedrawEvent = CustomEvent<{ chart: HighchartsChart; originalEve
  */
 export type ChartSelectionEvent = CustomEvent<{ chart: HighchartsChart; originalEvent: ChartEvent }>;
 
+/**
+ * Fired when the chart finishes resizing.
+ */
+export type ChartEndResizeEvent = CustomEvent<{ chart: HighchartsChart; originalEvent: ChartEvent }>;
+
 /**
  * Fired when the series has finished its initial animation.
  */
@@ -227,6 +232,8 @@ export interface ChartCustomEventMap {
 
   'chart-selection': ChartSelectionEvent;
 
+  'chart-end-resize': ChartEndResizeEvent;
+
   'series-after-animate': ChartSeriesAfterAnimateEvent;
 
   'series-checkbox-click': ChartSeriesCheckboxClickEvent;

packages/charts/src/vaadin-chart-mixin.js

@@ -551,6 +551,14 @@ export const ChartMixin = (superClass) =>
          * @param {Object} chart Chart object where the event was sent from
          */
         selection: 'chart-selection',
+
+        /**
+         * Fired when the chart finishes resizing.
+         * @event chart-end-resize
+         * @param {Object} detail.originalEvent object with details about the event sent
+         * @param {Object} chart Chart object where the event was sent from
+         */
+        endResize: 'chart-end-resize',
       };
     }
 

packages/charts/src/vaadin-chart.d.ts

@@ -122,6 +122,7 @@ export * from './vaadin-chart-mixin.js';
  * @fires {CustomEvent} chart-drillupall - Fired after all the drilldown series has been drilled up.
  * @fires {CustomEvent} chart-redraw - Fired after the chart redraw.
  * @fires {CustomEvent} chart-selection - Fired when an area of the chart has been selected.
+ * @fires {CustomEvent} chart-end-resize - Fired when the chart finishes resizing.
  * @fires {CustomEvent} series-after-animate - Fired when the series has finished its initial animation.
  * @fires {CustomEvent} series-checkbox-click - Fired when the checkbox next to the series' name in the legend is clicked.
  * @fires {CustomEvent} series-click - Fired when the series is clicked.

packages/charts/src/vaadin-chart.js

@@ -127,6 +127,7 @@ import { ChartMixin } from './vaadin-chart-mixin.js';
  * @fires {CustomEvent} chart-drillupall - Fired after all the drilldown series has been drilled up.
  * @fires {CustomEvent} chart-redraw - Fired after the chart redraw.
  * @fires {CustomEvent} chart-selection - Fired when an area of the chart has been selected.
+ * @fires {CustomEvent} chart-end-resize - Fired when the chart finishes resizing.
  * @fires {CustomEvent} series-after-animate - Fired when the series has finished its initial animation.
  * @fires {CustomEvent} series-checkbox-click - Fired when the checkbox next to the series' name in the legend is clicked.
  * @fires {CustomEvent} series-click - Fired when the series is clicked.

packages/charts/test/chart-element.test.js

@@ -1,5 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
-import { aTimeout, fixtureSync, nextFrame, nextRender, nextResize, oneEvent } from '@vaadin/testing-helpers';
+import { aTimeout, fixtureSync, nextFrame, nextRender, oneEvent } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import '../src/vaadin-chart.js';
 
@@ -284,7 +284,7 @@ describe('vaadin-chart', () => {
 
     it('should update container height on chart resize', async () => {
       chart.style.width = '300px';
-      await oneEvent(chart, 'chart-redraw');
+      await oneEvent(chart, 'chart-end-resize');
       const rect = chart.$.chart.getBoundingClientRect();
       expect(rect.width).to.be.equal(300);
       expect(chart.configuration.chartWidth).to.be.equal(300);
@@ -307,7 +307,7 @@ describe('vaadin-chart', () => {
 
     it('should update container height on chart resize', async () => {
       chart.style.height = '300px';
-      await oneEvent(chart, 'chart-redraw');
+      await oneEvent(chart, 'chart-end-resize');
       const rect = chart.$.chart.getBoundingClientRect();
       expect(rect.height).to.be.equal(300);
       expect(chart.configuration.chartHeight).to.be.equal(300);
@@ -338,7 +338,7 @@ describe('vaadin-chart', () => {
       expect(charts[1].configuration.chartWidth).to.be.equal(500);
 
       layout.style.width = '500px';
-      await nextResize(charts[0]);
+      await oneEvent(charts[0], 'chart-end-resize');
 
       expect(layout.getBoundingClientRect().width).to.be.equal(500);
       expect(charts[0].configuration.chartWidth).to.be.equal(250);
@@ -351,7 +351,7 @@ describe('vaadin-chart', () => {
       expect(charts[1].configuration.chartHeight).to.be.equal(300);
 
       layout.style.height = '200px';
-      await nextResize(charts[0]);
+      await oneEvent(charts[0], 'chart-end-resize');
 
       expect(layout.getBoundingClientRect().height).to.be.equal(200);
       expect(charts[0].configuration.chartHeight).to.be.equal(200);

packages/charts/test/typings/chart.types.ts

@@ -10,6 +10,7 @@ import type {
   ChartDrilldownEvent,
   ChartDrillupallEvent,
   ChartDrillupEvent,
+  ChartEndResizeEvent,
   ChartLoadEvent,
   ChartPointClickEvent,
   ChartPointDragEvent,
@@ -113,6 +114,12 @@ chart.addEventListener('chart-selection', (event) => {
   assertType<HighchartsChart>(event.detail.originalEvent.target);
 });
 
+chart.addEventListener('chart-end-resize', (event) => {
+  assertType<ChartEndResizeEvent>(event);
+  assertType<HighchartsChart>(event.detail.chart);
+  assertType<HighchartsChart>(event.detail.originalEvent.target);
+});
+
 chart.addEventListener('series-after-animate', (event) => {
   assertType<ChartSeriesAfterAnimateEvent>(event);
   assertType<Series>(event.detail.series);