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

Comparing version 1.6.2 to 1.6.3

cjs/components/GaugeGraph/GaugeGraph.js

@@ -41,3 +41,4 @@ 'use strict';
   size: _propTypes2.default.string,
-  gaugePercentages: _propTypes2.default.array
+  gaugePercentages: _propTypes2.default.array,
+  id: _propTypes2.default.string
 };
@@ -54,3 +55,4 @@
   size: 'full',
-  gaugePercentages: [50, 75]
+  gaugePercentages: [50, 75],
+  id: 'container'
 };
@@ -73,11 +75,4 @@
     return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = GaugeGraph.__proto__ || Object.getPrototypeOf(GaugeGraph)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      tau: _this.props.tau,
-      radius: _this.props.radius,
-      padding: _this.props.padding,
-      amount: _this.props.amount,
-      total: _this.props.total,
-      valueText: _this.props.valueText,
-      labelText: _this.props.labelText,
-      size: _this.props.size,
-      gaugePercentages: _this.props.gaugePercentages
+      boxSize: 0,
+      ratio: 0
     }, _temp), _possibleConstructorReturn(_this, _ret);
@@ -89,7 +84,7 @@ }
     value: function componentDidMount() {
-      var _state = this.state,
-          radius = _state.radius,
-          padding = _state.padding,
-          amount = _state.amount,
-          total = _state.total;
+      var _props = this.props,
+          radius = _props.radius,
+          padding = _props.padding,
+          amount = _props.amount,
+          total = _props.total;
 
@@ -107,2 +102,11 @@
     value: function initialRender() {
+      var boxSize = this.state.boxSize;
+      var _props2 = this.props,
+          size = _props2.size,
+          padding = _props2.padding,
+          id = _props2.id;
+
+
+      this.svg = d3.select(this.refs['' + id]).attr('width', boxSize).attr('height', size === 'half' ? boxSize / 2 + padding : boxSize).append('g').attr('transform', 'translate(' + boxSize / 2 + ', ' + boxSize / 2 + ')');
+
       this.renderSVG();
@@ -114,10 +118,12 @@ this.renderLabels();
     value: function renderSVG() {
-      var _state2 = this.state,
-          tau = _state2.tau,
-          radius = _state2.radius,
-          padding = _state2.padding,
-          boxSize = _state2.boxSize,
-          ratio = _state2.ratio,
-          size = _state2.size,
-          gaugePercentages = _state2.gaugePercentages;
+      var _props3 = this.props,
+          tau = _props3.tau,
+          radius = _props3.radius,
+          padding = _props3.padding,
+          size = _props3.size,
+          gaugePercentages = _props3.gaugePercentages,
+          id = _props3.id;
+      var _state = this.state,
+          boxSize = _state.boxSize,
+          ratio = _state.ratio;
 
@@ -132,3 +138,3 @@ // Transition function
 
-            var line = d3.select('.bx--gauge-line');
+            var line = d3.select('#' + id + ' .bx--gauge-line');
             var percent = newAngle / tau * 100;
@@ -145,3 +151,2 @@
             });
-            console.log(percent);
           } else {
@@ -160,4 +165,2 @@ interpolate = d3.interpolate(d.endAngle, newAngle);
 
-      this.svg = d3.select(this.refs.container).attr('width', boxSize).attr('height', boxSize).append('g').attr('transform', 'translate(' + boxSize / 2 + ', ' + boxSize / 2 + ')');
-
       this.svg.append('path').datum({ endAngle: size === 'half' ? Math.PI : tau }).style('fill', '#dfe3e6').attr('d', arc).attr('transform', '' + (size === 'half' ? 'rotate(-90)' : ''));
@@ -170,10 +173,11 @@
     value: function renderLabels() {
-      var _state3 = this.state,
-          valueText = _state3.valueText,
-          labelText = _state3.labelText;
+      var _props4 = this.props,
+          valueText = _props4.valueText,
+          labelText = _props4.labelText,
+          id = _props4.id;
 
 
-      d3.select('.bx--gauge-amount').style('opacity', 0).transition().duration(1000).delay(1500).style('opacity', 1).text('' + valueText);
+      d3.select('#' + id + ' .bx--gauge-amount').style('opacity', 0).transition().duration(1000).delay(1500).style('opacity', 1).text('' + valueText);
 
-      d3.select('.bx--gauge-total').style('opacity', 0).transition().duration(1000).delay(1700).style('opacity', 1).text('' + labelText);
+      d3.select('#' + id + ' .bx--gauge-total').style('opacity', 0).transition().duration(1000).delay(1700).style('opacity', 1).text('' + labelText);
     }
@@ -183,7 +187,9 @@ }, {
     value: function render() {
-      var size = this.state.size;
+      var _props5 = this.props,
+          size = _props5.size,
+          id = _props5.id;
 
       var tooltipStyles = {
         position: 'absolute',
-        top: '' + (size === 'half' ? '40%' : '50%'),
+        top: '' + (size === 'half' ? '60%' : '50%'),
         left: '50%',
@@ -197,3 +203,5 @@ transform: 'translate(-50%, -50%)'
         fontWeight: '600',
-        margin: '0'
+        lineHeight: '1',
+        margin: '0',
+        marginBottom: '.25rem'
       };
@@ -203,3 +211,5 @@
         fontSize: '14px',
-        margin: '0'
+        margin: '0',
+        lineHeight: '1',
+        whiteSpace: 'nowrap'
       };
@@ -210,6 +220,6 @@
         { className: 'bx--graph-container', style: { position: 'relative' } },
-        _react2.default.createElement('svg', { ref: 'container' }),
+        _react2.default.createElement('svg', { id: id, ref: id }),
         _react2.default.createElement(
           'div',
-          { className: 'bx--gauge-tooltip', style: tooltipStyles },
+          { className: 'bx--gauge-tooltip', id: id, style: tooltipStyles },
           _react2.default.createElement(
@@ -216,0 +226,0 @@ 'p',

cjs/components/GaugeGraph/GaugeGraph.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 _react = require('react');
@@ -33,6 +35,22 @@
 
+var halfGaugePropsTwo = {
+  gaugePercentages: [50, 75],
+  size: 'half',
+  radius: 80,
+  padding: 30,
+  amount: 75,
+  total: 100,
+  valueText: '75%',
+  labelText: '75 out of 100GB'
+};
+
 (0, _react3.storiesOf)('GaugeGraph', module).addWithInfo('Default', '\n      Gauge Graph.\n    ', function () {
   return _react2.default.createElement(_GaugeGraph2.default, props);
 }).addWithInfo('Half', '\n      Gauge Graph.\n    ', function () {
-  return _react2.default.createElement(_GaugeGraph2.default, halfGaugeProps);
+  return _react2.default.createElement(
+    'div',
+    null,
+    _react2.default.createElement(_GaugeGraph2.default, _extends({ id: 'one' }, halfGaugeProps)),
+    _react2.default.createElement(_GaugeGraph2.default, _extends({ id: 'two' }, halfGaugePropsTwo))
+  );
 });

es/components/GaugeGraph/GaugeGraph.js

@@ -20,3 +20,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; }; }();
   size: PropTypes.string,
-  gaugePercentages: PropTypes.array
+  gaugePercentages: PropTypes.array,
+  id: PropTypes.string
 };
