react-gear-chart - npm Package Compare versions

Comparing version 0.0.13 to 0.0.14

dist/components/GearListChart.js

@@ -217,6 +217,10 @@ 'use strict';
         'div',
-        (0, _extends3.default)({ id: id, ref: function ref(r) {
+        (0, _extends3.default)({
+          id: id,
+          ref: function ref(r) {
             return _this2.chart = r;
-          }, className: (0, _classnames2.default)('gear-list-chart', className, childFocused ? 'child-focused' : ''),
-          style: [Styles.container, style] }, restProps),
+          },
+          className: (0, _classnames2.default)('gear-list-chart', className, childFocused ? 'child-focused' : ''),
+          style: (0, _extends3.default)({}, Styles.container, style)
+        }, restProps),
         _react2.default.createElement(
@@ -223,0 +227,0 @@ 'svg',

package.json

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

src/components/GearListChart.js

@@ -18,3 +18,3 @@ // @flow
   label: string,
-  strips: Strip | Array<Strip>
+  strips: Strip | Array<Strip>,
 }
@@ -35,8 +35,18 @@
   items: Array<ToothItem>,
-  extra: React$Element
+  extra: React$Element,
 }
 
 const shoudlUpdateStates = ['childFocused']
-const shouldUpdateProps = ['id', 'startAngle', 'endAngle', 'innerRadius', 'outerRadius',
-  'margin', 'limit', 'clockwise', 'items', 'extra']
+const shouldUpdateProps = [
+  'id',
+  'startAngle',
+  'endAngle',
+  'innerRadius',
+  'outerRadius',
+  'margin',
+  'limit',
+  'clockwise',
+  'items',
+  'extra',
+]
 
@@ -50,3 +60,3 @@ const Styles = {
     cursor: 'pointer',
-  }
+  },
 }
