react-d3-basic - npm Package Compare versions

Comparing version 0.4.2 to 0.5.0

lib/area_stack.js

@@ -51,3 +51,2 @@ "use strict";
       var chartSeries = _props.chartSeries;
-      var showLegend = _props.showLegend;
       var showXGrid = _props.showXGrid;
@@ -74,6 +73,2 @@ var showYGrid = _props.showYGrid;
 
-      if (showLegend) {
-        var legends = _react2['default'].createElement(_reactD3Core.Legend, this.props);
-      }
-
       return _react2['default'].createElement(
@@ -87,4 +82,3 @@ 'g',
           { ref: 'plotGroup' },
-          areas,
-          legends
+          areas
         ),
@@ -97,5 +91,3 @@ _react2['default'].createElement(_reactD3Core.Xaxis, this.props),
     key: 'defaultProps',
-    value: {
-      showLegend: true
-    },
+    value: {},
     enumerable: true
@@ -102,0 +94,0 @@ }]);

lib/bar_group.js

@@ -49,3 +49,2 @@ "use strict";
       var chartSeries = _props.chartSeries;
-      var showLegend = _props.showLegend;
       var showXGrid = _props.showXGrid;
@@ -92,6 +91,2 @@ var showYGrid = _props.showYGrid;
 
-      if (showLegend) {
-        var legends = _react2['default'].createElement(_reactD3Core.Legend, this.props);
-      }
-
       return _react2['default'].createElement(
@@ -105,3 +100,2 @@ 'g',
           { ref: 'plotGroup' },
-          legends,
           bargroups
@@ -108,0 +102,0 @@ ),

lib/bar_stack.js

@@ -49,3 +49,2 @@ "use strict";
       var chartSeries = _props.chartSeries;
-      var showLegend = _props.showLegend;
       var showXGrid = _props.showXGrid;
@@ -88,6 +87,2 @@ var showYGrid = _props.showYGrid;
 
-      if (showLegend) {
-        var legends = _react2['default'].createElement(_reactD3Core.Legend, this.props);
-      }
-
       return _react2['default'].createElement(
@@ -101,4 +96,3 @@ 'g',
           { ref: 'plotGroup' },
-          bargroups,
-          legends
+          bargroups
         ),
@@ -105,0 +99,0 @@ _react2['default'].createElement(_reactD3Core.Xaxis, this.props),

lib/bar.js

@@ -49,3 +49,2 @@ "use strict";
       var chartSeries = _props.chartSeries;
-      var showLegend = _props.showLegend;
       var showXGrid = _props.showXGrid;
@@ -72,6 +71,2 @@ var showYGrid = _props.showYGrid;
 
-      if (showLegend) {
-        var legends = _react2['default'].createElement(_reactD3Core.Legend, this.props);
-      }
-
       return _react2['default'].createElement(
@@ -85,3 +80,2 @@ 'g',
           { ref: 'plotGroup' },
-          legends,
           bars
@@ -88,0 +82,0 @@ ),

lib/components/area_stack.js

@@ -44,3 +44,2 @@ "use strict";
       var areaClassName = _props.areaClassName;
-      var areaOpacity = _props.areaOpacity;
       var showBrush = _props.showBrush;
@@ -54,10 +53,17 @@ var showZoom = _props.showZoom;
       // make areas
-      var chart = _d32['default'].select(dom);
+      var chart = _d32['default'].select(dom).attr("class", areaClassName + ' area-group');
 
