react-gear-chart - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

package.json

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

README.md

@@ -37,3 +37,3 @@ # A Gear-style Chart Component for React
 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 [Strip](#ToothOption)
 margin | `number` | 0 | Default angle between teeth.
@@ -40,0 +40,0 @@ mode | `string` |

src/components/GearListChart.js

@@ -82,7 +82,9 @@ // @flow
   motionWillEnter = () => {
-    if (this.props.clockwiseAnimate) {
-      return { offsetAngle: -this.totalAnagle() }
-    } else {
-      return { offsetAngle: this.totalAnagle() }
+    let { clockwiseAnimate } = this.props
+    let totalAnagle = this.totalAnagle()
+    let style = {
+      offsetAngle: clockwiseAnimate ? -totalAnagle : totalAnagle, 
+      opacity: 0
     }
+    return style
   }
@@ -93,7 +95,8 @@
     let { clockwiseAnimate, motionConfig } = this.props
-    if (clockwiseAnimate) {
-      return { offsetAngle: spring(this.totalAnagle(), motionConfig)}
-    } else {
-      return { offsetAngle: spring(-this.totalAnagle(), motionConfig)}
+    let totalAnagle = this.totalAnagle()
+    let style = {
+      offsetAngle: spring(clockwiseAnimate ? totalAnagle : -totalAnagle, motionConfig), 
+      opacity: spring(0, { stiffness: 80 })
     }
+    return style
   }
@@ -147,3 +150,4 @@
               style: {
-                offsetAngle: this.totalAnagle() * (clockwiseAnimate ? -1 : 1)
+                offsetAngle: this.totalAnagle() * (clockwiseAnimate ? -1 : 1),
+                opacity: 0
               }
@@ -155,3 +159,4 @@ }))}
               style: {
-                offsetAngle: spring(0, motionConfig)
+                offsetAngle: spring(0, motionConfig),
+                opacity: spring(1)
               }
@@ -169,3 +174,3 @@ }))}
                         <Tooth
-                          style={onClick && {cursor:'pointer'}}
+                          style={{ cursor: onClick ? 'pointer': 'inherit', opacity: conf.style.opacity }}
                           startAngle={start}
@@ -172,0 +177,0 @@ endAngle={end}

src/components/Tooth.js

@@ -48,6 +48,7 @@ // @flow
   _renderRadialLabel() {
-    let { startAngle, innerRadius, label, cx, cy, offsetAngle, labelMargin } = this.props
+    let { startAngle, innerRadius, label, cx, cy, offsetAngle, labelMargin, style } = this.props
     let centerlineAngle = startAngle + offsetAngle + this.toothAngle() / 2
     let { x, y, textAnchor, rotate } = RadialText(innerRadius + labelMargin , centerlineAngle, cx, cy)
     return (<text
+      style={style}
       className="tooth-label"
@@ -54,0 +55,0 @@ ref="label"

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

2656751

increased by0.01%

Lines of code

2246

increased by0.27%

No dependency changes