@devexpress/dx-react-chart - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

dist/dx-react-chart.es.js

 /**
  * Bundle of @devexpress/dx-react-chart
- * Generated: 2018-06-04
- * Version: 1.3.0
+ * Generated: 2018-06-22
+ * Version: 1.4.0
  * License: https://js.devexpress.com/Licensing
@@ -10,4 +10,4 @@ */
 import { array, arrayOf, bool, func, node, number, object, string } from 'prop-types';
-import { Action, Getter, Plugin, PluginHost, Template, TemplateConnector, TemplatePlaceholder, createStateHelper } from '@devexpress/dx-react-core';
-import { BOTTOM, HORIZONTAL, LEFT, RIGHT, TOP, axesData, axisCoordinates, axisName, bBoxes, barPointAttributes, checkZeroStart, coordinates, domains, findSeriesByName, lineAttributes, palette, pieAttributes, pointAttributes, processData, seriesData, seriesWithStacks, stacks, xyScales } from '@devexpress/dx-chart-core';
+import { Action, Getter, Plugin, PluginHost, Sizer, Template, TemplateConnector, TemplatePlaceholder, createStateHelper } from '@devexpress/dx-react-core';
+import { BOTTOM, HORIZONTAL, LEFT, RIGHT, TOP, axesData, axisCoordinates, axisName, bBoxes, barPointAttributes, checkZeroStart, coordinates, domains, findSeriesByName, lineAttributes, palette, pieAttributes, pointAttributes, prepareData, processData, seriesData, seriesWithStacks, stacks, xyScales } from '@devexpress/dx-chart-core';
 
@@ -280,6 +280,11 @@ var asyncGenerator = function () {
       };
+      var processedData = function processedData(_ref2) {
+        var series = _ref2.series,
+            processingData = _ref2.processingData;
+        return prepareData(data, series, processingData);
+      };
       return createElement(
         Plugin,
         null,
-        createElement(Getter, { name: 'data', value: data }),
+        createElement(Getter, { name: 'data', computed: processedData }),
         createElement(Getter, { name: 'argumentAxisName', computed: getArgumentAxisName })
@@ -381,76 +386,32 @@ );
 
