pie-chart-react - npm Package Compare versions

Comparing version 1.2.2 to 1.3.0

.eslintrc

+{
+  "root": false,
+  "extends": [
+    "plugin:ivs/browser-stage2",
+    "plugin:react/recommended"
+  ],
+  "rules": {
+    "no-console" : 0,
+    "react/prop-types" : "off",
+    "react/react-in-jsx-scope": "off"
+  }
+}

index.js

@@ -1,111 +0,54 @@
-var React = require('react')
-var   ReactDOM = require('react-dom');
+const React = require('react');
 
-
 function getAnglePoint(startAngle, endAngle, radius, x, y) {
-  var x1, y1, x2, y2;
+  var x1 = x + radius * Math.cos(Math.PI * startAngle / 180);
+  var y1 = y + radius * Math.sin(Math.PI * startAngle / 180);
+  var x2 = x + radius * Math.cos(Math.PI * endAngle / 180);
+  var y2 = y + radius * Math.sin(Math.PI * endAngle / 180);
 
-  x1 = x + radius * Math.cos(Math.PI * startAngle / 180);
-  y1 = y + radius * Math.sin(Math.PI * startAngle / 180);
-  x2 = x + radius * Math.cos(Math.PI * endAngle / 180);
-  y2 = y + radius * Math.sin(Math.PI * endAngle / 180);
-
-  return { x1, y1, x2, y2 };
+  return {x1, y1, x2, y2};
 }
 
