react-liquidchart - npm Package Compare versions

Comparing version 0.0.12 to 0.0.13

dist/Chart/Liquid.js

@@ -130,2 +130,6 @@ 'use strict';
         if (t > _this3.props.animationTime) {
+          val.y0(function (d, i) {
+            return _this3.y(_this3.props.amplitude * Math.sin(i / _this3.props.frequency) + _this3.props.value);
+          });
+          _this3.wave.attr('d', val(_this3.arr));
           animationTimer.stop();
@@ -178,6 +182,4 @@ _this3.text.text(Math.round(_this3.props.value));
           {
-            style: {
-              textAnchor: 'middle',
-              fontSize: '7rem'
-            },
+            textAnchor: 'middle',
+            fontSize: this.props.fontSize,
             fill: this.props.number.fill,
@@ -193,3 +195,3 @@ stroke: this.props.number.stroke
             'tspan',
-            { fontSize: '3rem' },
+            { fontSize: this.props.smallFontSize },
             '%'
@@ -210,6 +212,4 @@ )
             {
-              style: {
-                textAnchor: 'middle',
-                fontSize: '7rem'
-              },
+              textAnchor: 'middle',
+              fontSize: this.props.fontSize,
               fill: this.props.liquidNumber.fill,
@@ -225,3 +225,3 @@ stroke: this.props.liquidNumber.stroke
               'tspan',
-              { fontSize: '3rem' },
+              { fontSize: this.props.smallFontSize },
               '%'
@@ -289,3 +289,7 @@ )
   offsetY: _react.PropTypes.number,
-  offsetX: _react.PropTypes.number
+  offsetX: _react.PropTypes.number,
+  // Font size for the number
+  fontSize: _react.PropTypes.string,
+  // font size for the percentage
+  smallFontSize: _react.PropTypes.string
 };
@@ -316,4 +320,6 @@ LiquidChart.defaultProps = {
   offsetY: 1,
-  onClick: function onClick() {}
+  onClick: function onClick() {},
+  fontSize: '7rem',
+  smallFontSize: '3rem'
 };
 exports.default = LiquidChart;

package.json

 {
   "name": "react-liquidchart",
-  "version": "0.0.12",
-  "description": "A React-D3 liquid reusable liquid chart",
+  "version": "0.0.13",
+  "description": "A Reusable liquid chart made with d3 and react",
   "main": "dist/index.js",
@@ -6,0 +6,0 @@ "scripts": {

readme.md

@@ -70,3 +70,8 @@ # React-Liquidchart
 Makes the chart listen to changes in screen size and resize the chart on screen resize
+### fontSize : string
+The font size attribute for the number
+### smallFontSize : string
+font size for the percentage sign
 
+
 ## Development
@@ -73,0 +78,0 @@ Testing done with Jest

src/Chart/Liquid.jsx

@@ -55,2 +55,6 @@ import React, { Component, PropTypes } from 'react';
     offsetX: PropTypes.number,
+    // Font size for the number
+    fontSize: PropTypes.string,
+    // font size for the percentage
+    smallFontSize: PropTypes.string,
   }
@@ -83,2 +87,4 @@
     onClick: () => {},
+    fontSize: '7rem',
+    smallFontSize: '3rem',
   };
@@ -147,2 +153,7 @@
       if (t > this.props.animationTime) {
+        val.y0((d, i) => this.y(
+          (this.props.amplitude * Math.sin(i / this.props.frequency))
+          + this.props.value,
+        ));
+        this.wave.attr('d', val(this.arr));
         animationTimer.stop();
@@ -185,6 +196,4 @@ this.text.text(Math.round(this.props.value));
         <text
-          style={{
-            textAnchor: 'middle',
-            fontSize: '7rem',
-          }}
+          textAnchor="middle"
+          fontSize={this.props.fontSize}
           fill={this.props.number.fill}
@@ -194,3 +203,3 @@ stroke={this.props.number.stroke}
           <tspan className="value">{this.props.value}</tspan>
-          <tspan fontSize="3rem">%</tspan>
+          <tspan fontSize={this.props.smallFontSize}>%</tspan>
         </text>
@@ -205,6 +214,4 @@ <g
           <text
-            style={{
-              textAnchor: 'middle',
-              fontSize: '7rem',
-            }}
+            textAnchor="middle"
+            fontSize={this.props.fontSize}
             fill={this.props.liquidNumber.fill}
@@ -214,3 +221,3 @@ stroke={this.props.liquidNumber.stroke}
             <tspan className="value">{this.props.value}</tspan>
-            <tspan fontSize="3rem">%</tspan>
+            <tspan fontSize={this.props.smallFontSize}>%</tspan>
           </text>
@@ -217,0 +224,0 @@ </g>

No alert changes

Improved metrics

Total package byte prevSize

33031

increased by2.71%

Lines of code

823

increased by1.6%

Number of lines in readme file

90

increased by5.88%

No dependency changes