-var createRefsHandler = function createRefsHandler(placeholder, changeBBox) {
-  return function (el) {
-    if (!el) return;
-
-    var _el$getBoundingClient = el.getBoundingClientRect(),
-        width = _el$getBoundingClient.width,
-        height = _el$getBoundingClient.height;
-
-    changeBBox({ placeholder: placeholder, bBox: { width: width, height: height } });
-  };
-};
-
 var Pane = function (_React$PureComponent) {
   inherits(Pane, _React$PureComponent);
 
-  function Pane(props) {
+  function Pane() {
     classCallCheck(this, Pane);
-
-    var _this = possibleConstructorReturn(this, (Pane.__proto__ || Object.getPrototypeOf(Pane)).call(this, props));
-
-    _this.onContainerRef = _this.onContainerRef.bind(_this);
-    return _this;
+    return possibleConstructorReturn(this, (Pane.__proto__ || Object.getPrototypeOf(Pane)).apply(this, arguments));
   }
 
   createClass(Pane, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      var changeBBox = this.props.changeBBox;
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(_ref) {
+      var width = _ref.width,
+          height = _ref.height,
+          changeBBox = _ref.changeBBox;
 
-      createRefsHandler('pane', changeBBox)(this.node);
+      if (this.props.width !== width || this.props.height !== height) {
+        changeBBox({ placeholder: 'pane', bBox: { width: width, height: height } });
+      }
     }
   }, {
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate() {
-      var changeBBox = this.props.changeBBox;
-
-      createRefsHandler('pane', changeBBox)(this.node);
-    }
-  }, {
-    key: 'onContainerRef',
-    value: function onContainerRef(node$$1) {
-      this.node = node$$1;
-    }
-  }, {
-    key: 'calculateLayout',
-    value: function calculateLayout(width, height) {
-      var calculatedWidth = width;
-      var calculatedHeight = height;
-
-      var _ref = this.node && this.node.getBoundingClientRect() || {},
-          containerWidth = _ref.width,
-          containerHeight = _ref.height;
-
-      return {
-        width: containerWidth || calculatedWidth,
-        height: containerHeight || calculatedHeight
-      };
-    }
-  }, {
     key: 'render',
     value: function render() {
-      var layouts = this.props.layouts;
+      var _props = this.props,
+          width = _props.width,
+          height = _props.height;
 
-      var _ref2 = layouts.pane || {},
-          widthLayout = _ref2.widthLayout,
-          heightLayout = _ref2.heightLayout;
 
-      var _calculateLayout = this.calculateLayout(widthLayout, heightLayout),
-          width = _calculateLayout.width,
-          height = _calculateLayout.height;
-
       return createElement(
         'div',
-        { ref: this.onContainerRef, style: { position: 'relative', flexGrow: 1 } },
+        { style: { width: '100%' } },
         createElement(
@@ -475,38 +436,16 @@ 'svg',
   changeBBox: func.isRequired,
-  layouts: object.isRequired
+  width: number.isRequired,
+  height: number.isRequired
 };
 
+/* eslint-disable-next-line react/prefer-stateless-function */
 var PaneLayout = function (_React$PureComponent) {
   inherits(PaneLayout, _React$PureComponent);
 
-  function PaneLayout(props) {
+  function PaneLayout() {
     classCallCheck(this, PaneLayout);
-
-    var _this = possibleConstructorReturn(this, (PaneLayout.__proto__ || Object.getPrototypeOf(PaneLayout)).call(this, props));
-
-    _this.onContainerRef = _this.onContainerRef.bind(_this);
-    return _this;
+    return possibleConstructorReturn(this, (PaneLayout.__proto__ || Object.getPrototypeOf(PaneLayout)).apply(this, arguments));
   }
 
   createClass(PaneLayout, [{
-    key: 'onContainerRef',
-    value: function onContainerRef(node$$1) {
-      this.node = node$$1;
-    }
-  }, {
-    key: 'calculateLayout',
-    value: function calculateLayout(width, height) {
-      var calculatedWidth = width;
-      var calculatedHeight = height;
-
-      var _ref = this.node && this.node.getBoundingClientRect() || {},
-          containerWidth = _ref.width,
-          containerHeight = _ref.height;
-
-      return {
-        width: containerWidth || calculatedWidth,
-        height: containerHeight || calculatedHeight
-      };
-    }
-  }, {
     key: 'render',
@@ -523,6 +462,19 @@ value: function render() {
             null,
-            function (_ref2, _ref3) {
-              var layouts = _ref2.layouts;
-              var changeBBox = _ref3.changeBBox;
-              return createElement(Pane, { layouts: layouts, changeBBox: changeBBox });
+            function (_, _ref) {
+              var changeBBox = _ref.changeBBox;
+              return createElement(
+                Sizer,
+                {
+                  style: { flex: 1, zIndex: 1 }
+                },
+                function (_ref2) {
+                  var width = _ref2.width,
+                      height = _ref2.height;
+                  return createElement(Pane, {
+                    changeBBox: changeBBox,
+                    height: height,
+                    width: width
+                  });
+                }
+              );
             }
@@ -545,3 +497,3 @@ )
 
-    _this.state = { bBoxes: {} };
+    _this.state = { bBoxes: { pane: { width: _this.props.width, height: _this.props.height } } };
 
@@ -569,4 +521,2 @@ var stateHelper = createStateHelper(_this);
         createElement(Action, { name: 'changeBBox', action: this.changeBBox }),
-        createElement(Getter, { name: 'height', value: height }),
-        createElement(Getter, { name: 'width', value: width }),
         createElement(
@@ -577,3 +527,6 @@ Template,
             Root,
-            _extends({ width: width, height: height }, restProps),
+            _extends({
+              height: height,
+              width: width
+            }, restProps),
             createElement(TemplatePlaceholder, { name: 'canvas' })
@@ -589,3 +542,3 @@ )
 LayoutManager.propTypes = {
-  width: number.isRequired,
+  width: number,
   height: number.isRequired,
@@ -595,2 +548,6 @@ rootComponent: func.isRequired
 
+LayoutManager.defaultProps = {
+  width: 0
+};
+
 var ComponentLayout = function ComponentLayout() {
@@ -644,27 +601,2 @@ return createElement(
 
-var computedSeries = function computedSeries(_ref) {
-  var series = _ref.series;
-  return seriesWithStacks(series);
-};
-var computedStacks = function computedStacks(_ref2) {
-  var series = _ref2.series;
-  return stacks(series);
-};
-var computedData = function computedData(_ref3) {
-  var series = _ref3.series,
-      data = _ref3.data,
-      startFromZero = _ref3.startFromZero;
-  return processData(series, data, startFromZero);
-};
-
-var SeriesFamily = function SeriesFamily() {
-  return createElement(
-    Plugin,
-    { name: 'SeriesFamily' },
-    createElement(Getter, { name: 'series', computed: computedSeries }),
-    createElement(Getter, { name: 'data', computed: computedData }),
-    createElement(Getter, { name: 'stacks', computed: computedStacks })
-  );
-};
-
 var themeComputing = function themeComputing(_ref) {
@@ -707,3 +639,2 @@ var series = _ref.series;
         createElement(ChartCore, { data: data }),
-        createElement(SeriesFamily, null),
         createElement(IntegratedScaleProcessing, null),
@@ -735,4 +666,4 @@ createElement(ThemeManager, null),
 Chart.defaultProps = {
-  width: 150,
-  height: 150,
+  height: 500,
+  width: undefined,
   children: null
@@ -780,3 +711,3 @@ };
                     Item,
-                    { key: name },
+                    { key: name + themeColor },
                     createElement(Marker, { name: name, themeColor: themeColor }),
@@ -851,3 +782,38 @@ createElement(Label, { text: name })
 
-var baseSeries = function baseSeries(WrappedPath, WrappedPoint, pluginName, pathType, processLine, processPoint) {
+var computedSeries = function computedSeries(_ref) {
+  var _ref$series = _ref.series,
+      series = _ref$series === undefined ? [] : _ref$series;
+  return seriesWithStacks(series);
+};
+var computedStacks = function computedStacks(_ref2) {
+  var _ref2$series = _ref2.series,
+      series = _ref2$series === undefined ? [] : _ref2$series;
+  return stacks(series);
+};
+
+// eslint-disable-next-line react/prefer-stateless-function
+var SeriesFamily = function (_React$PureComponent) {
+  inherits(SeriesFamily, _React$PureComponent);
+
+  function SeriesFamily() {
+    classCallCheck(this, SeriesFamily);
+    return possibleConstructorReturn(this, (SeriesFamily.__proto__ || Object.getPrototypeOf(SeriesFamily)).apply(this, arguments));
+  }
+
+  createClass(SeriesFamily, [{
+    key: 'render',
+    value: function render() {
+      return createElement(
+        Plugin,
+        { name: 'SeriesFamily' },
+        createElement(Getter, { name: 'series', computed: computedSeries }),
+        createElement(Getter, { name: 'processingData', value: processData }),
+        createElement(Getter, { name: 'stacks', computed: computedStacks })
+      );
+    }
+  }]);
+  return SeriesFamily;
+}(PureComponent);
+
+var withSeriesPlugin = function withSeriesPlugin(Path, Point, pluginName, pathType, processLine, processPoint, extraOptions) {
   var Component$$1 = function (_React$PureComponent) {
@@ -866,5 +832,2 @@ inherits(Component$$1, _React$PureComponent);
             name = _props.name,
-            point = _props.point,
-            barWidth = _props.barWidth,
-            groupWidth = _props.groupWidth,
             valueField = _props.valueField,
@@ -874,8 +837,10 @@ argumentField = _props.argumentField,
             stackProp = _props.stack,
-            restProps = objectWithoutProperties(_props, ['name', 'point', 'barWidth', 'groupWidth', 'valueField', 'argumentField', 'axisName', 'stack']);
+            restProps = objectWithoutProperties(_props, ['name', 'valueField', 'argumentField', 'axisName', 'stack']);
 
+
+        var uniqueName = Symbol(name);
         var getSeriesDataComputed = function getSeriesDataComputed(_ref) {
           var series = _ref.series;
           return seriesData(series, {
-            valueField: valueField, argumentField: argumentField, name: name, axisName: axisName$$1, stack: stackProp
+            valueField: valueField, argumentField: argumentField, name: name, uniqueName: uniqueName, axisName: axisName$$1, stack: stackProp
           });
@@ -906,19 +871,16 @@ };
                     argumentAxisName = _ref3.argumentAxisName,
-                    layouts = _ref3.layouts,
-                    width = _ref3.width,
-                    height = _ref3.height;
+                    layouts = _ref3.layouts;
 
-                var _findSeriesByName = findSeriesByName(name, series),
+                var _findSeriesByName = findSeriesByName(uniqueName, series),
                     stack = _findSeriesByName.stack,
                     themeColor = _findSeriesByName.themeColor;
 
-                var scales = xyScales(domains$$1, argumentAxisName, axisName$$1, layouts.pane || { width: width, height: height }, stacks$$1, groupWidth, barWidth);
+                var options = extraOptions(_extends({}, restProps));
+                var scales = xyScales(domains$$1, argumentAxisName, axisName$$1, layouts.pane, stacks$$1, options);
                 var coord = coordinates(data, scales, argumentField, valueField, name);
-                var size = point.size;
-
-                var pointParameters = processPoint(scales, size, stack);
+                var pointParameters = processPoint(scales, options, stack);
                 return createElement(
                   Fragment,
                   null,
-                  createElement(WrappedPath, _extends({
+                  createElement(Path, _extends({
                     themeColor: themeColor,
@@ -928,3 +890,3 @@ coordinates: coord
                   coord.map(function (item) {
-                    return createElement(WrappedPoint, _extends({
+                    return createElement(Point, _extends({
                       themeColor: themeColor,
@@ -946,6 +908,3 @@ key: item.id.toString(),
   Component$$1.propTypes = {
-    name: string.isRequired,
-    point: object,
-    barWidth: number,
-    groupWidth: number,
+    name: string,
     valueField: string.isRequired,
@@ -957,7 +916,5 @@ argumentField: string.isRequired,
   Component$$1.defaultProps = {
+    name: 'defaultSeriesName',
     axisName: undefined,
-    stack: undefined,
-    point: { size: 7 },
-    barWidth: 0.9,
-    groupWidth: 0.7
+    stack: undefined
   };
@@ -979,4 +936,14 @@ return Component$$1;
 
-var BarSeries = baseSeries(EmptyFunction, Dot, 'BarSeries', 'bar', EmptyFunction, barPointAttributes);
+var options = function options(_ref2) {
+  var props = objectWithoutProperties(_ref2, []);
+  var _props$barWidth = props.barWidth,
+      barWidth = _props$barWidth === undefined ? 0.9 : _props$barWidth,
+      _props$groupWidth = props.groupWidth,
+      groupWidth = _props$groupWidth === undefined ? 0.7 : _props$groupWidth;
 
+  return { barWidth: barWidth, groupWidth: groupWidth };
+};
+
+var BarSeries = withSeriesPlugin(EmptyFunction, Dot, 'BarSeries', 'bar', EmptyFunction, barPointAttributes, options);
+
 Dot.propTypes = {
@@ -1005,4 +972,12 @@ pointComponent: func.isRequired
 
-var LineSeries = baseSeries(Series, Dot$1, 'LineSeries', 'line', lineAttributes, pointAttributes);
+var options$1 = function options(_ref3) {
+  var props = objectWithoutProperties(_ref3, []);
+  var _props$point = props.point,
+      point = _props$point === undefined ? {} : _props$point;
 
+  return { size: point.size };
+};
+
+var LineSeries = withSeriesPlugin(Series, Dot$1, 'LineSeries', 'line', lineAttributes, pointAttributes, options$1);
+
 Series.propTypes = {
@@ -1040,4 +1015,12 @@ seriesComponent: func.isRequired
 
-var SplineSeries = baseSeries(Series$1, Dot$2, 'SplineSeries', 'spline', lineAttributes, pointAttributes);
+var options$2 = function options(_ref3) {
+  var props = objectWithoutProperties(_ref3, []);
+  var _props$point = props.point,
+      point = _props$point === undefined ? {} : _props$point;
 
+  return { size: point.size };
+};
+
+var SplineSeries = withSeriesPlugin(Series$1, Dot$2, 'SplineSeries', 'spline', lineAttributes, pointAttributes, options$2);
+
 Series$1.propTypes = {
@@ -1068,4 +1051,12 @@ seriesComponent: func.isRequired
 
-var ScatterSeries = baseSeries(EmptyFunction$1, Dot$3, 'ScatterSeries', 'scatter', EmptyFunction$1, pointAttributes);
+var options$3 = function options(_ref2) {
+  var props = objectWithoutProperties(_ref2, []);
+  var _props$point = props.point,
+      point = _props$point === undefined ? {} : _props$point;
 
+  return { size: point.size };
+};
+
+var ScatterSeries = withSeriesPlugin(EmptyFunction$1, Dot$3, 'ScatterSeries', 'scatter', EmptyFunction$1, pointAttributes, options$3);
+
 Dot$3.propTypes = {
@@ -1094,4 +1085,12 @@ pointComponent: func.isRequired
 
-var AreaSeries = baseSeries(Series$2, Dot$4, 'AreaSeries', 'area', lineAttributes, pointAttributes);
+var options$4 = function options(_ref3) {
+  var props = objectWithoutProperties(_ref3, []);
+  var _props$point = props.point,
+      point = _props$point === undefined ? {} : _props$point;
 
+  return { size: point.size };
+};
+
+var AreaSeries = withSeriesPlugin(Series$2, Dot$4, 'AreaSeries', 'area', lineAttributes, pointAttributes, options$4);
+
 Series$2.propTypes = {
@@ -1122,3 +1121,2 @@ seriesComponent: func.isRequired
       var _props = this.props,
-          placeholder = _props.placeholder,
           name = _props.name,
@@ -1132,3 +1130,3 @@ innerRadius = _props.innerRadius,
           argumentField = _props.argumentField,
-          restProps = objectWithoutProperties(_props, ['placeholder', 'name', 'innerRadius', 'outerRadius', 'cx', 'cy', 'pointComponent', 'valueField', 'argumentField']);
+          restProps = objectWithoutProperties(_props, ['name', 'innerRadius', 'outerRadius', 'cx', 'cy', 'pointComponent', 'valueField', 'argumentField']);
 
@@ -1154,9 +1152,7 @@ var getSeriesDataComputed = function getSeriesDataComputed(_ref) {
               var data = _ref2.data,
-                  layouts = _ref2.layouts,
-                  width = _ref2.width,
-                  height = _ref2.height;
+                  layouts = _ref2.layouts;
+              var _layouts$pane = layouts.pane,
+                  widthPane = _layouts$pane.width,
+                  heightPane = _layouts$pane.height;
 
-              var _ref3 = layouts[placeholder] || { width: width, height: height },
-                  widthPane = _ref3.width,
-                  heightPane = _ref3.height;
 
@@ -1185,4 +1181,3 @@ var arcs = pieAttributes(valueField, data, widthPane, heightPane, innerRadius, outerRadius);
 PieSeries.propTypes = {
-  name: string.isRequired,
-  placeholder: string,
+  name: string,
   pointComponent: func.isRequired,
@@ -1198,3 +1193,3 @@ innerRadius: number,
 PieSeries.defaultProps = {
-  placeholder: 'pane',
+  name: 'defaultSeriesName',
   innerRadius: 0,
@@ -1304,5 +1299,3 @@ outerRadius: undefined,
                   argumentAxisName = _ref3.argumentAxisName,
-                  layouts = _ref3.layouts,
-                  containerWidth = _ref3.width,
-                  containerHeight = _ref3.height;
+                  layouts = _ref3.layouts;
               var changeBBox = _ref4.changeBBox;
@@ -1314,7 +1307,7 @@
 
-              var _ref5 = layouts[placeholder] || { width: containerWidth, height: containerHeight },
+              var _ref5 = layouts[placeholder] || { width: 0, height: 0 },
                   widthCalculated = _ref5.width,
                   heightCalculated = _ref5.height;
 
-              var _calculateLayout = _this3.calculateLayout(widthCalculated, heightCalculated, containerWidth, containerHeight),
+              var _calculateLayout = _this3.calculateLayout(widthCalculated, heightCalculated, 0, 0),
                   widthPostCalculated = _calculateLayout.width,
@@ -1434,6 +1427,5 @@ heightPostCalculated = _calculateLayout.height;
       var _props = this.props,
-          placeholder = _props.placeholder,
           name = _props.name,
           Line = _props.lineComponent,
-          restProps = objectWithoutProperties(_props, ['placeholder', 'name', 'lineComponent']);
+          restProps = objectWithoutProperties(_props, ['name', 'lineComponent']);
 
@@ -1452,12 +1444,10 @@ return createElement(
               var domains$$1 = _ref.domains,
-                  layouts = _ref.layouts,
-                  containerWidth = _ref.width,
-                  containerHeight = _ref.height;
+                  layouts = _ref.layouts;
 
               var domain = domains$$1[name];
               var orientation = domain.orientation;
+              var _layouts$pane = layouts.pane,
+                  width = _layouts$pane.width,
+                  height = _layouts$pane.height;
 
-              var _ref2 = layouts[placeholder] || { width: containerWidth, height: containerHeight },
-                  width = _ref2.width,
-                  height = _ref2.height;
 
@@ -1469,8 +1459,8 @@ var coordinates$$1 = axisCoordinates(domain, orientation === HORIZONTAL ? TOP : LEFT, width, height, 0);
                 null,
-                coordinates$$1.ticks.map(function (_ref3) {
-                  var x1 = _ref3.x1,
-                      x2 = _ref3.x2,
-                      y1 = _ref3.y1,
-                      y2 = _ref3.y2,
-                      text = _ref3.text;
+                coordinates$$1.ticks.map(function (_ref2) {
+                  var x1 = _ref2.x1,
+                      x2 = _ref2.x2,
+                      y1 = _ref2.y1,
+                      y2 = _ref2.y2,
+                      text = _ref2.text;
                   return createElement(Line, _extends({
@@ -1496,3 +1486,2 @@ key: text,
   name: string,
-  placeholder: string,
   lineComponent: func.isRequired
@@ -1502,4 +1491,3 @@ };
 Grid.defaultProps = {
-  name: undefined,
-  placeholder: 'pane'
+  name: undefined
 };
@@ -1506,0 +1494,0 @@

dist/dx-react-chart.umd.js

 /**
  * Bundle of @devexpress/dx-react-chart
- * Generated: 2018-06-04
- * Version: 1.3.0
+ * Generated: 2018-06-22
+ * Version: 1.4.0
  * License: https://js.devexpress.com/Licensing
@@ -280,6 +280,11 @@ */
       };
+      var processedData = function processedData(_ref2) {
+        var series = _ref2.series,
+            processingData = _ref2.processingData;
+        return dxChartCore.prepareData(data, series, processingData);
+      };
       return React.createElement(
         dxReactCore.Plugin,
         null,
-        React.createElement(dxReactCore.Getter, { name: 'data', value: data }),
+        React.createElement(dxReactCore.Getter, { name: 'data', computed: processedData }),
         React.createElement(dxReactCore.Getter, { name: 'argumentAxisName', computed: getArgumentAxisName })
@@ -381,76 +386,32 @@ );
 
-var createRefsHandler = function createRefsHandler(placeholder, changeBBox) {
-  return function (el) {
-    if (!el) return;
-
-    var _el$getBoundingClient = el.getBoundingClientRect(),
-        width = _el$getBoundingClient.width,
-        height = _el$getBoundingClient.height;
-
-    changeBBox({ placeholder: placeholder, bBox: { width: width, height: height } });
-  };
-};
-
 var Pane = function (_React$PureComponent) {
   inherits(Pane, _React$PureComponent);
 
-  function Pane(props) {
+  function Pane() {
     classCallCheck(this, Pane);
-
-    var _this = possibleConstructorReturn(this, (Pane.__proto__ || Object.getPrototypeOf(Pane)).call(this, props));
-
-    _this.onContainerRef = _this.onContainerRef.bind(_this);
-    return _this;
+    return possibleConstructorReturn(this, (Pane.__proto__ || Object.getPrototypeOf(Pane)).apply(this, arguments));
   }
 
   createClass(Pane, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      var changeBBox = this.props.changeBBox;
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(_ref) {
+      var width = _ref.width,
+          height = _ref.height,
+          changeBBox = _ref.changeBBox;
 
-      createRefsHandler('pane', changeBBox)(this.node);
+      if (this.props.width !== width || this.props.height !== height) {
+        changeBBox({ placeholder: 'pane', bBox: { width: width, height: height } });
+      }
     }
   }, {
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate() {
-      var changeBBox = this.props.changeBBox;
-
-      createRefsHandler('pane', changeBBox)(this.node);
-    }
-  }, {
-    key: 'onContainerRef',
-    value: function onContainerRef(node$$1) {
-      this.node = node$$1;
-    }
-  }, {
-    key: 'calculateLayout',
-    value: function calculateLayout(width, height) {
-      var calculatedWidth = width;
-      var calculatedHeight = height;
-
-      var _ref = this.node && this.node.getBoundingClientRect() || {},
-          containerWidth = _ref.width,
-          containerHeight = _ref.height;
-
-      return {
-        width: containerWidth || calculatedWidth,
-        height: containerHeight || calculatedHeight
-      };
-    }
-  }, {
     key: 'render',
     value: function render() {
-      var layouts = this.props.layouts;
+      var _props = this.props,
+          width = _props.width,
+          height = _props.height;
 
-      var _ref2 = layouts.pane || {},
-          widthLayout = _ref2.widthLayout,
-          heightLayout = _ref2.heightLayout;
 
-      var _calculateLayout = this.calculateLayout(widthLayout, heightLayout),
-          width = _calculateLayout.width,
-          height = _calculateLayout.height;
-
       return React.createElement(
         'div',
-        { ref: this.onContainerRef, style: { position: 'relative', flexGrow: 1 } },
+        { style: { width: '100%' } },
         React.createElement(
@@ -475,38 +436,16 @@ 'svg',
   changeBBox: PropTypes.func.isRequired,
-  layouts: PropTypes.object.isRequired
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired
 };
 
+/* eslint-disable-next-line react/prefer-stateless-function */
 var PaneLayout = function (_React$PureComponent) {
   inherits(PaneLayout, _React$PureComponent);
 
-  function PaneLayout(props) {
+  function PaneLayout() {
     classCallCheck(this, PaneLayout);
-
-    var _this = possibleConstructorReturn(this, (PaneLayout.__proto__ || Object.getPrototypeOf(PaneLayout)).call(this, props));
-
-    _this.onContainerRef = _this.onContainerRef.bind(_this);
-    return _this;
+    return possibleConstructorReturn(this, (PaneLayout.__proto__ || Object.getPrototypeOf(PaneLayout)).apply(this, arguments));
   }
 
   createClass(PaneLayout, [{
-    key: 'onContainerRef',
-    value: function onContainerRef(node$$1) {
-      this.node = node$$1;
-    }
-  }, {
-    key: 'calculateLayout',
-    value: function calculateLayout(width, height) {
-      var calculatedWidth = width;
-      var calculatedHeight = height;
-
-      var _ref = this.node && this.node.getBoundingClientRect() || {},
-          containerWidth = _ref.width,
-          containerHeight = _ref.height;
-
-      return {
-        width: containerWidth || calculatedWidth,
-        height: containerHeight || calculatedHeight
-      };
-    }
-  }, {
     key: 'render',
@@ -523,6 +462,19 @@ value: function render() {
             null,
-            function (_ref2, _ref3) {
-              var layouts = _ref2.layouts;
-              var changeBBox = _ref3.changeBBox;
-              return React.createElement(Pane, { layouts: layouts, changeBBox: changeBBox });
+            function (_, _ref) {
+              var changeBBox = _ref.changeBBox;
+              return React.createElement(
+                dxReactCore.Sizer,
+                {
+                  style: { flex: 1, zIndex: 1 }
+                },
+                function (_ref2) {
+                  var width = _ref2.width,
+                      height = _ref2.height;
+                  return React.createElement(Pane, {
+                    changeBBox: changeBBox,
+                    height: height,
+                    width: width
+                  });
+                }
+              );
             }
@@ -545,3 +497,3 @@ )
 
-    _this.state = { bBoxes: {} };
+    _this.state = { bBoxes: { pane: { width: _this.props.width, height: _this.props.height } } };
 
@@ -569,4 +521,2 @@ var stateHelper = dxReactCore.createStateHelper(_this);
         React.createElement(dxReactCore.Action, { name: 'changeBBox', action: this.changeBBox }),
-        React.createElement(dxReactCore.Getter, { name: 'height', value: height }),
-        React.createElement(dxReactCore.Getter, { name: 'width', value: width }),
         React.createElement(
@@ -577,3 +527,6 @@ dxReactCore.Template,
             Root,
-            _extends({ width: width, height: height }, restProps),
+            _extends({
+              height: height,
+              width: width
+            }, restProps),
             React.createElement(dxReactCore.TemplatePlaceholder, { name: 'canvas' })
@@ -589,3 +542,3 @@ )
 LayoutManager.propTypes = {
-  width: PropTypes.number.isRequired,
+  width: PropTypes.number,
   height: PropTypes.number.isRequired,
@@ -595,2 +548,6 @@ rootComponent: PropTypes.func.isRequired
 
+LayoutManager.defaultProps = {
+  width: 0
+};
+
 var ComponentLayout = function ComponentLayout() {
@@ -644,27 +601,2 @@ return React.createElement(
 
-var computedSeries = function computedSeries(_ref) {
-  var series = _ref.series;
-  return dxChartCore.seriesWithStacks(series);
-};
-var computedStacks = function computedStacks(_ref2) {
-  var series = _ref2.series;
-  return dxChartCore.stacks(series);
-};
-var computedData = function computedData(_ref3) {
-  var series = _ref3.series,
-      data = _ref3.data,
-      startFromZero = _ref3.startFromZero;
-  return dxChartCore.processData(series, data, startFromZero);
-};
-
-var SeriesFamily = function SeriesFamily() {
-  return React.createElement(
-    dxReactCore.Plugin,
-    { name: 'SeriesFamily' },
-    React.createElement(dxReactCore.Getter, { name: 'series', computed: computedSeries }),
-    React.createElement(dxReactCore.Getter, { name: 'data', computed: computedData }),
-    React.createElement(dxReactCore.Getter, { name: 'stacks', computed: computedStacks })
-  );
-};
-
 var themeComputing = function themeComputing(_ref) {
@@ -707,3 +639,2 @@ var series = _ref.series;
         React.createElement(ChartCore, { data: data }),
-        React.createElement(SeriesFamily, null),
         React.createElement(IntegratedScaleProcessing, null),
@@ -735,4 +666,4 @@ React.createElement(ThemeManager, null),
 Chart.defaultProps = {
-  width: 150,
-  height: 150,
+  height: 500,
+  width: undefined,
   children: null
@@ -780,3 +711,3 @@ };
                     Item,
-                    { key: name },
+                    { key: name + themeColor },
                     React.createElement(Marker, { name: name, themeColor: themeColor }),
@@ -851,3 +782,38 @@ React.createElement(Label, { text: name })
 
-var baseSeries = function baseSeries(WrappedPath, WrappedPoint, pluginName, pathType, processLine, processPoint) {
+var computedSeries = function computedSeries(_ref) {
+  var _ref$series = _ref.series,
+      series = _ref$series === undefined ? [] : _ref$series;
+  return dxChartCore.seriesWithStacks(series);
+};
+var computedStacks = function computedStacks(_ref2) {
+  var _ref2$series = _ref2.series,
+      series = _ref2$series === undefined ? [] : _ref2$series;
+  return dxChartCore.stacks(series);
+};
+
+// eslint-disable-next-line react/prefer-stateless-function
+var SeriesFamily = function (_React$PureComponent) {
+  inherits(SeriesFamily, _React$PureComponent);
+
+  function SeriesFamily() {
+    classCallCheck(this, SeriesFamily);
+    return possibleConstructorReturn(this, (SeriesFamily.__proto__ || Object.getPrototypeOf(SeriesFamily)).apply(this, arguments));
+  }
+
+  createClass(SeriesFamily, [{
+    key: 'render',
+    value: function render() {
+      return React.createElement(
+        dxReactCore.Plugin,
+        { name: 'SeriesFamily' },
+        React.createElement(dxReactCore.Getter, { name: 'series', computed: computedSeries }),
+        React.createElement(dxReactCore.Getter, { name: 'processingData', value: dxChartCore.processData }),
+        React.createElement(dxReactCore.Getter, { name: 'stacks', computed: computedStacks })
+      );
+    }
+  }]);
+  return SeriesFamily;
+}(React.PureComponent);
+
+var withSeriesPlugin = function withSeriesPlugin(Path, Point, pluginName, pathType, processLine, processPoint, extraOptions) {
   var Component$$1 = function (_React$PureComponent) {
@@ -866,5 +832,2 @@ inherits(Component$$1, _React$PureComponent);
             name = _props.name,
-            point = _props.point,
-            barWidth = _props.barWidth,
-            groupWidth = _props.groupWidth,
             valueField = _props.valueField,
@@ -874,8 +837,10 @@ argumentField = _props.argumentField,
             stackProp = _props.stack,
-            restProps = objectWithoutProperties(_props, ['name', 'point', 'barWidth', 'groupWidth', 'valueField', 'argumentField', 'axisName', 'stack']);
+            restProps = objectWithoutProperties(_props, ['name', 'valueField', 'argumentField', 'axisName', 'stack']);
 
+
+        var uniqueName = Symbol(name);
         var getSeriesDataComputed = function getSeriesDataComputed(_ref) {
           var series = _ref.series;
           return dxChartCore.seriesData(series, {
-            valueField: valueField, argumentField: argumentField, name: name, axisName: axisName$$1, stack: stackProp
+            valueField: valueField, argumentField: argumentField, name: name, uniqueName: uniqueName, axisName: axisName$$1, stack: stackProp
           });
@@ -906,19 +871,16 @@ };
                     argumentAxisName = _ref3.argumentAxisName,
-                    layouts = _ref3.layouts,
-                    width = _ref3.width,
-                    height = _ref3.height;
+                    layouts = _ref3.layouts;
 
-                var _findSeriesByName = dxChartCore.findSeriesByName(name, series),
+                var _findSeriesByName = dxChartCore.findSeriesByName(uniqueName, series),
                     stack = _findSeriesByName.stack,
                     themeColor = _findSeriesByName.themeColor;
 
-                var scales = dxChartCore.xyScales(domains$$1, argumentAxisName, axisName$$1, layouts.pane || { width: width, height: height }, stacks$$1, groupWidth, barWidth);
+                var options = extraOptions(_extends({}, restProps));
+                var scales = dxChartCore.xyScales(domains$$1, argumentAxisName, axisName$$1, layouts.pane, stacks$$1, options);
                 var coord = dxChartCore.coordinates(data, scales, argumentField, valueField, name);
-                var size = point.size;
-
-                var pointParameters = processPoint(scales, size, stack);
+                var pointParameters = processPoint(scales, options, stack);
                 return React.createElement(
                   React.Fragment,
                   null,
-                  React.createElement(WrappedPath, _extends({
+                  React.createElement(Path, _extends({
                     themeColor: themeColor,
@@ -928,3 +890,3 @@ coordinates: coord
                   coord.map(function (item) {
-                    return React.createElement(WrappedPoint, _extends({
+                    return React.createElement(Point, _extends({
                       themeColor: themeColor,
@@ -946,6 +908,3 @@ key: item.id.toString(),
   Component$$1.propTypes = {
-    name: PropTypes.string.isRequired,
-    point: PropTypes.object,
-    barWidth: PropTypes.number,
-    groupWidth: PropTypes.number,
+    name: PropTypes.string,
     valueField: PropTypes.string.isRequired,
@@ -957,7 +916,5 @@ argumentField: PropTypes.string.isRequired,
   Component$$1.defaultProps = {
+    name: 'defaultSeriesName',
     axisName: undefined,
-    stack: undefined,
-    point: { size: 7 },
-    barWidth: 0.9,
-    groupWidth: 0.7
+    stack: undefined
   };
@@ -979,4 +936,14 @@ return Component$$1;
 
-var BarSeries = baseSeries(EmptyFunction, Dot, 'BarSeries', 'bar', EmptyFunction, dxChartCore.barPointAttributes);
+var options = function options(_ref2) {
+  var props = objectWithoutProperties(_ref2, []);
+  var _props$barWidth = props.barWidth,
+      barWidth = _props$barWidth === undefined ? 0.9 : _props$barWidth,
+      _props$groupWidth = props.groupWidth,
+      groupWidth = _props$groupWidth === undefined ? 0.7 : _props$groupWidth;
 
+  return { barWidth: barWidth, groupWidth: groupWidth };
+};
+
+var BarSeries = withSeriesPlugin(EmptyFunction, Dot, 'BarSeries', 'bar', EmptyFunction, dxChartCore.barPointAttributes, options);
+
 Dot.propTypes = {
@@ -1005,4 +972,12 @@ pointComponent: PropTypes.func.isRequired
 
-var LineSeries = baseSeries(Series, Dot$1, 'LineSeries', 'line', dxChartCore.lineAttributes, dxChartCore.pointAttributes);
+var options$1 = function options(_ref3) {
+  var props = objectWithoutProperties(_ref3, []);
+  var _props$point = props.point,
+      point = _props$point === undefined ? {} : _props$point;
 
+  return { size: point.size };
+};
+
+var LineSeries = withSeriesPlugin(Series, Dot$1, 'LineSeries', 'line', dxChartCore.lineAttributes, dxChartCore.pointAttributes, options$1);
+
 Series.propTypes = {
@@ -1040,4 +1015,12 @@ seriesComponent: PropTypes.func.isRequired
 
-var SplineSeries = baseSeries(Series$1, Dot$2, 'SplineSeries', 'spline', dxChartCore.lineAttributes, dxChartCore.pointAttributes);
+var options$2 = function options(_ref3) {
+  var props = objectWithoutProperties(_ref3, []);
+  var _props$point = props.point,
+      point = _props$point === undefined ? {} : _props$point;
 
+  return { size: point.size };
+};
+
+var SplineSeries = withSeriesPlugin(Series$1, Dot$2, 'SplineSeries', 'spline', dxChartCore.lineAttributes, dxChartCore.pointAttributes, options$2);
+
 Series$1.propTypes = {
@@ -1068,4 +1051,12 @@ seriesComponent: PropTypes.func.isRequired
 
-var ScatterSeries = baseSeries(EmptyFunction$1, Dot$3, 'ScatterSeries', 'scatter', EmptyFunction$1, dxChartCore.pointAttributes);
+var options$3 = function options(_ref2) {
+  var props = objectWithoutProperties(_ref2, []);
+  var _props$point = props.point,
+      point = _props$point === undefined ? {} : _props$point;
 
+  return { size: point.size };
+};
+
+var ScatterSeries = withSeriesPlugin(EmptyFunction$1, Dot$3, 'ScatterSeries', 'scatter', EmptyFunction$1, dxChartCore.pointAttributes, options$3);
+
 Dot$3.propTypes = {
@@ -1094,4 +1085,12 @@ pointComponent: PropTypes.func.isRequired
 
-var AreaSeries = baseSeries(Series$2, Dot$4, 'AreaSeries', 'area', dxChartCore.lineAttributes, dxChartCore.pointAttributes);
+var options$4 = function options(_ref3) {
+  var props = objectWithoutProperties(_ref3, []);
+  var _props$point = props.point,
+      point = _props$point === undefined ? {} : _props$point;
 
+  return { size: point.size };
+};
+
+var AreaSeries = withSeriesPlugin(Series$2, Dot$4, 'AreaSeries', 'area', dxChartCore.lineAttributes, dxChartCore.pointAttributes, options$4);
+
 Series$2.propTypes = {
@@ -1122,3 +1121,2 @@ seriesComponent: PropTypes.func.isRequired
       var _props = this.props,
-          placeholder = _props.placeholder,
           name = _props.name,
@@ -1132,3 +1130,3 @@ innerRadius = _props.innerRadius,
           argumentField = _props.argumentField,
-          restProps = objectWithoutProperties(_props, ['placeholder', 'name', 'innerRadius', 'outerRadius', 'cx', 'cy', 'pointComponent', 'valueField', 'argumentField']);
+          restProps = objectWithoutProperties(_props, ['name', 'innerRadius', 'outerRadius', 'cx', 'cy', 'pointComponent', 'valueField', 'argumentField']);
 
@@ -1154,9 +1152,7 @@ var getSeriesDataComputed = function getSeriesDataComputed(_ref) {
               var data = _ref2.data,
-                  layouts = _ref2.layouts,
-                  width = _ref2.width,
-                  height = _ref2.height;
+                  layouts = _ref2.layouts;
+              var _layouts$pane = layouts.pane,
+                  widthPane = _layouts$pane.width,
+                  heightPane = _layouts$pane.height;
 
-              var _ref3 = layouts[placeholder] || { width: width, height: height },
-                  widthPane = _ref3.width,
-                  heightPane = _ref3.height;
 
@@ -1185,4 +1181,3 @@ var arcs = dxChartCore.pieAttributes(valueField, data, widthPane, heightPane, innerRadius, outerRadius);
 PieSeries.propTypes = {
-  name: PropTypes.string.isRequired,
-  placeholder: PropTypes.string,
+  name: PropTypes.string,
   pointComponent: PropTypes.func.isRequired,
@@ -1198,3 +1193,3 @@ innerRadius: PropTypes.number,
 PieSeries.defaultProps = {
-  placeholder: 'pane',
+  name: 'defaultSeriesName',
   innerRadius: 0,
@@ -1304,5 +1299,3 @@ outerRadius: undefined,
                   argumentAxisName = _ref3.argumentAxisName,
-                  layouts = _ref3.layouts,
-                  containerWidth = _ref3.width,
-                  containerHeight = _ref3.height;
+                  layouts = _ref3.layouts;
               var changeBBox = _ref4.changeBBox;
@@ -1314,7 +1307,7 @@
 
-              var _ref5 = layouts[placeholder] || { width: containerWidth, height: containerHeight },
+              var _ref5 = layouts[placeholder] || { width: 0, height: 0 },
                   widthCalculated = _ref5.width,
                   heightCalculated = _ref5.height;
 
-              var _calculateLayout = _this3.calculateLayout(widthCalculated, heightCalculated, containerWidth, containerHeight),
+              var _calculateLayout = _this3.calculateLayout(widthCalculated, heightCalculated, 0, 0),
                   widthPostCalculated = _calculateLayout.width,
@@ -1434,6 +1427,5 @@ heightPostCalculated = _calculateLayout.height;
       var _props = this.props,
-          placeholder = _props.placeholder,
           name = _props.name,
           Line = _props.lineComponent,
-          restProps = objectWithoutProperties(_props, ['placeholder', 'name', 'lineComponent']);
+          restProps = objectWithoutProperties(_props, ['name', 'lineComponent']);
 
@@ -1452,12 +1444,10 @@ return React.createElement(
               var domains$$1 = _ref.domains,
-                  layouts = _ref.layouts,
-                  containerWidth = _ref.width,
-                  containerHeight = _ref.height;
+                  layouts = _ref.layouts;
 
               var domain = domains$$1[name];
               var orientation = domain.orientation;
+              var _layouts$pane = layouts.pane,
+                  width = _layouts$pane.width,
+                  height = _layouts$pane.height;
 
-              var _ref2 = layouts[placeholder] || { width: containerWidth, height: containerHeight },
-                  width = _ref2.width,
-                  height = _ref2.height;
 
@@ -1469,8 +1459,8 @@ var coordinates$$1 = dxChartCore.axisCoordinates(domain, orientation === dxChartCore.HORIZONTAL ? dxChartCore.TOP : dxChartCore.LEFT, width, height, 0);
                 null,
-                coordinates$$1.ticks.map(function (_ref3) {
-                  var x1 = _ref3.x1,
-                      x2 = _ref3.x2,
-                      y1 = _ref3.y1,
-                      y2 = _ref3.y2,
-                      text = _ref3.text;
+                coordinates$$1.ticks.map(function (_ref2) {
+                  var x1 = _ref2.x1,
+                      x2 = _ref2.x2,
+                      y1 = _ref2.y1,
+                      y2 = _ref2.y2,
+                      text = _ref2.text;
                   return React.createElement(Line, _extends({
@@ -1496,3 +1486,2 @@ key: text,
   name: PropTypes.string,
-  placeholder: PropTypes.string,
   lineComponent: PropTypes.func.isRequired
@@ -1502,4 +1491,3 @@ };
 Grid.defaultProps = {
-  name: undefined,
-  placeholder: 'pane'
+  name: undefined
 };
@@ -1506,0 +1494,0 @@

package.json

 {
   "name": "@devexpress/dx-react-chart",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Composable plugin-based chart component for React",
@@ -44,3 +44,3 @@ "author": {
   "devDependencies": {
-    "@devexpress/dx-testing": "1.3.0",
+    "@devexpress/dx-testing": "1.4.0",
     "babel-core": "^6.26.3",
@@ -59,11 +59,11 @@ "babel-jest": "^23.0.1",
     "eslint-config-airbnb-base": "^12.1.0",
-    "eslint-plugin-filenames": "^1.2.0",
+    "eslint-plugin-filenames": "^1.3.2",
     "eslint-plugin-import": "^2.12.0",
     "eslint-plugin-jest": "^21.17.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.8.2",
+    "eslint-plugin-react": "^7.9.1",
     "jest": "^23.1.0",
-    "react": "^16.4.0",
-    "react-dom": "^16.4.0",
-    "react-test-renderer": "^16.4.0",
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1",
+    "react-test-renderer": "^16.4.1",
     "rollup": "0.50.0",
@@ -75,8 +75,8 @@ "rollup-plugin-babel": "^3.0.4",
   "dependencies": {
-    "@devexpress/dx-chart-core": "1.3.0",
-    "d3-scale": "^2.0.0",
-    "prop-types": "^15.6.1"
+    "@devexpress/dx-chart-core": "1.4.0",
+    "d3-scale": "^2.1.0",
+    "prop-types": "^15.6.2"
   },
   "peerDependencies": {
-    "@devexpress/dx-react-core": "1.3.0",
+    "@devexpress/dx-react-core": "1.4.0",
     "react": "^16.2.0",
@@ -83,0 +83,0 @@ "react-dom": "^16.2.0"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

199319

decreased by-1.79%

Lines of code

2509

decreased by-0.95%

Dependency changes

• + Added@devexpress/dx-chart-core@1.4.0(transitive)

• + Added@devexpress/dx-core@1.4.0(transitive)

• + Added@devexpress/dx-react-core@1.4.0(transitive)

• - Removed@devexpress/dx-chart-core@1.3.0(transitive)

• - Removed@devexpress/dx-core@1.3.0(transitive)

• - Removed@devexpress/dx-react-core@1.3.0(transitive)

• Updated@devexpress/dx-chart-core@1.4.0

• Updatedd3-scale@^2.1.0

• Updatedprop-types@^15.6.2