-function getRandomInt(min, max) {
+/*function getRandomInt(min, max) {
   return Math.floor(Math.random() * (max - min)) + min;
-}
+}*/
 
-module.exports= React.createClass({
+class Slice {
 
-  render: function () {
-    var colors = this.props.colors,
-      colorsLength = colors.length,
-      labels = this.props.labels,
-      hole = this.props.hole,
-      radius = this.props.radius,
-      diameter = radius * 2,
-      self = this,
-      sum, startAngle, d = null;
+  constructor() {
+    this.state = {path : '', x : 0, y : 0};
+  }
 
-    sum = this.props.data.reduce(function (carry, current) { return carry + current }, 0);
-    startAngle = 0;
+  componentWillReceiveProps() {
+    this.setState({ path : '' });
+    this.animate();
+  }
 
-
-    return (
-      <svg width={ diameter } height={ diameter } viewBox={ '0 0 ' + diameter + ' ' + diameter } xmlns="http://www.w3.org/2000/svg" version="1.1">
-        { this.props.data.map(function (slice, sliceIndex) {
-          var angle, nextAngle, percent;
-
-          nextAngle = startAngle;
-          angle = (slice / sum) * 360;
-          percent = (slice / sum) * 100;
-          startAngle += angle;
-
-          return <Slice
-            animate = {self.props.animate}
-            key={ sliceIndex }
-            value={ slice }
-            percent={ self.props.percent }
-            percentValue={ percent.toFixed(1) }
-            startAngle={ nextAngle }
-            angle={ angle }
-            radius={ radius }
-            hole={ radius - hole }
-            trueHole={ hole }
-            showLabel= { labels }
-            fill={ colors[sliceIndex % colorsLength] }
-            stroke={ self.props.stroke }
-            strokeWidth={ self.props.strokeWidth }
-          />
-        }) }
-
-      </svg>
-    );
+  componentDidMount() {
+    this.animate();
   }
-});
 
-var Slice = React.createClass({
-  getInitialState: function () {
-    return {
-      path: '',
-      x: 0,
-      y: 0
-    };
-  },
-  componentWillReceiveProps: function () {
-    this.setState({ path: '' });
-    this.animate();
-  },
-  componentDidMount: function () {
-    this.animate();
-  },
-  animate: function () {
+  animate() {
     this.draw(0);
-  },
-  draw: function (s) {
-    if (!this.isMounted()) {
-      return;
-    }
+  }
 
-    var p = this.props, path = [], a, b, c, self = this, step;
+  draw(s) {
+    var p = this.props;
+    var path = [];
+    var step = p.angle / (37.5 / 2);
 
-    step = p.angle / (37.5 / 2);
+    if(s + step > p.angle)
+      s = p.angle;
 
-    if (s + step > p.angle) {
+    if(!p.animate)
       s = p.angle;
-    }
-    
-    if(!p.animate)
-      s = p.angle
 
     // Get angle points
-    a = getAnglePoint(p.startAngle, p.startAngle + s, p.radius, p.radius, p.radius);
-    b = getAnglePoint(p.startAngle, p.startAngle + s, p.radius - p.hole, p.radius, p.radius);
+    var a = getAnglePoint(p.startAngle, p.startAngle + s, p.radius, p.radius, p.radius);
+    var b = getAnglePoint(p.startAngle, p.startAngle + s, p.radius - p.hole, p.radius, p.radius);
 
     path.push('M' + a.x1 + ',' + a.y1);
-    path.push('A'+ p.radius +','+ p.radius +' 0 '+ (s > 180 ? 1 : 0) +',1 '+ a.x2 + ',' + a.y2);
+    path.push('A' + p.radius + ',' + p.radius + ' 0 ' + (s > 180 ? 1 : 0) + ',1 ' + a.x2 + ',' + a.y2);
     path.push('L' + b.x2 + ',' + b.y2);
-    path.push('A'+ (p.radius- p.hole) +','+ (p.radius- p.hole) +' 0 '+ (s > 180 ? 1 : 0) +',0 '+ b.x1 + ',' + b.y1);
+    path.push('A' + (p.radius - p.hole) + ',' + (p.radius - p.hole) + ' 0 ' + (s > 180 ? 1 : 0) + ',0 ' + b.x1 + ',' + b.y1);
 
@@ -115,16 +58,16 @@ // Close
 
-    this.setState({ path: path.join(' ') });
+    this.setState({path : path.join(' ')});
 
-    if (s < p.angle) {
-      setTimeout(function () { self.draw(s + step) } , 16);
-    } else if (p.showLabel) {
-      c = getAnglePoint(p.startAngle, p.startAngle + (p.angle / 2), (p.radius / 2 + p.trueHole / 2), p.radius, p.radius);
-
+    if(s < p.angle) {
+      setTimeout(() => { this.draw(s + step); }, 16);
+    } else if(p.showLabel) {
+      var c = getAnglePoint(p.startAngle, p.startAngle + (p.angle / 2), (p.radius / 2 + p.trueHole / 2), p.radius, p.radius);
       this.setState({
-        x: c.x2,
-        y: c.y2
+        x : c.x2,
+        y : c.y2
       });
     }
-  },
-  render: function () {
+  }
+
+  render() {
     return (
@@ -146,3 +89,38 @@ <g overflow="hidden">
   }
-})
 
+}
+
+const Pie = ({colors, labels, hole, radius, data, animate, percent, stroke, strokeWidth}) => {
+  var colorsLength = colors.length;
+  var diameter = radius * 2;
+  var sum = data.reduce((carry, current) => carry + current, 0);
+  var startAngle = 0;
+  return (
+    <svg width={diameter} height={diameter} viewBox={'0 0 ' + diameter + ' ' + diameter} xmlns="http://www.w3.org/2000/svg" version="1.1">
+      { data.map((slice, sliceIndex) => {
+        var nextAngle = startAngle;
+        var angle = (slice / sum) * 360;
+        var _percent = (slice / sum) * 100;
+        startAngle += angle;
+        return <Slice
+          animate = {animate}
+          key={ sliceIndex }
+          value={ slice }
+          percent={ percent }
+          percentValue={ _percent.toFixed(1) }
+          startAngle={ nextAngle }
+          angle={ angle }
+          radius={ radius }
+          hole={ radius - hole }
+          trueHole={ hole }
+          showLabel= { labels }
+          fill={ colors[sliceIndex % colorsLength] }
+          stroke={ stroke }
+          strokeWidth={ strokeWidth }
+        />;
+      })}
+    </svg>
+  );
+};
+
+module.exports = Pie;

package.json

 {
   "name": "pie-chart-react",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "main": "index.js",
   "license": "ISC",
+  "scripts": {
+    "eslint": "eslint index.js",
+    "test": "npm run eslint",
+    "mocha": "mocha -b"
+  },
   "peerDependencies": {
-    "react": "^15.3.2",
-    "react-dom": "^15.3.2"
+    "react": "^16.5.2",
+    "react-dom": "^16.5.2"
+  },
+  "devDependencies": {
+    "eslint-plugin-ivs": "^2.1.0",
+    "eslint-plugin-react": "^7.12.3"
   }
 }

exemple/index.js

-var React = require('react')
-var   ReactDOM = require('react-dom');
-var Pie = require('./')
-
-
-var App = React.createClass({
-  getInitialState: function () {
-    return {
-      data: [5, 12, 8]
-    }
-  },
-  componentDidMount: function () {
-
-  },
-  render: function () {
-    var colors = ['#43A19E', '#7B43A1', '#F2317A'];
-
-    return (
-      <div>
-        <Pie
-          data={ this.state.data }
-          radius={ 150 }
-          hole={ 10 }
-          colors={ colors }
-          labels={ true }
-          percent={ true }
-          strokeWidth={ 3 }
-          stroke={ '#fff' }
-          animate={true}
-        />
-
-      </div>
-    );
-  }
-});
-
-ReactDOM.render(<App />, document.getElementById('content'));

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Worsened metrics

Total package byte prevSize

4138

-16.17%

Dev dependency count

2

Infinity%

Lines of code

104

-31.13%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes