From 49a8641c1d57775f337d9c995caa40b4ad9a6ee8 Mon Sep 17 00:00:00 2001 From: voicetime Date: Fri, 5 Jan 2018 14:16:00 +0300 Subject: [PATCH 1/3] Upgrade to ES6 --- package.json | 31 +++++---- src/Highmaps.jsx | 5 +- src/Highstock.jsx | 5 +- src/ReactHighcharts.jsx | 5 +- src/chartsFactory.jsx | 145 +++++++++++++++++++++------------------- webpack.config.js | 29 +++++--- 6 files changed, 125 insertions(+), 95 deletions(-) diff --git a/package.json b/package.json index ea97819..b0f2c98 100644 --- a/package.json +++ b/package.json @@ -37,14 +37,16 @@ "devDependencies": { "babel-cli": "^6.18.0", "babel-core": "^6.24.0", - "babel-loader": "^6.2.10", - "babel-preset-es2015": "^6.18.0", - "babel-preset-react": "^6.16.0", - "babel-preset-stage-2": "^6.18.0", - "create-react-class": "^15.5.2", - "exports-loader": "^0.6.2", - "file-loader": "^0.10.1", - "highlight.js": "^9.10.0", + "babel-loader": "^7.1.2", + "babel-plugin-add-module-exports": "^0.2.1", + "babel-plugin-transform-export-default": "^7.0.0-alpha.20", + "babel-preset-env": "^1.6.1", + "babel-preset-react": "^6.24.1", + "babel-preset-stage-2": "^6.24.1", + "create-react-class": "^15.6.2", + "exports-loader": "^0.6.4", + "file-loader": "^1.1.6", + "highlight.js": "^9.12.0", "imports-loader": "^0.7.1", "jsdom": "^9.9.1", "mocha": "^3.2.0", @@ -52,12 +54,13 @@ "nightwatch": "^0.9.6", "prop-types": "^15.5.8", "raw-loader": "^0.5.1", - "react": "^15.5.4", - "react-dom": "^15.5.4", - "react-highlight": "^0.9.0", - "sinon": "^2.0.0", - "webpack": "^2.2.1", - "webpack-dev-server": "^2.4.2" + "react": "^16.2.0", + "react-dom": "^16.2.0", + "react-highlight": "^0.10.0", + "sinon": "^4.1.3", + "uglifyjs-webpack-plugin": "^1.1.6", + "webpack": "^3.10.0", + "webpack-dev-server": "^2.9.6" }, "dependencies": { "highcharts": "^6.0.0" diff --git a/src/Highmaps.jsx b/src/Highmaps.jsx index e8423b9..d508feb 100644 --- a/src/Highmaps.jsx +++ b/src/Highmaps.jsx @@ -1 +1,4 @@ -module.exports = require('./chartsFactory.jsx')('Map', require("highcharts/highmaps")); \ No newline at end of file +import chartsFactory from './chartsFactory.jsx'; +import highmaps from 'highcharts/highmaps'; + +export default chartsFactory('Map', highmaps); \ No newline at end of file diff --git a/src/Highstock.jsx b/src/Highstock.jsx index 609ccdf..d75408c 100644 --- a/src/Highstock.jsx +++ b/src/Highstock.jsx @@ -1 +1,4 @@ -module.exports = require('./chartsFactory.jsx')('StockChart', require("highcharts/highstock")); \ No newline at end of file +import chartsFactory from './chartsFactory.jsx'; +import highstock from 'highcharts/highstock'; + +export default chartsFactory('StockChart', highstock); \ No newline at end of file diff --git a/src/ReactHighcharts.jsx b/src/ReactHighcharts.jsx index 0e834a9..77ca4a7 100644 --- a/src/ReactHighcharts.jsx +++ b/src/ReactHighcharts.jsx @@ -1 +1,4 @@ -module.exports = require('./chartsFactory.jsx')('Chart', require("highcharts")); \ No newline at end of file +import chartsFactory from './chartsFactory.jsx'; +import highcharts from 'highcharts'; + +export default chartsFactory('Chart', highcharts); \ No newline at end of file diff --git a/src/chartsFactory.jsx b/src/chartsFactory.jsx index 5535645..a06854c 100644 --- a/src/chartsFactory.jsx +++ b/src/chartsFactory.jsx @@ -1,79 +1,90 @@ -var React = require('react'); -var createReactClass = require('create-react-class'); -var PropTypes = require('prop-types'); -var win = typeof global === 'undefined' ? window : global; +import React, {Component} from 'react'; -module.exports = function (chartType, Highcharts){ - var displayName = 'Highcharts' + chartType; - var result = createReactClass({ - displayName: displayName, +const win = typeof global === 'undefined' ? window : global; - propTypes: { - config: PropTypes.object, - isPureConfig: PropTypes.bool, - neverReflow: PropTypes.bool, - callback: PropTypes.func, - domProps: PropTypes.object - }, - defaultProps: { - callback: () =>{}, - domProps: {} - }, - setChartRef: function(chartRef) { - this.chartRef = chartRef; - }, - renderChart: function (config){ - if (!config) { - throw new Error('Config must be specified for the ' + displayName + ' component'); - } - let chartConfig = config.chart; - this.chart = new Highcharts[chartType]({ - ...config, - chart: { - ...chartConfig, - renderTo: this.chartRef +function chartsFactory(chartType, Highcharts) { + + class Chart extends Component { + constructor() { + super() + this.chartType = chartType; + this.Highcharts = Highcharts; + this.displayName = 'Highcharts' + chartType; + } + + setChartRef(chartRef) { + this.chartRef = chartRef; } - }, this.props.callback); - if (!this.props.neverReflow) { - win && win.requestAnimationFrame && requestAnimationFrame(()=>{ - this.chart && this.chart.options && this.chart.reflow(); - }); - } - }, + renderChart(config) { + if (!config) { + throw new Error('Config must be specified for the ' + this.displayName + ' component'); + } + const chartConfig = config.chart; + this.chart = new this.Highcharts[this.chartType]({ + ...config, + chart: { + ...chartConfig, + renderTo: this.chartRef + } + }, this.props.callback); - shouldComponentUpdate(nextProps) { - if (nextProps.neverReflow || (nextProps.isPureConfig && this.props.config === nextProps.config)) { - return true; - } - this.renderChart(nextProps.config); - return false; - }, + if (!this.props.neverReflow) { + win && win.requestAnimationFrame && requestAnimationFrame(() => { + this.chart && this.chart.options && this.chart.reflow(); + }); + } + } - getChart: function (){ - if (!this.chart) { - throw new Error('getChart() should not be called before the component is mounted'); - } - return this.chart; - }, + shouldComponentUpdate(nextProps) { + if (nextProps.neverReflow || (nextProps.isPureConfig && this.props.config === nextProps.config)) { + return true; + } + this.renderChart(nextProps.config); + return false; + } - componentDidMount: function (){ - this.renderChart(this.props.config); - }, + getChart() { + if (!this.chart) { + throw new Error('getChart() should not be called before the component is mounted'); + } + return this.chart; + } - componentWillUnmount() { - this.chart.destroy(); - }, + componentDidMount() { + this.renderChart(this.props.config); + } - render: function (){ - return
; + componentWillUnmount() { + this.chart.destroy(); + } + + render() { + return
; + } + } + + if (isProdMode) { + let PropTypes = require('prop-types') + + Chart.propTypes = { + config: PropTypes.object, + isPureConfig: PropTypes.bool, + neverReflow: PropTypes.bool, + callback: PropTypes.func, + domProps: PropTypes.object + } + } + Chart.defaultProps = { + callback: () => { + }, + domProps: {} } - }); + let result = Chart; + result.Highcharts = Highcharts; + result.withHighcharts = Highcharts => module.exports(chartType, Highcharts); - result.Highcharts = Highcharts; - result.withHighcharts = (Highcharts) =>{ - return module.exports(chartType, Highcharts); - }; - return result; -}; + return result +} +export default chartsFactory; \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 9ecf880..1d0f780 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,17 +1,27 @@ const path = require('path'); - +const webpack = require('webpack') +const UglifyJsPlugin = require('uglifyjs-webpack-plugin') module.exports = function (env) { env = env || {}; - + let plugins = []; /** * If -p flag is set, minify the files * @type {boolean} */ const src = !env.p; + plugins.push(new webpack.DefinePlugin({ + isProdMode: JSON.stringify(src) + }) + ); + const filenamePostfix = src ? '.src' : ''; + if (!src) { + plugins.push(new UglifyJsPlugin()) + } + /** * If -b flag is set, build bundles, and not exclude highcharts from the build * @type {boolean} @@ -19,7 +29,6 @@ module.exports = function (env) { const bundles = env.b; const bundlePrefix = (bundles ? 'bundle/' : ''); - const highchartsExternals = { 'highcharts/highmaps': { root: 'Highcharts', @@ -60,7 +69,6 @@ module.exports = function (env) { externals.push(highchartsExternals); - return { entry: { // Array syntax to workaround https://github.com/webpack/webpack/issues/300 @@ -74,18 +82,17 @@ module.exports = function (env) { rules: [ { test: /\.jsx$/, - use: [{ + + use: { loader: 'babel-loader', - query: { - cacheDirectory: true, - presets: ['react', 'es2015', 'stage-2'] + options: { + presets: ['env', 'react', 'stage-2'], } - }], - - + } } ] }, + plugins: plugins, externals: externals, resolve: { modules: [ From d9b0a99bf4934e8f7537b76d85914c01cdba8b72 Mon Sep 17 00:00:00 2001 From: voicetime Date: Tue, 9 Jan 2018 03:08:41 +0300 Subject: [PATCH 2/3] merge and fix demo add react-prism lib --- demo/src/highmaps.jsx | 13 ++++++++++--- demo/src/highstock.jsx | 12 +++++++++--- demo/src/index.jsx | 12 ++++++++---- demo/src/more.jsx | 41 ++++++++++++++++++++++------------------ demo/webpack.config.js | 5 +++++ package.json | 20 +++++++++++++------- test/unit/simulateDOM.js | 12 ++++++------ webpack.config.js | 1 + 8 files changed, 75 insertions(+), 41 deletions(-) diff --git a/demo/src/highmaps.jsx b/demo/src/highmaps.jsx index a8d8471..061cfef 100644 --- a/demo/src/highmaps.jsx +++ b/demo/src/highmaps.jsx @@ -1,9 +1,16 @@ const React = require('react'); // Note that HighMaps has to be in the codebase already const ReactHighmaps = require('react-highcharts/ReactHighmaps.src'); -const Highlight = require('react-highlight'); const ReactDOM = require('react-dom'); const maps = require('./mapdata/europe'); +require('prismjs'); +require('prismjs/themes/prism.css'); +import PrismCode from 'react-prism' + +import './style.css' +import './tomorrow.css' + + const config = { chart: { @@ -57,12 +64,12 @@ ReactDOM.render( ); ReactDOM.render( - {require("raw-loader!./highmaps.jsx")}, + {require("!!raw-loader!./highmaps.jsx")}, document.getElementById('code-js') ); ReactDOM.render( - {require("raw-loader!./highmaps.html")}, + {require("raw-loader!./highmaps.html")}, document.getElementById('code-html') ); diff --git a/demo/src/highstock.jsx b/demo/src/highstock.jsx index 92c69a7..b6f64c6 100644 --- a/demo/src/highstock.jsx +++ b/demo/src/highstock.jsx @@ -1,8 +1,14 @@ const React = require('react'); // Note that HighMaps has to be in the codebase already const ReactHighstock = require('react-highcharts/ReactHighstock.src'); -const Highlight = require('react-highlight'); const ReactDOM = require('react-dom'); +require('prismjs'); +require('prismjs/themes/prism.css'); +import PrismCode from 'react-prism' + +import './style.css' +import './tomorrow.css' + const data = [ [1220832000000, 22.56], [1220918400000, 21.67], [1221004800000, 21.66], [1221091200000, 21.81], [1221177600000, 21.28], [1221436800000, 20.05], [1221523200000, 19.98], [1221609600000, 18.26], [1221696000000, 19.16], [1221782400000, 20.13], [1222041600000, 18.72], [1222128000000, 18.12], [1222214400000, 18.39], [1222300800000, 18.85], [1222387200000, 18.32], [1222646400000, 15.04], [1222732800000, 16.24], [1222819200000, 15.59], [1222905600000, 14.3], [1222992000000, 13.87], [1223251200000, 14.02], [1223337600000, 12.74], [1223424000000, 12.83], [1223510400000, 12.68], [1223596800000, 13.8], [1223856000000, 15.75], [1223942400000, 14.87], [1224028800000, 13.99], [1224115200000, 14.56], [1224201600000, 13.91], [1224460800000, 14.06], [1224547200000, 13.07], [1224633600000, 13.84], [1224720000000, 14.03], [1224806400000, 13.77], [1225065600000, 13.16], [1225152000000, 14.27], [1225238400000, 14.94], [1225324800000, 15.86], [1225411200000, 15.37], [1225670400000, 15.28], [1225756800000, 15.86], [1225843200000, 14.76], [1225929600000, 14.16], [1226016000000, 14.03], [1226275200000, 13.7], [1226361600000, 13.54], [1226448000000, 12.87], [1226534400000, 13.78], [1226620800000, 12.89], [1226880000000, 12.59], [1226966400000, 12.84], [1227052800000, 12.33], [1227139200000, 11.5], [1227225600000, 11.8], [1227484800000, 13.28], [1227571200000, 12.97], [1227657600000, 13.57], [1227830400000, 13.24], [1228089600000, 12.7], [1228176000000, 13.21], [1228262400000, 13.7], [1228348800000, 13.06], [1228435200000, 13.43], [1228694400000, 14.25], [1228780800000, 14.29], [1228867200000, 14.03], [1228953600000, 13.57], [1229040000000, 14.04], [1229299200000, 13.54] @@ -30,12 +36,12 @@ ReactDOM.render( ); ReactDOM.render( - {require("raw-loader!./highstock.jsx")}, + {require("!!raw-loader!./highstock.jsx")}, document.getElementById('code-js') ); ReactDOM.render( - {require("raw-loader!./highstock.html")}, + {require("raw-loader!./highstock.html")}, document.getElementById('code-html') ); diff --git a/demo/src/index.jsx b/demo/src/index.jsx index 16e5786..0a93e47 100644 --- a/demo/src/index.jsx +++ b/demo/src/index.jsx @@ -3,6 +3,12 @@ const React = require('react'); const ReactHighcharts = require('react-highcharts'); const Highlight = require('react-highlight'); const ReactDOM = require('react-dom'); +require('prismjs'); +require('prismjs/themes/prism.css'); +import PrismCode from 'react-prism' + +import './style.css' +import './tomorrow.css' const config = { xAxis: { @@ -18,16 +24,14 @@ ReactDOM.render( document.getElementById('test') ); ReactDOM.render( - {require("raw-loader!./index.jsx")}, + {require("!!raw-loader!./index.jsx")}, document.getElementById('code-js') ); ReactDOM.render( - {require("raw-loader!./index.html")}, + {require("raw-loader!./index.html")}, document.getElementById('code-html') ); require("file-loader?name=[name].[ext]!./index.html"); require("file-loader?name=[name].[ext]!./more.html"); -require("file-loader?name=[name].[ext]!./style.css"); -require("file-loader?name=[name].[ext]!./tomorrow.css"); diff --git a/demo/src/more.jsx b/demo/src/more.jsx index 3d6efb2..5b80c0e 100644 --- a/demo/src/more.jsx +++ b/demo/src/more.jsx @@ -2,7 +2,6 @@ var React = require('react'); // Note that Highcharts has to be required separately var ReactHighcharts = require('react-highcharts'); - // Note that Highcharts has to be in the codebase already // Highcharts more var HighchartsMore = require('highcharts-more'); @@ -11,31 +10,37 @@ HighchartsMore(ReactHighcharts.Highcharts); // Highcharts exporting var HighchartsExporting = require('highcharts-exporting'); HighchartsExporting(ReactHighcharts.Highcharts); - -var Highlight = require('react-highlight'); var ReactDOM = require('react-dom'); +require('prismjs'); +require('prismjs/themes/prism.css'); +import PrismCode from 'react-prism' + +import './style.css' +import './tomorrow.css' + + var config = { - chart: { - polar: true - }, - xAxis: { - categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] - }, - series: [{ - data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] - }] + chart: { + polar: true + }, + xAxis: { + categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] + }, + series: [{ + data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] + }] }; ReactDOM.render( - , - document.getElementById('test') + , + document.getElementById('test') ); ReactDOM.render( - {require("raw-loader!./more.jsx")}, - document.getElementById('code-js') + {require("!!raw-loader!./more.jsx")}, + document.getElementById('code-js') ); ReactDOM.render( - {require("raw-loader!./more.html")}, - document.getElementById('code-html') + {require("raw-loader!./more.html")}, + document.getElementById('code-html') ); diff --git a/demo/webpack.config.js b/demo/webpack.config.js index 073b5b2..03ebb29 100644 --- a/demo/webpack.config.js +++ b/demo/webpack.config.js @@ -17,7 +17,12 @@ module.exports = { } }] + }, + { + test: /\.css$/, + use: [ 'style-loader', 'css-loader' ] } + ] }, resolve: { diff --git a/package.json b/package.json index b0f2c98..c249059 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ "graph" ], "devDependencies": { - "babel-cli": "^6.18.0", + "babel-cli": "^6.26.0", "babel-core": "^6.24.0", "babel-loader": "^7.1.2", "babel-plugin-add-module-exports": "^0.2.1", @@ -44,25 +44,31 @@ "babel-preset-react": "^6.24.1", "babel-preset-stage-2": "^6.24.1", "create-react-class": "^15.6.2", + "css-loader": "^0.28.8", "exports-loader": "^0.6.4", "file-loader": "^1.1.6", "highlight.js": "^9.12.0", "imports-loader": "^0.7.1", - "jsdom": "^9.9.1", - "mocha": "^3.2.0", - "mock-require": "^2.0.1", - "nightwatch": "^0.9.6", - "prop-types": "^15.5.8", + "jsdom": "^11.5.1", + "mocha": "^4.1.0", + "mock-require": "^2.0.2", + "nightwatch": "^0.9.19", + "prop-types": "^15.6.0", "raw-loader": "^0.5.1", "react": "^16.2.0", "react-dom": "^16.2.0", "react-highlight": "^0.10.0", "sinon": "^4.1.3", + "style-loader": "^0.19.1", "uglifyjs-webpack-plugin": "^1.1.6", "webpack": "^3.10.0", "webpack-dev-server": "^2.9.6" }, "dependencies": { - "highcharts": "^6.0.0" + "highcharts": "^6.0.4", + "prismjs": "^1.9.0", + "react-highlight": "briancappello/react-highlight#react-v16-compiled", + "react-prism": "^4.3.2", + "refractor": "^2.2.0" } } diff --git a/test/unit/simulateDOM.js b/test/unit/simulateDOM.js index ba50631..b216b3e 100644 --- a/test/unit/simulateDOM.js +++ b/test/unit/simulateDOM.js @@ -13,13 +13,13 @@ */ var jsdom = require('jsdom'); - -global.document = jsdom.jsdom('
'); -var win = global.document.defaultView; +const {JSDOM} = jsdom; +const {document} = (new JSDOM('
')).window; +var win = document.defaultView; global.window = global; for( var i in win ){ - if( i !== 'window' && win.hasOwnProperty(i)){ - global.window[i] = win[i]; - } + if( i !== 'window' && win.hasOwnProperty(i)){ + global.window[i] = win[i]; + } } diff --git a/webpack.config.js b/webpack.config.js index 1d0f780..d4e1c96 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -87,6 +87,7 @@ module.exports = function (env) { loader: 'babel-loader', options: { presets: ['env', 'react', 'stage-2'], + plugins: ["add-module-exports"] } } } From eb115a1c6a6a1b2931d44523d44dd386bfc03238 Mon Sep 17 00:00:00 2001 From: voicetime Date: Tue, 9 Jan 2018 03:29:02 +0300 Subject: [PATCH 3/3] fix tab to 2 --- demo/src/highmaps.jsx | 91 +++++++++++++++++++++--------------------- demo/src/highstock.jsx | 40 +++++++++---------- demo/src/index.jsx | 2 +- demo/src/more.jsx | 30 +++++++------- 4 files changed, 81 insertions(+), 82 deletions(-) diff --git a/demo/src/highmaps.jsx b/demo/src/highmaps.jsx index 061cfef..e665bdb 100644 --- a/demo/src/highmaps.jsx +++ b/demo/src/highmaps.jsx @@ -11,66 +11,65 @@ import './style.css' import './tomorrow.css' - const config = { - chart: { - spacingBottom: 20 - }, - title: { - text: 'Europe time zones' - }, - - legend: { - enabled: true - }, + chart: { + spacingBottom: 20 + }, + title: { + text: 'Europe time zones' + }, - plotOptions: { - map: { - allAreas: false, - joinBy: ['iso-a2', 'code'], - dataLabels: { - enabled: true, - color: 'white', - style: { - fontWeight: 'bold' - } - }, - mapData: maps, - tooltip: { - headerFormat: '', - pointFormat: '{point.name}: {series.name}' - } + legend: { + enabled: true + }, + plotOptions: { + map: { + allAreas: false, + joinBy: ['iso-a2', 'code'], + dataLabels: { + enabled: true, + color: 'white', + style: { + fontWeight: 'bold' } - }, + }, + mapData: maps, + tooltip: { + headerFormat: '', + pointFormat: '{point.name}: {series.name}' + } + + } + }, - series: [{ - name: 'UTC', - data: ['IE', 'IS', 'GB', 'PT'].map(function (code) { - return {code: code}; - }) - }, { - name: 'UTC + 1', - data: ['NO', 'SE', 'DK', 'DE', 'NL', 'BE', 'LU', 'ES', 'FR', 'PL', 'CZ', 'AT', 'CH', 'LI', 'SK', 'HU', - 'SI', 'IT', 'SM', 'HR', 'BA', 'YF', 'ME', 'AL', 'MK'].map(function (code) { - return {code: code}; - }) - }] + series: [{ + name: 'UTC', + data: ['IE', 'IS', 'GB', 'PT'].map(function (code) { + return {code: code}; + }) + }, { + name: 'UTC + 1', + data: ['NO', 'SE', 'DK', 'DE', 'NL', 'BE', 'LU', 'ES', 'FR', 'PL', 'CZ', 'AT', 'CH', 'LI', 'SK', 'HU', + 'SI', 'IT', 'SM', 'HR', 'BA', 'YF', 'ME', 'AL', 'MK'].map(function (code) { + return {code: code}; + }) + }] }; ReactDOM.render( - , - document.getElementById('test') + , + document.getElementById('test') ); ReactDOM.render( - {require("!!raw-loader!./highmaps.jsx")}, - document.getElementById('code-js') + {require("!!raw-loader!./highmaps.jsx")}, + document.getElementById('code-js') ); ReactDOM.render( - {require("raw-loader!./highmaps.html")}, - document.getElementById('code-html') + {require("raw-loader!./highmaps.html")}, + document.getElementById('code-html') ); require("file-loader?name=[name].[ext]!./highmaps.html"); diff --git a/demo/src/highstock.jsx b/demo/src/highstock.jsx index b6f64c6..b2ee1bb 100644 --- a/demo/src/highstock.jsx +++ b/demo/src/highstock.jsx @@ -11,38 +11,38 @@ import './tomorrow.css' const data = [ - [1220832000000, 22.56], [1220918400000, 21.67], [1221004800000, 21.66], [1221091200000, 21.81], [1221177600000, 21.28], [1221436800000, 20.05], [1221523200000, 19.98], [1221609600000, 18.26], [1221696000000, 19.16], [1221782400000, 20.13], [1222041600000, 18.72], [1222128000000, 18.12], [1222214400000, 18.39], [1222300800000, 18.85], [1222387200000, 18.32], [1222646400000, 15.04], [1222732800000, 16.24], [1222819200000, 15.59], [1222905600000, 14.3], [1222992000000, 13.87], [1223251200000, 14.02], [1223337600000, 12.74], [1223424000000, 12.83], [1223510400000, 12.68], [1223596800000, 13.8], [1223856000000, 15.75], [1223942400000, 14.87], [1224028800000, 13.99], [1224115200000, 14.56], [1224201600000, 13.91], [1224460800000, 14.06], [1224547200000, 13.07], [1224633600000, 13.84], [1224720000000, 14.03], [1224806400000, 13.77], [1225065600000, 13.16], [1225152000000, 14.27], [1225238400000, 14.94], [1225324800000, 15.86], [1225411200000, 15.37], [1225670400000, 15.28], [1225756800000, 15.86], [1225843200000, 14.76], [1225929600000, 14.16], [1226016000000, 14.03], [1226275200000, 13.7], [1226361600000, 13.54], [1226448000000, 12.87], [1226534400000, 13.78], [1226620800000, 12.89], [1226880000000, 12.59], [1226966400000, 12.84], [1227052800000, 12.33], [1227139200000, 11.5], [1227225600000, 11.8], [1227484800000, 13.28], [1227571200000, 12.97], [1227657600000, 13.57], [1227830400000, 13.24], [1228089600000, 12.7], [1228176000000, 13.21], [1228262400000, 13.7], [1228348800000, 13.06], [1228435200000, 13.43], [1228694400000, 14.25], [1228780800000, 14.29], [1228867200000, 14.03], [1228953600000, 13.57], [1229040000000, 14.04], [1229299200000, 13.54] + [1220832000000, 22.56], [1220918400000, 21.67], [1221004800000, 21.66], [1221091200000, 21.81], [1221177600000, 21.28], [1221436800000, 20.05], [1221523200000, 19.98], [1221609600000, 18.26], [1221696000000, 19.16], [1221782400000, 20.13], [1222041600000, 18.72], [1222128000000, 18.12], [1222214400000, 18.39], [1222300800000, 18.85], [1222387200000, 18.32], [1222646400000, 15.04], [1222732800000, 16.24], [1222819200000, 15.59], [1222905600000, 14.3], [1222992000000, 13.87], [1223251200000, 14.02], [1223337600000, 12.74], [1223424000000, 12.83], [1223510400000, 12.68], [1223596800000, 13.8], [1223856000000, 15.75], [1223942400000, 14.87], [1224028800000, 13.99], [1224115200000, 14.56], [1224201600000, 13.91], [1224460800000, 14.06], [1224547200000, 13.07], [1224633600000, 13.84], [1224720000000, 14.03], [1224806400000, 13.77], [1225065600000, 13.16], [1225152000000, 14.27], [1225238400000, 14.94], [1225324800000, 15.86], [1225411200000, 15.37], [1225670400000, 15.28], [1225756800000, 15.86], [1225843200000, 14.76], [1225929600000, 14.16], [1226016000000, 14.03], [1226275200000, 13.7], [1226361600000, 13.54], [1226448000000, 12.87], [1226534400000, 13.78], [1226620800000, 12.89], [1226880000000, 12.59], [1226966400000, 12.84], [1227052800000, 12.33], [1227139200000, 11.5], [1227225600000, 11.8], [1227484800000, 13.28], [1227571200000, 12.97], [1227657600000, 13.57], [1227830400000, 13.24], [1228089600000, 12.7], [1228176000000, 13.21], [1228262400000, 13.7], [1228348800000, 13.06], [1228435200000, 13.43], [1228694400000, 14.25], [1228780800000, 14.29], [1228867200000, 14.03], [1228953600000, 13.57], [1229040000000, 14.04], [1229299200000, 13.54] ]; const config = { - rangeSelector: { - selected: 1 - }, - title: { - text: 'AAPL Stock Price' - }, - series: [{ - name: 'AAPL', - data: data, - tooltip: { - valueDecimals: 2 - } - }] + rangeSelector: { + selected: 1 + }, + title: { + text: 'AAPL Stock Price' + }, + series: [{ + name: 'AAPL', + data: data, + tooltip: { + valueDecimals: 2 + } + }] }; ReactDOM.render( - , - document.getElementById('test') + , + document.getElementById('test') ); ReactDOM.render( - {require("!!raw-loader!./highstock.jsx")}, - document.getElementById('code-js') + {require("!!raw-loader!./highstock.jsx")}, + document.getElementById('code-js') ); ReactDOM.render( - {require("raw-loader!./highstock.html")}, - document.getElementById('code-html') + {require("raw-loader!./highstock.html")}, + document.getElementById('code-html') ); require("file-loader?name=[name].[ext]!./highstock.html"); diff --git a/demo/src/index.jsx b/demo/src/index.jsx index 0a93e47..8ecffd7 100644 --- a/demo/src/index.jsx +++ b/demo/src/index.jsx @@ -20,7 +20,7 @@ const config = { }; ReactDOM.render( - , + , document.getElementById('test') ); ReactDOM.render( diff --git a/demo/src/more.jsx b/demo/src/more.jsx index 5b80c0e..83f5c92 100644 --- a/demo/src/more.jsx +++ b/demo/src/more.jsx @@ -21,26 +21,26 @@ import './tomorrow.css' var config = { - chart: { - polar: true - }, - xAxis: { - categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] - }, - series: [{ - data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] - }] + chart: { + polar: true + }, + xAxis: { + categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] + }, + series: [{ + data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] + }] }; ReactDOM.render( - , - document.getElementById('test') + , + document.getElementById('test') ); ReactDOM.render( - {require("!!raw-loader!./more.jsx")}, - document.getElementById('code-js') + {require("!!raw-loader!./more.jsx")}, + document.getElementById('code-js') ); ReactDOM.render( - {require("raw-loader!./more.html")}, - document.getElementById('code-html') + {require("raw-loader!./more.html")}, + document.getElementById('code-html') );