react-offcharts-core - npm Package Compare versions

Comparing version 0.1.11 to 0.1.71

_test_/Chart.test.jsx

@@ -30,2 +30,3 @@ import React from 'react';
     );
+    expect(typeof Chart.prototype.onResize).toBe('function');
     // try to resize jsdom
@@ -39,3 +40,3 @@ expect(Component2.find(Test).length).toBe(0);
     Chart.prototype.onResize.restore();
-    expect(spyOne.callCount).toBe(3);
+    expect(spyOne.callCount).toBe(2);
     Component2.unmount();
@@ -42,0 +43,0 @@ });

_test_/Gradient.jsx

@@ -35,4 +35,3 @@ import React from 'react';
     expect(Component.find('stop').length).toBe(5);
-
   });
 });

_test_/guid.test.jsx

@@ -6,3 +6,3 @@ import guid from '../src/Utils/guid';
     const ids = [];
-    for (let i = 0; i < 1000; i += 1) {
+    for (let i = 0; i < 100; i += 1) {
       ids.push(guid());
@@ -13,3 +13,3 @@ }
 
-    for (let iter = 0; iter < 1000; iter += 1) {
+    for (let iter = 0; iter < 100; iter += 1) {
       let key = ids[iter];
@@ -16,0 +16,0 @@ if (obj[key]) {

_test_/number.test.js

@@ -17,2 +17,10 @@ import * as nh from '../src/Utils/numbers';
   });
+
+  it('should know how to guess the seperator', () => {
+    const num = nh.round(23.0);
+    const n = nh.splitNumber(num);
+    expect(typeof n).toBe('object');
+    expect(n.number).toBe('23');
+    expect(n.fraction).toBe('0');
+  });
 });

Components/Chart.js

@@ -14,2 +14,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _lodash = require('lodash.throttle');
@@ -19,2 +23,6 @@
 
+var _resizeObserverPolyfill = require('resize-observer-polyfill');
+
+var _resizeObserverPolyfill2 = _interopRequireDefault(_resizeObserverPolyfill);
+
 var _ReactIf = require('./ReactIf');
@@ -39,6 +47,8 @@
   // on resize
-  responsive: _react.PropTypes.bool,
+  responsive: _propTypes2.default.bool,
   // if not responsive then user can set width and height
-  width: _react.PropTypes.number,
-  height: _react.PropTypes.number
+  width: _propTypes2.default.number,
+  height: _propTypes2.default.number,
+  id: _propTypes2.default.string,
+  className: _propTypes2.default.string
 };
@@ -63,16 +73,17 @@
     if (_this.props.responsive === true) {
-      _this.resize = (0, _lodash2.default)(_this.onResize.bind(_this), 150);
+      _this.onResize = _this.onResize.bind(_this);
     }
     return _this;
   }
-  /*
-    register the throttled resize function if responsive is set to true
-   */
 
