From ac0a5d041f16039952d4398917782db050fc5d35 Mon Sep 17 00:00:00 2001 From: alan bount Date: Wed, 31 Aug 2016 14:29:47 -0400 Subject: [PATCH 1/5] add react-storybook --- .storybook/config.js | 7 ++++++ README.md | 26 +++++++++++++++++---- package.json | 7 ++++-- stories/Welcome.js | 54 ++++++++++++++++++++++++++++++++++++++++++++ stories/index.js | 51 +++++++++++++++++++++++++++++++++++++++++ 5 files changed, 138 insertions(+), 7 deletions(-) create mode 100644 .storybook/config.js create mode 100644 stories/Welcome.js create mode 100644 stories/index.js diff --git a/.storybook/config.js b/.storybook/config.js new file mode 100644 index 000000000..8e314a81f --- /dev/null +++ b/.storybook/config.js @@ -0,0 +1,7 @@ +import { configure } from '@kadira/storybook'; + +function loadStories() { + require('../stories'); +} + +configure(loadStories, module); diff --git a/README.md b/README.md index 7dd25f8b7..dc8575e67 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ -[![build status](https://travis-ci.org/gor181/react-chartjs-2.svg?branch=master)](https://travis-ci.org/gor181/react-chartjs-2) +[![build status](https://travis-ci.org/gor181/react-chartjs-2.svg?branch=master)](https://travis-ci.org/gor181/react-chartjs-2) # react-chartjs-2 -React wrapper for [ChartJs 2](http://www.chartjs.org/docs/#getting-started) +React wrapper for [ChartJs 2](http://www.chartjs.org/docs/#getting-started) Open for PR's and contributions! @@ -19,6 +19,22 @@ npm start Then open [`localhost:8000`](http://localhost:8000) in a browser. +## Demo & Examples via React Storybook + +We have to first tell NPM that it can find this module here (where you cloned). + +``` +npm link +npm link react-chartjs-2 +``` +Then you can just start up storybook + +``` +npm run storybook +``` + +Then open [`localhost:6006`](http://localhost:6006) in a browser. + ## Installation via NPM @@ -61,7 +77,7 @@ In order for Chart.js to obey the custom size you need to set `maintainAspectRat /> ``` -### Chart instance +### Chart instance Chart instance can be accessed by placing a ref to the element as: ``` @@ -94,11 +110,11 @@ A function to be called when mouse clicked on chart elememts, will return all el To build, watch and serve the examples (which will also watch the component source), run `npm start`. If you just want to watch changes to `src` and rebuild `lib`, run `npm run watch` (this is useful if you are working with `npm link`). -## Thanks +## Thanks Jed Watson for making react-component yo builder! ## License -MIT Licensed +MIT Licensed Copyright (c) 2016 Goran Udosic && Headstart App. diff --git a/package.json b/package.json index 7a90db3c5..2a744b6ce 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,8 @@ "jest": "^14.1.0", "react": "^0.14 || ^15.0.0-rc || ^15.0", "react-component-gulp-tasks": "git+https://github.com/gor181/react-component-gulp-tasks.git", - "react-dom": "^0.14 || ^15.0.0-rc || ^15.0" + "react-dom": "^0.14 || ^15.0.0-rc || ^15.0", + "@kadira/storybook": "^2.5.2" }, "peerDependencies": { "react": "^0.14 || ^15.0.0-rc || ^15.0", @@ -46,7 +47,9 @@ "release": "NODE_ENV=production gulp release", "start": "gulp dev", "test": "jest", - "watch": "gulp watch:lib" + "watch": "gulp watch:lib", + "storybook": "start-storybook -p 6006", + "build-storybook": "build-storybook" }, "jest": { "automock": false diff --git a/stories/Welcome.js b/stories/Welcome.js new file mode 100644 index 000000000..6d52a173b --- /dev/null +++ b/stories/Welcome.js @@ -0,0 +1,54 @@ +import React from 'react'; + +const styles = { + main: { + margin: 15, + maxWidth: 600, + lineHeight: 1.4, + fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif', + }, + + logo: { + width: 200, + }, + + link: { + color: '#1474f3', + textDecoration: 'none', + borderBottom: '1px solid #1474f3', + paddingBottom: 2, + }, + + code: { + fontSize: 15, + fontWeight: 600, + padding: "2px 5px", + border: "1px solid #eae9e9", + borderRadius: 4, + backgroundColor: '#f3f2f2', + color: '#3a3a3a', + }, +}; + +export default class Welcome extends React.Component { + showApp(e) { + e.preventDefault(); + if(this.props.showApp) this.props.showApp(); + } + + render() { + return ( +
+

React wrapper for Chart.js

+

+ Use the links on the left to see variations of usage, with different props. +

+

+ See also  + Examples + Code +

+
+ ); + } +} diff --git a/stories/index.js b/stories/index.js new file mode 100644 index 000000000..daf3f53e2 --- /dev/null +++ b/stories/index.js @@ -0,0 +1,51 @@ +import React from 'react'; +import { storiesOf, action, linkTo } from '@kadira/storybook'; +import Welcome from './Welcome'; + +import DoughnutExample from '../example/src/components/doughnut'; +import DynamicDoughnutExample from '../example/src/components/dynamic-doughnut'; +import PieExample from '../example/src/components/pie'; +import LineExample from '../example/src/components/line'; +import BarExample from '../example/src/components/bar'; +import HorizontalBarExample from '../example/src/components/horizontalBar'; +import RadarExample from '../example/src/components/radar'; +import PolarExample from '../example/src/components/polar'; +import MixedDataExample from '../example/src/components/mix'; + +storiesOf('Welcome', module) + .add('to react-chartjs-2', () => ( + + )); + +storiesOf('Doughnut Example', module) + .add('Basic Example', () => ( + + )); +storiesOf('DynamicDoughnut Example', module) + .add('Basic Example', () => ( + + )); +storiesOf('Pie Example', module) + .add('Basic Example', () => ( + + )); +storiesOf('Line Example', module) + .add('Basic Example', () => ( + + )); +storiesOf('Bar Example', module) + .add('Basic Example', () => ( + + )); +storiesOf('HorizontalBar Example', module) + .add('Basic Example', () => ( + + )); +storiesOf('Radar Example', module) + .add('Basic Example', () => ( + + )); +storiesOf('Polar Example', module) + .add('Basic Example', () => ( + + )); From f7ed9f1745c684ceee373ec42a85f264c6ab7e28 Mon Sep 17 00:00:00 2001 From: alan bount Date: Wed, 31 Aug 2016 15:38:01 -0400 Subject: [PATCH 2/5] split stories into isolated includes (Sections) --- stories/StockExamples.js | 52 ++++++++++++++++++++++++++++++++++++++++ stories/Welcome.js | 40 +++++++++++++++---------------- stories/index.js | 49 ++----------------------------------- 3 files changed, 73 insertions(+), 68 deletions(-) create mode 100644 stories/StockExamples.js diff --git a/stories/StockExamples.js b/stories/StockExamples.js new file mode 100644 index 000000000..2473779ed --- /dev/null +++ b/stories/StockExamples.js @@ -0,0 +1,52 @@ +import React from 'react'; +import { storiesOf, action, linkTo } from '@kadira/storybook'; + +// all of the "stock" stand-alone examples +import DoughnutExample from '../example/src/components/doughnut'; +import DynamicDoughnutExample from '../example/src/components/dynamic-doughnut'; +import PieExample from '../example/src/components/pie'; +import LineExample from '../example/src/components/line'; +import BarExample from '../example/src/components/bar'; +import HorizontalBarExample from '../example/src/components/horizontalBar'; +import RadarExample from '../example/src/components/radar'; +import PolarExample from '../example/src/components/polar'; +import MixedDataExample from '../example/src/components/mix'; + +storiesOf('Doughnut Example', module) + .add('Basic Example', () => ( + + )); +storiesOf('DynamicDoughnut Example', module) + .add('Basic Example', () => ( + + )); +storiesOf('Pie Example', module) + .add('Basic Example', () => ( + + )); +storiesOf('Line Example', module) + .add('Basic Example', () => ( + + )); +storiesOf('Bar Example', module) + .add('Basic Example', () => ( + + )); +storiesOf('HorizontalBar Example', module) + .add('Basic Example', () => ( + + )); +storiesOf('Radar Example', module) + .add('Basic Example', () => ( + + )); +storiesOf('Polar Example', module) + .add('Basic Example', () => ( + + )); +storiesOf('Polar Example', module) + .add('Basic Example', () => ( + + )); + + diff --git a/stories/Welcome.js b/stories/Welcome.js index 6d52a173b..633fd4b02 100644 --- a/stories/Welcome.js +++ b/stories/Welcome.js @@ -1,4 +1,5 @@ import React from 'react'; +import { storiesOf, action, linkTo } from '@kadira/storybook'; const styles = { main: { @@ -30,25 +31,22 @@ const styles = { }, }; -export default class Welcome extends React.Component { - showApp(e) { - e.preventDefault(); - if(this.props.showApp) this.props.showApp(); - } +const Welcome = props => ( +
+

