react-liquidchart - npm Package Compare versions

Comparing version 0.2.11 to 0.2.12

__test__/Liquid.test.jsx

@@ -88,3 +88,4 @@ import React from 'react';
   it('should animate if either ease or time is set', (done) => {
-    const spy = sinon.spy(Liquid.prototype, 'animateValue')
+    const spy = sinon.spy(Liquid.prototype, 'animateValue');
+
     const wrapper = mount(
@@ -91,0 +92,0 @@ <Liquid

dist/Chart/Clip.js

@@ -16,8 +16,12 @@ 'use strict';
   return _react2.default.createElement(
-    'defs',
-    null,
+    'g',
+    { transform: 'translate(40,0)' },
     _react2.default.createElement(
-      'clipPath',
-      { id: clipId },
-      _react2.default.createElement('path', null)
+      'defs',
+      null,
+      _react2.default.createElement(
+        'clipPath',
+        { id: clipId },
+        _react2.default.createElement('path', null)
+      )
     )
@@ -24,0 +28,0 @@ );

dist/Chart/Liquid.js

@@ -133,2 +133,5 @@ 'use strict';
 
+      // The waves movement
+
+
       var _dh$getBackAndForth = dh.getBackAndForth(),
@@ -139,3 +142,5 @@ forthAmplitude = _dh$getBackAndForth.forthAmplitude,
           backFrequency = _dh$getBackAndForth.backFrequency;
+      // get the tspan nodes
 
+
       var textValue = container.selectAll('.' + ch.TEXT_VALUE);
@@ -185,5 +190,5 @@ var textDecimal = container.selectAll('.' + ch.TEXT_DECIMAL);
           var value = (0, _numbers.round)(val);
-          var sp = (0, _numbers.splitNumber)(value, _this2.props.deliminator);
+          var sp = (0, _numbers.splitNumber)(value);
           textValue.text(sp.number);
-          textDecimal.text('.' + sp.fraction);
+          textDecimal.text('' + sp.deliminator + sp.fraction);
         };
@@ -190,0 +195,0 @@

dist/Chart/LiquidChart.js

@@ -84,3 +84,2 @@ 'use strict';
         _react2.default.createElement(_Text2.default, {
-          deliminator: props.deliminator,
           postfix: props.postfix,
@@ -87,0 +86,0 @@ showDecimal: props.showDecimal,

dist/Chart/Text.js

@@ -24,3 +24,3 @@ 'use strict';
     'g',
-    null,
+    { className: ch.TEXT },
     _react2.default.createElement(
@@ -27,0 +27,0 @@ 'text',

dist/Helpers/dimensions.js

@@ -17,2 +17,4 @@ 'use strict';
       height = _ref.height,
+      innerBound = _ref.innerBound,
+      liquidMargin = _ref.liquidMargin,
       _ref$chartMargin = _ref.chartMargin,
@@ -24,3 +26,4 @@ chartMargin = _ref$chartMargin === undefined ? 0 : _ref$chartMargin;
   var radius = Math.min(cx, cy);
-  return { cx: cx, cy: cy, radius: radius };
+  var inner = radius * (innerBound - liquidMargin);
+  return { cx: cx, cy: cy, radius: radius, inner: inner };
 };
@@ -47,4 +50,5 @@
   var r = radius * (props.innerBound - props.liquidMargin);
+  var xR = radius * props.outerBound;
   var rx = radius * props.outerBound;
-  var x = (0, _d3Scale.scaleLinear)().range([-rx, rx]).domain([0, _constants.SAMPLING]);
+  var x = (0, _d3Scale.scaleLinear)().range([-xR, xR]).domain([0, _constants.SAMPLING]);
   var y = (0, _d3Scale.scaleLinear)().range([r, -r]).domain([0, 100]);
@@ -51,0 +55,0 @@ return { x: x, y: y, r: r };

examples/index.jsx

@@ -41,2 +41,3 @@ import React, { Component } from 'react';
             animationWavesTime={2250}
+            deliminator="~"
             showDecimal
@@ -51,3 +52,8 @@ gradient={{
             postfix="%"
-            legendFontSize={0.1}
+            fontSizes={{
+              legend: 0.12,
+              value: 0.6,
+              decimal: 0.2,
+              percentage: 0.15,
+            }}
           />
@@ -54,0 +60,0 @@ </div>

package.json

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

readme.md

@@ -7,2 +7,4 @@ ## React-liquidchart
 
+There is also another really nice version [here](https://github.com/trendmicro-frontend/react-liquid-gauge)
+
 ### Install from NPM
@@ -14,6 +16,6 @@ ```sh
 ### Example
-For now, [this](https://arnthor3.github.io/arnthor3/liquid.html) will have to do.
+For now, [this will have to do](https://arnthor3.github.io/arnthor3/liquid.html).
 
+
 ### Usage
-
 ``` js
@@ -24,2 +26,8 @@ import React, { Component } from 'react';
 
+const stops = [
+  <stop key={1} stopColor="someColor1" offset="5%" />
+  <stop key={2} stopColor="someColor2" offset="50%" />,
+  <stop key={3} stopColor="someColor3" offset="85%" />,
+];
+
 class ChartLiquid extends Component {
@@ -53,2 +61,3 @@ constructor() {
               y2: 0,
+              stops,
             }}
@@ -71,3 +80,3 @@ postfix="%"
 responsive|bool|*true*|If set to true then the element will fill out into parent container, and resize on window dimension change
-Value|number|*65*|The value, tops at 100 and 0 is the minimum
+Value|number|*0*|The value, tops at 100 and 0 is the minimum
 animationWavesTime|number|*null*|The speed of the wave animation, going back and forth
@@ -84,8 +93,40 @@ animationTime|number|*2000*| milliseconds for animation when updating value
 liquidStyle|shape|*{ fill: 'rgb(23, 139, 202)'}*| The style of the liquid, fill and stroke
-dryStyle|shape|*{fill: 'rgb(164, 219, 248)'}*| The style of the number that is in the liquid, fill and stroke
-wetStyle|shape|*{fill: 'rgb(4, 86, 129)'}*| The style of the number that is not in the liquid, fill and stroke
+dryStyle|shape|*{fill: 'rgb(164, 219, 248)'}*| The style of the number that is not in the liquid, fill and stroke
+wetStyle|shape|*{fill: 'rgb(4, 86, 129)'}*| The style of the number that is in the liquid, fill and stroke
 fontSizes|shape|| The sizes of the fonts in ratio to the radius.
+showDecimal|bool|*false*| If this is set then the decimal place is shown
+postfix|string|*null*|The symbol that goes in the last tspan placeholder
 
+#### Animation
+There are two kinds of animation, the value animation and the back and forth animation.
+To set the animation you only need to set either the animationTime or the animationEase for value transitions.
+To set the back and forth animation you need to set the animationWavesTime prop.
+
+#### fontSizes
+Sets the fontsize of the tspans.
+The values are fractions of the radius.
+
+```js
+const fontSize = {
+  value: 0.6,
+  decimal: 0.3,
+  postfix: 0.1,
+  legend: 0.1,
+};
+```
+
+#### CSS
+
+You can add your own css to the component by targeting the classes that are set.
+
+For an example if I would like to change the font type and the positioning I could do something like this
+```css
+  .liquid-text {
+    transform: translate(0, 40px);
+    font-family: Roboto;
+  }
+```
+
 #### Licence
-This software was available initially under the BSD-2-Clause and it still is.
-Please see the original and put a github like on it at https://gist.github.com/brattonc/5e5ce9beee483220e2f6
+This software was available initially under the BSD-2-Clause.
+The changes are also available under the BSD-2-Clause.

src/Chart/Clip.jsx

 import React, { PropTypes } from 'react';
 
 const Clip = ({ clipId }) => (
-  <defs>
+  <g transform={`translate(40,0)`}>
+    <defs>
     <clipPath id={clipId}>
@@ -9,2 +10,4 @@ <path />
   </defs>
+  </g>
+
 );
@@ -11,0 +14,0 @@

src/Chart/Liquid.jsx

@@ -96,4 +96,5 @@ import React, { Component, PropTypes } from 'react';
 
+    // The waves movement
     const { forthAmplitude, backAmplitude, forthFrequency, backFrequency } = dh.getBackAndForth();
-
+    // get the tspan nodes
     const textValue = container.selectAll(`.${ch.TEXT_VALUE}`);
@@ -158,5 +159,5 @@ const textDecimal = container.selectAll(`.${ch.TEXT_DECIMAL}`);
           const value = round(val);
-          const sp = splitNumber(value, this.props.deliminator);
+          const sp = splitNumber(value);
           textValue.text(sp.number);
-          textDecimal.text(`.${sp.fraction}`);
+          textDecimal.text(`${sp.deliminator}${sp.fraction}`);
         };
@@ -163,0 +164,0 @@

src/Chart/LiquidChart.jsx

@@ -41,3 +41,2 @@ import React, { PropTypes } from 'react';
         <Text
-          deliminator={props.deliminator}
           postfix={props.postfix}
@@ -44,0 +43,0 @@ showDecimal={props.showDecimal}

src/Chart/Shape.jsx

@@ -43,4 +43,4 @@ import React, { PropTypes } from 'react';
   dryStyle: {},
-}
+};
 
 export default Shape;

src/Chart/Text.jsx

@@ -5,3 +5,3 @@ import React, { PropTypes } from 'react';
 const LiquidText = props => (
-  <g>
+  <g className={ch.TEXT}>
     <text {...props.style} textAnchor="middle">
@@ -8,0 +8,0 @@ <tspan

src/Helpers/dimensions.js

@@ -5,7 +5,8 @@ import { arc, area } from 'd3-shape';
 
-export const getDimensions = ({ width, height, chartMargin = 0 }) => {
+export const getDimensions = ({ width, height, innerBound, liquidMargin, chartMargin = 0 }) => {
   const cx = (width - (chartMargin / 2)) / 2;
   const cy = (height - (chartMargin / 2)) / 2;
   const radius = Math.min(cx, cy);
-  return { cx, cy, radius };
+  const inner = radius * (innerBound - liquidMargin);
+  return { cx, cy, radius, inner };
 };
@@ -32,4 +33,5 @@
   const r = radius * (props.innerBound - props.liquidMargin);
+  const xR = radius * (props.outerBound);
   const rx = radius * (props.outerBound);
-  const x = scaleLinear().range([-rx, rx]).domain([0, SAMPLING]);
+  const x = scaleLinear().range([-xR, xR]).domain([0, SAMPLING]);
   const y = scaleLinear().range([r, -r]).domain([0, 100]);
@@ -36,0 +38,0 @@ return { x, y, r };

No alert changes

Improved metrics

Total package byte prevSize

66538

increased by2.81%

Lines of code

1650

increased by1.23%

Number of lines in readme file

127

increased by47.67%

No dependency changes