[RFR] Responsive chart

README.md

@@ -84,9 +84,10 @@ You can either use D3 as a specific import (specifying it in first argument of `
 
 In addition to this configuration object, it also exposes some public methods allowing you to customize your application based on filtered data:
 
-* **scale()** provides the horizontal scale, allowing you to retrieve bounding dates thanks to `.scale().domain()`,
-* **filteredData()** returns an object with both `data` and `fullData` keys containing respectively bounds filtered data and full dataset.
-* **draw(config, scale)** redraw chart using given configuration and `d3.scaleTime` scale
+*   **scale()** provides the horizontal scale, allowing you to retrieve bounding dates thanks to `.scale().domain()`,
+*   **filteredData()** returns an object with both `data` and `fullData` keys containing respectively bounds filtered data and full dataset.
+*   **draw(config, scale)** redraw chart using given configuration and `d3.scaleTime` scale
+*   **destroy** execute this function before to removing the chart from DOM. It prevents some memory leaks due to event listeners.
 
 Hence, if you want to display number of displayed data and time bounds as in the [demo](https://marmelab.com/EventDrops/), you can use the following code:
 

docs/configuration.md

@@ -327,12 +327,6 @@ _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.
-
 ### numberDisplayedTicks
 
 \_Default:

src/index.js

@@ -13,6 +13,8 @@ import { withinRange } from './withinRange';
 // do not export anything else here to keep window.eventDrops as a function
 export default ({ d3 = window.d3, ...customConfiguration }) => {
     const initChart = selection => {
+        selection.selectAll('svg').remove();
+
         const root = selection.selectAll('svg').data(selection.data());
         root.exit().remove();
 
@@ -73,23 +75,16 @@ export default ({ d3 = window.d3, ...customConfiguration }) => {
     };
 
     const chart = selection => {
-        initChart(selection);
-
-        const updateChart = () => {
-            selection.selectAll('svg').remove();
-            initChart(selection);
-        };
-
-        window.addEventListener('resize', updateChart, true);
+        chart._initialize = () => initChart(selection);
+        chart._initialize();
 
-        chart._removeOnResize = () =>
-            window.removeEventListener('resize', updateChart, true);
+        global.addEventListener('resize', chart._initialize, true);
     };
 
     chart.scale = () => chart._scale;
     chart.filteredData = () => chart._filteredData;
-    chart.destroy = callback => {
-        chart._removeOnResize();
+    chart.destroy = (callback = () => {}) => {
+        global.removeEventListener('resize', chart._initialize, true);
         callback();
     };