[RFR] Responsive chart

docs/configuration.md

@@ -326,3 +326,9 @@ This parameter configures the minimum zoom level available. Set it to a not-null
 _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.
+
+### destroy
+
+_Default: () => {}_
+
+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,7 +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 chart = selection => {
+    const initChart = selection => {
+        const root = selection.selectAll('svg').data(selection.data());
+        root.exit().remove();
+
         const config = defaultsDeep(
             customConfiguration || {},
             defaultConfiguration(d3)
@@ -41,10 +44,6 @@ export default ({ d3 = window.d3, ...customConfiguration }) => {
 
         chart._scale = xScale;
 
-        const root = selection.selectAll('svg').data(selection.data());
-
-        root.exit().remove();
-
         const svg = root
             .enter()
             .append('svg')
@@ -73,8 +72,26 @@ export default ({ d3 = window.d3, ...customConfiguration }) => {
             .call(draw(config, xScale));
     };
 
+    const chart = selection => {
+        initChart(selection);
+
+        const updateChart = () => {
+            selection.selectAll('svg').remove();
+            initChart(selection);
+        };
+
+        window.addEventListener('resize', updateChart, true);
+
+        chart._removeOnResize = () =>
+            window.removeEventListener('resize', updateChart, true);
+    };
+
     chart.scale = () => chart._scale;
     chart.filteredData = () => chart._filteredData;
+    chart.destroy = callback => {
+        chart._removeOnResize();
+        callback();
+    };
 
     const draw = (config, scale) => selection => {
         const { drop: { date: dropDate } } = config;