React wrapper for Chart.js

+

+ Use the links on the left to see variations of usage, with different props. +

+

+ See also  + Examples + Code +

+
+); + +storiesOf('Welcome', module) + .add('to react-chartjs-2', () => ( + + )); - render() { - return ( -
-

React wrapper for Chart.js

-

- Use the links on the left to see variations of usage, with different props. -

-

- See also  - Examples - Code -

-
- ); - } -} diff --git a/stories/index.js b/stories/index.js index daf3f53e2..018c7e246 100644 --- a/stories/index.js +++ b/stories/index.js @@ -1,51 +1,6 @@ import React from 'react'; import { storiesOf, action, linkTo } from '@kadira/storybook'; -import Welcome from './Welcome'; -import DoughnutExample from '../example/src/components/doughnut'; -import DynamicDoughnutExample from '../example/src/components/dynamic-doughnut'; -import PieExample from '../example/src/components/pie'; -import LineExample from '../example/src/components/line'; -import BarExample from '../example/src/components/bar'; -import HorizontalBarExample from '../example/src/components/horizontalBar'; -import RadarExample from '../example/src/components/radar'; -import PolarExample from '../example/src/components/polar'; -import MixedDataExample from '../example/src/components/mix'; +import './Welcome'; +import './StockExamples'; -storiesOf('Welcome', module) - .add('to react-chartjs-2', () => ( - - )); - -storiesOf('Doughnut Example', module) - .add('Basic Example', () => ( - - )); -storiesOf('DynamicDoughnut Example', module) - .add('Basic Example', () => ( - - )); -storiesOf('Pie Example', module) - .add('Basic Example', () => ( - - )); -storiesOf('Line Example', module) - .add('Basic Example', () => ( - - )); -storiesOf('Bar Example', module) - .add('Basic Example', () => ( - - )); -storiesOf('HorizontalBar Example', module) - .add('Basic Example', () => ( - - )); -storiesOf('Radar Example', module) - .add('Basic Example', () => ( - - )); -storiesOf('Polar Example', module) - .add('Basic Example', () => ( - - )); From 5cd138f6e0f156751a7294f3e0339f631b8c1e51 Mon Sep 17 00:00:00 2001 From: alan bount Date: Wed, 31 Aug 2016 15:38:36 -0400 Subject: [PATCH 3/5] added some more examples for mixed, and mixed multi-line --- stories/MixLineBar.js | 189 ++++++++++++++++++++++++++++++++++++++++++ stories/index.js | 1 + 2 files changed, 190 insertions(+) create mode 100644 stories/MixLineBar.js diff --git a/stories/MixLineBar.js b/stories/MixLineBar.js new file mode 100644 index 000000000..b0fb85aee --- /dev/null +++ b/stories/MixLineBar.js @@ -0,0 +1,189 @@ +import React from 'react'; +import {Bar} from 'react-chartjs-2'; +import { storiesOf, action, linkTo } from '@kadira/storybook'; + +const options = { + responsive: true, + tooltips: { + mode: 'label' + }, + elements: { + line: { + fill: false + } + }, + scales: { + xAxes: [ + { + display: true, + gridLines: { + display: false + }, + labels: { + show: true + } + } + ], + yAxes: [ + { + type: 'linear', + display: true, + position: 'left', + id: 'y-axis-1', + gridLines: { + display: false + }, + labels: { + show: true + } + }, + { + type: 'linear', + display: true, + position: 'right', + id: 'y-axis-2', + gridLines: { + display: false + }, + labels: { + show: true + } + } + ] + } +}; + +storiesOf('Mix Line+Bar Example', module) + .add('Line & Bar Stacked', () => { + const data = { + labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], + datasets: [{ + label: 'Sales', + type:'line', + data: [51, 65, 40, 49, 60, 37, 40], + fill: false, + borderColor: '#EC932F', + backgroundColor: '#EC932F', + pointBorderColor: '#EC932F', + pointBackgroundColor: '#EC932F', + pointHoverBackgroundColor: '#EC932F', + pointHoverBorderColor: '#EC932F', + yAxisID: 'y-axis-2' + },{ + type: 'bar', + label: 'Visitor', + data: [200, 185, 590, 621, 250, 400, 95], + fill: false, + backgroundColor: '#71B37C', + borderColor: '#71B37C', + hoverBackgroundColor: '#71B37C', + hoverBorderColor: '#71B37C', + yAxisID: 'y-axis-1' + }] + }; + return ; + }) + .add('Line & Line Stacked', () => { + const data = { + labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], + datasets: [{ + label: 'Sales', + type:'line', + data: [51, 65, 40, 49, 60, 37, 40], + fill: false, + borderColor: '#EC932F', + backgroundColor: '#EC932F', + pointBorderColor: '#EC932F', + pointBackgroundColor: '#EC932F', + pointHoverBackgroundColor: '#EC932F', + pointHoverBorderColor: '#EC932F', + yAxisID: 'y-axis-2' + },{ + type: 'line', + label: 'Visitor', + data: [200, 185, 590, 621, 250, 400, 95], + fill: false, + backgroundColor: '#71B37C', + borderColor: '#71B37C', + hoverBackgroundColor: '#71B37C', + hoverBorderColor: '#71B37C', + yAxisID: 'y-axis-1' + }] + }; + return ; + }) + .add('Line & Line Past vs. Future', () => { + const data = { + labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], + datasets: [{ + label: 'Past', + type:'line', + data: [51, 65, 40, 49, , , ], + fill: false, + borderColor: '#EC932F', + backgroundColor: '#EC932F', + pointBorderColor: '#EC932F', + pointBackgroundColor: '#EC932F', + pointHoverBackgroundColor: '#EC932F', + pointHoverBorderColor: '#EC932F', + yAxisID: 'y-axis-2' + },{ + type: 'line', + label: 'Future', + data: [, , , 49, 250, 400, 95], + fill: false, + backgroundColor: '#71B37C', + borderColor: '#71B37C', + hoverBackgroundColor: '#71B37C', + hoverBorderColor: '#71B37C', + yAxisID: 'y-axis-1' + }] + }; + + const optionsYaxes = { + type: 'linear', + display: true, + position: 'left', + id: 'y-axis-1', + gridLines: { + display: false + }, + ticks: { + min: 0, + max: 400, + stepSize: 50, + }, + labels: { + show: true + } + }; + const optionsCustom = { + responsive: true, + tooltips: { + mode: 'label' + }, + elements: { + line: { + fill: false + } + }, + scales: { + xAxes: [ + { + display: true, + gridLines: { + display: false + }, + labels: { + show: true + } + } + ], + yAxes: [ + Object.assign({}, optionsYaxes, { id: 'y-axis-1' }), + Object.assign({}, optionsYaxes, { id: 'y-axis-2', display: false }), + ] + } + }; + return ; + }); diff --git a/stories/index.js b/stories/index.js index 018c7e246..9eee53ae1 100644 --- a/stories/index.js +++ b/stories/index.js @@ -3,4 +3,5 @@ import { storiesOf, action, linkTo } from '@kadira/storybook'; import './Welcome'; import './StockExamples'; +import './MixLineBar'; From 2f4bc622e4f373b33c4c152c985d447a5e982433 Mon Sep 17 00:00:00 2001 From: alan bount Date: Sun, 16 Apr 2017 21:37:18 -0400 Subject: [PATCH 4/5] added latest storybook --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 98d3d2525..e665e2ae1 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "lodash.isequal": "^4.4.0" }, "devDependencies": { + "@kadira/storybook": "^2.35.3", "babel-core": "^6.18.2", "babel-eslint": "^4.1.3", "babel-preset-es2015": "^6.13.2", From ecd5a25d56e05b0a663611cfbd5125074386a492 Mon Sep 17 00:00:00 2001 From: alan bount Date: Sun, 16 Apr 2017 21:44:30 -0400 Subject: [PATCH 5/5] updated README --- README.md | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index c243e0e93..a26584aec 100644 --- a/README.md +++ b/README.md @@ -30,16 +30,10 @@ Then open [`localhost:8000`](http://localhost:8000) in a browser. ## Demo & Examples via React Storybook -We have to first tell NPM that it can find this module here (where you cloned). - -```bash -npm link -npm link react-chartjs-2 -``` - -Then you can just start up storybook +We have to build the package, then you can run storybook. ```bash +npm run build npm run storybook ```