Bug fixes when 100% and empty data.

linkRace · Aug 12, 2016 · ad4c058 · ad4c058
1 parent edd8610
commit ad4c058
Show file tree

Hide file tree

Showing 13 changed files with 80 additions and 40 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,3 +9,6 @@
 ## 1.0.2:
 * No legend offset by default
 * Hacking for condition of 100%.
+
+## 1.0.03
+* Bug fixes when no data present and when 100%.
diff --git a/demo/dist/main.js b/demo/dist/main.js
diff --git a/lib/dist/ArcPath.js b/lib/dist/ArcPath.js
@@ -4,6 +4,10 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 
+var _isNan = require('babel-runtime/core-js/number/is-nan');
+
+var _isNan2 = _interopRequireDefault(_isNan);
+
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -33,7 +37,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /**
  * @extends {Component}
  */
-
 var ArcPath = function (_Component) {
     (0, _inherits3.default)(ArcPath, _Component);
 
@@ -93,8 +96,7 @@ var ArcPath = function (_Component) {
 
     }, {
         key: 'path',
-        value: function path(value, total, startAngle, width, innerRadius, outerRadius) {
-            var activeAngle = value / (total + 0.01) * 360;
+        value: function path(activeAngle, startAngle, width, innerRadius, outerRadius) {
             var endAngle = startAngle + activeAngle;
 
             var largeArcFlagOuter = activeAngle > 180 ? '1 1' : '0 1';
@@ -130,7 +132,8 @@ var ArcPath = function (_Component) {
             var _onMouseEnter = _props.onMouseEnter;
             var value = item.value;
 
-            var d = this.path(value, total, angle, width, innerRadius, outerRadius);
+            var activeAngle = (0, _isNan2.default)(value / total) || total / value === 1 ? 359.99 : value / total * 360;
+            var d = this.path(activeAngle, angle, width, innerRadius, outerRadius);
             return _react2.default.createElement('path', {
                 key: key,
                 onClick: function onClick() {

diff --git a/lib/dist/Arcs.js b/lib/dist/Arcs.js
@@ -41,7 +41,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /**
  * @extends {Component}
  */
-
 var Arcs = function (_Component) {
     (0, _inherits3.default)(Arcs, _Component);
 
@@ -98,7 +97,7 @@ var Arcs = function (_Component) {
                         innerRadius += emptyOffset;
                         outerRadius -= emptyOffset;
                         stroke = emptyColor;
-                    } else if (item === selected) {
+                    } else if (selected.label === item.label) {
                         if (toggleSelect) {
                             classes.toggled = true;
                             innerRadius -= toggledOffset;

diff --git a/lib/dist/DonutChart.js b/lib/dist/DonutChart.js
@@ -4,6 +4,14 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 
+var _isNan = require('babel-runtime/core-js/number/is-nan');
+
+var _isNan2 = _interopRequireDefault(_isNan);
+
+var _stringify = require('babel-runtime/core-js/json/stringify');
+
+var _stringify2 = _interopRequireDefault(_stringify);
+
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -53,17 +61,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @author JJ Naughton
  * @license MIT
  */
-
 var DonutChart = function (_Component) {
     (0, _inherits3.default)(DonutChart, _Component);
 
-
     /**
     * Represents a DonutChart.
     * @constructor
     * @param {} props - Object of propTypes with defaultProps as fallback.
     */
-
     function DonutChart(props) {
         (0, _classCallCheck3.default)(this, DonutChart);
 
@@ -79,22 +84,36 @@ var DonutChart = function (_Component) {
         return _this;
     }
 
-    /**
-     * Handles the clicking of an ArcPath region.
-     * Toggles the selected state,
-     * effectively freezing all handlers on other, unselected items.
-     * Calls the onClick handler,
-     * passed by the user as a prop,
-     * providing the item clicked,
-     * as well as whether it's becoming selected or unselected.
-     * @param {} item - The item object selected, with a label and a value, at least.
-     */
+    (0, _createClass3.default)(DonutChart, [{
+        key: 'componentWillReceiveProps',
+        value: function componentWillReceiveProps(newProps) {
+            var data = newProps.data;
 
+            // if new data, reset
 
-    (0, _createClass3.default)(DonutChart, [{
+            if (data && (0, _stringify2.default)(data) !== (0, _stringify2.default)(this.props.data)) {
+                this.setState({
+                    selected: data[0],
+                    toggleSelect: false
+                });
+            }
+        }
+
+        /**
+         * Handles the clicking of an ArcPath region.
+         * Toggles the selected state,
+         * effectively freezing all handlers on other, unselected items.
+         * Calls the onClick handler,
+         * passed by the user as a prop,
+         * providing the item clicked,
+         * as well as whether it's becoming selected or unselected.
+         * @param {} item - The item object selected, with a label and a value, at least.
+         */
+
+    }, {
         key: 'handleClick',
         value: function handleClick(item) {
-            if (!item.isEmpty && this.state.selected === item) {
+            if (this.state.selected.label === item.label) {
                 var toggle = !this.state.toggleSelect;
                 this.setState({
                     toggleSelect: toggle,
@@ -270,7 +289,7 @@ DonutChart.defaultProps = {
     emptyOffset: 0.08,
     toggledOffset: 0.04,
     formatValues: function formatValues(value, total) {
-        return (value / total * 100).toFixed(2) + '%';
+        return (0, _isNan2.default)(value / total) ? '--' : (value / total * 100).toFixed(2) + '%';
     },
     onMouseEnter: function onMouseEnter(item) {
         return item;

diff --git a/lib/dist/DonutInnerText.js b/lib/dist/DonutInnerText.js
@@ -33,7 +33,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /**
  * @extends {Component}
  */
-
 var DonutInnerText = function (_Component) {
     (0, _inherits3.default)(DonutInnerText, _Component);
 

diff --git a/lib/dist/Legend.js b/lib/dist/Legend.js
@@ -41,7 +41,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /**
  * @extends {Component}
  */
-
 var Legend = function (_Component) {
     (0, _inherits3.default)(Legend, _Component);
 
@@ -86,7 +85,7 @@ var Legend = function (_Component) {
                     if (isEmpty) {
                         classes.empty = true;
                         stroke = emptyColor;
-                    } else if (item === selected) {
+                    } else if (selected.label === item.label) {
                         if (toggleSelect) {
                             classes.toggled = true;
                             opacity = 1;

diff --git a/lib/dist/LegendItem.js b/lib/dist/LegendItem.js
@@ -33,7 +33,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /**
  * @extends {Component}
  */
-
 var LegendItem = function (_Component) {
     (0, _inherits3.default)(LegendItem, _Component);
 

diff --git a/lib/src/ArcPath.js b/lib/src/ArcPath.js
@@ -53,8 +53,7 @@ export default class ArcPath extends Component {
      * @param {number} innerRadius - Inner circle's radius.
      * @param {number} outerRadius - Outer circle's radius.
      */
-    path(value, total, startAngle, width, innerRadius, outerRadius) {
-        const activeAngle = value / (total + 0.01) * 360;
+    path(activeAngle, startAngle, width, innerRadius, outerRadius) {
         const endAngle = startAngle + activeAngle;
 
         const largeArcFlagOuter = activeAngle > 180 ? '1 1' : '0 1';
@@ -82,7 +81,11 @@ export default class ArcPath extends Component {
               outerRadius, onClick,
               onMouseEnter } = this.props;
         const { value } = item;
-        const d = this.path(value, total, angle, width, innerRadius, outerRadius);
+        const activeAngle = (Number.isNaN(value / total)
+                             || ((total / value) === 1)) ?
+                  359.99
+                  : (value / total) * 360;
+        const d = this.path(activeAngle, angle, width, innerRadius, outerRadius);
         return <path
             key={ key }
             onClick={ () => { onClick(item); } }

diff --git a/lib/src/Arcs.js b/lib/src/Arcs.js
@@ -40,7 +40,7 @@ export default class Arcs extends Component {
                     innerRadius += emptyOffset;
                     outerRadius -= emptyOffset;
                     stroke = emptyColor;
-                } else if (item === selected) {
+                } else if (selected.label === item.label) {
                     if (toggleSelect) {
                         classes.toggled = true;
                         innerRadius -= toggledOffset;

diff --git a/lib/src/DonutChart.js b/lib/src/DonutChart.js
@@ -33,6 +33,19 @@ export default class DonutChart extends Component {
         };
     }
 
+    componentWillReceiveProps(newProps) {
+        const { data } = newProps;
+
+        // if new data, reset
+        if (data && (JSON.stringify(data)
+                    !== JSON.stringify(this.props.data))) {
+            this.setState({
+                selected: data[0],
+                toggleSelect: false
+            });
+        }
+    }
+
     /**
      * Handles the clicking of an ArcPath region.
      * Toggles the selected state,
@@ -44,7 +57,7 @@ export default class DonutChart extends Component {
      * @param {} item - The item object selected, with a label and a value, at least.
      */
     handleClick(item) {
-        if (!item.isEmpty && this.state.selected === item) {
+        if (this.state.selected.label === item.label) {
             const toggle = !this.state.toggleSelect;
             this.setState({
                 toggleSelect: toggle,
@@ -192,7 +205,10 @@ DonutChart.defaultProps = {
     selectedOffset: 0.03,
     emptyOffset: 0.08,
     toggledOffset: 0.04,
-    formatValues: (value, total) => `${(value / total * 100).toFixed(2)}%`,
+    formatValues: (value, total) => (
+        Number.isNaN(value / total) ? '--'
+            : `${(value / total * 100).toFixed(2)}%`
+    ),
     onMouseEnter: (item) => item,
     onClick: (item, selected) => (selected ? item : null),
     legend: true

diff --git a/lib/src/Legend.js b/lib/src/Legend.js
@@ -33,7 +33,7 @@ export default class Legend extends Component {
                 if (isEmpty) {
                     classes.empty = true;
                     stroke = emptyColor;
-                } else if (item === selected) {
+                } else if (selected.label === item.label) {
                     if (toggleSelect) {
                         classes.toggled = true;
                         opacity = 1;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-donut-chart",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "An extendable SVG donut chart React component.",
   "main": "index.js",
   "scripts": {
-Original file line number
+Diff line change
@@ Expand Up @@
     /**
      * @extends {Component}
      */
     var DonutInnerText = function (_Component) {
         (0, _inherits3.default)(DonutInnerText, _Component);
@@ Expand Down @@