-      chart.selectAll('' + areaClassName).data(_setStack(dataset)).enter().append("g").attr("class", areaClassName + ' area-group');
-
-      chart.append("path").attr("class", "area").style("fill", function (d) {
+      chart.selectAll("path").data(_setStack(dataset)).enter().append("path").attr("class", "area").style("fill", function (d) {
         return d.color;
-      }).style("fill-opacity", areaOpacity).transition().duration(duration).ease("linear").attr("d", function (d) {
+      }).attr("d", function (d) {
         return _setAxis(d.data);
+      }).attr("style", function (d) {
+        var s = '';
+        if (d.style) {
+          for (var key in d.style) {
+            s += key + ':' + d.style[key] + ';';
+          }
+        }
+
+        return s;
       });
@@ -101,3 +107,3 @@
     value: function render() {
-      var areaPath = _reactFauxDom2['default'].createElement('path');
+      var areaPath = _reactFauxDom2['default'].createElement('g');
       var area = this._mkStack(areaPath);
@@ -112,3 +118,2 @@
       interpolate: null,
-      areaOpacity: 1,
       duration: 500,
@@ -115,0 +120,0 @@ areaClassName: 'react-d3-basic__area_stack'

lib/components/area.js

@@ -52,4 +52,10 @@ "use strict";
 
-      area.datum(dataset.data).attr("class", areaClassName + ' area').style("fill", dataset.color).style("fill-opacity", areaOpacity).style("stroke", dataset.color).attr("d", this._setAxes());
+      area.datum(dataset.data).attr("class", areaClassName + ' area').style("fill", dataset.color).style("stroke", dataset.color).attr("d", this._setAxes());
 
+      if (dataset.style) {
+        for (var key in dataset.style) {
+          area.style(key, dataset.style[key]);
+        }
+      }
+
       if (showBrush) area.style('clip-path', 'url(#react-d3-basic__brush_focus__clip)');
@@ -91,3 +97,2 @@
       interpolate: null,
-      areaOpacity: 0.6,
       duration: 500,
@@ -94,0 +99,0 @@ areaClassName: 'react-d3-basic__area'

lib/components/bar_group.js

@@ -65,3 +65,3 @@ "use strict";
         return dataset.color;
-      }).style("fill-opacity", barOpacity)
+      })
       // not using ES6 fat arrow syntax, cause it will cause 'this' variable not passing issue see details in here:
@@ -72,5 +72,11 @@ // https://github.com/mbostock/d3/issues/2246
       }).on("mouseout", function (d) {
-        return onMouseOut(d, this, barOpacity);
+        return onMouseOut(d, this);
       });
 
+      if (dataset.style) {
+        for (var key in dataset.style) {
+          chart.style(key, dataset.style[key]);
+        }
+      }
+
       return chart;
@@ -89,3 +95,2 @@ }
     value: {
-      barOpacity: 0.8,
       onMouseOver: function onMouseOver(d) {},
@@ -92,0 +97,0 @@ onMouseOut: function onMouseOut(d) {},

lib/components/bar_stack.js

@@ -65,3 +65,3 @@ "use strict";
         return dataset.color;
-      }).style("fill-opacity", barOpacity)
+      })
       // not using ES6 fat arrow syntax, cause it will cause 'this' variable not passing issue see details in here:
@@ -72,5 +72,11 @@ // https://github.com/mbostock/d3/issues/2246
       }).on("mouseout", function (d) {
-        return onMouseOut(d, this, barOpacity);
+        return onMouseOut(d, this);
       });
 
+      if (dataset.style) {
+        for (var key in dataset.style) {
+          chart.style(key, dataset.style[key]);
+        }
+      }
+
       return chart;
@@ -89,3 +95,2 @@ }
     value: {
-      barOpacity: 0.8,
       onMouseOver: function onMouseOver(d) {},
@@ -92,0 +97,0 @@ onMouseOut: function onMouseOut(d) {},

lib/components/bar.js

@@ -62,3 +62,3 @@ "use strict";
         return height - margins.top - margins.bottom - yScaleSet(d.y);
-      }).style("fill", dataset.color).style("fill-opacity", barOpacity)
+      }).style("fill", dataset.color)
       // not using ES6 fat arrow syntax, cause it will cause 'this' variable not passing issue see details in here:
@@ -72,2 +72,8 @@ // https://github.com/mbostock/d3/issues/2246
 
