react-liquid-gauge - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

lib/Gradient.js

@@ -7,2 +7,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
@@ -23,7 +27,7 @@
 Gradient.propTypes = {
-    x1: _react.PropTypes.string,
-    x2: _react.PropTypes.string,
-    y1: _react.PropTypes.string,
-    y2: _react.PropTypes.string,
-    children: _react.PropTypes.oneOfType([_react.PropTypes.arrayOf(_react.PropTypes.object), _react.PropTypes.arrayOf(_react.PropTypes.node), _react.PropTypes.node])
+    x1: _propTypes2.default.string,
+    x2: _propTypes2.default.string,
+    y1: _propTypes2.default.string,
+    y2: _propTypes2.default.string,
+    children: _propTypes2.default.oneOfType([_propTypes2.default.arrayOf(_propTypes2.default.object), _propTypes2.default.arrayOf(_propTypes2.default.node), _propTypes2.default.node])
 };
@@ -30,0 +34,0 @@

lib/index.js

@@ -9,2 +9,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
@@ -111,18 +115,38 @@
             if (this.props.riseAnimation) {
-                (function () {
-                    var clipArea = (0, _d3Shape.area)().x(function (d, i) {
-                        return waveScaleX(d.x);
-                    }).y1(function (d) {
-                        return _this2.props.height / 2;
+                var clipArea = (0, _d3Shape.area)().x(function (d, i) {
+                    return waveScaleX(d.x);
+                }).y1(function (d) {
+                    return _this2.props.height / 2;
+                });
+                var timeScale = (0, _d3Scale.scaleLinear)().range([0, 1]).domain([0, this.props.riseAnimationTime]);
+                // Use the old value if available
+                var interpolate = (0, _d3Interpolate.interpolateNumber)(this.wave.node().oldValue || 0, this.props.value);
+                var easing = 'ease' + ucfirst(this.props.riseAnimationEasing);
+                var easingFn = ease[easing] ? ease[easing] : ease.easeCubicInOut;
+                var riseAnimationTimer = (0, _d3Timer.timer)(function (t) {
+                    var value = interpolate(easingFn(timeScale(t)));
+                    clipArea.y0(function (d, i) {
+                        var radians = Math.PI * 2 * (d.y * 2); // double width
+                        return waveScaleY(waveHeightScale(value) * Math.sin(radians) + value);
                     });
-                    var timeScale = (0, _d3Scale.scaleLinear)().range([0, 1]).domain([0, _this2.props.riseAnimationTime]);
-                    // Use the old value if available
-                    var interpolate = (0, _d3Interpolate.interpolateNumber)(_this2.wave.node().oldValue || 0, _this2.props.value);
-                    var easing = 'ease' + ucfirst(_this2.props.riseAnimationEasing);
-                    var easingFn = ease[easing] ? ease[easing] : ease.easeCubicInOut;
-                    var riseAnimationTimer = (0, _d3Timer.timer)(function (t) {
-                        var value = interpolate(easingFn(timeScale(t)));
+
+                    _this2.wave.attr('d', clipArea);
+
+                    var renderedElement = _this2.props.textRenderer(_extends({}, _this2.props, {
+                        value: value
+                    }));
+                    (0, _d3Selection.select)(_this2.container).selectAll('.text, .waveText').html((0, _server.renderToString)(renderedElement));
+
+                    _this2.props.riseAnimationOnProgress({
+                        value: value,
+                        container: (0, _d3Selection.select)(_this2.container)
+                    });
+
+                    if (t >= _this2.props.riseAnimationTime) {
+                        riseAnimationTimer.stop();
+
+                        var _value = interpolate(1);
                         clipArea.y0(function (d, i) {
                             var radians = Math.PI * 2 * (d.y * 2); // double width
-                            return waveScaleY(waveHeightScale(value) * Math.sin(radians) + value);
+                            return waveScaleY(waveHeightScale(_value) * Math.sin(radians) + _value);
                         });
@@ -132,54 +156,28 @@
 
-                        var renderedElement = _this2.props.textRenderer(_extends({}, _this2.props, {
-                            value: value
+                        var _renderedElement = _this2.props.textRenderer(_extends({}, _this2.props, {
+                            value: _value
                         }));
-                        (0, _d3Selection.select)(_this2.container).selectAll('.text, .waveText').html((0, _server.renderToString)(renderedElement));
+                        (0, _d3Selection.select)(_this2.container).selectAll('.text, .waveText').html((0, _server.renderToString)(_renderedElement));
 
-                        _this2.props.riseAnimationOnProgress({
-                            value: value,
+                        _this2.props.riseAnimationOnComplete({
+                            value: _value,
                             container: (0, _d3Selection.select)(_this2.container)
                         });
+                    }
+                });
 
-                        if (t >= _this2.props.riseAnimationTime) {
-                            (function () {
-                                riseAnimationTimer.stop();
-
-                                var value = interpolate(1);
-                                clipArea.y0(function (d, i) {
-                                    var radians = Math.PI * 2 * (d.y * 2); // double width
-                                    return waveScaleY(waveHeightScale(value) * Math.sin(radians) + value);
-                                });
-
-                                _this2.wave.attr('d', clipArea);
-
-                                var renderedElement = _this2.props.textRenderer(_extends({}, _this2.props, {
-                                    value: value
-                                }));
-                                (0, _d3Selection.select)(_this2.container).selectAll('.text, .waveText').html((0, _server.renderToString)(renderedElement));
-
-                                _this2.props.riseAnimationOnComplete({
-                                    value: value,
-                                    container: (0, _d3Selection.select)(_this2.container)
-                                });
-                            })();
-                        }
-                    });
-
-                    // Store the old value that can be used for the next animation
-                    _this2.wave.node().oldValue = _this2.props.value;
-                })();
+                // Store the old value that can be used for the next animation
+                this.wave.node().oldValue = this.props.value;
             } else {
-                (function () {
-                    var value = _this2.props.value;
-                    var clipArea = (0, _d3Shape.area)().x(function (d, i) {
-                        return waveScaleX(d.x);
-                    }).y0(function (d, i) {
-                        var radians = Math.PI * 2 * (d.y * 2); // double width
-                        return waveScaleY(waveHeightScale(value) * Math.sin(radians) + value);
-                    }).y1(function (d) {
-                        return _this2.props.height / 2;
-                    });
+                var value = this.props.value;
+                var _clipArea = (0, _d3Shape.area)().x(function (d, i) {
+                    return waveScaleX(d.x);
+                }).y0(function (d, i) {
+                    var radians = Math.PI * 2 * (d.y * 2); // double width
+                    return waveScaleY(waveHeightScale(value) * Math.sin(radians) + value);
+                }).y1(function (d) {
+                    return _this2.props.height / 2;
+                });
 
-                    _this2.wave.attr('d', clipArea);
-                })();
+                this.wave.attr('d', _clipArea);
             }
@@ -332,69 +330,69 @@ }
     // A unique identifier (ID) to identify the element.
-    id: _react.PropTypes.string,
+    id: _propTypes2.default.string,
     // The width of the component.
-    width: _react.PropTypes.number,
+    width: _propTypes2.default.number,
     // The height of the component.
-    height: _react.PropTypes.number,
+    height: _propTypes2.default.number,
 
     // The percent value (0-100).
-    value: _react.PropTypes.number,
+    value: _propTypes2.default.number,
     // The percent string (%) or SVG text element.
-    percent: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.node]),
+    percent: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.node]),
 
     // The relative height of the text to display in the wave circle. A value of 1 equals 50% of the radius of the outer circle.
-    textSize: _react.PropTypes.number,
-    textOffsetX: _react.PropTypes.number,
-    textOffsetY: _react.PropTypes.number,
+    textSize: _propTypes2.default.number,
+    textOffsetX: _propTypes2.default.number,
+    textOffsetY: _propTypes2.default.number,
 
     // Specifies a custom text renderer for rendering a percent value.
-    textRenderer: _react.PropTypes.func,
+    textRenderer: _propTypes2.default.func,
 
     // Controls if the wave should rise from 0 to it's full height, or start at it's full height.
-    riseAnimation: _react.PropTypes.bool,
+    riseAnimation: _propTypes2.default.bool,
     // The amount of time in milliseconds for the wave to rise from 0 to it's final height.
-    riseAnimationTime: _react.PropTypes.number,
+    riseAnimationTime: _propTypes2.default.number,
     // [d3-ease](https://github.com/d3/d3-ease) options:
     // See the [easing explorer](http://bl.ocks.org/mbostock/248bac3b8e354a9103c4) for a visual demostration.
-    riseAnimationEasing: _react.PropTypes.string,
+    riseAnimationEasing: _propTypes2.default.string,
     // Progress callback function.
-    riseAnimationOnProgress: _react.PropTypes.func,
+    riseAnimationOnProgress: _propTypes2.default.func,
     // Complete callback function.
-    riseAnimationOnComplete: _react.PropTypes.func,
+    riseAnimationOnComplete: _propTypes2.default.func,
 
     // Controls if the wave scrolls or is static.
-    waveAnimation: _react.PropTypes.bool,
+    waveAnimation: _propTypes2.default.bool,
     // The amount of time in milliseconds for a full wave to enter the wave circle.
-    waveAnimationTime: _react.PropTypes.number,
+    waveAnimationTime: _propTypes2.default.number,
     // [d3-ease](https://github.com/d3/d3-ease) options:
     // See the [easing explorer](http://bl.ocks.org/mbostock/248bac3b8e354a9103c4) for a visual demostration.
-    waveAnimationEasing: _react.PropTypes.string,
+    waveAnimationEasing: _propTypes2.default.string,
 
     // The wave amplitude.
-    waveAmplitude: _react.PropTypes.number,
+    waveAmplitude: _propTypes2.default.number,
     // The number of full waves per width of the wave circle.
-    waveFrequency: _react.PropTypes.number,
+    waveFrequency: _propTypes2.default.number,
 
     // Whether to apply linear gradients to fill the wave circle.
-    gradient: _react.PropTypes.bool,
+    gradient: _propTypes2.default.bool,
     // An array of the <stop> SVG element defines the ramp of colors to use on a gradient, which is a child element to either the <linearGradient> or the <radialGradient> element.
-    gradientStops: _react.PropTypes.oneOfType([_react.PropTypes.arrayOf(_react.PropTypes.object), _react.PropTypes.arrayOf(_react.PropTypes.node), _react.PropTypes.node]),
+    gradientStops: _propTypes2.default.oneOfType([_propTypes2.default.arrayOf(_propTypes2.default.object), _propTypes2.default.arrayOf(_propTypes2.default.node), _propTypes2.default.node]),
 
     // onClick event handler.
-    onClick: _react.PropTypes.func,
+    onClick: _propTypes2.default.func,
 
     // The radius of the inner circle.
-    innerRadius: _react.PropTypes.number,
+    innerRadius: _propTypes2.default.number,
     // The radius of the outer circle.
-    outerRadius: _react.PropTypes.number,
+    outerRadius: _propTypes2.default.number,
     // The size of the gap between the outer circle and wave circle as a percentage of the outer circle's radius.
-    margin: _react.PropTypes.number,
+    margin: _propTypes2.default.number,
 
     // The fill and stroke of the outer circle.
-    circleStyle: _react.PropTypes.object,
+    circleStyle: _propTypes2.default.object,
     // The fill and stroke of the fill wave.
-    waveStyle: _react.PropTypes.object,
+    waveStyle: _propTypes2.default.object,
     // The fill and stroke of the value text when the wave does not overlap it.
-    textStyle: _react.PropTypes.object,
+    textStyle: _propTypes2.default.object,
     // The fill and stroke of the value text when the wave overlaps it.
-    waveTextStyle: _react.PropTypes.object
+    waveTextStyle: _propTypes2.default.object
 }, _class.defaultProps = {
@@ -401,0 +399,0 @@ width: 400,

package.json

 {
   "name": "react-liquid-gauge",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "React Liquid Gauge component",
@@ -60,28 +60,40 @@ "main": "lib/index.js",
     "d3-transition": "^1.0.3",
+    "prop-types": "^15.5.8",
     "react-addons-shallow-compare": "^0.14.0 || ^15.0.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.18.0",
-    "babel-core": "^6.18.2",
-    "babel-eslint": "^7.1.1",
-    "babel-loader": "^6.2.8",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-preset-es2015": "^6.18.0",
-    "babel-preset-react": "^6.16.0",
-    "babel-preset-stage-0": "^6.16.0",
-    "coveralls": "^2.11.15",
-    "eslint": "^3.12.2",
-    "eslint-config-trendmicro": "^0.5.1",
-    "eslint-loader": "^1.6.1",
-    "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jsx-a11y": "^2.2.3",
-    "eslint-plugin-react": "^6.8.0",
-    "html-webpack-plugin": "^2.24.1",
-    "http-server": "^0.9.0",
+    "@trendmicro/react-buttons": "~1.0.3",
+    "babel-cli": "~6.24.0",
+    "babel-core": "~6.24.0",
+    "babel-eslint": "~7.2.2",
+    "babel-loader": "~6.4.0",
+    "babel-plugin-transform-decorators-legacy": "~1.3.4",
+    "babel-preset-es2015": "~6.24.0",
+    "babel-preset-react": "~6.24.1",
+    "babel-preset-stage-0": "~6.24.1",
+    "coveralls": "~2.13.0",
+    "css-loader": "~0.28.0",
+    "eslint": "~3.19.0",
+    "eslint-config-trendmicro": "~0.5.1",
+    "eslint-loader": "~1.7.1",
+    "eslint-plugin-import": "~2.2.0",
+    "eslint-plugin-jsx-a11y": "~2.2.3",
+    "eslint-plugin-react": "~6.10.0",
+    "file-loader": "~0.11.1",
+    "html-webpack-plugin": "~2.28.0",
+    "http-server": "~0.9.0",
+    "nib": "~1.1.2",
     "react": "^0.14.0 || ^15.0.0",
     "react-dom": "^0.14.0 || ^15.0.0",
-    "tap": "^8.0.1",
-    "webpack": "^1.13.3",
-    "webpack-dev-server": "^1.16.2"
+    "style-loader": "~0.16.1",
+    "stylint": "~1.5.9",
+    "stylint-loader": "~1.0.0",
+    "stylus-loader": "~3.0.1",
+    "tap": "~10.3.0",
+    "trendmicro-ui": "~0.4.0",
+    "url-loader": "~0.5.8",
+    "webpack": "~2.4.1",
+    "webpack-dev-server": "~2.4.1",
+    "which": "~1.2.12"
   }
 }

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

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

Improved metrics

Total package byte prevSize

38768

increased by0.55%

Worsened metrics

Dependency count

12

increased by9.09%

Dev dependency count

33

increased by50%

Lines of code

488

decreased by-0.41%

Dependency changes

• + Addedprop-types@^15.5.8