[RFR] Responsive chart

docs/configuration.md

@@ -327,8 +327,8 @@ _Default: Infinity_
 
 This parameter configures the maximum zoom level available. Set it to a lower value to prevent your users from zooming in too deeply.
 
-### removeOnResize
+### destroy
 
 _Default: () => {}_
 
-Function to be executed when you want to remove [`resize`](https://developer.mozilla.org/en-US/docs/Web/Events/resize) event.
+Function to be executed when you want to destroy the chart. By default, it remove `resize` event and execute the callback.

src/index.js

@@ -12,15 +12,10 @@ import { withinRange } from './withinRange';
 
 // do not export anything else here to keep window.eventDrops as a function
 export default ({ d3 = window.d3, ...customConfiguration }) => {
-    const onResize = callback => {
-        window.addEventListener('resize', callback, true);
-    };
-
-    const removeOnResize = callback => {
-        window.removeEventListener('resize', callback, true);
-    };
+    const initChart = selection => {
+        const root = selection.selectAll('svg').data(selection.data());
+        root.exit().remove();
 
-    const createChart = (root, selection) => {
         const config = defaultsDeep(
             customConfiguration || {},
             defaultConfiguration(d3)
@@ -78,23 +73,25 @@ export default ({ d3 = window.d3, ...customConfiguration }) => {
     };
 
     const chart = selection => {
-        const root = selection.selectAll('svg').data(selection.data());
-        root.exit().remove();
-
-        createChart(root, selection);
+        initChart(selection);
 
         const updateChart = () => {
             selection.selectAll('svg').remove();
-            createChart(root, selection);
+            initChart(selection);
         };
 
-        onResize(updateChart);
-        chart._removeOnResize = () => removeOnResize(updateChart);
+        window.addEventListener('resize', updateChart, true);
+
+        chart._removeOnResize = () =>
+            window.removeEventListener('resize', updateChart, true);
     };
 
     chart.scale = () => chart._scale;
     chart.filteredData = () => chart._filteredData;
-    chart.removeOnResize = () => chart._removeOnResize();
+    chart.destroy = callback => {
+        chart._removeOnResize();
+        callback();
+    };
 
     const draw = (config, scale) => selection => {
         const { drop: { date: dropDate } } = config;