+      if (dataset.style) {
+        for (var key in dataset.style) {
+          chart.style(key, dataset.style[key]);
+        }
+      }
+
       if (showBrush) chart.selectAll("rect").style('clip-path', 'url(#react-d3-basic__brush_focus__clip)');
@@ -89,3 +95,2 @@
       interpolate: null,
-      barOpacity: 0.8,
       onMouseOver: function onMouseOver(d) {},
@@ -92,0 +97,0 @@ onMouseOut: function onMouseOut(d) {},

lib/components/line.js

@@ -53,2 +53,8 @@ "use strict";
 
+      if (dataset.style) {
+        for (var key in dataset.style) {
+          line.style(key, dataset.style[key]);
+        }
+      }
+
       if (showBrush) line.style('clip-path', 'url(#react-d3-basic__brush_focus__clip)');
@@ -55,0 +61,0 @@

lib/components/pie.js

@@ -50,3 +50,2 @@ "use strict";
       var onMouseOver = _props.onMouseOver;
-      var pieOpacity = _props.pieOpacity;
 
@@ -69,3 +68,3 @@ var arc = _d32['default'].svg.arc().outerRadius(outerRadius).innerRadius(innerRadius);
         return d.data.color;
-      }).style("fill-opacity", pieOpacity).style("stroke", "#FFF")
+      }).style("stroke", "#FFF")
       // not using ES6 fat arrow syntax, cause it will cause 'this' variable not passing issue see details in here:
@@ -76,3 +75,11 @@ // https://github.com/mbostock/d3/issues/2246
       }).on("mouseout", function (d) {
-        return onMouseOut(d, this, pieOpacity, arc);
+        return onMouseOut(d, this, arc);
+      }).attr("style", function (d) {
+        var s = '';
+        if (d.data.style) {
+          for (var key in d.data.style) {
+            s += key + ':' + d.data.style[key] + ';';
+          }
+        }
+        return s;
       });
@@ -117,5 +124,3 @@
     key: 'defaultProps',
-    value: {
-      pieOpacity: 0.8
-    },
+    value: {},
     enumerable: true
@@ -122,0 +127,0 @@ }]);

lib/components/scatter.js

@@ -68,6 +68,12 @@ "use strict";
         return "translate(" + xScaleSet(d.x) + "," + yScaleSet(d.y) + ")";
-      }).style('fill-opacity', 0).style('fill-opacity', 1).attr("d", _d32['default'].svg.symbol().size(function (d) {
+      }).attr("d", _d32['default'].svg.symbol().size(function (d) {
         return symbolSize * symbolSize;
       }).type(symbol));
 
+      if (dataset.style) {
+        for (var key in dataset.style) {
+          dots.style(key, dataset.style[key]);
+        }
+      }
+
       if (showBrush) _d32['default'].select(_react2['default'].findDOMNode(this.refs.scatterPlot)).style('clip-path', 'url(#react-d3-basic__brush_focus__clip)');
@@ -74,0 +80,0 @@

lib/line.js

@@ -61,3 +61,2 @@ "use strict";
       var scatters;
-      var legends;
 
@@ -68,3 +67,2 @@ var _props = this.props;
       var showYGrid = _props.showYGrid;
-      var showLegend = _props.showLegend;
       var interpolate = _props.interpolate;
@@ -104,6 +102,2 @@ var chartSeries = _props.chartSeries;
 
-      if (showLegend) {
-        var legends = _react2['default'].createElement(_reactD3Core.Legend, this.props);
-      }
-
       return _react2['default'].createElement(
@@ -118,4 +112,3 @@ 'g',
           lines,
-          scatters,
-          legends
+          scatters
         ),
@@ -122,0 +115,0 @@ _react2['default'].createElement(_reactD3Core.Xaxis, this.props),

lib/pie.js

@@ -15,2 +15,4 @@ "use strict";
 
+function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError('Cannot destructure undefined'); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
@@ -46,10 +48,6 @@
     value: function render() {
-      var showLegend = this.props.showLegend;
+      _objectDestructuringEmpty(this.props);
 
       var chartSeriesData = this._mkSeries();
 
-      if (showLegend) {
-        var legends = _react2['default'].createElement(_reactD3Core.Legend, this.props);
-      }
-
       var pie = _react2['default'].createElement(_componentsPie2['default'], _extends({ chartSeriesData: chartSeriesData }, this.props, { onMouseOver: this.props.onMouseOver, onMouseOut: this.props.onMouseOut }));
@@ -60,4 +58,3 @@
         { ref: 'plotGroup' },
-        pie,
-        legends
+        pie
       );
@@ -64,0 +61,0 @@ }

