react-gear-chart - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

package.json

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

README.md

@@ -45,2 +45,3 @@ # A Gear-style Chart Component for React
 onMouseMove/Leave/Enter/Over | `function` | | Similar to prop `onClick`
+extra | `React$Element` | | `props` of a tooth is sent to this function and allow you to render whatever you want over the chart. 
 
@@ -47,0 +48,0 @@

src/components/GearListChart.js

@@ -31,3 +31,4 @@ // @flow
   motionConfig: object,
-  items: Array<ToothItem>
+  items: Array<ToothItem>,
+  extra: React$Element
 }
@@ -120,3 +121,3 @@
     let { id, innerRadius, outerRadius, items, margin, limit, startAngle, endAngle, 
-      clockwise, clockwiseAnimate, motionConfig, className, style,
+      clockwise, clockwiseAnimate, motionConfig, className, style, extra,
       onMouseMove, onMouseEnter, onMouseLeave, onMouseOver, onClick, ...restProps } = this.props
@@ -180,2 +181,4 @@
                           innerRadius={innerRadius}
+                          index={i}
+                          data={item}
                           mode={item.mode}
@@ -189,2 +192,3 @@ label={item.label}
                           onClick={onClick && this.mouseEventProxy}
+                          extra={extra}
                         />
@@ -191,0 +195,0 @@ </g>

src/components/Tooth.js

 // @flow
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import { sumBy } from 'lodash-es'
+import { sumBy, clone } from 'lodash-es'
 import AnnulusSector from './AnnulusSector'
@@ -175,3 +175,7 @@ import GLC from './GearListChart'
   render() {
-    let { label, mode } = this.props
+    let { label, mode, style, extra, offsetAngle, clockwiseAnimate } = this.props
+    let props = clone(this.props)
+    let factor = clockwiseAnimate ? -1 : 1
+    props.startAngle += offsetAngle * factor
+    props.endAngle += offsetAngle * factor
     let tooth
@@ -189,5 +193,6 @@ switch (mode) {
     return (
-      <g className="tooth" ref="tooth">
+      <g className="tooth" ref="tooth" style={style}>
         { tooth }
         { label && this._renderLabel() }
+        { extra && extra(props) }
       </g>
@@ -194,0 +199,0 @@ )

stories/Demo.js

@@ -6,3 +6,14 @@ /* @flow */
 import { GenerateTeethData } from '../src/utils/helpers.js'
+import { NormalizeAngleRange, Polar2Cartesian } from '../src/utils/math'
 
+
+const ExtraComponent = props => {
+  let { startAngle, endAngle, innerRadius } = props
+  let [ _startAngle, _endAngle ] = NormalizeAngleRange(startAngle, endAngle)
+  let [x, y] = Polar2Cartesian(innerRadius - 13, (_endAngle + _startAngle) / 2)
+
+  // y-axis has opposite direction in browser
+  return <text x={x} y={-y}>❤️</text>
+}
+
 export default class Demo extends Component {
@@ -19,2 +30,3 @@
     clockwiseAnimate: false,
+    showExtra: true,
     items: null,
@@ -39,3 +51,3 @@ }
     let { startAngle, endAngle, outerRadius, innerRadius, margin, amount, items, 
-      clockwise, clockwiseAnimate } = this.state
+      clockwise, clockwiseAnimate, showExtra } = this.state
     return (
@@ -94,2 +106,8 @@ <div className="app">
 
+        <label htmlFor="extra-component">
+          <input name="extra-component" type="checkbox" onChange={() => this.setState({showExtra: !showExtra})} checked={showExtra}/>
+          Render extra component
+        </label>
+        <br/>
+
         <button onClick={this.changeMode}>Total Chaos!</button>
@@ -109,2 +127,3 @@ <button onClick={this.changeMode}>Spokerib</button>
           items={items || GenerateTeethData(amount)}
+          extra={showExtra && ExtraComponent}
         />
@@ -111,0 +130,0 @@ </div>

No alert changes

Improved metrics

Total package byte prevSize

2658020

increased by0.05%

Lines of code

2270

increased by1.07%

Number of lines in readme file

67

increased by1.52%

No dependency changes