Proposal for D3 upgrade V4 version (#113)

* Fix scrollspy throttle issue * Fix new Scrollspy version * add * update to React 16 * fix testing * D3 V4 version
experience-experiments · Dec 7, 2017 · 87569b6 · 87569b6
1 parent 90f8d30
commit 87569b6
Show file tree

Hide file tree

Showing 18 changed files with 200 additions and 160 deletions.
diff --git a/examples/Legend.js b/examples/Legend.js
@@ -1,7 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Style } from 'radium';
-import d3 from 'd3';
+import {
+  scaleOrdinal,
+  schemeCategory10,
+  range,
+} from 'd3';
 
 const legendStyles = {
   '.legend': {
@@ -30,7 +34,7 @@ const legendStyles = {
   }
 };
 
-const colors = d3.scale.category10().range();
+const colors = scaleOrdinal(schemeCategory10).domain(range(0, 20)).range();
 
 class Legend extends React.Component {
 

diff --git a/examples/webpack.config.js b/examples/webpack.config.js
@@ -13,7 +13,9 @@ module.exports = {
 
     return entries
   }, {}),
-
+  externals: [{
+    xmlhttprequest: '{XMLHttpRequest:XMLHttpRequest}'
+  }],
   output: {
     path: __dirname + '/__build__',
     filename: '[name].js',

diff --git a/karma.conf.js b/karma.conf.js
@@ -26,8 +26,9 @@ module.exports = (config) => {
       'node_modules/phantomjs-polyfill/bind-polyfill.js',
       './tests/**/*.js'
     ],
+    // list of files to exclude
     exclude: [
-      './tests/index.js'
+      './tests/index.js', 'node_modules', 'bower_components'
     ],
 
     plugins: [
@@ -44,11 +45,6 @@ module.exports = (config) => {
       'karma-webpack'
     ],
 
-
-    // list of files to exclude
-    exclude: ['node_modules', 'bower_components'],
-
-
     // preprocess matching files before serving them to the browser
     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
     preprocessors: {
@@ -108,6 +104,9 @@ module.exports = (config) => {
           'react-easy-chart': modulesPath
         }
       },
+      externals: [{
+        xmlhttprequest: '{XMLHttpRequest:XMLHttpRequest}'
+      }],
       module: {
         preLoaders: [
           {

diff --git a/modules/area-chart/index.js b/modules/area-chart/index.js
@@ -14,8 +14,13 @@ import {
 import {
   event as lastEvent,
   select,
-  svg,
-  time } from 'd3';
+  axisBottom,
+  axisLeft,
+  axisRight,
+  line,
+  area,
+  timeFormat } from 'd3';
+import interpolateLine from '../interpolate';
 import PropTypes from 'prop-types';
 import { Style } from 'radium';
 import merge from 'lodash.merge';
@@ -118,13 +123,11 @@ export default class AreaChart extends PureComponent {
       yAxisOrientRight
     } = this.props;
 
-    const axis = svg.axis()
-      .scale(x)
-      .orient('bottom');
+    const axis = axisBottom(x);
 
     if (xType === 'time' && tickTimeDisplayFormat) {
       axis
-        .tickFormat(time.format(tickTimeDisplayFormat));
+        .tickFormat(timeFormat(tickTimeDisplayFormat));
     }
     if (grid && verticalGrid) {
       axis
@@ -177,13 +180,11 @@ export default class AreaChart extends PureComponent {
       yAxisOrientRight
     } = this.props;
 
-    const axis = svg.axis()
-      .scale(y)
-      .orient(yAxisOrientRight ? 'right' : 'left');
+    const axis = yAxisOrientRight ? axisRight(y) : axisLeft(y);
 
     if (yType === 'time' && tickTimeDisplayFormat) {
       axis
-        .tickFormat(time.format(tickTimeDisplayFormat));
+        .tickFormat(timeFormat(tickTimeDisplayFormat));
     }
 
     if (grid) {
@@ -273,14 +274,14 @@ export default class AreaChart extends PureComponent {
 
     const getStroke = (d, i) => colors[i];
 
-    const areaPath = svg.area()
-      .interpolate(interpolate)
+    const areaPath = area()
+      .curve(interpolateLine(interpolate))
       .x((d) => x(xValue(d)))
       .y0(h)
       .y1((d) => y(yValue(d)));
 
-    const linePath = svg.line()
-      .interpolate(interpolate)
+    const linePath = line()
+      .curve(interpolateLine(interpolate))
       .x((d) => x(xValue(d)))
       .y((d) => y(yValue(d)));
 

diff --git a/modules/bar-chart/index.js b/modules/bar-chart/index.js
@@ -3,9 +3,15 @@ import { scaleBand as band, scaleLinear as linear } from 'd3-scale';
 import {
   event as lastEvent,
   select,
-  svg,
-  time,
-  scale,
+  axisBottom,
+  axisLeft,
+  axisRight,
+  scaleTime,
+  timeFormat,
+  scaleOrdinal,
+  schemeCategory20,
+  range,
+  line,
   max
 } from 'd3';
 import {
@@ -18,6 +24,7 @@ import {
   createValueGenerator,
   createCircularTicks
 } from '../shared';
+import interpolateLine from '../interpolate';
 import { extent } from 'd3-array';
 import { timeParse as parse } from 'd3-time-format';
 import ReactFauxDOM from 'react-faux-dom';
@@ -27,7 +34,7 @@ import merge from 'lodash.merge';
 
 const dateParser = {};
 
-const colorScale = scale.category20();
+const colorScale = scaleOrdinal(schemeCategory20).domain(range(0, 20));
 
 export default class BarChart extends PureComponent {
 
@@ -130,7 +137,7 @@ export default class BarChart extends PureComponent {
           );
         break;
       case 'time':
-        axis = time.scale();
+        axis = scaleTime();
         axis
           .domain(
             Array.isArray(domainRange)
@@ -175,13 +182,11 @@ export default class BarChart extends PureComponent {
       yAxisOrientRight
     } = this.props;
 
-    const axis = svg.axis()
-        .scale(x)
-        .orient('bottom');
+    const axis = axisBottom(x);
 
     if (xType === 'time' && tickTimeDisplayFormat) {
       axis
-        .tickFormat(time.format(tickTimeDisplayFormat));
+        .tickFormat(timeFormat(tickTimeDisplayFormat));
     }
 
     axis
@@ -226,9 +231,7 @@ export default class BarChart extends PureComponent {
       grid
     } = this.props;
 
-    const axis = svg.axis()
-        .scale(y)
-        .orient(yAxisOrientRight ? 'right' : 'left');
+    const axis = yAxisOrientRight ? axisRight(y) : axisLeft(y);
 
     if (yTickNumber) {
       axis
@@ -284,12 +287,7 @@ export default class BarChart extends PureComponent {
 
     const y = this.createDomainRangeGenerator('y', yDomainRange, lineData, y2Type, h);
 
-    const axis = svg.axis()
-        .scale(y)
-        .orient(
-          (yAxisOrientRight)
-            ? 'left'
-            : 'right');
+    const axis = yAxisOrientRight ? axisRight(y) : axisLeft(y);
 
     if (yTickNumber) {
       axis
@@ -402,8 +400,8 @@ export default class BarChart extends PureComponent {
     const yValue = createValueGenerator('y', y2Type, parseDate);
     const xValue = createValueGenerator('x', xType, parseDate);
 
-    const linePath = svg.line()
-      .interpolate(interpolate)
+    const linePath = line()
+      .curve(interpolateLine(interpolate))
       .x((d) => x(xValue(d)))
       .y((d) => y(yValue(d)));
 

diff --git a/modules/interpolate.js b/modules/interpolate.js
@@ -0,0 +1,42 @@
+import {
+  curveLinear,
+  curveStepBefore,
+  curveStepAfter,
+  curveBasis,
+  curveBasisOpen,
+  curveBasisClosed,
+  curveBundle,
+  curveCardinal,
+  curveCardinalOpen,
+  curveCardinalClosed,
+  curveNatural
+} from 'd3';
+
+const interpolate = (type) => {
+  switch (type) {
+    case 'stepBefore':
+      return curveStepBefore;
+    case 'stepAfter':
+      return curveStepAfter;
+    case 'basis':
+      return curveBasis;
+    case 'basisOpen':
+      return curveBasisOpen;
+    case 'basisClosed':
+      return curveBasisClosed;
+    case 'bundle':
+      return curveBundle;
+    case 'cardinal':
+      return curveCardinal;
+    case 'cardinalOpen':
+      return curveCardinalOpen;
+    case 'cardinalClosed':
+      return curveCardinalClosed;
+    case 'natural':
+      return curveNatural;
+    default:
+      return curveLinear;
+  }
+};
+
+export default interpolate;
diff --git a/modules/legend/index.js b/modules/legend/index.js
@@ -1,15 +1,19 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { Style } from 'radium';
-import { scale } from 'd3';
+import {
+  scaleOrdinal,
+  schemeCategory20,
+  range
+ } from 'd3';
 import {
   createUniqueID
 } from '../shared';
 import merge from 'lodash.merge';
 
 import defaultStyles from './defaultStyles';
 
-const colors = scale.category20().range();
+const colors = scaleOrdinal(schemeCategory20).domain(range(0, 20)).range();
 
 export default class Legend extends PureComponent {
 

diff --git a/modules/line-chart/hybrid/LineChart/common.js b/modules/line-chart/hybrid/LineChart/common.js
@@ -1,5 +1,5 @@
 
-import { time } from 'd3';
+import { scaleTime, timeFormat } from 'd3';
 import { extent } from 'd3-array';
 import { scaleLinear, scalePoint } from 'd3-scale';
 import { timeParse } from 'd3-time-format';
@@ -94,7 +94,7 @@ export { createParser };
 function createFormat(pattern = '%b %d') {
   return (
     TIMEFORMAT[pattern] || (
-    TIMEFORMAT[pattern] = time.format(pattern)));
+    TIMEFORMAT[pattern] = timeFormat(pattern)));
 }
 
 export function createFormatX(type, pattern) {
@@ -179,13 +179,13 @@ export const reduce = (p, c) => (p -= c);
 export const createUniqueID = () => Math.floor(Math.random() * new Date().getTime());
 
 export function createScaleTimeX(domain = [], x = 0) {
-  return time.scale()
+  return scaleTime()
     .domain(domain)
     .range([0, x]);
 }
 
 export function createScaleTimeY(domain = [], y = 0) {
-  return time.scale()
+  return scaleTime()
     .domain(domain)
     .range([y, 0]);
 }