lib/scatter.js

@@ -52,3 +52,2 @@ "use strict";
       var chartSeries = _props.chartSeries;
-      var showLegend = _props.showLegend;
       var showXGrid = _props.showXGrid;
@@ -75,6 +74,2 @@ var showYGrid = _props.showYGrid;
 
-      if (showLegend) {
-        var legends = _react2['default'].createElement(_reactD3Core.Legend, this.props);
-      }
-
       return _react2['default'].createElement(
@@ -88,4 +83,3 @@ 'g',
           { ref: 'plotGroup' },
-          scatters,
-          legends
+          scatters
         ),
@@ -92,0 +86,0 @@ _react2['default'].createElement(_reactD3Core.Xaxis, this.props),

lib/utils/series.js

@@ -15,9 +15,11 @@ "use strict";
 
+  categoricalColors = categoricalColors || d3.scale.category10();
+
   var chartSeriesData = chartSeries.map(function (f, i) {
 
     // set a color if not set
-    if (!f.color) f.color = categoricalColors(i);
+    f.color = f.color || categoricalColors(i);
 
     // set name if not set
-    if (!f.name) f.name = f.field;
+    f.name = f.name || f.field;
 
@@ -24,0 +26,0 @@ // mapping throught data set x, y data

package.json

 {
   "name": "react-d3-basic",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "react chart component",
@@ -32,5 +32,6 @@ "main": "./lib/index.js",
     "react": "^0.14.0",
-    "react-d3-core": "^0.4.2",
+    "react-d3-core": "^0.5.2",
+    "react-dom": "^0.14.0",
     "react-faux-dom": "^2.0.1"
   }
 }

src/area_stack.jsx

@@ -17,3 +17,2 @@ "use strict";
   Yaxis as Yaxis,
-  Legend as Legend,
   Grid as Grid,
@@ -33,3 +32,2 @@ } from 'react-d3-core';
   static defaultProps = {
-    showLegend: true
   }
@@ -41,3 +39,2 @@
       chartSeries,
-      showLegend,
       showXGrid,
@@ -65,6 +62,2 @@ showYGrid,
 
-    if(showLegend) {
-      var legends = <Legend {...this.props}  />
-    }
-
     return (
@@ -76,3 +69,2 @@ <g>
           {areas}
-          {legends}
         </g>
@@ -79,0 +71,0 @@ <Xaxis {...this.props} />

src/bar_group.jsx

@@ -13,3 +13,2 @@ "use strict";
   Yaxis as Yaxis,
-  Legend as Legend,
   Grid as Grid,
@@ -37,3 +36,2 @@ } from 'react-d3-core';
       chartSeries,
-      showLegend,
       showXGrid,
@@ -82,6 +80,2 @@ showYGrid,
 
-    if(showLegend) {
-      var legends = <Legend {...this.props} />
-    }
-
     return (
@@ -92,3 +86,2 @@ <g>
         <g ref= "plotGroup">
-          {legends}
           {bargroups}
@@ -95,0 +88,0 @@ </g>

src/bar_stack.jsx

@@ -13,3 +13,2 @@ "use strict";
   Yaxis as Yaxis,
-  Legend as Legend,
   Grid as Grid,
@@ -38,3 +37,2 @@ } from 'react-d3-core';
       chartSeries,