@@ -33,3 +34,4 @@
   size: 'full',
-  gaugePercentages: [50, 75]
+  gaugePercentages: [50, 75],
+  id: 'container'
 };
@@ -52,11 +54,4 @@
     return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = GaugeGraph.__proto__ || Object.getPrototypeOf(GaugeGraph)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      tau: _this.props.tau,
-      radius: _this.props.radius,
-      padding: _this.props.padding,
-      amount: _this.props.amount,
-      total: _this.props.total,
-      valueText: _this.props.valueText,
-      labelText: _this.props.labelText,
-      size: _this.props.size,
-      gaugePercentages: _this.props.gaugePercentages
+      boxSize: 0,
+      ratio: 0
     }, _temp), _possibleConstructorReturn(_this, _ret);
@@ -68,7 +63,7 @@ }
     value: function componentDidMount() {
-      var _state = this.state,
-          radius = _state.radius,
-          padding = _state.padding,
-          amount = _state.amount,
-          total = _state.total;
+      var _props = this.props,
+          radius = _props.radius,
+          padding = _props.padding,
+          amount = _props.amount,
+          total = _props.total;
 
@@ -86,2 +81,11 @@
     value: function initialRender() {
+      var boxSize = this.state.boxSize;
+      var _props2 = this.props,
+          size = _props2.size,
+          padding = _props2.padding,
+          id = _props2.id;
+
+
+      this.svg = d3.select(this.refs['' + id]).attr('width', boxSize).attr('height', size === 'half' ? boxSize / 2 + padding : boxSize).append('g').attr('transform', 'translate(' + boxSize / 2 + ', ' + boxSize / 2 + ')');
+
       this.renderSVG();
@@ -93,10 +97,12 @@ this.renderLabels();
     value: function renderSVG() {
-      var _state2 = this.state,
-          tau = _state2.tau,
-          radius = _state2.radius,
-          padding = _state2.padding,
-          boxSize = _state2.boxSize,
-          ratio = _state2.ratio,
-          size = _state2.size,
-          gaugePercentages = _state2.gaugePercentages;
+      var _props3 = this.props,
+          tau = _props3.tau,
+          radius = _props3.radius,
+          padding = _props3.padding,
+          size = _props3.size,
+          gaugePercentages = _props3.gaugePercentages,
+          id = _props3.id;
+      var _state = this.state,
+          boxSize = _state.boxSize,
+          ratio = _state.ratio;
 
@@ -111,3 +117,3 @@ // Transition function
 
-            var line = d3.select('.bx--gauge-line');
+            var line = d3.select('#' + id + ' .bx--gauge-line');
             var percent = newAngle / tau * 100;
@@ -124,3 +130,2 @@
             });
-            console.log(percent);
           } else {
@@ -139,4 +144,2 @@ interpolate = d3.interpolate(d.endAngle, newAngle);
 
-      this.svg = d3.select(this.refs.container).attr('width', boxSize).attr('height', boxSize).append('g').attr('transform', 'translate(' + boxSize / 2 + ', ' + boxSize / 2 + ')');
-
       this.svg.append('path').datum({ endAngle: size === 'half' ? Math.PI : tau }).style('fill', '#dfe3e6').attr('d', arc).attr('transform', '' + (size === 'half' ? 'rotate(-90)' : ''));
@@ -149,10 +152,11 @@
     value: function renderLabels() {
-      var _state3 = this.state,
-          valueText = _state3.valueText,
-          labelText = _state3.labelText;
+      var _props4 = this.props,
+          valueText = _props4.valueText,
+          labelText = _props4.labelText,
+          id = _props4.id;
 
 
-      d3.select('.bx--gauge-amount').style('opacity', 0).transition().duration(1000).delay(1500).style('opacity', 1).text('' + valueText);
+      d3.select('#' + id + ' .bx--gauge-amount').style('opacity', 0).transition().duration(1000).delay(1500).style('opacity', 1).text('' + valueText);
 
-      d3.select('.bx--gauge-total').style('opacity', 0).transition().duration(1000).delay(1700).style('opacity', 1).text('' + labelText);
+      d3.select('#' + id + ' .bx--gauge-total').style('opacity', 0).transition().duration(1000).delay(1700).style('opacity', 1).text('' + labelText);
     }
@@ -162,7 +166,9 @@ }, {
     value: function render() {
-      var size = this.state.size;
+      var _props5 = this.props,
+          size = _props5.size,
+          id = _props5.id;
 
       var tooltipStyles = {
         position: 'absolute',
-        top: '' + (size === 'half' ? '40%' : '50%'),
+        top: '' + (size === 'half' ? '60%' : '50%'),
         left: '50%',
@@ -176,3 +182,5 @@ transform: 'translate(-50%, -50%)'
         fontWeight: '600',
-        margin: '0'
+        lineHeight: '1',
+        margin: '0',
+        marginBottom: '.25rem'
       };
@@ -182,3 +190,5 @@
         fontSize: '14px',
-        margin: '0'
+        margin: '0',
+        lineHeight: '1',
+        whiteSpace: 'nowrap'
       };
@@ -189,6 +199,6 @@
         { className: 'bx--graph-container', style: { position: 'relative' } },
-        React.createElement('svg', { ref: 'container' }),
+        React.createElement('svg', { id: id, ref: id }),
         React.createElement(
           'div',
-          { className: 'bx--gauge-tooltip', style: tooltipStyles },
+          { className: 'bx--gauge-tooltip', id: id, style: tooltipStyles },
           React.createElement(
@@ -195,0 +205,0 @@ 'p',

es/components/GaugeGraph/GaugeGraph.story.js

@@ -0,1 +1,3 @@
+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; };
+
 import React from 'react';
@@ -23,6 +25,22 @@ import { storiesOf, action } from '@storybook/react';
 
+var halfGaugePropsTwo = {
+  gaugePercentages: [50, 75],
+  size: 'half',
+  radius: 80,
+  padding: 30,
+  amount: 75,
+  total: 100,
+  valueText: '75%',
+  labelText: '75 out of 100GB'
+};
+
 storiesOf('GaugeGraph', module).addWithInfo('Default', '\n      Gauge Graph.\n    ', function () {
   return React.createElement(GaugeGraph, props);
 }).addWithInfo('Half', '\n      Gauge Graph.\n    ', function () {
-  return React.createElement(GaugeGraph, halfGaugeProps);
+  return React.createElement(
+    'div',
+    null,
+    React.createElement(GaugeGraph, _extends({ id: 'one' }, halfGaugeProps)),
+    React.createElement(GaugeGraph, _extends({ id: 'two' }, halfGaugePropsTwo))
+  );
 });

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

84565

increased by2.02%

Lines of code

1814

increased by2.72%

No dependency changes