react-gear-chart - npm Package Compare versions

Comparing version 0.0.9 to 0.0.10

dist/components/GearListChart.js

@@ -176,2 +176,3 @@ 'use strict';
           clockwise = _props2.clockwise,
+          animate = _props2.animate,
           clockwiseAnimate = _props2.clockwiseAnimate,
@@ -187,3 +188,3 @@ motionConfig = _props2.motionConfig,
           onClick = _props2.onClick,
-          restProps = (0, _objectWithoutProperties3.default)(_props2, ['id', 'innerRadius', 'outerRadius', 'items', 'margin', 'limit', 'startAngle', 'endAngle', 'clockwise', 'clockwiseAnimate', 'motionConfig', 'className', 'style', 'extra', 'onMouseMove', 'onMouseEnter', 'onMouseLeave', 'onMouseOver', 'onClick']);
+          restProps = (0, _objectWithoutProperties3.default)(_props2, ['id', 'innerRadius', 'outerRadius', 'items', 'margin', 'limit', 'startAngle', 'endAngle', 'clockwise', 'animate', 'clockwiseAnimate', 'motionConfig', 'className', 'style', 'extra', 'onMouseMove', 'onMouseEnter', 'onMouseLeave', 'onMouseOver', 'onClick']);
 
@@ -227,3 +228,3 @@
               willEnter: this.motionWillEnter,
-              willLeave: this.motionWillLeave,
+              willLeave: animate ? this.motionWillLeave : undefined,
               defaultStyles: items.map(function (item, i) {
@@ -244,3 +245,3 @@ return {
                   style: {
-                    offsetAngle: (0, _reactMotion.spring)(0, motionConfig),
+                    offsetAngle: animate ? (0, _reactMotion.spring)(0, motionConfig) : 0,
                     opacity: 1
@@ -339,2 +340,3 @@ }
   clockwiseAnimate: true,
+  animate: true,
   motionConfig: {}
@@ -341,0 +343,0 @@ };

package.json

 {
   "name": "react-gear-chart",
   "description": "",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "author": "[e-mail]",
@@ -6,0 +6,0 @@ "license": "MIT",

README.md

@@ -5,6 +5,8 @@ # A Gear-style Chart Component for React
 
-[Demo](https://noru.github.io/react-gear-chart/storybook-static/index.html)
+Actively maintained. Welcome to PR/Issue.  🤡👉 [Demo](https://noru.github.io/react-gear-chart/storybook-static/index.html) 👈🤡
 
-## Install
 
+
+## Instal
+
 ```
@@ -38,6 +40,7 @@ npm install react-gear-chart
 outerRadius | `number` | | **Required**. Outer radius of your chart in pixel.
-items | `Array<ToothOption>` | | **Required**. Chart data. See [Strip](#ToothOption)
+items | `Array<ToothOption>` | | **Required**. Chart data. See [ToothOption](#ToothOption)
 margin | `number` | 0 | Default angle between teeth.
 mode | `string` | 
 clockwise | `boolean` | true | The line-up direction of your items(teeth).
+animate | `boolean` | true | In-Out animation on/off. Turn off animation to gain performance.
 clockwiseAnimate | `boolean` | true | Teeth In/out animation direction. 
@@ -44,0 +47,0 @@ motionConfig | `object` | {} | Config for react-motion. See [SpringHelperConfig](https://github.com/chenglou/react-motion#helpers)

src/components/GearListChart.js

@@ -30,2 +30,3 @@ // @flow
   clockwise: boolean, // items line-up direction
+  animate: boolean,
   clockwiseAnimate: boolean,
@@ -129,3 +130,3 @@ motionConfig: object,
     let { id, innerRadius, outerRadius, items, margin, limit, startAngle, endAngle, 
-      clockwise, clockwiseAnimate, motionConfig, className, style, extra,
+      clockwise, animate, clockwiseAnimate, motionConfig, className, style, extra,
       onMouseMove, onMouseEnter, onMouseLeave, onMouseOver, onClick, ...restProps } = this.props
@@ -154,3 +155,3 @@
             willEnter={this.motionWillEnter}
-            willLeave={this.motionWillLeave}
+            willLeave={animate ? this.motionWillLeave : undefined}
             defaultStyles={items.map((item, i) => ({
@@ -168,3 +169,3 @@ key: item.id || String(i),
               style: {
-                offsetAngle: spring(0, motionConfig),
+                offsetAngle: animate ? spring(0, motionConfig) : 0,
                 opacity: 1
@@ -226,2 +227,3 @@ }
   clockwiseAnimate: true,
+  animate: true,
   motionConfig: {},
@@ -228,0 +230,0 @@ }

stories/Demo.js

@@ -28,2 +28,3 @@ /* @flow */
     clockwise: false,
+    animate: true,
     clockwiseAnimate: false,
@@ -50,3 +51,3 @@ showExtra: true,
     let { startAngle, endAngle, outerRadius, innerRadius, margin, amount, items, 
-      clockwise, clockwiseAnimate, showExtra } = this.state
+      animate, clockwise, clockwiseAnimate, showExtra } = this.state
     return (
@@ -92,3 +93,10 @@ <div className="app">
           onChange={this.changeValue} />
+        
         <br/>
+        <label htmlFor="animate-on-off">
+          <input name="animate-on-off" type="checkbox" onChange={() => this.setState({animate: !animate})} checked={animate}/>
+          Animate On
+        </label>
+        <br/>
+
         <label htmlFor="clockwise">
@@ -124,2 +132,3 @@ <input name="clockwise" type="checkbox" onChange={() => this.setState({clockwise: !clockwise})} checked={clockwise}/>
           clockwise={clockwise}
+          animate={animate}
           clockwiseAnimate={clockwiseAnimate}
@@ -126,0 +135,0 @@ items={items}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2664513

increased by0.04%

Lines of code

2312

increased by0.48%

Number of lines in readme file

70

increased by4.48%

No dependency changes