carbon-addons-data-viz-react - npm Package Compare versions

Comparing version 1.7.5 to 1.7.6

cjs/components/PieChart/PieChart.js

@@ -38,3 +38,4 @@ 'use strict';
   radius: _propTypes2.default.number,
-  formatFunction: _propTypes2.default.func
+  formatFunction: _propTypes2.default.func,
+  id: _propTypes2.default.string
 };
@@ -48,3 +49,4 @@
   },
-  color: ['#3b1a40', '#473793', '#3c6df0', '#00a68f', '#56D2BB']
+  color: ['#00a68f', '#3b1a40', '#473793', '#3c6df0', '#56D2BB'],
+  id: 'graph-container'
 };
@@ -56,18 +58,5 @@
   function PieChart() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
     _classCallCheck(this, PieChart);
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = PieChart.__proto__ || Object.getPrototypeOf(PieChart)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      data: _this.props.data,
-      radius: _this.props.radius,
-      formatFunction: _this.props.formatFunction,
-      color: d3.scaleOrdinal(_this.props.color)
-    }, _temp), _possibleConstructorReturn(_this, _ret);
+    return _possibleConstructorReturn(this, (PieChart.__proto__ || Object.getPrototypeOf(PieChart)).apply(this, arguments));
   }
@@ -78,16 +67,11 @@
     value: function componentDidMount() {
-      var radius = this.state.radius;
+      this.width = this.props.radius * 2;
+      this.height = this.props.radius * 2 + 24;
 
-
-      this.setState(function () {
-        return {
-          width: radius * 2,
-          height: radius * 2 + 24
-        };
-      }, this.initialRender);
+      this.renderSVG();
     }
   }, {
-    key: 'initialRender',
-    value: function initialRender() {
-      this.renderSVG();
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      this.renderSVG(nextProps);
     }
@@ -97,12 +81,13 @@ }, {
     value: function renderSVG() {
-      var _state = this.state,
-          data = _state.data,
-          radius = _state.radius,
-          height = _state.height,
-          width = _state.width,
-          color = _state.color,
-          formatFunction = _state.formatFunction;
+      var _props = this.props,
+          data = _props.data,
+          radius = _props.radius,
+          height = _props.height,
+          width = _props.width,
+          formatFunction = _props.formatFunction,
+          id = _props.id;
 
+      var color = d3.scaleOrdinal(this.props.color);
 
-      this.svg = d3.select(this.refs.container).attr('width', width).attr('height', height).append('g').attr('class', 'group-container').attr('transform', 'translate(' + width / 2 + ', ' + height / 2 + ')');
+      this.svg = d3.select(this.svgNode).attr('width', this.width).attr('height', this.height).append('g').attr('class', 'group-container').attr('transform', 'translate(' + this.width / 2 + ', ' + this.height / 2 + ')');
 
@@ -112,5 +97,3 @@ var pie = d3.pie().sort(null).value(function (d) {
       });
-
       var path = d3.arc().outerRadius(radius - 10).innerRadius(radius - 40);
-
       var pathTwo = d3.arc().outerRadius(radius).innerRadius(radius - 40);
@@ -120,12 +103,14 @@
 
-      arc.append('path').attr('d', path).attr('fill', function (d, i) {
+      var arcs = arc.append('path').attr('fill', function (d, i) {
         return color(i);
-      }).attr('stroke-width', 2).attr('stroke', '#FFFFFF').on('mouseover', function (d) {
+      }).attr('stroke-width', 2).attr('stroke', '#FFFFFF').attr('d', path);
+
+      arcs.on('mouseover', function (d) {
         d3.select(this).transition().style('cursor', 'pointer').attr('d', pathTwo);
 
-        d3.select('.bx--pie-tooltip').style('display', 'inherit');
-        d3.select('.bx--pie-key').text('' + d.data[0]);
-        d3.select('.bx--pie-value').text('' + formatFunction(d.data[1]));
+        d3.select('#' + id + ' .bx--pie-tooltip').style('display', 'inherit');
+        d3.select('#' + id + ' .bx--pie-key').text('' + d.data[0]);
+        d3.select('#' + id + ' .bx--pie-value').text('' + formatFunction(d.data[1]));
       }).on('mouseout', function (d) {
-        d3.select('.bx--pie-tooltip').style('display', 'none');
+        d3.select('#' + id + ' .bx--pie-tooltip').style('display', 'none');
         d3.select(this).transition().attr('d', path);
@@ -137,2 +122,6 @@ });
     value: function render() {
+      var _this2 = this;
+
+      var id = this.props.id;
+
       var tooltipStyles = {
@@ -160,2 +149,4 @@ display: 'none',
 
+      this.renderSVG();
+
       return _react2.default.createElement(
@@ -165,9 +156,12 @@ 'div',
           className: 'bx--graph-container',
+          id: id,
           style: {
             position: 'relative',
-            width: this.state.width,
-            height: this.state.height
+            width: this.width,
+            height: this.height
           }
         },
-        _react2.default.createElement('svg', { ref: 'container' }),
+        _react2.default.createElement('svg', { ref: function ref(node) {
+            return _this2.svgNode = node;
+          } }),
         _react2.default.createElement(
@@ -174,0 +168,0 @@ 'div',

cjs/components/PieChart/PieChart.story.js

 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 var _react = require('react');
@@ -15,10 +19,73 @@
 
-var data = [['Gryffindor', Math.floor(Math.random() * 100 + 1)], ['Slytherin', Math.floor(Math.random() * 100 + 1)], ['Ravenclaw', Math.floor(Math.random() * 100 + 1)], ['Hufflepuff', Math.floor(Math.random() * 100 + 1)], ['Teachers', Math.floor(Math.random() * 20 + 1)]];
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var PieUpdater = function (_Component) {
+  _inherits(PieUpdater, _Component);
+
+  function PieUpdater() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, PieUpdater);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = PieUpdater.__proto__ || Object.getPrototypeOf(PieUpdater)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      data: [['Gryffindor', Math.floor(Math.random() * 100 + 1)], ['Slytherin', Math.floor(Math.random() * 100 + 1)], ['Ravenclaw', Math.floor(Math.random() * 100 + 1)], ['Hufflepuff', Math.floor(Math.random() * 100 + 1)], ['Teachers', Math.floor(Math.random() * 100 + 1)]]
+    }, _temp), _possibleConstructorReturn(_this, _ret);
+  }
+
+  _createClass(PieUpdater, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      setInterval(function () {
+        _this2.updateData();
+      }, 5000);
+    }
+  }, {
+    key: 'updateData',
+    value: function updateData() {
+      var data = [['Gryffindor', Math.floor(Math.random() * 100 + 1)], ['Slytherin', Math.floor(Math.random() * 100 + 1)], ['Ravenclaw', Math.floor(Math.random() * 100 + 1)], ['Hufflepuff', Math.floor(Math.random() * 100 + 1)], ['Teachers', Math.floor(Math.random() * 100 + 1)]];
+
+      this.setState({
+        data: data
+      });
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var data = this.state.data;
+
+
+      return _react2.default.createElement(_PieChart2.default, { data: data });
+    }
+  }]);
+
+  return PieUpdater;
+}(_react.Component);
+
+var staticData = [['Gryffindor', Math.floor(Math.random() * 100 + 1)], ['Slytherin', Math.floor(Math.random() * 100 + 1)], ['Ravenclaw', Math.floor(Math.random() * 100 + 1)], ['Hufflepuff', Math.floor(Math.random() * 100 + 1)], ['Teachers', Math.floor(Math.random() * 20 + 1)]];
+
 var props = {
-  data: data
+  data: staticData
 };
 
 (0, _react3.storiesOf)('PieChart', module).addWithInfo('Default', '\n      Pie Chart.\n    ', function () {
-  return _react2.default.createElement(_PieChart2.default, props);
+  return _react2.default.createElement(
+    'div',
+    null,
+    _react2.default.createElement(_PieChart2.default, _extends({ id: 'one' }, props)),
+    _react2.default.createElement(_PieChart2.default, _extends({ id: 'two' }, props))
+  );
+}).addWithInfo('Updating', 'Pie Chart w/ Updates', function () {
+  return _react2.default.createElement(PieUpdater, null);
 });

