react-highcharts - npm Package Compare versions

Comparing version 1.0.3 to 2.0.0

package.json

 {
   "name": "react-highcharts",
-  "version": "1.0.3",
+  "version": "2.0.0",
   "description": "React wrapper for highcharts",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "demo": "cd demo && webpack && ../node_modules/.bin/webpack-dev-server --content-base dist/",
+    "prepublish": "webpack"
   },
@@ -26,7 +28,15 @@ "author": "Kirill Cherkashin",
   "devDependencies": {
+    "babel-core": "^5.8.22",
+    "babel-loader": "^5.3.2",
     "exports-loader": "^0.6.2",
+    "file-loader": "^0.8.4",
+    "highcharts-release": "^4.1.7",
+    "highlight.js": "^8.5.0",
+    "imports-loader": "^0.6.4",
+    "raw-loader": "^0.5.1",
+    "react": "*",
+    "react-highlight": "^0.4.1",
     "webpack": "^1.5.3",
-    "jsx-loader": "^0.12.2",
-    "Highcharts": "git://github.com/highslide-software/highcharts.com"
+    "webpack-dev-server": "^1.10.1"
   }
 }

README.md

@@ -9,4 +9,14 @@ react-highcharts
 
-You can find the full code for the examples [here](https://github.com/kirjs/react-highcharts/tree/master/demo
-)
+You can find the full code for the examples [here](https://github.com/kirjs/react-highcharts/tree/master/demo)
+
+To run the demo:
+
+ 1. Clone the repo
+ 2. run:
+    ```
+    npm install
+    npm run demo
+    ```
+ 3. Point your browser at http://localhost:8080
+
 ## Installation
@@ -19,2 +29,3 @@ ```bash
 
+#### Basic Usage
 ```jsx
@@ -30,2 +41,3 @@ var React = require('react');
 
+#### Accessing Highcharts API After Render
 For access to methods & properties from the Highcharts library you can use `Highcharts.Highcharts`. For example, the Highcharts options are available via `Highcharts.Highcharts.getOptions()`.
@@ -48,3 +60,17 @@
 
+#### Limiting Highchart Rerenders
+Rerendering a highcharts graph is expensive. You can pass in a `isPureConfig` option to the `Highcharts` component, which will keep the highcharts graph from being updated so long as the provided `config` is [referentially equal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators) to its previous value.
+
 ## Using highcharts-more
 Just require `require('react-highcharts/more');` instead of `react-highcharts`
+
+## Update Highcharts Version (For Contributors)
+
+ 1. Install new highcharts version.
+    ```
+    npm unistall highcharts-release --save-dev
+    npm install highcharts-release --save-dev
+    ```
+    
+ 2. Increment the `react-highcharts` version such that a patch, minor release, or major release of 
+    Higcharts is reflected in a corresponding version increase for `react-highcharts`.

src/Highcharts.jsx

@@ -1,28 +0,38 @@
-global.HighchartsAdapter = require('exports?HighchartsAdapter!Highcharts/js/adapters/standalone-framework.src');
-var Highcharts = require('exports?Highcharts!Highcharts');
+global.HighchartsAdapter = require('exports?HighchartsAdapter!highcharts-standalone-adapter');
+var Highcharts = require("exports?Highcharts!highcharts");
+
 var React = require('react');
-var update = require('react/addons').addons.update;
+
 module.exports = React.createClass({
   displayName: 'Highcharts',
 
-  renderChart: function () {
-    if (!this.props.config) {
-      throw new Error('Config has to be specified, for the Highchart component');
+  propTypes: {
+    config: React.PropTypes.object.isRequired,
+    isPureConfig: React.PropTypes.bool
+  },
+
+  renderChart: function (config) {
+    if (!config) {
+      throw new Error('Config must be specified for the Highchart component');
     }
+    let chartConfig = config.chart;
+    this.chart = new Highcharts.Chart({
+      ...config,
+      chart: {
+        ...chartConfig,
+        renderTo: this.refs.chart.getDOMNode()
+      }
+    });
+  },
 
-    var config = this.props.config;
-    var node = this.refs.chart.getDOMNode();
-
-    if (!config.chart) {
-      config = update(config, {chart: {$set: {}}})
+  shouldComponentUpdate(nextProps) {
+    if (!this.props.isPureConfig || !(this.props.config === nextProps.config)) {
+      this.renderChart(nextProps.config);
     }
-
-    config = update(config, {chart: {renderTo: {$set: node}}});
-
-    this.chart = new Highcharts.Chart(config);
+    return true;
   },
 
-  getChart: function() {
+  getChart: function () {
     if (!this.chart) {
-        throw new Error('getChart() should not be called before the component is mounted');
+      throw new Error('getChart() should not be called before the component is mounted');
     }
@@ -33,9 +43,12 @@ return this.chart;
   componentDidMount: function () {
-    this.renderChart();
+    this.renderChart(this.props.config);
   },
-  componentDidUpdate: function () {
-    this.renderChart();
-  },
+
   render: function () {
-    return <div className = "chart" ref = "chart" />
+    let props = this.props;
+    props = {
+      ...props,
+      ref: 'chart'
+    };
+    return <div {...props} />;
   }
@@ -42,0 +55,0 @@ });

webpack.config.js

@@ -0,19 +1,42 @@
+var path = require('path');
+
 module.exports = {
-  watch: true,
   entry: {
-    index: './index.jsx',
-    more: './more.jsx'
+    highcharts: ['./src/Highcharts.jsx'], // Array syntax to workaround https://github.com/webpack/webpack/issues/300
+    more: './src/More.jsx'
   },
   module: {
     loaders: [
-      {test: /\.jsx$/, loader: 'jsx?harmony'}
+      {
+        test: /\.jsx$/,
+        loader: 'babel'
+      }
     ]
   },
-  externals: {
-    'react/addons': 'react/addons',
-    'react': 'react'
+  externals:
+  [
+    {
+      'react/addons': true,
+      'react': true
+    },
+    function(context, request, callback) {
+      if (request === './Highcharts.jsx') {
+        // Exclude highcharts.js from more.js
+        // Resolves https://github.com/kirjs/react-highcharts/issues/9
+        callback(null, './highcharts');
+      } else {
+        callback();
+      }
+    }
+  ],
+  resolve: {
+    alias: {
+      "highcharts" : "highcharts-release/highcharts.src.js",
+      "highcharts-more" : "highcharts-release/highcharts-more.src.js",
+      "highcharts-standalone-adapter" : "highcharts-release/adapters/standalone-framework.src.js"
+    },
+    modulesDirectories: ['node_modules']
   },
-
   output: {
-    filename: '[name].js',
+    filename: 'dist/[name].js',
     libraryTarget: 'umd',
@@ -20,0 +43,0 @@ library: 'Highcharts'

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Number of package files

21

increased by5%

Number of lines in readme file

73

increased by55.32%

Worsened metrics

Total package byte prevSize

660014

decreased by-44.68%

Dev dependency count

12

increased by200%

Lines of code

19182

decreased by-46.43%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes