From 241c4d77403cc0b2625d78395df1a5ab44ea3afa Mon Sep 17 00:00:00 2001 From: Jon Brito Date: Tue, 24 Nov 2015 22:40:05 -0500 Subject: [PATCH 01/20] now exports interpolation functions from chartist. Minor API change. --- example/main.js | 4 ++-- index.js | 11 +++++------ 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/example/main.js b/example/main.js index 793b378..33bd3dd 100644 --- a/example/main.js +++ b/example/main.js @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import ChartistGraph from '../index'; +import { Graph, Interpolation } from '../index'; class Pie extends React.Component { render() { @@ -27,7 +27,7 @@ class Pie extends React.Component { return (
- +
) } diff --git a/index.js b/index.js index ff177f1..ebe0f29 100644 --- a/index.js +++ b/index.js @@ -3,6 +3,8 @@ import React, {Component} from 'react'; import {findDOMNode} from 'react-dom'; +const Chartist = require('chartist'); + class ChartistGraph extends Component { displayName: 'ChartistGraph' @@ -26,8 +28,6 @@ class ChartistGraph extends Component { } updateChart(config) { - let Chartist = require('chartist'); - let { type, data } = config; let options = config.options || {}; let responsiveOptions = config.responsiveOptions || []; @@ -45,7 +45,6 @@ class ChartistGraph extends Component { } } } - } return this.chartist; @@ -56,7 +55,6 @@ class ChartistGraph extends Component { const style = this.props.style ? this.props.style : {}; return (
) } - } ChartistGraph.propTypes = { @@ -65,6 +63,7 @@ ChartistGraph.propTypes = { className: React.PropTypes.string, options: React.PropTypes.object, responsiveOptions: React.PropTypes.array -} +}; -export default ChartistGraph; +export const Graph = ChartistGraph; +export const Interpolation = Chartist.Interpolation; From c16fc218da83e222c00f69a482879b9b4df5da79 Mon Sep 17 00:00:00 2001 From: Jon Brito Date: Tue, 24 Nov 2015 22:42:09 -0500 Subject: [PATCH 02/20] Update docs. --- README.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 2e1789d..441f037 100644 --- a/README.md +++ b/README.md @@ -18,10 +18,10 @@ $ npm install react-chartist --save ```JavaScript import React from 'react'; import ReactDOM from 'react-dom'; -import ChartistGraph from '../index'; +import { Graph, Interpolation } from '../index'; class Pie extends React.Component { - render() { + render () { var data = { labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'], @@ -33,6 +33,7 @@ class Pie extends React.Component { var options = { high: 10, low: -10, + // lineSmoothing: Interpolation.simple(), axisX: { labelInterpolationFnc: function(value, index) { return index % 2 === 0 ? value : null; @@ -44,7 +45,7 @@ class Pie extends React.Component { return (
- +
) } From e99b684c26550e5802e3d3e1f8eb6f844626ccab Mon Sep 17 00:00:00 2001 From: Jonathan Brito Date: Thu, 10 Dec 2015 15:22:44 -0500 Subject: [PATCH 03/20] Update README.md Updated badges. --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 441f037..ddf75a7 100644 --- a/README.md +++ b/README.md @@ -102,14 +102,14 @@ To build run `npm run build` ### Changelog -If you want to support react version under v0.13, use `npm install react-chartist@0.9.0` +Updated package to expose the entire Chartist API. ### License MIT -[npm-image]: https://img.shields.io/npm/v/react-chartist.svg?style=flat-square -[npm-url]: https://npmjs.org/package/react-chartist -[downloads-image]: http://img.shields.io/npm/dm/react-chartist.svg?style=flat-square -[downloads-url]: https://npmjs.org/package/react-chartist +[npm-image]: https://img.shields.io/npm/v/rc-chartist.svg?style=flat-square +[npm-url]: https://npmjs.org/package/rc-chartist +[downloads-image]: https://img.shields.io/npm/dm/rc-chartist.svg?style=flat-square +[downloads-url]: https://npmjs.org/package/rc-chartist From 7c0072ead93b050d7ed1bcddb1e0183122f77875 Mon Sep 17 00:00:00 2001 From: Jonathan Brito Date: Thu, 10 Dec 2015 21:54:01 -0500 Subject: [PATCH 04/20] Update README.md Update docs --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index ddf75a7..67cf47f 100644 --- a/README.md +++ b/README.md @@ -77,7 +77,6 @@ This module does not include the css files for Chartist. If you want to add it, ```HTML - ``` Or use `bower` or `npm` to install Chartist and include it in your build process. From 66a3d34c168f6b325b616134398a1e23f7dd2d2c Mon Sep 17 00:00:00 2001 From: Jonathan Brito Date: Thu, 10 Dec 2015 21:54:23 -0500 Subject: [PATCH 05/20] Update README.md Update docs --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 67cf47f..7297fee 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -react-chartist +rc-chartist ============== [![NPM version][npm-image]][npm-url] From c2b3da9ddb80adcb18b51e12553ceabe39dc2c45 Mon Sep 17 00:00:00 2001 From: Jonathan Brito Date: Thu, 17 Dec 2015 14:55:58 -0500 Subject: [PATCH 06/20] Update README.md Updating docs --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 7297fee..0693930 100644 --- a/README.md +++ b/README.md @@ -68,7 +68,7 @@ Please check out [Chartist.js API documentation](http://gionkunz.github.io/chart To add support for aspect ratio ```HTML - + ``` ### Note From 81f2f1fc0242a4ccd841aa750b982610bf9850d1 Mon Sep 17 00:00:00 2001 From: Jonathan Brito Date: Thu, 17 Dec 2015 14:57:04 -0500 Subject: [PATCH 07/20] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0693930..7ed70d4 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ React component for [Chartist.js](https://gionkunz.github.io/chartist-js/) ### Installation ``` -$ npm install react-chartist --save +$ npm install rc-chartist --save ``` ### Usage From ce57bd862218ca2e3de65fe0851f8d54fe92cba2 Mon Sep 17 00:00:00 2001 From: Jon Brito Date: Sun, 20 Dec 2015 00:46:08 -0500 Subject: [PATCH 08/20] Fixed warning about naming shouldComponentUpdate method incorrectly. Updated docs. --- .editorconfig | 20 ++++++++++++++++++++ example/main.js | 8 ++++---- example/package.json | 2 +- index.js | 16 ++++++++++++---- package.json | 18 +++++++++--------- 5 files changed, 46 insertions(+), 18 deletions(-) create mode 100755 .editorconfig diff --git a/.editorconfig b/.editorconfig new file mode 100755 index 0000000..04ba039 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,20 @@ +# EditorConfig helps developers define and maintain consistent +# coding styles between different editors and IDEs +# editorconfig.org + +root = true + +[*] + +# Change these settings to your own preference +indent_style = space +indent_size = 2 + +# We recommend you to keep these unchanged +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false diff --git a/example/main.js b/example/main.js index 33bd3dd..f69b142 100644 --- a/example/main.js +++ b/example/main.js @@ -3,12 +3,12 @@ import ReactDOM from 'react-dom'; import { Graph, Interpolation } from '../index'; class Pie extends React.Component { - render() { + render () { var data = { - labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'], + labels: [ 'W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10' ], series: [ - [1, 2, 4, 8, 6, -2, -1, -4, -6, -2] + [ 1, 2, 4, 8, 6, -2, -1, -4, -6, -2 ] ] }; @@ -33,4 +33,4 @@ class Pie extends React.Component { } } -ReactDOM.render(, document.getElementById('react-chart')) +ReactDOM.render(, document.getElementById('react-chart')); diff --git a/example/package.json b/example/package.json index ea5114e..9938ab4 100644 --- a/example/package.json +++ b/example/package.json @@ -1,5 +1,5 @@ { - "name": "react-chartist", + "name": "rc-chartist", "scripts": { "browser-sync": "browser-sync start --server --files './bundle.js'", "watch-js": "watchify main.js -t babelify -o bundle.js -dv", diff --git a/index.js b/index.js index ebe0f29..b1281ea 100644 --- a/index.js +++ b/index.js @@ -13,11 +13,16 @@ class ChartistGraph extends Component { this.updateChart(newProps); } + shouldComponentUpdate(nextProps, nextStates) { + return nextProps != this.props; + } + componentWillUnmount() { if (this.chartist) { try { this.chartist.detach(); - } catch (err) { + } + catch (err) { throw new Error('Internal chartist error', err); } } @@ -35,7 +40,8 @@ class ChartistGraph extends Component { if (this.chartist) { this.chartist.update(data, options, responsiveOptions); - } else { + } + else { this.chartist = new Chartist[type](findDOMNode(this), data, options, responsiveOptions); if (config.listener) { @@ -51,9 +57,10 @@ class ChartistGraph extends Component { } render() { - const className = this.props.className ? ' ' + this.props.className : '' + const className = this.props.className ? ' ' + this.props.className : ''; const style = this.props.style ? this.props.style : {}; - return (
) + + return (
); } } @@ -67,3 +74,4 @@ ChartistGraph.propTypes = { export const Graph = ChartistGraph; export const Interpolation = Chartist.Interpolation; +export const Axis = Chartist.Axis; diff --git a/package.json b/package.json index 90ae312..9b3b9ea 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,11 @@ { - "name": "react-chartist", + "name": "rc-chartist", "version": "0.10.1", "description": "React component for Chartist.js", "main": "dist/index.js", "repository": { "type": "git", - "url": "git://github.com/fraserxu/react-chartist.git" + "url": "git://github.com/loljs/react-chartist.git" }, "keywords": [ "react", @@ -15,18 +15,18 @@ "graph" ], "author": { - "name": "Fraser Xu", - "email": "xvfeng123@gmail.com", - "url": "https://fraserxu.me" + "name": "Jon Brito", + "email": "dev.jon.brito@gmail.com", + "url": "https://github.com/loljs" }, "license": "MIT", "bugs": { - "url": "https://github.com/fraserxu/react-chartist/issues" + "url": "https://github.com/loljs/react-chartist/issues" }, - "homepage": "https://github.com/fraserxu/react-chartist", + "homepage": "https://github.com/loljs/react-chartist", "peerDependencies": { - "react": "^0.14.0", - "react-dom": "^0.14.0" + "react": "^0.14.3", + "react-dom": "^0.14.3" }, "dependencies": { "chartist": "^0.9.4" From 7b662934ae861b88268c8666f6eb329ee5968489 Mon Sep 17 00:00:00 2001 From: Jon Brito Date: Sun, 20 Dec 2015 00:46:18 -0500 Subject: [PATCH 09/20] 0.10.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 9b3b9ea..354fbc1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-chartist", - "version": "0.10.1", + "version": "0.10.2", "description": "React component for Chartist.js", "main": "dist/index.js", "repository": { From a2d7120207c9b723b20ea4e3328fa5973c59f79a Mon Sep 17 00:00:00 2001 From: Nathan Hagen Date: Tue, 2 Feb 2016 16:58:16 -0500 Subject: [PATCH 10/20] Don't do any re-rendering if no props have changed --- index.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index ff177f1..0c4ca70 100644 --- a/index.js +++ b/index.js @@ -7,7 +7,17 @@ class ChartistGraph extends Component { displayName: 'ChartistGraph' - componentWillReceiveProps(newProps) { + shouldComponentUpdate(newProps) { + const { data, className, type, options, style, responsiveOptions } = this.props; + return data !== newProps.data + || className !== newProps.className + || type !== newProps.type + || options !== newProps.options + || style !== newProps.style + || responsiveOptions !== newProps.responsiveOptions; + } + + componentWillUpdate(newProps) { this.updateChart(newProps); } From c0a2019612336b6669ad48c18cbcbb705af12171 Mon Sep 17 00:00:00 2001 From: Jon Brito Date: Mon, 14 Mar 2016 16:42:34 -0400 Subject: [PATCH 11/20] merge --- index.js | 14 ++++++-------- package.json | 3 +-- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/index.js b/index.js index d4106ff..f8dc85e 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,6 @@ 'use strict'; import React, {Component} from 'react'; -import {findDOMNode} from 'react-dom'; const Chartist = require('chartist'); @@ -50,9 +49,8 @@ class ChartistGraph extends Component { if (this.chartist) { this.chartist.update(data, options, responsiveOptions); - } - else { - this.chartist = new Chartist[type](findDOMNode(this), data, options, responsiveOptions); + } else { + this.chartist = new Chartist[type](this.refs.chart, data, options, responsiveOptions); if (config.listener) { for (event in config.listener) { @@ -69,8 +67,7 @@ class ChartistGraph extends Component { render() { const className = this.props.className ? ' ' + this.props.className : ''; const style = this.props.style ? this.props.style : {}; - - return (
); + return (
) } } @@ -79,8 +76,9 @@ ChartistGraph.propTypes = { data: React.PropTypes.object.isRequired, className: React.PropTypes.string, options: React.PropTypes.object, - responsiveOptions: React.PropTypes.array -}; + responsiveOptions: React.PropTypes.array, + style: React.PropTypes.object +} export const Graph = ChartistGraph; export const Interpolation = Chartist.Interpolation; diff --git a/package.json b/package.json index 354fbc1..c218432 100644 --- a/package.json +++ b/package.json @@ -25,8 +25,7 @@ }, "homepage": "https://github.com/loljs/react-chartist", "peerDependencies": { - "react": "^0.14.3", - "react-dom": "^0.14.3" + "react": "^0.14.0" }, "dependencies": { "chartist": "^0.9.4" From d43406bdd6de9abb8470a0ac74961133d276fb8e Mon Sep 17 00:00:00 2001 From: Jon Brito Date: Mon, 14 Mar 2016 17:34:28 -0400 Subject: [PATCH 12/20] Added tests and travis config. --- .travis.yml | 3 +++ package.json | 8 ++++++- test/.setup.js | 20 ++++++++++++++++++ test/bar.test.js | 0 test/line.spec.js | 54 +++++++++++++++++++++++++++++++++++++++++++++++ test/pie.spec.js | 0 6 files changed, 84 insertions(+), 1 deletion(-) create mode 100644 .travis.yml create mode 100644 test/.setup.js create mode 100644 test/bar.test.js create mode 100644 test/line.spec.js create mode 100644 test/pie.spec.js diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..3626490 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,3 @@ +language: node_js +node_js: + "stable" diff --git a/package.json b/package.json index c218432..09cfd6f 100644 --- a/package.json +++ b/package.json @@ -31,12 +31,18 @@ "chartist": "^0.9.4" }, "scripts": { - "build": "mkdir -p dist && babel index.js > dist/index.js" + "build": "mkdir -p dist && babel index.js > dist/index.js", + "test": "mocha test/.setup.js test/**/*.spec.js" }, "devDependencies": { "babel": "^5.1.8", "babelify": "^5.0.3", "browserify": "^8.1.0", + "chai": "^3.5.0", + "enzyme": "^2.1.0", + "jsdom": "^8.1.0", + "mocha": "^2.4.5", + "react-addons-test-utils": "^0.14.3", "watchify": "^2.2.1" } } diff --git a/test/.setup.js b/test/.setup.js new file mode 100644 index 0000000..fc137b5 --- /dev/null +++ b/test/.setup.js @@ -0,0 +1,20 @@ +require('babel/register')(); + +var jsdom = require('jsdom').jsdom; + +var exposedProperties = ['window', 'navigator', 'document']; + +global.document = jsdom(''); +global.window = document.defaultView; +Object.keys(document.defaultView).forEach((property) => { + if (typeof global[property] === 'undefined') { + exposedProperties.push(property); + global[property] = document.defaultView[property]; + } +}); + +global.navigator = { + userAgent: 'node.js' +}; + +documentRef = document; diff --git a/test/bar.test.js b/test/bar.test.js new file mode 100644 index 0000000..e69de29 diff --git a/test/line.spec.js b/test/line.spec.js new file mode 100644 index 0000000..4d3a2c2 --- /dev/null +++ b/test/line.spec.js @@ -0,0 +1,54 @@ +import React from 'react'; +import { expect } from 'chai'; +import { shallow } from 'enzyme'; + +import { Graph, Interpolation } from '../index.js' + +const generateRandomGraphValues = () => + Array.apply(null, Array(29)).map((val, i) => + i % 7 === 0 ? Number(Math.floor(Math.random() * 23) + 1) : null) + +const props = { + data: { + series: [ generateRandomGraphValues() ] + }, + options: { + high: 25, + low: 0, + fullWidth: true, + height: '200px', + showArea: true, + chartPadding: { + left: 0, + right: 0 + }, + lineSmooth: Interpolation.simple({ + fillHoles: true + }), + axisY: { + showLabel: false, + offset: 0 + }, + axisX: { + showGrid: false, + labelInterpolationFnc: (value, index) => + index % 7 === 0 ? value : null + } + } +} + +describe('', () => { + let wrapper; + + before(() => { + wrapper = shallow(); + }); + + it('should expose Interpolation', () => { + expect(Interpolation).to.not.be.undefined; + }); + + it('should render a line chart', () => { + expect(wrapper.find('.ct-chart')).to.have.length(1); + }); +}); diff --git a/test/pie.spec.js b/test/pie.spec.js new file mode 100644 index 0000000..e69de29 From 7f780f626baf87fa58b3434343f416658079ac9d Mon Sep 17 00:00:00 2001 From: Jon Brito Date: Mon, 14 Mar 2016 17:37:25 -0400 Subject: [PATCH 13/20] Trigger Travis build. --- test/.setup.js | 1 + 1 file changed, 1 insertion(+) diff --git a/test/.setup.js b/test/.setup.js index fc137b5..b613476 100644 --- a/test/.setup.js +++ b/test/.setup.js @@ -6,6 +6,7 @@ var exposedProperties = ['window', 'navigator', 'document']; global.document = jsdom(''); global.window = document.defaultView; + Object.keys(document.defaultView).forEach((property) => { if (typeof global[property] === 'undefined') { exposedProperties.push(property); From 25e47f96e7f6a99e809e1761a4260b8c1722d79e Mon Sep 17 00:00:00 2001 From: Jon Brito Date: Mon, 14 Mar 2016 17:39:15 -0400 Subject: [PATCH 14/20] Oops. --- .travis.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index 3626490..7a56d2a 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,3 +1,3 @@ language: node_js node_js: - "stable" + - "stable" From 71bd994d4190e11ff1eda3c1cb9be131c65c8ace Mon Sep 17 00:00:00 2001 From: Jon Brito Date: Mon, 14 Mar 2016 17:42:18 -0400 Subject: [PATCH 15/20] Oops. --- .travis.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index 7a56d2a..a6ec651 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,3 +1,3 @@ language: node_js node_js: - - "stable" + - "4.2" From 938f566e41b250002bdeb1e3806b6993fd695b21 Mon Sep 17 00:00:00 2001 From: Jon Brito Date: Mon, 14 Mar 2016 17:46:37 -0400 Subject: [PATCH 16/20] Fix config. --- .travis.yml | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index a6ec651..5001901 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,3 +1,13 @@ +sudo: false language: node_js node_js: - - "4.2" +- stable +env: +- +- SKIP_BC=1 FAIL_ON_WARNINGS=1 +cache: + directories: + - node_modules +branches: + only: + - master From 1c3907703a8a6ee6f620854335a06867f1521bec Mon Sep 17 00:00:00 2001 From: Jon Brito Date: Mon, 14 Mar 2016 17:49:14 -0400 Subject: [PATCH 17/20] Testing Travis. --- .travis.yml | 3 --- 1 file changed, 3 deletions(-) diff --git a/.travis.yml b/.travis.yml index 5001901..615af61 100644 --- a/.travis.yml +++ b/.travis.yml @@ -2,9 +2,6 @@ sudo: false language: node_js node_js: - stable -env: -- -- SKIP_BC=1 FAIL_ON_WARNINGS=1 cache: directories: - node_modules From 0f6276456aa81ad5b5cba4e72e7416382f37cb89 Mon Sep 17 00:00:00 2001 From: Jon Brito Date: Mon, 14 Mar 2016 17:54:05 -0400 Subject: [PATCH 18/20] Fix deps. --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 09cfd6f..f0dda79 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,8 @@ "react": "^0.14.0" }, "dependencies": { - "chartist": "^0.9.4" + "chartist": "^0.9.4", + "react": "^0.14.3" }, "scripts": { "build": "mkdir -p dist && babel index.js > dist/index.js", From 119851270f63aae13ef11ec2134d225fc7a7d763 Mon Sep 17 00:00:00 2001 From: Jon Brito Date: Mon, 14 Mar 2016 17:56:21 -0400 Subject: [PATCH 19/20] Fix deps. --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index f0dda79..2c9b939 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "jsdom": "^8.1.0", "mocha": "^2.4.5", "react-addons-test-utils": "^0.14.3", + "react-dom": "^0.14.3", "watchify": "^2.2.1" } } From c5f3b4f3de31a38ca1148ac8d51cd51036a35c61 Mon Sep 17 00:00:00 2001 From: Jonathan Brito Date: Sun, 20 Mar 2016 16:18:04 -0400 Subject: [PATCH 20/20] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 7ed70d4..cf26b56 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ rc-chartist [![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][downloads-url] - +[![Travis](https://img.shields.io/travis/lolJS/react-chartist.svg)]() React component for [Chartist.js](https://gionkunz.github.io/chartist-js/)