[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)** redraws 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

@@ -326,3 +326,20 @@ 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.
+
+### numberDisplayedTicks
+
+\_Default:
+
+```js
+const chart = eventDrops({
+   numberDisplayedTicks: {
+        small: 3,
+        medium: 5,
+        large: 7,
+        extra: 12,
+    },
+});
+
+This parameter configures the number of ticks display in the header
+```

src/axis.js

@@ -1,4 +1,14 @@
 import { timeFormat } from 'd3-time-format';
+import breakpoints from './breakpoints';
+
+export const getBreakpointLabel = point =>
+    Object.keys(breakpoints).reduce((accumulator, label) => {
+        if (!accumulator.length && point <= breakpoints[label]) {
+            return label;
+        }
+
+        return accumulator;
+    }, '');
 
 export const tickFormat = (date, formats, d3) => {
     if (d3.timeSecond(date) < date) {
@@ -33,7 +43,12 @@ export const tickFormat = (date, formats, d3) => {
 };
 
 export default (d3, config, xScale) => {
-    const { label: { width: labelWidth }, axis: { formats }, locale } = config;
+    const {
+        label: { width: labelWidth },
+        axis: { formats },
+        locale,
+        numberDisplayedTicks,
+    } = config;
     d3.timeFormatDefaultLocale(locale);
     return selection => {
         const axis = selection.selectAll('.axis').data(d => d);
@@ -44,6 +59,11 @@ export default (d3, config, xScale) => {
             .axisTop(xScale)
             .tickFormat(d => tickFormat(d, formats, d3));
 
+        const breakpoint = getBreakpointLabel(window.innerWidth) || 'extra';
+        if (numberDisplayedTicks) {
+            axisTop.ticks(numberDisplayedTicks[breakpoint]);
+        }
+
         axis
             .enter()
             .filter((_, i) => !i)

src/axis.spec.js

@@ -1,6 +1,6 @@
 import defaultLocale from 'd3-time-format/locale/en-US.json';
 
-import axis, { tickFormat } from './axis';
+import axis, { tickFormat, getBreakpointLabel } from './axis';
 
 const defaultConfig = {
     label: {
@@ -120,8 +120,37 @@ describe('Axis', () => {
         expect(timeFormatDefaultLocaleSpy).toHaveBeenCalledWith(defaultLocale);
     });
 
+    it('should display tick using configuration locale', () => {
+        const data = [[{ id: 'foo' }]];
+        const selection = d3.select('svg').data(data);
+
+        let config = {
+            ...defaultConfig,
+            numberDisplayedTicks: { extra: 9 },
+        };
+
+        axis(d3, config, defaultScale)(selection);
+        expect(document.querySelectorAll('.tick').length).toBe(9);
+
+        config = {
+            ...defaultConfig,
+            numberDisplayedTicks: { extra: 5 },
+        };
+        axis(d3, config, defaultScale)(selection);
+        expect(document.querySelectorAll('.tick').length).toBe(5);
+    });
+
     afterEach(() => {
         document.body.innerHTML = '';
         jest.restoreAllMocks();
     });
 });
+
+describe('Breakpoint Label', () => {
+    it('should return breakpoint label correctly depending of current point', () => {
+        expect(getBreakpointLabel(400)).toBe('small');
+        expect(getBreakpointLabel(600)).toBe('medium');
+        expect(getBreakpointLabel(800)).toBe('large');
+        expect(getBreakpointLabel(1000)).toBe('extra');
+    });
+});

src/breakpoints.js

@@ -0,0 +1,6 @@
+export default {
+    small: 576,
+    medium: 768,
+    large: 992,
+    extra: 1200,
+};

src/config.js

@@ -56,4 +56,10 @@ export default d3 => ({
         minimumScale: 0,
         maximumScale: Infinity,
     },
+    numberDisplayedTicks: {
+        small: 3,
+        medium: 5,
+        large: 7,
+        extra: 12,
+    },
 });

src/index.js

@@ -12,7 +12,12 @@ 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 => {
+        selection.selectAll('svg').remove();
+
+        const root = selection.selectAll('svg').data(selection.data());
+        root.exit().remove();
+
         const config = defaultsDeep(
             customConfiguration || {},
             defaultConfiguration(d3)
@@ -41,10 +46,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 +74,19 @@ export default ({ d3 = window.d3, ...customConfiguration }) => {
             .call(draw(config, xScale));
     };
 
+    const chart = selection => {
+        chart._initialize = () => initChart(selection);
+        chart._initialize();
+
+        global.addEventListener('resize', chart._initialize, true);
+    };
+
     chart.scale = () => chart._scale;
     chart.filteredData = () => chart._filteredData;
+    chart.destroy = (callback = () => {}) => {
+        global.removeEventListener('resize', chart._initialize, true);
+        callback();
+    };
 
     const draw = (config, scale) => selection => {
         const { drop: { date: dropDate } } = config;