react-liquid-gauge - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

lib/index.js

@@ -35,2 +35,4 @@ 'use strict';
 
+var _hashid = require('./hashid');
+
 var _Gradient = require('./Gradient');
@@ -50,10 +52,2 @@
 
-/**
- * PropType for fill and stroke..
- */
-var fillStroke = _react.PropTypes.shape({
-    fill: _react.PropTypes.string,
-    stroke: _react.PropTypes.string
-});
-
 var ucfirst = function ucfirst(s) {
@@ -214,2 +208,5 @@ return s && s[0].toUpperCase() + s.slice(1);
             var textPixels = this.props.textSize * radius / 2;
+            var percentStyle = {
+                fontSize: textPixels * 0.6
+            };
             var fillColor = this.props.waveStyle.fill;
@@ -257,3 +254,3 @@ var gradientStops = this.props.gradientStops || [{
                                 'clipPath',
-                                { id: 'clip' },
+                                { id: 'clipWave-' + this.props.id },
                                 _react2.default.createElement('path', {
@@ -268,12 +265,10 @@ ref: function ref(c) {
                             'text',
-                            {
+                            _extends({
                                 className: 'text',
                                 style: {
                                     textAnchor: 'middle',
-                                    fontSize: textPixels + 'px'
+                                    fontSize: textPixels
                                 },
-                                fill: this.props.textStyle.fill,
-                                stroke: this.props.textStyle.stroke,
                                 transform: 'translate(' + this.props.textOffsetX + ',' + this.props.textOffsetY + ')'
-                            },
+                            }, this.props.textStyle),
                             _react2.default.createElement(
@@ -284,6 +279,6 @@ 'tspan',
                             ),
-                            _react2.default.createElement(
+                            typeof this.props.percent !== 'string' ? this.props.percent : _react2.default.createElement(
                                 'tspan',
-                                null,
-                                this.props.percentageSymbol
+                                { style: percentStyle },
+                                this.props.percent
                             )
@@ -293,20 +288,19 @@ ),
                             'g',
-                            { clipPath: 'url(#clip)' },
-                            _react2.default.createElement('circle', {
+                            { clipPath: 'url(#clipWave-' + this.props.id + ')' },
+                            _react2.default.createElement('circle', _extends({
                                 className: 'wave',
-                                r: fillCircleRadius,
-                                fill: this.props.gradient ? 'url(#gradient)' : this.props.waveStyle.fill
-                            }),
+                                r: fillCircleRadius
+                            }, this.props.waveStyle, {
+                                fill: this.props.gradient ? 'url(#gradient-' + this.props.id + ')' : this.props.waveStyle.fill
+                            })),
                             _react2.default.createElement(
                                 'text',
-                                {
+                                _extends({
                                     className: 'waveText',
                                     style: {
                                         textAnchor: 'middle',
-                                        fontSize: textPixels + 'px'
+                                        fontSize: textPixels
                                     },
-                                    fill: this.props.waveTextStyle.fill,
-                                    stroke: this.props.waveTextStyle.stroke,
                                     transform: 'translate(' + this.props.textOffsetX + ',' + this.props.textOffsetY + ')'
-                                },
+                                }, this.props.waveTextStyle),
                                 _react2.default.createElement(
@@ -317,15 +311,13 @@ 'tspan',
                                 ),
-                                _react2.default.createElement(
+                                typeof this.props.percent !== 'string' ? this.props.percent : _react2.default.createElement(
                                     'tspan',
-                                    null,
-                                    this.props.percentageSymbol
+                                    { style: percentStyle },
+                                    this.props.percent
                                 )
                             )
                         ),
-                        _react2.default.createElement('path', {
+                        _react2.default.createElement('path', _extends({
                             className: 'circle',
-                            d: circle(),
-                            fill: this.props.circleStyle.fill,
-                            stroke: this.props.circleStyle.stroke
-                        }),
+                            d: circle()
+                        }, this.props.circleStyle)),
                         _react2.default.createElement('circle', {
@@ -343,3 +335,3 @@ r: radius,
                         _Gradient2.default,
-                        { id: 'gradient' },
+                        { id: 'gradient-' + this.props.id },
                         gradientStops.map(function (stop, index) {
@@ -360,2 +352,4 @@ if (!_react2.default.isValidElement(stop)) {
 }(_react.Component), _class.propTypes = {
+    // A unique identifier (ID) to identify the element.
+    id: _react.PropTypes.string,
     // The width of the component.
@@ -366,8 +360,8 @@ width: _react.PropTypes.number,
 
-    // The percentage value (0-100).
+    // The percent value (0-100).
     value: _react.PropTypes.number,
-    // The percentage symbol (%).
-    percentageSymbol: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.bool]),
+    // The percent string (%) or SVG text element.
+    percent: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.node]),
 
-    // The relative height of the text to display in the wave circle. 1 = 50%.
+    // 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,
@@ -418,14 +412,15 @@ textOffsetX: _react.PropTypes.number,
     // The fill and stroke of the outer circle.
-    circleStyle: fillStroke,
+    circleStyle: _react.PropTypes.object,
     // The fill and stroke of the fill wave.
-    waveStyle: fillStroke,
+    waveStyle: _react.PropTypes.object,
     // The fill and stroke of the value text when the wave does not overlap it.
-    textStyle: fillStroke,
+    textStyle: _react.PropTypes.object,
     // The fill and stroke of the value text when the wave overlaps it.
-    waveTextStyle: fillStroke
+    waveTextStyle: _react.PropTypes.object
 }, _class.defaultProps = {
+    id: (0, _hashid.generate)(),
     width: 400,
     height: 400,
     value: 0,
-    percentageSymbol: '%',
+    percent: '%',
     textSize: 1,
@@ -432,0 +427,0 @@ textOffsetX: 0,

package.json

 {
   "name": "react-liquid-gauge",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "React Liquid Gauge component",
@@ -10,3 +10,4 @@ "main": "lib/index.js",
   "scripts": {
-    "prepublish": "npm run lint && npm test && npm run clean && npm run build && npm run build-examples",
+    "prepublish": "npm run lint && npm test && npm run clean && npm run bowersync && npm run build && npm run build-examples",
+    "bowersync": "./scripts/bowersync",
     "build": "babel --out-dir ./lib ./src",
@@ -20,3 +21,3 @@ "build-examples": "cd examples; webpack",
     "coveralls": "./babel-tap --coverage --coverage-report=text-lcov test/*.js | node_modules/.bin/coveralls",
-    "dev": "cd examples; webpack-dev-server --hot --inline --host 0.0.0.0 --port 8000"
+    "dev": "cd examples; webpack-dev-server --hot --inline --host 0.0.0.0 --port 8000 --content-base ../docs"
   },
@@ -28,2 +29,9 @@ "repository": {
   "author": "Cheton Wu <[e-mail]>",
+  "contributors": [
+    {
+      "name": "Cheton Wu",
+      "email": "[e-mail]",
+      "url": "https://github.com/cheton"
+    }
+  ],
   "license": "MIT",
@@ -73,2 +81,3 @@ "bugs": {
     "html-webpack-plugin": "^2.24.1",
+    "http-server": "^0.9.0",
     "react": "^0.14.0 || ^15.0.0",
@@ -75,0 +84,0 @@ "react-dom": "^0.14.0 || ^15.0.0",

README.md

@@ -124,2 +124,8 @@ # react-liquid-gauge [![build status](https://travis-ci.org/trendmicro-frontend/react-liquid-gauge.svg?branch=master)](https://travis-ci.org/trendmicro-frontend/react-liquid-gauge) [![Coverage Status](https://coveralls.io/repos/github/trendmicro-frontend/react-liquid-gauge/badge.svg?branch=master)](https://coveralls.io/github/trendmicro-frontend/react-liquid-gauge?branch=master)
     <tr>
+      <td>id</td>
+      <td>String</td>
+      <td></td>
+      <td>A unique identifier (ID) to identify the element. Defaults to a unique random string.</td>
+    </tr>
+    <tr>
       <td>width</td>
@@ -140,9 +146,9 @@ <td>Number</td>
       <td>0</td>
-      <td>The percentage value (0-100).</td>
+      <td>The percent value (0-100).</td>
     </tr>
     <tr>
-      <td>percentageSymbol</td>
-      <td>String</td>
+      <td>percent</td>
+      <td>String|Node</td>
       <td>'%'</td>
-      <td>The percentage symbol (%).</td>
+      <td>The percent string (%) or SVG text element.</td>
     </tr>
@@ -153,3 +159,3 @@ <tr>
       <td>1</td>
-      <td>The relative height of the text to display in the wave circle. 1 = 50%.</td>
+      <td>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.</td>
     </tr>
@@ -272,3 +278,3 @@ <tr>
       </td>
-      <td>The fill and stroke of the outer circle.</td>
+      <td>The style of the outer circle.</td>
     </tr>
@@ -283,3 +289,3 @@ <tr>
       </td>
-      <td>The fill and stroke of the fill wave.</td>
+      <td>The style of the fill wave.</td>
     </tr>
@@ -294,3 +300,3 @@ <tr>
       </td>
-      <td>The fill and stroke of the value text when the wave does not overlap it.</td>
+      <td>The style of the text when the wave does not overlap it.</td>
     </tr>
@@ -305,3 +311,3 @@ <tr>
       </td>
-      <td>The fill and stroke of the value text when the wave overlaps it.</td>
+      <td>The style of the text when the wave overlaps it.</td>
     </tr>
@@ -308,0 +314,0 @@ </tbody>

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

36960

increased by9.17%

Number of package files

6

increased by20%

Lines of code

482

increased by14.49%

Number of lines in readme file

313

increased by1.95%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

22

increased by4.76%

No dependency changes