Merge branch 'release/4.2.6'

.github/workflows/ubuntu-d3-v5.yml

@@ -0,0 +1,18 @@
+name: Ubuntu d3@5
+
+on: [push, pull_request]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: '12.x'
+      - run: npm ci
+      - run: npm i d3@5
+      - run: npx grunt ci-pull

AUTHORS

@@ -118,3 +118,4 @@ hofmeister <[email protected]>
 German Priks <[email protected]>
 Maxime Rouyrre <[email protected]>
 BERÉNYI Attila <[email protected]>
+Patrik Kullman <[email protected]>

Changelog.md

@@ -1,3 +1,6 @@
+## 4.2.6
+* Isolate D3 compatibility layers, allowing more efficient module imports, by Patrik Kullman ([#1822](https://github.com/dc-js/dc.js/issues/1822) / [#1823](https://github.com/dc-js/dc.js/issues/1823) / [#1824](https://github.com/dc-js/dc.js/issues/1824))
+
 ## 4.2.5
 * Option [useTopXAxis](https://dc-js.github.io/dc.js/docs/html/CoordinateGridMixin.html#useTopXAxis) to show coordinate grid X axis at top of chart, by BERÉNYI Attila ([#1815](https://github.com/dc-js/dc.js/issues/1815) / [#1816](https://github.com/dc-js/dc.js/pull/1816))
 * Add source for bar colors example ([#1817](https://github.com/dc-js/dc.js/issues/1817))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dc",
-  "version": "4.2.5",
+  "version": "4.2.6",
   "license": "Apache-2.0",
   "copyright": "2020",
   "description": "A multi-dimensional charting library built to work natively with crossfilter and rendered using d3.js ",

rollup.config.js

@@ -13,6 +13,7 @@ const licensePlugin = license({
 });
 
 const d3Modules = {
+    'd3': 'd3',
     'd3-array': 'd3',
     'd3-axis': 'd3',
     'd3-brush': 'd3',

spec/bar-chart-spec.js

@@ -160,8 +160,8 @@ describe('dc.BarChart', () => {
             });
 
             it('should generate the y-axis domain dynamically', () => {
-                expect(nthYAxisText(0).text()).toMatch(/−10/);
-                expect(nthYAxisText(1).text()).toMatch(/−5/);
+                expect(nthYAxisText(0).text()).toMatch(/[\-−]10/);
+                expect(nthYAxisText(1).text()).toMatch(/[\-−]5/);
                 expect(nthYAxisText(2).text()).toBe('0');
             });
 
@@ -583,7 +583,7 @@ describe('dc.BarChart', () => {
                         return d3.select(chart.selectAll('g.axis.y .tick text').nodes()[n]);
                     };
 
-                    expect(nthText(0).text()).toBe('−20');
+                    expect(nthText(0).text()).toMatch(/[\-−]20/);
                     expect(nthText(1).text()).toBe('0');
                     expect(nthText(2).text()).toBe('20');
                 });
@@ -609,9 +609,10 @@ describe('dc.BarChart', () => {
                         return d3.select(chart.selectAll('g.axis.y .tick text').nodes()[n]);
                     };
 
-                    expect(nthText(0).text()).toBe('−30');
-                    expect(nthText(1).text()).toBe('−20');
-                    expect(nthText(2).text()).toBe('−10');
+                    // d3@5 and d3@6 uses different characters to format negative numbers
+                    expect(nthText(0).text()).toMatch(/[\-−]30/);
+                    expect(nthText(1).text()).toMatch(/[\-−]20/);
+                    expect(nthText(2).text()).toMatch(/[\-−]10/);
                     expect(nthText(3).text()).toBe('0');
                 });
             });

spec/line-chart-spec.js

@@ -562,7 +562,7 @@ describe('dc.lineChart', () => {
                         return d3.select(chart.selectAll('g.axis.y .tick text').nodes()[n]);
                     };
 
-                    expect(nthText(0).text()).toBe('−20');
+                    expect(nthText(0).text()).toMatch(/[\-−]20/);
                     expect(nthText(1).text()).toBe('0');
                     expect(nthText(2).text()).toBe('20');
                 });
@@ -598,9 +598,10 @@ describe('dc.lineChart', () => {
                         return d3.select(chart.selectAll('g.axis.y .tick text').nodes()[n]);
                     };
 
-                    expect(nthText(0).text()).toBe('−30');
-                    expect(nthText(1).text()).toBe('−20');
-                    expect(nthText(2).text()).toBe('−10');
+                    // d3@5 and d3@6 uses different characters to format negative numbers
+                    expect(nthText(0).text()).toMatch(/[\-−]30/);
+                    expect(nthText(1).text()).toMatch(/[\-−]20/);
+                    expect(nthText(2).text()).toMatch(/[\-−]10/);
                     expect(nthText(3).text()).toBe('0');
                 });
             });