@@ -58,3 +68,2 @@ /**
 export default class GearListChart extends PureComponent<void, GearListProps, void> {
-
   static getToothParam(index, angle, margin, baseAngle, clockwise = false) {
@@ -64,8 +73,7 @@ let _factor = clockwise ? -1 : 1
     let end = start + angle * _factor - margin * _factor
-    return [ start, end ].sort((a, b) => a - b)
+    return [start, end].sort((a, b) => a - b)
   }
 
   static getRegistrationName(evt) {
-    return evt.dispatchConfig.registrationName ||
-           evt.dispatchConfig.phasedRegistrationNames.bubbled
+    return evt.dispatchConfig.registrationName || evt.dispatchConfig.phasedRegistrationNames.bubbled
   }
@@ -77,3 +85,3 @@
 
-  mouseEventProxy = (evt) => {
+  mouseEventProxy = evt => {
     let name = GearListChart.getRegistrationName(evt)
@@ -99,3 +107,3 @@ this.props[name](evt)
       offsetAngle: clockwiseAnimate ? -totalAnagle : totalAnagle,
-      opacity: 0
+      opacity: 0,
     }
@@ -111,3 +119,3 @@ return style
       offsetAngle: spring(clockwiseAnimate ? totalAnagle : -totalAnagle, motionConfig),
-      opacity: spring(0, motionConfig)
+      opacity: spring(0, motionConfig),
     }
@@ -128,3 +136,3 @@ return style
     let { endAngle, startAngle } = this.props
-    let [ _startAngle, _endAngle ] = NormalizeAngleRange(startAngle, endAngle)
+    let [_startAngle, _endAngle] = NormalizeAngleRange(startAngle, endAngle)
     return _endAngle - _startAngle
@@ -134,16 +142,37 @@ }
   shouldComponentUpdate(nextProps, nextState) {
-    return shouldUpdate(shoudlUpdateStates, this.state, nextState) ||
-           shouldUpdate(shouldUpdateProps, this.props, nextProps)
+    return (
+      shouldUpdate(shoudlUpdateStates, this.state, nextState) || shouldUpdate(shouldUpdateProps, this.props, nextProps)
+    )
   }
 
   render() {
-    let { id, innerRadius, outerRadius, items, margin, limit, startAngle, endAngle,
-      clockwise, animate, clockwiseAnimate, motionConfig, className, style, extra,
-      onMouseMove, onMouseEnter, onMouseLeave, onMouseOver, onClick, ...restProps } = this.props
+    let {
+      id,
+      innerRadius,
+      outerRadius,
+      items,
+      margin,
+      limit,
+      startAngle,
+      endAngle,
+      clockwise,
+      animate,
+      clockwiseAnimate,
+      motionConfig,
+      className,
+      style,
+      extra,
+      onMouseMove,
+      onMouseEnter,
+      onMouseLeave,
+      onMouseOver,
+      onClick,
+      ...restProps
+    } = this.props
 
-    if(!items || !items.length ) return null
+    if (!items || !items.length) return null
 
     let { childFocused } = this.state
-    let [ _startAngle, _endAngle ] = NormalizeAngleRange(startAngle, endAngle)
-    let [ width, height, cx, cy ] = AnnulusViewport(startAngle, endAngle, outerRadius, innerRadius, 10)
+    let [_startAngle, _endAngle] = NormalizeAngleRange(startAngle, endAngle)
+    let [width, height, cx, cy] = AnnulusViewport(startAngle, endAngle, outerRadius, innerRadius, 10)
     let _perItemAngle = this.totalAnagle() / items.length
@@ -159,5 +188,9 @@ if (_perItemAngle > limit) _perItemAngle = limit
     return (
-      <div id={id} ref={r => this.chart = r} className={classnames('gear-list-chart', className, childFocused ? 'child-focused' : '')}
-        style={[Styles.container, style]} {...restProps}>
-
+      <div
+        id={id}
+        ref={r => (this.chart = r)}
+        className={classnames('gear-list-chart', className, childFocused ? 'child-focused' : '')}
+        style={{ ...Styles.container, ...style }}
+        {...restProps}
+      >
         <svg width={width} height={height}>
@@ -172,4 +205,4 @@ <TransitionMotion
                 offsetAngle: this.totalAnagle() * (clockwiseAnimate ? -1 : 1),
-                opacity: 1
-              }
+                opacity: 1,
+              },
             }))}
@@ -181,44 +214,44 @@ styles={items.map((item, i) => ({
                 offsetAngle: animate ? spring(0, motionConfig) : 0,
-                opacity: 1
-              }
+                opacity: 1,
+              },
             }))}
           >
-            { interpolated =>
-                (<g transform={`translate(${cx}, ${cy})`}>{
-                  interpolated.map((conf, i) => {
-                    let item = conf.data
-                    // before item's leave it stays in interpolated array, have to get correct position
-                    let leaveItemsCount = interpolated.length - items.length
-                    if (i >= leaveItemsCount) {
-                      i -= leaveItemsCount
-                    }
-                    let [ start, end ] = GearListChart.getToothParam(i, _perItemAngle , margin, _startAngle, clockwise)
-                    return (
-                      <g key={conf.key || i}>
-                        <Tooth
-                          style={{ cursor: onClick ? 'pointer': 'inherit', opacity: conf.style.opacity }}
-                          startAngle={start}
-                          endAngle={end}
-                          offsetAngle={+conf.style.offsetAngle}
-                          cx={0}
-                          cy={0}
-                          outerRadius={outerRadius}
-                          innerRadius={innerRadius}
-                          index={i}
-                          data={item}
-                          mode={item.mode}
-                          label={item.label}
-                          strips={item.strips}
-                          onMouseMove={onMouseMove && this.mouseEventProxy}
-                          onMouseLeave={onMouseLeave && this.mouseEventProxy}
-                          onMouseEnter={onMouseEnter && this.mouseEventProxy}
-                          onMouseOver={onMouseOver && this.mouseEventProxy}
-                          onClick={onClick && this.mouseEventProxy}
-                          extra={extra}
-                        />
-                      </g>
-                    )
-                  })
-                }</g>)
-            }
+            {interpolated => (
+              <g transform={`translate(${cx}, ${cy})`}>
+                {interpolated.map((conf, i) => {
+                  let item = conf.data
+                  // before item's leave it stays in interpolated array, have to get correct position
+                  let leaveItemsCount = interpolated.length - items.length
+                  if (i >= leaveItemsCount) {
+                    i -= leaveItemsCount
+                  }
+                  let [start, end] = GearListChart.getToothParam(i, _perItemAngle, margin, _startAngle, clockwise)
+                  return (
+                    <g key={conf.key || i}>
+                      <Tooth
+                        style={{ cursor: onClick ? 'pointer' : 'inherit', opacity: conf.style.opacity }}
+                        startAngle={start}
+                        endAngle={end}
+                        offsetAngle={+conf.style.offsetAngle}
+                        cx={0}
+                        cy={0}
+                        outerRadius={outerRadius}
+                        innerRadius={innerRadius}
+                        index={i}
+                        data={item}
+                        mode={item.mode}
+                        label={item.label}
+                        strips={item.strips}
+                        onMouseMove={onMouseMove && this.mouseEventProxy}
+                        onMouseLeave={onMouseLeave && this.mouseEventProxy}
+                        onMouseEnter={onMouseEnter && this.mouseEventProxy}
+                        onMouseOver={onMouseOver && this.mouseEventProxy}
+                        onClick={onClick && this.mouseEventProxy}
+                        extra={extra}
+                      />
+                    </g>
+                  )
+                })}
+              </g>
+            )}
           </TransitionMotion>
@@ -225,0 +258,0 @@ </svg>

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

2698234

Lines of code

2344

increased by1.6%

Worsened metrics

Number of package files

37

decreased by-5.13%

No dependency changes