es/components/PieChart/PieChart.js

@@ -17,3 +17,4 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
   radius: PropTypes.number,
-  formatFunction: PropTypes.func
+  formatFunction: PropTypes.func,
+  id: PropTypes.string
 };
@@ -27,3 +28,4 @@
   },
-  color: ['#3b1a40', '#473793', '#3c6df0', '#00a68f', '#56D2BB']
+  color: ['#00a68f', '#3b1a40', '#473793', '#3c6df0', '#56D2BB'],
+  id: 'graph-container'
 };
@@ -35,18 +37,5 @@
   function PieChart() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
     _classCallCheck(this, PieChart);
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = PieChart.__proto__ || Object.getPrototypeOf(PieChart)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      data: _this.props.data,
-      radius: _this.props.radius,
-      formatFunction: _this.props.formatFunction,
-      color: d3.scaleOrdinal(_this.props.color)
-    }, _temp), _possibleConstructorReturn(_this, _ret);
+    return _possibleConstructorReturn(this, (PieChart.__proto__ || Object.getPrototypeOf(PieChart)).apply(this, arguments));
   }
@@ -57,16 +46,11 @@
     value: function componentDidMount() {
-      var radius = this.state.radius;
+      this.width = this.props.radius * 2;
+      this.height = this.props.radius * 2 + 24;
 
-
-      this.setState(function () {
-        return {
-          width: radius * 2,
-          height: radius * 2 + 24
-        };
-      }, this.initialRender);
+      this.renderSVG();
     }
   }, {
-    key: 'initialRender',
-    value: function initialRender() {
-      this.renderSVG();
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      this.renderSVG(nextProps);
     }
@@ -76,12 +60,13 @@ }, {
     value: function renderSVG() {
-      var _state = this.state,
-          data = _state.data,
-          radius = _state.radius,
-          height = _state.height,
-          width = _state.width,
-          color = _state.color,
-          formatFunction = _state.formatFunction;
+      var _props = this.props,
+          data = _props.data,
+          radius = _props.radius,
+          height = _props.height,
+          width = _props.width,
+          formatFunction = _props.formatFunction,
+          id = _props.id;
 
+      var color = d3.scaleOrdinal(this.props.color);
 
-      this.svg = d3.select(this.refs.container).attr('width', width).attr('height', height).append('g').attr('class', 'group-container').attr('transform', 'translate(' + width / 2 + ', ' + height / 2 + ')');
+      this.svg = d3.select(this.svgNode).attr('width', this.width).attr('height', this.height).append('g').attr('class', 'group-container').attr('transform', 'translate(' + this.width / 2 + ', ' + this.height / 2 + ')');
 
@@ -91,5 +76,3 @@ var pie = d3.pie().sort(null).value(function (d) {
       });
-
       var path = d3.arc().outerRadius(radius - 10).innerRadius(radius - 40);
-
       var pathTwo = d3.arc().outerRadius(radius).innerRadius(radius - 40);
@@ -99,12 +82,14 @@
 
-      arc.append('path').attr('d', path).attr('fill', function (d, i) {
+      var arcs = arc.append('path').attr('fill', function (d, i) {
         return color(i);
-      }).attr('stroke-width', 2).attr('stroke', '#FFFFFF').on('mouseover', function (d) {
+      }).attr('stroke-width', 2).attr('stroke', '#FFFFFF').attr('d', path);
+
+      arcs.on('mouseover', function (d) {
         d3.select(this).transition().style('cursor', 'pointer').attr('d', pathTwo);
 
-        d3.select('.bx--pie-tooltip').style('display', 'inherit');
-        d3.select('.bx--pie-key').text('' + d.data[0]);
-        d3.select('.bx--pie-value').text('' + formatFunction(d.data[1]));
+        d3.select('#' + id + ' .bx--pie-tooltip').style('display', 'inherit');
+        d3.select('#' + id + ' .bx--pie-key').text('' + d.data[0]);
+        d3.select('#' + id + ' .bx--pie-value').text('' + formatFunction(d.data[1]));
       }).on('mouseout', function (d) {
-        d3.select('.bx--pie-tooltip').style('display', 'none');
+        d3.select('#' + id + ' .bx--pie-tooltip').style('display', 'none');
         d3.select(this).transition().attr('d', path);
@@ -116,2 +101,6 @@ });
     value: function render() {
+      var _this2 = this;
+
+      var id = this.props.id;
+
       var tooltipStyles = {
@@ -139,2 +128,4 @@ display: 'none',
 
+      this.renderSVG();
+
       return React.createElement(
@@ -144,9 +135,12 @@ 'div',
           className: 'bx--graph-container',
+          id: id,
           style: {
             position: 'relative',
-            width: this.state.width,
-            height: this.state.height
+            width: this.width,
+            height: this.height
           }
         },
-        React.createElement('svg', { ref: 'container' }),
+        React.createElement('svg', { ref: function ref(node) {
+            return _this2.svgNode = node;
+          } }),
         React.createElement(
@@ -153,0 +147,0 @@ 'div',

es/components/PieChart/PieChart.story.js

@@ -1,13 +0,80 @@
-import React from 'react';
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+import React, { Component } from 'react';
 import { storiesOf, action } from '@storybook/react';
 import PieChart from './PieChart';
 
-var data = [['Gryffindor', Math.floor(Math.random() * 100 + 1)], ['Slytherin', Math.floor(Math.random() * 100 + 1)], ['Ravenclaw', Math.floor(Math.random() * 100 + 1)], ['Hufflepuff', Math.floor(Math.random() * 100 + 1)], ['Teachers', Math.floor(Math.random() * 20 + 1)]];
+var PieUpdater = function (_Component) {
+  _inherits(PieUpdater, _Component);
 
+  function PieUpdater() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, PieUpdater);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = PieUpdater.__proto__ || Object.getPrototypeOf(PieUpdater)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      data: [['Gryffindor', Math.floor(Math.random() * 100 + 1)], ['Slytherin', Math.floor(Math.random() * 100 + 1)], ['Ravenclaw', Math.floor(Math.random() * 100 + 1)], ['Hufflepuff', Math.floor(Math.random() * 100 + 1)], ['Teachers', Math.floor(Math.random() * 100 + 1)]]
+    }, _temp), _possibleConstructorReturn(_this, _ret);
+  }
+
+  _createClass(PieUpdater, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      setInterval(function () {
+        _this2.updateData();
+      }, 5000);
+    }
+  }, {
+    key: 'updateData',
+    value: function updateData() {
+      var data = [['Gryffindor', Math.floor(Math.random() * 100 + 1)], ['Slytherin', Math.floor(Math.random() * 100 + 1)], ['Ravenclaw', Math.floor(Math.random() * 100 + 1)], ['Hufflepuff', Math.floor(Math.random() * 100 + 1)], ['Teachers', Math.floor(Math.random() * 100 + 1)]];
+
+      this.setState({
+        data: data
+      });
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var data = this.state.data;
+
+
+      return React.createElement(PieChart, { data: data });
+    }
+  }]);
+
+  return PieUpdater;
+}(Component);
+
+var staticData = [['Gryffindor', Math.floor(Math.random() * 100 + 1)], ['Slytherin', Math.floor(Math.random() * 100 + 1)], ['Ravenclaw', Math.floor(Math.random() * 100 + 1)], ['Hufflepuff', Math.floor(Math.random() * 100 + 1)], ['Teachers', Math.floor(Math.random() * 20 + 1)]];
+
 var props = {
-  data: data
+  data: staticData
 };
 
 storiesOf('PieChart', module).addWithInfo('Default', '\n      Pie Chart.\n    ', function () {
-  return React.createElement(PieChart, props);
+  return React.createElement(
+    'div',
+    null,
+    React.createElement(PieChart, _extends({ id: 'one' }, props)),
+    React.createElement(PieChart, _extends({ id: 'two' }, props))
+  );
+}).addWithInfo('Updating', 'Pie Chart w/ Updates', function () {
+  return React.createElement(PieUpdater, null);
 });

package.json

 {
   "name": "carbon-addons-data-viz-react",
-  "version": "1.7.5",
+  "version": "1.7.6",
   "description": "Carbon Data Visualization",
@@ -5,0 +5,0 @@ "main": "cjs/index.js",

No alert changes

Improved metrics

Total package byte prevSize

95467

increased by7.99%

Lines of code

2016

increased by5%

No dependency changes