react-liquidchart - npm Package Compare versions

Comparing version 0.0.16 to 0.1.0

dist/Chart/Liquid.js

@@ -31,2 +31,4 @@ 'use strict';
 
+require('d3-transition');
+
 var _ReactIf = require('./ReactIf');
@@ -142,6 +144,10 @@
       }
+
+      if (this.props.animateWaves) {
+        this.animateWave();
+      }
       // the d3 timer goes from from 0 to 1
       var time = (0, _d3Scale.scaleLinear)().range([0, 1]).domain([0, this.props.animationTime]);
+      // if the wave does not have old value then interpolate from 0 to value else old to value
       var interpolateValue = (0, _d3Interpolate.interpolate)(this.wave.node().old || 0, this.props.value);
-      var interpolateWave = (0, _d3Interpolate.interpolate)(0, this.liquidRadius);
 
@@ -161,7 +167,2 @@ // start animation
         _this3.wave.attr('d', val(_this3.arr));
-        // If we are making waves then set the easing and move the path
-        if (_this3.props.animateWaves) {
-          var animateWave = ease.easeSinInOut(time(t));
-          _this3.wave.attr('transform', 'translate(' + interpolateWave(animateWave) + ',0)');
-        }
         // the transition has ended
@@ -176,10 +177,4 @@ if (t >= _this3.props.animationTime) {
           });
-
           _this3.text.text(Math.round(interpolateValue(1)));
-
           _this3.wave.attr('d', val(_this3.arr));
-          // do the same if we are animating waves
-          if (_this3.props.animateWaves) {
-            _this3.wave.attr('transform', 'translate(' + interpolateWave(1) + ',0)');
-          }
           // if the onEnd prop is set then call the function
@@ -192,9 +187,21 @@ if (_this3.props.onEnd !== undefined) {
       // Store the old node value so that we can animate from
-      // that point
+      // that point again
       this.wave.node().old = this.props.value;
     }
+    // animate the wave from 0 to liquidRadius repeat
+    // not perfect..
+
   }, {
+    key: 'animateWave',
+    value: function animateWave() {
+      var _this4 = this;
+
+      this.wave.attr('transform', 'translate(0,0)').transition().duration(2000).ease(ease.easeLinear).attr('transform', 'translate(' + this.liquidRadius + ',0)').on('end', function () {
+        _this4.animateWave();
+      });
+    }
+  }, {
     key: 'render',
     value: function render() {
-      var _this4 = this;
+      var _this5 = this;
 
@@ -219,3 +226,3 @@ this.radius = Math.min(this.props.height / 2, this.props.width / 2);
           ref: function ref(c) {
-            _this4.container = c;
+            _this5.container = c;
           }
@@ -233,3 +240,3 @@ },
               ref: function ref(c) {
-                _this4.clipPath = c;
+                _this5.clipPath = c;
               }
@@ -260,3 +267,3 @@ })
           onClick: function onClick() {
-            _this4.props.onClick();
+            _this5.props.onClick();
           }
@@ -263,0 +270,0 @@ })

dist/index.js

@@ -22,4 +22,13 @@ 'use strict';
 
+var LiquidChart = function LiquidChart(props) {
+  return React.createElement(
+    _Chart2.default,
+    props,
+    React.createElement(_Liquid2.default, props),
+    React.createElement(_Gradient2.default, props)
+  );
+};
+
 exports.Chart = _Chart2.default;
 exports.Liquid = _Liquid2.default;
 exports.Gradient = _Gradient2.default;