-
   _createClass(Chart, [{
     key: 'componentDidMount',
     value: function componentDidMount() {
+      var _this2 = this;
+
       if (this.props.responsive === true) {
-        window.addEventListener('resize', this.resize);
+        this.ro = new _resizeObserverPolyfill2.default(function (ent, obs) {
+          _this2.onResize();
+        });
+        this.ro.observe(this.chart);
       }
@@ -88,4 +99,4 @@ this.onResize();
     value: function componentWillUnmount() {
-      if (this.props.responsive === true) {
-        window.removeEventListener('resize', this.resize);
+      if (this.ro) {
+        this.ro.disconnect();
       }
@@ -112,3 +123,3 @@ }
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
 
@@ -139,4 +150,6 @@ // Copy the state to pass down to the children
           ref: function ref(c) {
-            _this2.chart = c;
-          }
+            _this3.chart = c;
+          },
+          id: this.props.id,
+          className: this.props.className
         },
@@ -143,0 +156,0 @@ _react2.default.createElement(

Components/Defs/Gradients.js

@@ -12,2 +12,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _d3Color = require('d3-color');
@@ -19,3 +23,3 @@
   var fillShades = (0, _d3Color.color)(fill);
-  return [_react2.default.createElement('stop', { offset: '0', stopColor: fillShades.darker(0.5) }), _react2.default.createElement('stop', { offset: '0.25', stopColor: fillShades.darker(0.25) }), _react2.default.createElement('stop', { offset: '0.5', stopColor: fillShades }), _react2.default.createElement('stop', { offset: '0.75', stopColor: fillShades.brighter(0.25) }), _react2.default.createElement('stop', { offset: '1', stopColor: fillShades.brighter(0.5) })];
+  return [_react2.default.createElement('stop', { key: 1, offset: '0', stopColor: fillShades.darker(0.8) }), _react2.default.createElement('stop', { key: 2, offset: '0.25', stopColor: fillShades.darker(0.4) }), _react2.default.createElement('stop', { key: 3, offset: '0.5', stopColor: fillShades }), _react2.default.createElement('stop', { key: 4, offset: '0.75', stopColor: fillShades.brighter(0.4) }), _react2.default.createElement('stop', { key: 5, offset: '1', stopColor: fillShades.brighter(0.8) })];
 };
@@ -42,3 +46,3 @@
         y2: y2,
-        gradientUnits: 'userSpaceOnUse'
+        gradientUnits: gradientUnits
       },
@@ -51,9 +55,9 @@ stops
 LinearGradient.propTypes = {
-  id: _react.PropTypes.string,
-  x1: _react.PropTypes.string,
-  x2: _react.PropTypes.string,
-  y1: _react.PropTypes.string,
-  y2: _react.PropTypes.string,
-  gradientUnits: _react.PropTypes.string,
-  stops: _react.PropTypes.oneOfType([_react.PropTypes.arrayOf(_react.PropTypes.node), _react.PropTypes.node])
+  id: _propTypes2.default.string,
+  x1: _propTypes2.default.string,
+  x2: _propTypes2.default.string,
+  y1: _propTypes2.default.string,
+  y2: _propTypes2.default.string,
+  gradientUnits: _propTypes2.default.string,
+  stops: _propTypes2.default.oneOfType([_propTypes2.default.arrayOf(_propTypes2.default.node), _propTypes2.default.node])
 };
@@ -66,3 +70,3 @@
   y2: 1,
-  gradientUnits: 'userSpaceOnUse'
+  gradientUnits: 'objectBoundingBox'
 };
@@ -77,3 +81,4 @@
       fy = _ref2.fy,
-      stops = _ref2.stops;
+      stops = _ref2.stops,
+      gradientUnits = _ref2.gradientUnits;
   return _react2.default.createElement(
@@ -91,3 +96,3 @@ 'defs',
         fy: fy,
-        gradientUnits: 'userSpaceOnUse'
+        gradientUnits: gradientUnits
       },
@@ -100,11 +105,16 @@ stops
 RadialGradient.propTypes = {
-  id: _react.PropTypes.string,
-  cy: _react.PropTypes.number,
-  cx: _react.PropTypes.number,
-  r: _react.PropTypes.number,
-  fx: _react.PropTypes.number,
-  fy: _react.PropTypes.number,
-  stops: _react.PropTypes.oneOfType([_react.PropTypes.arrayOf(_react.PropTypes.node), _react.PropTypes.node])
+  id: _propTypes2.default.string,
+  cy: _propTypes2.default.number,
+  cx: _propTypes2.default.number,
+  r: _propTypes2.default.number,
+  fx: _propTypes2.default.number,
+  fy: _propTypes2.default.number,
+  gradientUnits: _propTypes2.default.string,
+  stops: _propTypes2.default.oneOfType([_propTypes2.default.arrayOf(_propTypes2.default.node), _propTypes2.default.node])
 };
 
+RadialGradient.defaultProps = {
+  gradientUnits: 'objectBoundingBox'
+};
+
 // If the user sets gradient by type
@@ -111,0 +121,0 @@

Components/Defs/Shadow.js

@@ -1,2 +0,2 @@
-"use strict";
+'use strict';
 
@@ -7,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require("react");
+var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -16,6 +20,6 @@
   return _react2.default.createElement(
-    "defs",
+    'defs',
     null,
     _react2.default.createElement(
-      "filter",
+      'filter',
       {
@@ -28,18 +32,18 @@ id: props.id,
       },
-      _react2.default.createElement("feGaussianBlur", {
-        "in": "SourceAlpha",
+      _react2.default.createElement('feGaussianBlur', {
+        'in': 'SourceAlpha',
         stdDeviation: props.stdDeviation,
-        result: "blur"
+        result: 'blur'
       }),
-      _react2.default.createElement("feOffset", {
-        "in": "blur",
+      _react2.default.createElement('feOffset', {
+        'in': 'blur',
         dx: props.dx,
         dy: props.dy,
-        result: "offsetBlur"
+        result: 'offsetBlur'
       }),
       _react2.default.createElement(
-        "feMerge",
+        'feMerge',
         null,
-        _react2.default.createElement("feMergeNode", { "in": "offsetBlur" }),
-        _react2.default.createElement("feMergeNode", { "in": "SourceGraphic" })
+        _react2.default.createElement('feMergeNode', { 'in': 'offsetBlur' }),
+        _react2.default.createElement('feMergeNode', { 'in': 'SourceGraphic' })
       )
@@ -51,10 +55,10 @@ )
 shadows.propTypes = {
-  id: _react.PropTypes.string,
-  y: _react.PropTypes.string,
-  x: _react.PropTypes.string,
-  height: _react.PropTypes.string,
-  width: _react.PropTypes.string,
-  stdDeviation: _react.PropTypes.number,
-  dx: _react.PropTypes.number,
-  dy: _react.PropTypes.number
+  id: _propTypes2.default.string,
+  y: _propTypes2.default.string,
+  x: _propTypes2.default.string,
+  height: _propTypes2.default.string,
+  width: _propTypes2.default.string,
+  stdDeviation: _propTypes2.default.number,
+  dx: _propTypes2.default.number,
+  dy: _propTypes2.default.number
 };
@@ -61,0 +65,0 @@

Components/index.js

@@ -1,1 +0,13 @@
-"use strict";
+'use strict';
+
+var _Chart = require('./Chart');
+
+var _Chart2 = _interopRequireDefault(_Chart);
+
+var _ReactIf = require('./ReactIf.jsx');
+
+var _ReactIf2 = _interopRequireDefault(_ReactIf);
+
+var _Defs = require('./Defs');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

Components/ReactIf.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _cloneChildren = require('../Utils/cloneChildren');
@@ -37,10 +41,10 @@
   // a boolean condition if true then render
-  condition: _react.PropTypes.bool,
-  children: _react.PropTypes.oneOfType([_react.PropTypes.arrayOf(_react.PropTypes.node), _react.PropTypes.node]),
+  condition: _propTypes2.default.bool,
+  children: _propTypes2.default.oneOfType([_propTypes2.default.arrayOf(_propTypes2.default.node), _propTypes2.default.node]),
   // The user can pass in any element type
   // that will act as the parent node
-  el: _react.PropTypes.node,
-  copy: _react.PropTypes.bool
+  el: _propTypes2.default.node,
+  copy: _propTypes2.default.bool
 };
 
 exports.default = ReactIf;

Helpers/arcDimension.js

@@ -1,2 +0,2 @@
-"use strict";
+'use strict';
 
@@ -6,13 +6,38 @@ Object.defineProperty(exports, "__esModule", {
 });
+exports.degToRad = exports.scale = exports.dimensions = undefined;
 
-exports.default = function (_ref) {
+var _d3Scale = require('d3-scale');
+
+/*
+  return the chart dimensions
+*/
+var dimensions = exports.dimensions = function dimensions(_ref) {
   var width = _ref.width,
       height = _ref.height,
       _ref$margin = _ref.margin,
-      margin = _ref$margin === undefined ? 0 : _ref$margin;
+      margin = _ref$margin === undefined ? { height: 0, width: 0 } : _ref$margin;
 
-  var cx = (width - margin / 2) / 2;
-  var cy = (height - margin / 2) / 2;
+  var cx = (width - +margin.width / 2) / 2;
+  var cy = (height - +margin.height / 2) / 2;
   var radius = Math.min(cx, cy);
   return { cx: cx, cy: cy, radius: radius };
+};
+
+/*
+  returns an arc scale based on the arc range
+*/
+var scale = exports.scale = function scale(_ref2) {
+  var startAngle = _ref2.startAngle,
+      endAngle = _ref2.endAngle,
+      _ref2$domain = _ref2.domain,
+      domain = _ref2$domain === undefined ? [0, 100] : _ref2$domain;
+  return (0, _d3Scale.scaleLinear)().range([startAngle, endAngle]).domain(domain);
+};
+
+/*
+  Rad to Deg
+*/
+var degToRad = exports.degToRad = function degToRad() {
+  var deg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  return deg * (Math.PI / 180);
 };

package.json

 {
   "name": "react-offcharts-core",
-  "version": "0.1.11",
+  "version": "0.1.71",
   "description": "A Core Library for React Offcharts",
@@ -37,2 +37,3 @@ "main": "./dist/index.js",
     "babel-preset-stage-0": "^6.16.0",
+    "coveralls": "^2.11.15",
     "enzyme": "^2.6.0",
@@ -56,6 +57,10 @@ "eslint": "^3.11.1",
     "d3-color": "^1.0.2",
+    "d3-interpolate": "^1.1.3",
+    "d3-scale": "^1.0.4",
     "lodash.throttle": "^4.1.1",
+    "prop-types": "^15.5.8",
     "react": "^15.4.1",
-    "react-dom": "^15.4.1"
+    "react-dom": "^15.4.1",
+    "resize-observer-polyfill": "^1.4.2"
   }
 }

README.md

@@ -6,4 +6,24 @@ ## React Offcharts-Core
 
+### Usage
+This is not usefull on it's own unless you want a responsive svg that sends down with and height on resize event.
 
+```js
+import Chart from 'react-offcharts-core/Components/Chart';
+
+class Graph extends Component {
+  ......
+  render() {
+    <Chart
+      responsive
+    >
+      <SomeGraph someProps={...this.props}/>
+    </Chart>
+  }
+}
+```
+
+SomeGraph will recieve the widht and heght on resize and on mount.
+
+
 ### Licence
 MIT Licence. Copyright (c) 2017 Arnthor Agustsson.

src/Components/Chart.jsx

@@ -1,3 +0,5 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import throttle from 'lodash.throttle';
+import ResizeObserver from 'resize-observer-polyfill';
 import ReactIf from './ReactIf';
@@ -13,2 +15,4 @@ import cloneComponents from '../Utils/cloneChildren';
   height: PropTypes.number,
+  id: PropTypes.string,
+  className: PropTypes.string,
 };
@@ -30,11 +34,12 @@
     if (this.props.responsive === true) {
-      this.resize = throttle(this.onResize.bind(this), 150);
+      this.onResize = this.onResize.bind(this);
     }
   }
-  /*
-    register the throttled resize function if responsive is set to true
-   */
+
   componentDidMount() {
     if (this.props.responsive === true) {
-      window.addEventListener('resize', this.resize);
+      this.ro = new ResizeObserver((ent, obs) => {
+        this.onResize();
+      });
+      this.ro.observe(this.chart);
     }
@@ -47,4 +52,4 @@ this.onResize();
   componentWillUnmount() {
-    if (this.props.responsive === true) {
-      window.removeEventListener('resize', this.resize);
+    if (this.ro) {
+      this.ro.disconnect();
     }
@@ -91,2 +96,4 @@ }
         ref={(c) => { this.chart = c; }}
+        id={this.props.id}
+        className={this.props.className}
       >
@@ -93,0 +100,0 @@ <ReactIf

src/Components/Defs/Gradients.jsx

@@ -1,2 +0,3 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { color } from 'd3-color';
@@ -7,8 +8,8 @@
   return [
-    <stop offset="0" stopColor={fillShades.darker(0.5)} />,
-    <stop offset="0.25" stopColor={fillShades.darker(0.25)} />,
-    <stop offset="0.5" stopColor={fillShades} />,
-    <stop offset="0.75" stopColor={fillShades.brighter(0.25)} />,
-    <stop offset="1" stopColor={fillShades.brighter(0.5)} />,
-  ]
+    <stop key={1} offset="0" stopColor={fillShades.darker(0.8)} />,
+    <stop key={2} offset="0.25" stopColor={fillShades.darker(0.4)} />,
+    <stop key={3} offset="0.5" stopColor={fillShades} />,
+    <stop key={4} offset="0.75" stopColor={fillShades.brighter(0.4)} />,
+    <stop key={5} offset="1" stopColor={fillShades.brighter(0.8)} />,
+  ];
 };
@@ -24,3 +25,3 @@
       y2={y2}
-      gradientUnits="userSpaceOnUse"
+      gradientUnits={gradientUnits}
     >
@@ -50,7 +51,7 @@ {stops}
   y2: 1,
-  gradientUnits: 'userSpaceOnUse',
+  gradientUnits: 'objectBoundingBox',
 };
 
 
-export const RadialGradient = ({ id, cx, cy, r, fx, fy, stops }) => (
+export const RadialGradient = ({ id, cx, cy, r, fx, fy, stops, gradientUnits }) => (
   <defs>
@@ -64,3 +65,3 @@ <radialGradient
       fy={fy}
-      gradientUnits="userSpaceOnUse"
+      gradientUnits={gradientUnits}
     >
@@ -79,2 +80,3 @@ {stops}
   fy: PropTypes.number,
+  gradientUnits: PropTypes.string,
   stops: PropTypes.oneOfType([
@@ -86,2 +88,6 @@ PropTypes.arrayOf(PropTypes.node),
 
+RadialGradient.defaultProps = {
+  gradientUnits: 'objectBoundingBox',
+};
+
 // If the user sets gradient by type
@@ -88,0 +94,0 @@ export default (props) => {

src/Components/Defs/Shadow.jsx

@@ -1,2 +0,3 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
@@ -3,0 +4,0 @@ const shadows = props => (

src/Components/ReactIf.jsx

@@ -1,2 +0,3 @@
-import React, { Children, PropTypes } from 'react';
+import React, { Children } from 'react';
+import PropTypes from 'prop-types';
 import cloneChildren from '../Utils/cloneChildren';
@@ -3,0 +4,0 @@ /*

src/Helpers/arcDimension.js

@@ -1,6 +0,24 @@
-export default ({ width, height, margin = 0 }) => {
-  const cx = (width - (margin / 2)) / 2;
-  const cy = (height - (margin / 2)) / 2;
+import { scaleLinear } from 'd3-scale';
+
+/*
+  return the chart dimensions
+*/
+export const dimensions = ({ width, height, margin = { height: 0, width: 0 } }) => {
+  const cx = (width - (+margin.width / 2)) / 2;
+  const cy = (height - (+margin.height / 2)) / 2;
   const radius = Math.min(cx, cy);
   return { cx, cy, radius };
 };
+
+/*
+  returns an arc scale based on the arc range
+*/
+export const scale = ({ startAngle, endAngle, domain = [0, 100] }) => (
+  scaleLinear().range([startAngle, endAngle]).domain(domain)
+);
+
+/*
+  Rad to Deg
+*/
+export const degToRad = (deg = 0) => deg * (Math.PI / 180);
+

src/Utils/numbers.js

@@ -0,9 +1,14 @@
+const getDecimalSeperator = () => {
+  const number = 0.1;
+  return number.toLocaleString().substring(1, 2);
+};
+
 export const round = (a, p = 1) =>
   Math.round((a + 0.00001) * 10) / 10;
 
-export const splitNumber = (num, deliminator) => {
+export const splitNumber = (num, deliminator = getDecimalSeperator()) => {
   const n = num.toString().split(deliminator);
-  return { number: n[0], fraction: n[1] };
+  return { number: n[0], fraction: (n[1] || '0'), deliminator };
 };
 
 export default { round, splitNumber };

Utils/numbers.js

@@ -1,2 +0,2 @@
-"use strict";
+'use strict';
 
@@ -6,2 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
+var getDecimalSeperator = function getDecimalSeperator() {
+  var number = 0.1;
+  return number.toLocaleString().substring(1, 2);
+};
+
 var round = exports.round = function round(a) {
@@ -12,7 +17,9 @@ var p = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
 
-var splitNumber = exports.splitNumber = function splitNumber(num, deliminator) {
+var splitNumber = exports.splitNumber = function splitNumber(num) {
+  var deliminator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getDecimalSeperator();
+
   var n = num.toString().split(deliminator);
-  return { number: n[0], fraction: n[1] };
+  return { number: n[0], fraction: n[1] || '0', deliminator: deliminator };
 };
 
 exports.default = { round: round, splitNumber: splitNumber };

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

40032

increased by14.59%

Number of package files

45

increased by7.14%

Lines of code

1109

increased by12.25%

Number of lines in readme file

28

increased by250%

Worsened metrics

Dependency count

8

increased by100%

Dev dependency count

22

increased by4.76%

Dependency changes

• + Addedd3-interpolate@^1.1.3

• + Addedd3-scale@^1.0.4

• + Addedprop-types@^15.5.8

• + Addedresize-observer-polyfill@^1.4.2

• + Addedd3-array@1.2.4(transitive)

• + Addedd3-collection@1.0.7(transitive)

• + Addedd3-format@1.4.5(transitive)

• + Addedd3-interpolate@1.4.0(transitive)

• + Addedd3-scale@1.0.7(transitive)

• + Addedd3-time@1.1.0(transitive)

• + Addedd3-time-format@2.3.0(transitive)

• + Addedresize-observer-polyfill@1.5.1(transitive)