-      showLegend,
       showXGrid,
@@ -78,6 +76,2 @@ showYGrid,
 
-    if(showLegend) {
-      var legends = <Legend {...this.props} />
-    }
-
     return (
@@ -89,3 +83,2 @@ <g>
           {bargroups}
-          {legends}
         </g>
@@ -92,0 +85,0 @@ <Xaxis {...this.props} />

src/bar.jsx

@@ -13,4 +13,3 @@ "use strict";
   Yaxis as Yaxis,
-  Legend as Legend,
-  Grid as Grid,
+  Grid as Grid
 } from 'react-d3-core';
@@ -38,3 +37,2 @@
       chartSeries,
-      showLegend,
       showXGrid,
@@ -62,6 +60,2 @@ showYGrid,
 
-    if(showLegend) {
-      var legends = <Legend {...this.props} />
-    }
-
     return (
@@ -72,3 +66,2 @@ <g>
         <g ref= "plotGroup">
-          {legends}
           {bars}
@@ -75,0 +68,0 @@ </g>

src/components/area_stack.jsx

@@ -25,3 +25,2 @@ "use strict";
     interpolate: null,
-    areaOpacity: 1,
     duration: 500,
@@ -35,3 +34,2 @@ areaClassName: 'react-d3-basic__area_stack'
       areaClassName,
-      areaOpacity,
       showBrush,
@@ -46,18 +44,24 @@ showZoom,
     // make areas
-    var chart = d3.select(dom);
+    var chart = d3.select(dom)
+      .attr("class", `${areaClassName} area-group`)
 
-    chart.selectAll(`${areaClassName}`)
+    chart.selectAll("path")
       .data(_setStack(dataset))
-    .enter().append("g")
-      .attr("class", `${areaClassName} area-group`)
-
-    chart.append("path")
+    .enter().append("path")
       .attr("class", "area")
-      .style("fill", (d) => { return d.color} )
-      .style("fill-opacity", areaOpacity)
-    .transition()
-      .duration(duration)
-      .ease("linear")
+      .style("fill", (d) => {return d.color} )
       .attr("d", (d) => { return _setAxis(d.data) })
+      .attr("style", (d) => {
+        var s = '';
+        if(d.style) {
+          for(var key in d.style) {
+            s += key + ':' + d.style[key] + ';';
+          }
+        }
 
+        return s;
+      })
+
+
+
     if(showBrush)
@@ -98,3 +102,3 @@ chart.selectAll("path")
   render() {
-    var areaPath = ReactFauxDOM.createElement('path');
+    var areaPath = ReactFauxDOM.createElement('g');
     var area = this._mkStack(areaPath);
@@ -101,0 +105,0 @@

src/components/area.jsx

@@ -24,3 +24,2 @@ "use strict";
     interpolate: null,
-    areaOpacity: 0.6,
     duration: 500,
@@ -46,6 +45,11 @@ areaClassName: 'react-d3-basic__area'
       .style("fill", dataset.color)
-      .style("fill-opacity", areaOpacity)
       .style("stroke", dataset.color)
       .attr("d", this._setAxes())
 
+    if(dataset.style) {
+      for(var key in dataset.style) {
+        area.style(key, dataset.style[key]);
+      }
+    }
+
     if(showBrush)
@@ -52,0 +56,0 @@ area.style('clip-path', 'url(#react-d3-basic__brush_focus__clip)');

src/components/bar_group.jsx

@@ -22,3 +22,2 @@ "use strict";
   static defaultProps = {
-    barOpacity: 0.8,
     onMouseOver: (d) => {},
@@ -58,8 +57,13 @@ onMouseOut: (d) => {},
       .style("fill", function(d) { return dataset.color; })
-      .style("fill-opacity", barOpacity)
       // not using ES6 fat arrow syntax, cause it will cause 'this' variable not passing issue see details in here:
       // https://github.com/mbostock/d3/issues/2246
       .on("mouseover", function(d) { return onMouseOver(d, this); })
-      .on("mouseout", function(d) { return onMouseOut(d, this, barOpacity); })
+      .on("mouseout", function(d) { return onMouseOut(d, this); })
 
+    if(dataset.style) {
+      for(var key in dataset.style) {
+        chart.style(key, dataset.style[key]);
+      }
+    }
+
     return chart;
@@ -66,0 +70,0 @@ }

src/components/bar_stack.jsx

@@ -22,3 +22,2 @@ "use strict";
   static defaultProps = {
-    barOpacity: 0.8,
     onMouseOver: (d) => {},
@@ -62,8 +61,13 @@ onMouseOut: (d) => {},
       .style("fill", (d) => { return dataset.color; })
-      .style("fill-opacity", barOpacity)
       // not using ES6 fat arrow syntax, cause it will cause 'this' variable not passing issue see details in here:
       // https://github.com/mbostock/d3/issues/2246
       .on("mouseover", function(d) { return onMouseOver(d, this); })
-      .on("mouseout", function(d) { return onMouseOut(d, this, barOpacity); })
+      .on("mouseout", function(d) { return onMouseOut(d, this); })
 
+    if(dataset.style) {
+      for(var key in dataset.style) {
+        chart.style(key, dataset.style[key]);
+      }
+    }
+
     return chart;
@@ -70,0 +74,0 @@ }

src/components/bar.jsx

@@ -23,3 +23,2 @@ "use strict";
     interpolate: null,
-    barOpacity: 0.8,
     onMouseOver: (d) => {},
@@ -56,3 +55,2 @@ onMouseOut: (d) => {},
       .style("fill", dataset.color )
-      .style("fill-opacity", barOpacity)
       // not using ES6 fat arrow syntax, cause it will cause 'this' variable not passing issue see details in here:
@@ -63,2 +61,8 @@ // https://github.com/mbostock/d3/issues/2246
 
+    if(dataset.style) {
+      for(var key in dataset.style) {
+        chart.style(key, dataset.style[key]);
+      }
+    }
+
     if(showBrush)
@@ -65,0 +69,0 @@ chart.selectAll("rect")

src/components/line.jsx

@@ -45,2 +45,7 @@ "use strict";
 
+    if(dataset.style) {
+      for(var key in dataset.style) {
+        line.style(key, dataset.style[key]);
+      }
+    }
 
@@ -47,0 +52,0 @@ if(showBrush)

src/components/pie.jsx

@@ -22,3 +22,2 @@ "use strict";
   static defaultProps = {
-    pieOpacity: 0.8
   }
@@ -35,4 +34,3 @@
       onMouseOut,
-      onMouseOver,
-      pieOpacity
+      onMouseOver
     } = this.props;
@@ -63,3 +61,2 @@
       .style("fill", (d) => { return d.data.color; })
-      .style("fill-opacity", pieOpacity)
       .style("stroke", "#FFF")
@@ -69,4 +66,14 @@ // not using ES6 fat arrow syntax, cause it will cause 'this' variable not passing issue see details in here:
       .on("mouseover", function(d) { return onMouseOver(d, this, arcOver); })
-      .on("mouseout", function(d) { return onMouseOut(d, this, pieOpacity, arc); })
+      .on("mouseout", function(d) { return onMouseOut(d, this, arc); })
+      .attr("style", (d) => {
+        var s = '';
+        if(d.data.style) {
+          for(var key in d.data.style) {
+            s += key + ':' + d.data.style[key] + ';';
+          }
+        }
+        return s;
+      })
 
+
     var labelr = radius + 10;
@@ -106,3 +113,3 @@
     var pieChart = ReactFauxDOM.createElement('g');
-    pieChart.setAttribute("transform", t)
+    pieChart.setAttribute("transform", t);
     var pie = this._mkPie(pieChart);
@@ -109,0 +116,0 @@

src/components/scatter.jsx

@@ -62,6 +62,10 @@ "use strict";
       .attr("transform", (d) => { return "translate(" + xScaleSet(d.x) + "," + yScaleSet(d.y) + ")"; })
-      .style('fill-opacity', 0)
-      .style('fill-opacity', 1)
       .attr("d", d3.svg.symbol().size((d) => { return symbolSize * symbolSize;}).type(symbol))
 
+    if(dataset.style) {
+      for(var key in dataset.style) {
+        dots.style(key, dataset.style[key]);
+      }
+    }
+
     if(showBrush)
@@ -68,0 +72,0 @@ d3.select(React.findDOMNode(this.refs.scatterPlot))

src/line.jsx

@@ -17,3 +17,2 @@ "use strict";
   Yaxis as Yaxis,
-  Legend as Legend,
   Grid as Grid,
@@ -48,3 +47,2 @@ } from 'react-d3-core';
     var scatters;
