react-jsx-highcharts - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

package.json

 {
   "name": "react-jsx-highcharts",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Highcharts charts built using React components",
@@ -8,2 +8,3 @@ "main": "dist/react-jsx-highcharts.js",
     "build": "./node_modules/.bin/webpack",
+    "build:examples": "./node_modules/.bin/webpack --config examples/webpack.config.js",
     "lint": "./node_modules/.bin/eslint src",
@@ -45,2 +46,3 @@ "test": "./node_modules/.bin/mocha --compilers js:babel-core/register --require test/test-helper.js test/**/*.spec.js"
     "cross-env": "^5.0.0",
+    "css-loader": "^0.28.4",
     "enzyme": "^2.8.2",
@@ -47,0 +49,0 @@ "eslint": "^3.19.0",

README.md

@@ -7,5 +7,4 @@ # react-jsx-highcharts
 
-## Examples
+## Example
 
-
 ```jsx
@@ -21,3 +20,3 @@ <HighchartsChart plotOptions={plotOptions}>
 
-  <XAxis id="x" type="linear">
+  <XAxis>
     <XAxis.Title>Time</XAxis.Title>
@@ -40,1 +39,35 @@ </XAxis>
 [See here](https://whawker.github.io/react-jsx-highcharts/examples/index.html)
+
+## Getting Started
+
+`npm install --save react-jsx-highcharts`
+
+You'll need the peer dependencies too
+
+`npm install --save react react-dom prop-types highstock-release` (Highstock release is Highcharts bundled with stock charts)
+
+## Goals
+
+This project aims to hide the complexity of Highcharts from the React application author, allowing the rendering of charts in a React familiar way. 
+
+It also aims to use best React and Highcharts practices where possible - for example if the `data` prop of a Series were to change React JSX Highcharts uses the [`Series.prototype.setData`](http://api.highcharts.com/highstock/Series.setData) method of Highcharts which is much less expensive than `update`.
+
+Additionally we avoid passing large JSON configuration objects as props, as this leads to painful debugging when trying to work out why your component did or did not re-render, this also helps as an abstraction over the complexity as mentioned above.
+
+## Technical approach
+
+Rather than passing around a chart object between all the components, we utilise [React's context](https://facebook.github.io/react/docs/context.html) to share the chart object around, then using [Higher Order Components](https://medium.com/@mweststrate/how-to-safely-use-react-context-b7e343eff076) (HOCs), we inject the Highcharts functions we need to the wrapped component.
+
+There are 3 HOCs in this project, [provideChart](https://github.com/whawker/react-jsx-highcharts/blob/master/src/components/ChartProvider/index.js), [provideAxis](https://github.com/whawker/react-jsx-highcharts/blob/master/src/components/AxisProvider/index.js) and [provideSeries](https://github.com/whawker/react-jsx-highcharts/blob/master/src/components/ChartProvider/index.js). 
+
+In the vast majority of cases, there is no need to use these HOCs directly - but they have been exposed anyway - they are useful if you want to create your own components with this library. 
+
+## Common issues
+
+**I updated the data of my chart series, and the chart did not update**
+
+As Objects and Arrays are passed by reference, React thought your component props had not changed. You should clone the data object before modifying it. See the [`addDataPoint`](https://github.com/whawker/react-jsx-highcharts/blob/master/examples/utils/data-helpers.js#L19-L20) utility function used in the demos as an example.
+
+**My stock chart isn't rendering the Navigator and RangeSelector components**
+
+You're probably using a `<HighchartsChart />` at the top level, rather than a `<HighchartsStockChart />`, otherwise please post an issue.

src/components/AxisProvider/index.js

@@ -19,3 +19,8 @@ import React, { Component } from 'react';
         'AxisProvider',
-        ['update', 'remove', 'addPlotBand', 'removePlotBand', 'addPlotLine', 'removePlotLine', 'getAxis']
+        [
+          'update', 'remove', 'getAxis',
+          'addPlotBand', 'removePlotBand',
+          'addPlotLine', 'removePlotLine',
+          'getExtremes', 'setExtremes'
+        ]
       );
@@ -35,2 +40,4 @@ }
       const removePlotLine = axis && axis.removePlotLine.bind(axis);
+      const getExtremes = axis && axis.getExtremes.bind(axis);
+      const setExtremes = axis && axis.setExtremes.bind(axis);
       const getAxis = () => this.props.get(id);
@@ -47,2 +54,4 @@
           removePlotLine={cleanPropsBeforeUpdate(removePlotLine)}
+          getExtremes={getExtremes}
+          setExtremes={setExtremes}
           getAxis={getAxis} />
@@ -49,0 +58,0 @@ );

test/components/AxisProvider/index.spec.js

@@ -31,2 +31,4 @@ import React, { Component } from 'react';
       this.axis.removePlotLine.withArgs({ prop: 'Test5555' }).returns('removePlotLine method mock');
+      this.axis.getExtremes.withArgs({ prop: 'Test6666' }).returns('getExtremes method mock');
+      this.axis.setExtremes.withArgs({ prop: 'Test7777' }).returns('setExtremes method mock');
     });
@@ -64,2 +66,12 @@
 
+    it('should pass the `getExtremes` function of the axis to the wrapped component', function () {
+      const wrapper = mount(<AxisWrappedComponent axisId="myAxisId" />, {context: this.context}).find(WrappedComponent);
+      expect(wrapper.props().getExtremes({ prop: 'Test6666' })).to.eql('getExtremes method mock');
+    });
+
+    it('should pass the `setExtremes` function of the axis to the wrapped component', function () {
+      const wrapper = mount(<AxisWrappedComponent axisId="myAxisId" />, {context: this.context}).find(WrappedComponent);
+      expect(wrapper.props().setExtremes({ prop: 'Test7777' })).to.eql('setExtremes method mock');
+    });
+
     it('should pass the `getAxis` helper function to the wrapped component', function () {
@@ -85,2 +97,4 @@ const wrapper = mount(<AxisWrappedComponent axisId="myAxisId" />, {context: this.context}).find(WrappedComponent);
       this.axis.removePlotLine.withArgs({ prop: 'Test5555' }).returnsThis();
+      this.axis.getExtremes.withArgs({ prop: 'Test6666' }).returnsThis();
+      this.axis.setExtremes.withArgs({ prop: 'Test7777' }).returnsThis();
     });
@@ -117,3 +131,13 @@
     });
+
+    it('the scope of the `getExtremes` function should be bound to the axis', function () {
+      const wrapper = mount(<AxisWrappedComponent axisId="myAxisId" />, {context: this.context}).find(WrappedComponent);
+      expect(wrapper.props().getExtremes({ prop: 'Test6666' })).to.eql(this.axis);
+    });
+
+    it('the scope of the `setExtremes` function should be bound to the axis', function () {
+      const wrapper = mount(<AxisWrappedComponent axisId="myAxisId" />, {context: this.context}).find(WrappedComponent);
+      expect(wrapper.props().setExtremes({ prop: 'Test7777' })).to.eql(this.axis);
+    });
   });
 });

test/test-utils.js

@@ -9,2 +9,4 @@ import sinon from 'sinon';
   removePlotLine: sinon.stub(),
+  getExtremes: sinon.stub(),
+  setExtremes: sinon.stub(),
   update: sinon.stub()
@@ -11,0 +13,0 @@ });

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1527350

increased by7.37%

Number of package files

215

increased by3.37%

Lines of code

43324

increased by6.63%

Number of lines in readme file

71

increased by86.84%

Worsened metrics

Dev dependency count

36

increased by2.86%

Number of low supply chain risk alerts

6

increased by20%

Number of medium supply chain risk alerts

24

increased by4.35%

No dependency changes