react-liquidchart - npm Package Compare versions

Comparing version 0.1.13 to 0.1.14

dist/Chart/Gradient.js

@@ -24,15 +24,15 @@ 'use strict';
       y2 = _ref.y2,
-      gradient = _ref.gradient,
       children = _ref.children,
-      fill = _ref.fill;
+      fill = _ref.fill,
+      gradient = _ref.gradient;
 
-  var rendered = children;
+  var stops = children;
   if (!children || children.length === 0) {
     var col = d3Color.color(fill);
-    rendered = [_react2.default.createElement('stop', { key: 0, stopColor: col.darker(1), offset: '0%' }), _react2.default.createElement('stop', { key: 1, stopColor: col.darker(0.5), offset: '25%' }), _react2.default.createElement('stop', { key: 2, stopColor: fill, offset: '50%' }), _react2.default.createElement('stop', { key: 3, stopColor: col.brighter(0.5), offset: '65%' }), _react2.default.createElement('stop', { key: 4, stopColor: col.brighter(1), offset: '100%' })];
+    stops = [_react2.default.createElement('stop', { key: 0, stopColor: col.darker(1), offset: '0%' }), _react2.default.createElement('stop', { key: 1, stopColor: col.darker(0.5), offset: '25%' }), _react2.default.createElement('stop', { key: 2, stopColor: fill, offset: '40%' }), _react2.default.createElement('stop', { key: 3, stopColor: col.brighter(0.5), offset: '65%' }), _react2.default.createElement('stop', { key: 4, stopColor: col.brighter(1), offset: '100%' })];
   }
-  return _react2.default.createElement(
-    'defs',
-    null,
-    _react2.default.createElement(
+  var gt = void 0;
+  var translate = void 0;
+  if (gradient === 1) {
+    gt = _react2.default.createElement(
       'linearGradient',
@@ -44,5 +44,28 @@ {
         y2: y2,
-        id: gradient
+        id: 'gradient'
       },
-      rendered
+      stops
+    );
+    translate = 'translate(0,0)';
+  } else if (gradient === 2) {
+    gt = _react2.default.createElement(
+      'radialGradient',
+      {
+        cx: '50%',
+        cy: '110%',
+        r: '100%',
+        id: 'gradient'
+      },
+      stops
+    );
+    translate = 'translate(0 -500)';
+  }
+
+  return _react2.default.createElement(
+    'g',
+    { transform: translate, className: 'gradient' },
+    _react2.default.createElement(
+      'defs',
+      null,
+      gt
     )
@@ -57,4 +80,4 @@ );
   y2: _react.PropTypes.string,
-  gradient: _react.PropTypes.string,
   fill: _react.PropTypes.string,
+  gradient: _react.PropTypes.number,
   children: _react.PropTypes.oneOfType([_react.PropTypes.arrayOf(_react.PropTypes.node), _react.PropTypes.node])
@@ -61,0 +84,0 @@ };

dist/Chart/Liquid.js

@@ -58,2 +58,3 @@ 'use strict';
 });
+var sample = 60;
 
