react-liquid-gauge - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

lib/index.js

@@ -13,2 +13,4 @@ 'use strict';
 
+var _server = require('react-dom/server');
+
 var _reactAddonsShallowCompare = require('react-addons-shallow-compare');
@@ -96,4 +98,2 @@
 
-            var textElement = (0, _d3Selection.select)(this.container).selectAll('text').selectAll('tspan.value');
-
             var waveHeightScale = (0, _d3Scale.scaleLinear)().range([0, this.props.waveAmplitude, 0]).domain([0, 50, 100]);
@@ -129,5 +129,10 @@
                         });
-                        textElement.text(Math.round(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.riseAnimationOnProgress({
@@ -148,5 +153,9 @@ value: value,
 
-                                textElement.text(Math.round(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({
@@ -176,3 +185,2 @@ value: value,
                     _this2.wave.attr('d', clipArea);
-                    textElement.text(Math.round(_this2.props.value));
                 })();
@@ -213,6 +221,2 @@ }
             var cY = this.props.height / 2;
-            var textPixels = this.props.textSize * radius / 2;
-            var percentStyle = {
-                fontSize: textPixels * 0.6
-            };
             var fillColor = this.props.waveStyle.fill;
@@ -273,17 +277,7 @@ var gradientStops = this.props.gradientStops || [{
                                 style: {
-                                    textAnchor: 'middle',
-                                    fontSize: textPixels
+                                    textAnchor: 'middle'
                                 },
                                 transform: 'translate(' + this.props.textOffsetX + ',' + this.props.textOffsetY + ')'
                             }, this.props.textStyle),
-                            _react2.default.createElement(
-                                'tspan',
-                                { className: 'value' },
-                                this.props.value
-                            ),
-                            typeof this.props.percent !== 'string' ? this.props.percent : _react2.default.createElement(
-                                'tspan',
-                                { style: percentStyle },
-                                this.props.percent
-                            )
+                            this.props.textRenderer(this.props)
                         ),
@@ -304,17 +298,7 @@ _react2.default.createElement(
                                     style: {
-                                        textAnchor: 'middle',
-                                        fontSize: textPixels
+                                        textAnchor: 'middle'
                                     },
                                     transform: 'translate(' + this.props.textOffsetX + ',' + this.props.textOffsetY + ')'
                                 }, this.props.waveTextStyle),
-                                _react2.default.createElement(
-                                    'tspan',
-                                    { className: 'value' },
-                                    this.props.value
-                                ),
-                                typeof this.props.percent !== 'string' ? this.props.percent : _react2.default.createElement(
-                                    'tspan',
-                                    { style: percentStyle },
-                                    this.props.percent
-                                )
+                                this.props.textRenderer(this.props)
                             )
@@ -331,5 +315,3 @@ ),
                             style: { pointerEvents: 'all' },
-                            onClick: function onClick() {
-                                _this4.props.onClick();
-                            }
+                            onClick: this.props.onClick
                         })
@@ -372,2 +354,5 @@ ),
 
+    // Specifies a custom text renderer for rendering a percent value.
+    textRenderer: _react.PropTypes.func,
+
     // Controls if the wave should rise from 0 to it's full height, or start at it's full height.
@@ -429,2 +414,28 @@ riseAnimation: _react.PropTypes.bool,
     textOffsetY: 0,
+    textRenderer: function textRenderer(props) {
+        var value = Math.round(props.value);
+        var radius = Math.min(props.height / 2, props.width / 2);
+        var textPixels = props.textSize * radius / 2;
+        var valueStyle = {
+            fontSize: textPixels
+        };
+        var percentStyle = {
+            fontSize: textPixels * 0.6
+        };
+
+        return _react2.default.createElement(
+            'tspan',
+            null,
+            _react2.default.createElement(
+                'tspan',
+                { style: valueStyle },
+                value
+            ),
+            typeof props.percent !== 'string' ? props.percent : _react2.default.createElement(
+                'tspan',
+                { style: percentStyle },
+                props.percent
+            )
+        );
+    },
     riseAnimation: false,
@@ -431,0 +442,0 @@ riseAnimationTime: 2000,