-    var legends;
 
@@ -55,3 +53,2 @@ const {
       showYGrid,
-      showLegend,
       interpolate,
@@ -92,6 +89,2 @@ chartSeries,
 
-    if(showLegend) {
-      var legends = <Legend {...this.props} />
-    }
-
     return (
@@ -104,3 +97,2 @@ <g>
           {scatters}
-          {legends}
         </g>
@@ -107,0 +99,0 @@ <Xaxis {...this.props} />

src/pie.jsx

@@ -33,3 +33,2 @@ "use strict";
     const {
-      showLegend,
     } = this.props;
@@ -39,6 +38,2 @@
 
-    if(showLegend) {
-      var legends = <Legend {...this.props} />
-    }
-
     var pie = <Pie chartSeriesData= {chartSeriesData} {...this.props} onMouseOver={this.props.onMouseOver} onMouseOut={this.props.onMouseOut}/>
@@ -49,3 +44,2 @@
         {pie}
-        {legends}
       </g>
@@ -52,0 +46,0 @@ )

src/scatter.jsx

@@ -13,3 +13,2 @@ "use strict";
   Yaxis as Yaxis,
-  Legend as Legend,
   Grid as Grid,
@@ -35,3 +34,2 @@ } from 'react-d3-core';
       chartSeries,