spec/row-chart-spec.js

@@ -485,7 +485,8 @@ describe('dc.rowChart', () => {
                         const nthText = function (n) { return d3.select(chart.selectAll('g.axis .tick text').nodes()[n]); };
 
                         for (let i = 0; i < xAxisTicks.length; i++) {
-                            expect(nthText(i).text()).toBe(xAxisTicks[i]);
+                            // d3@5 and d3@6 uses different characters to format negative numbers
+                            expect(nthText(i).text().replace('-','−')).toBe(xAxisTicks[i].replace('-','−'));
                         }
                     });
                 });

src/base/base-mixin.js

@@ -11,7 +11,7 @@ import {logger} from '../core/logger';
 import {printers} from '../core/printers';
 import {InvalidStateException} from '../core/invalid-state-exception';
 import {BadArgumentException} from '../core/bad-argument-exception';
-import {adaptHandler} from '../core/d3compat';
+import {d3compat} from '../core/config';
 
 const _defaultFilterHandler = (dimension, filters) => {
     if (filters.length === 0) {
@@ -723,7 +723,7 @@ export class BaseMixin {
             .attr('tabindex', 0);
 
         if (onClickFunction) {
-            tabElements.on('keydown', adaptHandler((d, event) => {
+            tabElements.on('keydown', d3compat.eventHandler((d, event) => {
                 // trigger only if d is an object undestood by KeyAccessor()
                 if (event.keyCode === 13 && typeof d === 'object') {
                     onClickFunction.call(this, d, ...onClickArgs)

src/base/bubble-mixin.js

@@ -4,7 +4,7 @@ import { scaleLinear } from 'd3-scale';
 import {ColorMixin} from './color-mixin';
 import {transition} from '../core/core';
 import {events} from '../core/events';
-import {adaptHandler} from '../core/d3compat';
+import {d3compat} from '../core/config';
 
 /**
  * This Mixin provides reusable functionalities for any chart that needs to visualize data using bubbles.
@@ -156,7 +156,7 @@ export const BubbleMixin = Base => class extends ColorMixin(Base) {
                 label = bubbleGEnter.append('text')
                         .attr('text-anchor', 'middle')
                         .attr('dy', '.3em')
-                        .on('click', adaptHandler(d => this.onClick(d)));
+                        .on('click', d3compat.eventHandler(d => this.onClick(d)));
             }
 
             label

src/base/coordinate-grid-mixin.js

@@ -12,7 +12,7 @@ import {optionalTransition, transition} from '../core/core';
 import {units} from '../core/units';
 import {constants} from '../core/constants';
 import {utils} from '../core/utils';
-import {adaptHandler} from '../core/d3compat';
+import {d3compat} from '../core/config';
 import {logger} from '../core/logger';
 import {filters} from '../core/filters';
 import {events} from '../core/events';
@@ -78,7 +78,7 @@ export class CoordinateGridMixin extends ColorMixin(MarginMixin) {
         this._zoomScale = [1, Infinity];
         this._zoomOutRestrict = true;
 
-        this._zoom = zoom().on('zoom', adaptHandler((d, evt) => this._onZoom(evt)));
+        this._zoom = zoom().on('zoom', d3compat.eventHandler((d, evt) => this._onZoom(evt)));
         this._nullZoom = zoom().on('zoom', null);
         this._hasBeenMouseZoomable = false;
         this._ignoreZoomEvents = false; // ignore when carrying out programmatic zoom operations
@@ -969,7 +969,7 @@ export class CoordinateGridMixin extends ColorMixin(MarginMixin) {
 
     renderBrush (g, doTransition) {
         if (this._brushOn) {
-            this._brush.on('start brush end', adaptHandler((d, evt) => this._brushing(evt)));
+            this._brush.on('start brush end', d3compat.eventHandler((d, evt) => this._brushing(evt)));
 
             // To retrieve selection we need self._gBrush
             this._gBrush = g.append('g')

src/charts/bar-chart.js

@@ -5,7 +5,7 @@ import {transition} from '../core/core';
 import {constants} from '../core/constants';
 import {logger} from '../core/logger';
 import {pluck, utils} from '../core/utils';
-import {adaptHandler} from '../core/d3compat';
+import {d3compat} from '../core/config';
 
 const MIN_BAR_WIDTH = 1;
 const DEFAULT_GAP_BETWEEN_BARS = 2;
@@ -145,7 +145,7 @@ export class BarChart extends StackMixin {
             .merge(labels);
 
         if (this.isOrdinal()) {
-            labelsEnterUpdate.on('click', adaptHandler(d => this.onClick(d)));
+            labelsEnterUpdate.on('click', d3compat.eventHandler(d => this.onClick(d)));
             labelsEnterUpdate.attr('cursor', 'pointer');
         }
 
@@ -190,7 +190,7 @@ export class BarChart extends StackMixin {
         }
 
         if (this.isOrdinal()) {
-            barsEnterUpdate.on('click', adaptHandler(d => this.onClick(d)));
+            barsEnterUpdate.on('click', d3compat.eventHandler(d => this.onClick(d)));
         }
 
         if (this._keyboardAccessible) {

src/charts/box-plot.js

@@ -7,7 +7,7 @@ import {CoordinateGridMixin} from '../base/coordinate-grid-mixin';
 import {transition} from '../core/core';
 import {units} from '../core/units';
 import {utils} from '../core/utils';
-import {adaptHandler} from '../core/d3compat';
+import {d3compat} from '../core/config';
 
 // Returns a function to compute the interquartile range.
 function defaultWhiskersIQR (k) {
@@ -198,7 +198,7 @@ export class BoxPlot extends CoordinateGridMixin {
             .classed('dc-tabbable', this._keyboardAccessible)
             .attr('transform', (d, i) => this._boxTransform(d, i))
             .call(this._box)
-            .on('click', adaptHandler(d => {
+            .on('click', d3compat.eventHandler(d => {
                 this.filter(this.keyAccessor()(d));
                 this.redrawGroup();
             }))

src/charts/bubble-chart.js

@@ -1,7 +1,7 @@
 import {BubbleMixin} from '../base/bubble-mixin';
 import {CoordinateGridMixin} from '../base/coordinate-grid-mixin';
 import {transition} from '../core/core';
-import {adaptHandler} from '../core/d3compat';
+import {d3compat} from '../core/config';
 
 /**
  * A concrete implementation of a general purpose bubble chart that allows data visualization using the
@@ -74,7 +74,7 @@ export class BubbleChart extends BubbleMixin(CoordinateGridMixin) {
             .attr('class', this.BUBBLE_NODE_CLASS)
             .attr('transform', d => this._bubbleLocator(d))
             .append('circle').attr('class', (d, i) => `${this.BUBBLE_CLASS} _${i}`)
-            .on('click', adaptHandler(d => this.onClick(d)))
+            .on('click', d3compat.eventHandler(d => this.onClick(d)))
             .classed('dc-tabbable', this._keyboardAccessible)
             .attr('fill', this.getColor)
             .attr('r', 0);

src/charts/bubble-overlay.js

@@ -3,7 +3,7 @@ import {BubbleMixin} from '../base/bubble-mixin';
 import {transition} from '../core/core';
 import {constants} from '../core/constants';
 import {utils} from '../core/utils';
-import {adaptHandler, d3compatPointer} from '../core/d3compat';
+import {d3compat} from '../core/config';
 
 const BUBBLE_OVERLAY_CLASS = 'bubble-overlay';
 const BUBBLE_NODE_CLASS = 'node';
@@ -115,7 +115,7 @@ export class BubbleOverlay extends BubbleMixin(BaseMixin) {
                     .classed('dc-tabbable', this._keyboardAccessible)
                     .attr('r', 0)
                     .attr('fill', this.getColor)
-                    .on('click', adaptHandler(d => this.onClick(d)));
+                    .on('click', d3compat.eventHandler(d => this.onClick(d)));
             }
 
             if (this._keyboardAccessible) {
@@ -200,8 +200,8 @@ export class BubbleOverlay extends BubbleMixin(BaseMixin) {
                 .append('rect')
                 .attr('width', this.width())
                 .attr('height', this.height())
-                .on('mousemove', adaptHandler((d, evt) => {
-                    const position = d3compatPointer(evt, debugG.node());
+                .on('mousemove', d3compat.eventHandler((d, evt) => {
+                    const position = d3compat.pointer(evt, debugG.node());
                     const msg = `${position[0]}, ${position[1]}`;
                     debugText.text(msg);
                 }));

src/charts/cbox-menu.js

@@ -3,7 +3,7 @@ import {select} from 'd3-selection';
 import {events} from '../core/events';
 import {BaseMixin} from '../base/base-mixin';
 import {utils} from '../core/utils'
-import {adaptHandler} from '../core/d3compat';
+import {d3compat} from '../core/config';
 
 const GROUP_CSS_CLASS = 'dc-cbox-group';
 const ITEM_CSS_CLASS = 'dc-cbox-item';
@@ -121,7 +121,7 @@ export class CboxMenu extends BaseMixin {
                 .append('input')
                 .attr('type', 'reset')
                 .text(this._promptText)
-                .on('click', adaptHandler(function (d, evt) {
+                .on('click', d3compat.eventHandler(function (d, evt) {
                     return chart._onChange(d, evt, this);
                 }));
         } else {
@@ -141,7 +141,7 @@ export class CboxMenu extends BaseMixin {
             .selectAll(`li.${ITEM_CSS_CLASS}`)
             .sort(this._order);
 
-        this._cbox.on('change', adaptHandler(function (d, evt) {
+        this._cbox.on('change', d3compat.eventHandler(function (d, evt) {
             return chart._onChange(d, evt, this);
         }));
         return options;

src/charts/data-grid.js

@@ -2,7 +2,7 @@ import {ascending} from 'd3-array';
 
 import {logger} from '../core/logger';
 import {BaseMixin} from '../base/base-mixin';
-import {compatNestHelper} from '../core/d3compat';
+import {d3compat} from '../core/config';
 
 const LABEL_CSS_CLASS = 'dc-grid-label';
 const ITEM_CSS_CLASS = 'dc-grid-item';
@@ -86,7 +86,7 @@ export class DataGrid extends BaseMixin {
             .sort((a, b) => this._order(this._sortBy(a), this._sortBy(b)))
             .slice(this._beginSlice, this._endSlice)
 
-        return compatNestHelper({
+        return d3compat.nester({
             key: this.section(),
             sortKeys: this._order,
             entries

src/charts/data-table.js

@@ -2,7 +2,7 @@ import {ascending} from 'd3-array';
 
 import {logger} from '../core/logger';
 import {BaseMixin} from '../base/base-mixin';
-import {compatNestHelper} from '../core/d3compat';
+import {d3compat} from '../core/config';
 
 const LABEL_CSS_CLASS = 'dc-table-label';
 const ROW_CSS_CLASS = 'dc-table-row';
@@ -176,7 +176,7 @@ export class DataTable extends BaseMixin {
 
         entries = entries.sort((a, b) => this._order(this._sortBy(a), this._sortBy(b))).slice(this._beginSlice, this._endSlice)
 
-        return compatNestHelper({
+        return d3compat.nester({
             key: this.section(),
             sortKeys: this._order,
             entries

src/charts/geo-choropleth-chart.js

@@ -7,7 +7,7 @@ import {transition} from '../core/core';
 import {logger} from '../core/logger';
 import {events} from '../core/events';
 import {utils} from '../core/utils';
-import {adaptHandler} from '../core/d3compat';
+import {d3compat} from '../core/config';
 
 /**
  * The geo choropleth chart is designed as an easy way to create a crossfilter driven choropleth map
@@ -149,7 +149,7 @@ export class GeoChoroplethChart extends ColorMixin(BaseMixin) {
                 }
                 return 'none';
             })
-            .on('click', adaptHandler(d => this.onClick(d, layerIndex)));
+            .on('click', d3compat.eventHandler(d => this.onClick(d, layerIndex)));
 
         if (this._keyboardAccessible) {
             this._makeKeyboardAccessible(this.onClick, layerIndex);

src/charts/heatmap.js

@@ -7,7 +7,7 @@ import {filters} from '../core/filters';
 import {events} from '../core/events';
 import {ColorMixin} from '../base/color-mixin';
 import {MarginMixin} from '../base/margin-mixin';
-import {adaptHandler} from '../core/d3compat';
+import {d3compat} from '../core/config';
 
 const DEFAULT_BORDER_RADIUS = 6.75;
 
@@ -233,7 +233,7 @@ export class HeatMap extends ColorMixin(MarginMixin) {
             .attr('fill', 'white')
             .attr('x', (d, i) => cols(this.keyAccessor()(d, i)))
             .attr('y', (d, i) => rows(this.valueAccessor()(d, i)))
-            .on('click', adaptHandler(this.boxOnClick()));
+            .on('click', d3compat.eventHandler(this.boxOnClick()));
 
         if (this._keyboardAccessible) {
             this._makeKeyboardAccessible(this.boxOnClick);
@@ -270,7 +270,7 @@ export class HeatMap extends ColorMixin(MarginMixin) {
             .style('text-anchor', 'middle')
             .attr('y', this.effectiveHeight())
             .attr('dy', 12)
-            .on('click', adaptHandler(this.xAxisOnClick()))
+            .on('click', d3compat.eventHandler(this.xAxisOnClick()))
             .text(this.colsLabel())
             .merge(gColsText);
 
@@ -296,7 +296,7 @@ export class HeatMap extends ColorMixin(MarginMixin) {
             .attr('dx', -2)
             .attr('y', d => rows(d) + boxHeight / 2)
             .attr('dy', 6)
-            .on('click', adaptHandler(this.yAxisOnClick()))
+            .on('click', d3compat.eventHandler(this.yAxisOnClick()))
             .text(this.rowsLabel())
             .merge(gRowsText);