@@ -203,3 +204,10 @@ var LiquidChart = function (_Component) {
           var anime = function anime() {
-            _this4.wave.attr('transform', 'translate(0,0)').transition().duration(_this4.props.animationWavesTime).ease(ease.easeLinear).attr('transform', 'translate(' + _this4.liquidRadius + ',0)').on('end', function () {
+            _this4.wave.attr('transform', 'translate(0,0)').transition().duration(_this4.props.animationWavesTime).ease(ease.easeLinear).attrTween('transform', function () {
+              var i = (0, _d3Interpolate.interpolate)(0, _this4.liquidRadius);
+
+              return function (t) {
+                var yex = 3;
+                return 'translate(' + i(t) + ',0)';
+              };
+            }).on('end', function () {
               anime();
@@ -228,3 +236,3 @@ });
       if (this.props.gradient) {
-        fillCircle = 'url(#' + this.props.gradient + ')';
+        fillCircle = 'url(#gradient)';
       }
@@ -244,10 +252,6 @@ return _react2.default.createElement(
             'clipPath',
-            {
-              id: 'clip'
-            },
-            _react2.default.createElement('path', {
-              ref: function ref(c) {
+            { id: 'clip' },
+            _react2.default.createElement('path', { ref: function ref(c) {
                 _this5.clipPath = c;
-              }
-            })
+              } })
           )
@@ -328,4 +332,4 @@ ),
   animateWaves: _react.PropTypes.bool,
-  // if this string has value then the gradient will be set
-  gradient: _react.PropTypes.bool
+  // 1 for linear 2 for radial
+  gradient: _react.PropTypes.number
 };
@@ -332,0 +336,0 @@ LiquidChart.defaultProps = {

examples/index.jsx

@@ -30,3 +30,3 @@ import React, { Component } from 'react';
           responsive
-          gradient="liquid"
+          gradient={2}
         >
@@ -33,0 +33,0 @@ <Liquid

package.json

 {
   "name": "react-liquidchart",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "description": "A Reusable liquid chart made with d3 and react",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

readme.md

@@ -121,3 +121,3 @@ ## React-liquidchart
 height|number|*none*| sets the height of the component, the same applies here to the responsive prop.
-gradient|string|*null*|If you want a more watery liquid you can add a lineargradient but you have to set this value to a string variable and also add the component
+gradient|number|*null*| sets a gradient on the chart 1 is for linear 2 is for radial, you can plug in stop children in the Gradient component if you want to customize the colors, by default this takes the liquid fill and creates a small color scale around that.
 ### Liquid
@@ -151,3 +151,3 @@ This is the main element that renders all the visable elements in the chart along with one defs for the clipPath.
 
-But by default it uses shades of the liquid.fill color to create a ultra simple gradient.
+But by default it uses shades of the liquid.fill color to create a simple gradient.
 
@@ -159,7 +159,7 @@ ### Gradient PropTypes
 x2|number|*0*|The X end coordinate
-y1|number|*100*|The Y start coordinate, remember it starts on the bottom :)
+y1|number|*100*|The Y start coordinate, remember it starts on the bottom
 y2|number|*0*|The Y end coordinate
 #### Example
 ```js
- // Create a Gradient effect coing from bottom left to top right
+ // Create a Gradient effect going from the bottom left to the top right part of the liquid area
  <Gradient
@@ -190,3 +190,1 @@ x1={0}
 Please see the original and put a github like on it at https://gist.github.com/brattonc/5e5ce9beee483220e2f6
-
[e-mail]

src/Chart/Gradient.jsx

 import React, { Component, PropTypes } from 'react';
 import * as d3Color from 'd3-color';
 
-const Defs = ({ x1, x2, y1, y2, gradient, children, fill }) => {
-  let rendered = children;
+const Defs = ({ x1, x2, y1, y2, children, fill, gradient }) => {
+  let stops = children;
   if (!children || children.length === 0) {
     const col = d3Color.color(fill);
-    rendered = [
+    stops = [
       <stop key={0} stopColor={col.darker(1)} offset="0%" />,
       <stop key={1} stopColor={col.darker(0.5)} offset="25%" />,
-      <stop key={2} stopColor={fill} offset="50%" />,
+      <stop key={2} stopColor={fill} offset="40%" />,
       <stop key={3} stopColor={col.brighter(0.5)} offset="65%" />,
@@ -16,4 +16,6 @@ <stop key={4} stopColor={col.brighter(1)} offset="100%" />,
   }
-  return (
-    <defs>
+  let gt;
+  let translate;
+  if (gradient === 1) {
+    gt = (
       <linearGradient
@@ -24,7 +26,28 @@ x1={x1}
         y2={y2}
-        id={gradient}
+        id="gradient"
       >
-        {rendered}
+        {stops}
       </linearGradient>
-    </defs>
+    );
+    translate = 'translate(0,0)';
+  } else if (gradient === 2) {
+    gt = (
+      <radialGradient
+        cx="50%"
+        cy="110%"
+        r="100%"
+        id="gradient"
+      >
+        {stops}
+      </radialGradient>
+    );
+    translate = 'translate(0 -500)';
+  }
+
+  return (
+    <g transform={translate} className="gradient">
+      <defs>
+        {gt}
+      </defs>
+    </g>
   );
@@ -38,4 +61,4 @@ };
   y2: PropTypes.string,
-  gradient: PropTypes.string,
   fill: PropTypes.string,
+  gradient: PropTypes.number,
   children: PropTypes.oneOfType([
@@ -42,0 +65,0 @@ PropTypes.arrayOf(PropTypes.node),

src/Chart/Liquid.jsx

@@ -20,3 +20,3 @@ import React, { Component, PropTypes } from 'react';
 });
-
+const sample = 60;
 export default class LiquidChart extends Component {
@@ -65,4 +65,4 @@ static propTypes = {
     animateWaves: PropTypes.bool,
-    // if this string has value then the gradient will be set
-    gradient: PropTypes.bool,
+    // 1 for linear 2 for radial
+    gradient: PropTypes.number,
   }
@@ -226,3 +226,10 @@
           .ease(ease.easeLinear)
-          .attr('transform', `translate(${this.liquidRadius},0)`)
+          .attrTween('transform', () => {
+            const i = interpolate(0, this.liquidRadius);
+
+            return (t) => {
+              const yex = 3;
+              return `translate(${i(t)},0)`;
+            };
+          })
           .on('end', () => {
@@ -252,3 +259,3 @@ anime();
     if (this.props.gradient) {
-      fillCircle = `url(#${this.props.gradient})`;
+      fillCircle = 'url(#gradient)';
     }
@@ -261,8 +268,4 @@ return (
         <defs>
-          <clipPath
-            id="clip"
-          >
-            <path
-              ref={(c) => { this.clipPath = c; }}
-            />
+          <clipPath id="clip">
+            <path ref={(c) => { this.clipPath = c; }} />
           </clipPath>
@@ -269,0 +272,0 @@ </defs>

No alert changes

Improved metrics

Total package byte prevSize

62245

6.78%

Number of package files

29

3.57%

Lines of code

1491

3.47%

Worsened metrics

Number of lines in readme file

187

-0.53%

No dependency changes