-      showLegend,
       showXGrid,
@@ -59,6 +57,2 @@ showYGrid
 
-    if(showLegend) {
-      var legends = <Legend {...this.props} />
-    }
-
     return (
@@ -70,3 +64,2 @@ <g>
           {scatters}
-          {legends}
         </g>
@@ -73,0 +66,0 @@ <Xaxis {...this.props} />

src/utils/series.jsx

 "use strict";
 
 export function series(props) {
-  const {
+  var {
     data,
@@ -12,11 +12,11 @@ chartSeries,
 
+  categoricalColors = categoricalColors || d3.scale.category10();
+
   var chartSeriesData = chartSeries.map((f, i) => {
 
     // set a color if not set
-    if(!f.color)
-      f.color = categoricalColors(i);
+    f.color = f.color || categoricalColors(i);
 
     // set name if not set
-    if(!f.name)
-      f.name = f.field;
+    f.name = f.name || f.field;
 
@@ -23,0 +23,0 @@ // mapping throught data set x, y data

No alert changes

Worsened metrics

Total package byte prevSize

145546

decreased by-0.55%

Dependency count

5

increased by25%

Lines of code

2781

decreased by-0.54%

Dependency changes

• + Addedreact-dom@^0.14.0

• + Addedreact-d3-core@0.5.4(transitive)

• + Addedreact-dom@0.14.10(transitive)

• - Removedreact-d3-core@0.4.2(transitive)

• Updatedreact-d3-core@^0.5.2