package.json

 {
   "name": "react-liquid-gauge",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "React Liquid Gauge component",
@@ -48,3 +48,4 @@ "main": "lib/index.js",
   "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0"
+    "react": "^0.14.0 || ^15.0.0",
+    "react-dom": "^0.14.0 || ^15.0.0"
   },
@@ -51,0 +52,0 @@ "dependencies": {

README.md

@@ -7,3 +7,3 @@ # 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)
 
-[![demo](https://cloud.githubusercontent.com/assets/447801/20963411/2d180a36-bca8-11e6-8505-315137564a80.png)](http://trendmicro-frontend.github.io/react-liquid-gauge)
+[![react-liquid-gauge](https://cloud.githubusercontent.com/assets/447801/21498498/f1ab231e-cc67-11e6-830c-8e5db6b81af0.png)](http://trendmicro-frontend.github.io/react-liquid-gauge)
 
@@ -17,3 +17,3 @@ Demo: http://trendmicro-frontend.github.io/react-liquid-gauge
 ```
-npm install --save react react-liquid-gauge
+npm install --save react react-dom react-liquid-gauge
 ```
@@ -38,2 +38,3 @@
     render() {
+        const radius = 200;
         const interpolate = interpolateRgb(this.startColor, this.endColor);
@@ -66,7 +67,27 @@ const fillColor = interpolate(this.state.value / 100);
                     style={{ margin: '0 auto' }}
-                    width={400}
-                    height={400}
+                    width={radius * 2}
+                    height={radius * 2}
                     value={this.state.value}
+                    percent="%"
+                    textSize={1}
                     textOffsetX={0}
                     textOffsetY={0}
+                    textRenderer={(props) => {
+                        const value = Math.round(props.value);
+                        const radius = Math.min(props.height / 2, props.width / 2);
+                        const textPixels = (props.textSize * radius / 2);
+                        const valueStyle = {
+                            fontSize: textPixels
+                        };
+                        const percentStyle = {
+                            fontSize: textPixels * 0.6
+                        };
+
+                        return (
+                            <tspan>
+                                <tspan className="value" style={valueStyle}>{value}</tspan>
+                                <tspan style={percentStyle}>{props.percent}</tspan>
+                            </tspan>
+                        );
+                    }}
                     riseAnimation
@@ -78,6 +99,16 @@ waveAnimation
                     gradientStops={gradientStops}
-                    circleStyle={{ fill: fillColor }}
-                    waveStyle={{ fill: fillColor }}
-                    textStyle={{ fill: 'rgb(0, 0, 0)' }}
-                    waveTextStyle={{ fill: 'rgb(255, 255, 255)' }}
+                    circleStyle={{
+                        fill: fillColor
+                    }}
+                    waveStyle={{
+                        fill: fillColor
+                    }}
+                    textStyle={{
+                        fill: color('#444').toString(),
+                        fontFamily: 'Arial'
+                    }}
+                    waveTextStyle={{
+                        fill: color('#fff').toString(),
+                        fontFamily: 'Arial'
+                    }}
                     onClick={() => {
@@ -177,2 +208,8 @@ this.setState({ value: Math.random() * 100 });
     <tr>
+      <td>textRenderer</td>
+      <td>Function(props)</td>
+      <td></td>
+      <td>Specifies a custom text renderer for rendering a percent value.</td>
+    </tr>
+    <tr>
       <td>riseAnimation</td>
@@ -197,3 +234,3 @@ <td>Boolean</td>
       <td>riseAnimationOnProgress</td>
-      <td>Function</td>
+      <td>Function({ value, container })</td>
       <td></td>
@@ -204,3 +241,3 @@ <td>Progress callback function.</td>
       <td>riseAnimationOnComplete</td>
-      <td>Function</td>
+      <td>Function({ value, container })</td>
       <td></td>
@@ -253,3 +290,3 @@ <td>Complete callback function.</td>
       <td>onClick</td>
-      <td>Function</td>
+      <td>Function(event)</td>
       <td></td>
@@ -256,0 +293,0 @@ <td>onClick event handler.</td>

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

38555

increased by4.09%

Lines of code

490

increased by1.24%

Number of lines in readme file

350

increased by11.82%

Worsened metrics

Dependency count

11

increased by10%

No dependency changes