package.json

 {
   "name": "react-liquidchart",
-  "version": "0.0.16",
+  "version": "0.1.0",
   "description": "A Reusable liquid chart made with d3 and react",
@@ -55,2 +55,3 @@ "main": "dist/index.js",
     "d3-timer": "^1.0.3",
+    "d3-transition": "^1.0.3",
     "lodash.throttle": "^4.1.1",
@@ -57,0 +58,0 @@ "react": "^15.4.1",

readme.md

@@ -49,8 +49,3 @@ # React-Liquidchart
           />
-          <Gradient>
-            <stop stopColor="someColor" offset="somepercentage%"/>
-            <stop stopColor="someColor" offset="somepercentage%"/>
-            <stop stopColor="someColor" offset="somepercentage%"/>
-            <stop stopColor="someColor" offset="somepercentage%"/>
-          </Gradient>
+          <Gradient />
         </Chart>
@@ -71,5 +66,5 @@ </div>
 Makes the chart listen to changes in screen size and resize the chart on screen resize
-##### gradient : string
-If liquid is gradient then set the string to something, it's used to set the fill
-### Liqiud
+##### gradient : boolean
+If gradient then the liquid will take the values in the Gradient element
+### Liquid
 The Liquid Component has all the visable Components
@@ -101,3 +96,3 @@ #### Liquid PropTypes
 ##### waveScaleLimit : bool
-scaling the wave when it´s close to 0 or 100 so the area does not appear empty at those values
+scaling the wave when it´s close to 0 or 100 so the area does not appear empty or full at those values
 ##### fontSize : string
@@ -107,5 +102,5 @@ The font size attribute for the number
 font size for the percentage sign
-### Gradient
+### gradient
 The Gradient is just a thin wrapper for linearGradient it takes in stop children,
-if none are set it makes a gradient out of the shades of the liquid.fill proptype
+if none are set it makes a gradient out of different shades of the liquid.fill proptype
 
@@ -112,0 +107,0 @@ ## Development

src/Chart/Liquid.jsx

@@ -9,2 +9,3 @@ import React, { Component, PropTypes } from 'react';
 import * as d3Color from 'd3-color';
+import 'd3-transition';
 import ReactIf from './ReactIf';
@@ -163,6 +164,10 @@ import Text from './Text';
     }
+
+    if (this.props.animateWaves) {
+      this.animateWave();
+    }
     // the d3 timer goes from from 0 to 1
     const time = scaleLinear().range([0, 1]).domain([0, this.props.animationTime]);
+    // if the wave does not have old value then interpolate from 0 to value else old to value
     const interpolateValue = interpolate(this.wave.node().old || 0, this.props.value);
-    const interpolateWave = interpolate(0, this.liquidRadius);
 
@@ -182,7 +187,2 @@ // start animation
       this.wave.attr('d', val(this.arr));
-      // If we are making waves then set the easing and move the path
-      if (this.props.animateWaves) {
-        const animateWave = ease.easeSinInOut(time(t));
-        this.wave.attr('transform', `translate(${interpolateWave(animateWave)},0)`);
-      }
       // the transition has ended
@@ -197,10 +197,4 @@ if (t >= this.props.animationTime) {
           + interpolateValue(1)));
-
         this.text.text(Math.round(interpolateValue(1)));
-
         this.wave.attr('d', val(this.arr));
-        // do the same if we are animating waves
-        if (this.props.animateWaves) {
-          this.wave.attr('transform', `translate(${interpolateWave(1)},0)`);
-        }
         // if the onEnd prop is set then call the function
@@ -213,5 +207,18 @@ if (this.props.onEnd !== undefined) {
     // Store the old node value so that we can animate from
-    // that point
+    // that point again
     this.wave.node().old = this.props.value;
   }
+  // animate the wave from 0 to liquidRadius repeat
+  // not perfect..
+  animateWave() {
+    this.wave
+      .attr('transform', 'translate(0,0)')
+      .transition()
+      .duration(2000)
+      .ease(ease.easeLinear)
+      .attr('transform', `translate(${this.liquidRadius},0)`)
+      .on('end', () => {
+        this.animateWave();
+      });
+  }
 
@@ -218,0 +225,0 @@ render() {

src/index.jsx

@@ -5,2 +5,9 @@ import Chart from './Chart/Chart';
 
+const LiquidChart = props => (
+  <Chart {...props}>
+    <Liquid {...props} />
+    <Gradient {...props} />
+  </Chart>
+);
+
 export { Chart, Liquid, Gradient };

No alert changes

Improved metrics

Total package byte prevSize

49656

increased by0.37%

Lines of code

1239

increased by2.23%

Worsened metrics

Dependency count

11

increased by10%

Number of lines in readme file

117

decreased by-4.1%

Dependency changes

• + Addedd3-transition@^1.0.3

• + Addedd3-dispatch@1.0.6(transitive)

• + Addedd3-transition@1.3.2(transitive)