Skip to content

Commit ba00299

Browse files
jerairrestjerairrest
authored
Merge pull request #121 from zeroasterisk/add-react-storybook
Add react storybook
2 parents 83e4240 + ecd5a25 commit ba00299

File tree

7 files changed

+322
-1
lines changed

7 files changed

+322
-1
lines changed

‎.storybook/config.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { configure } from '@kadira/storybook';
2+
3+
function loadStories() {
4+
require('../stories');
5+
}
6+
7+
configure(loadStories, module);

‎README.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,17 @@ npm start
2828

2929
Then open [`localhost:8000`](http://localhost:8000) in a browser.
3030

31+
## Demo & Examples via React Storybook
32+
33+
We have to build the package, then you can run storybook.
34+
35+
```bash
36+
npm run build
37+
npm run storybook
38+
```
39+
40+
Then open [`localhost:6006`](http://localhost:6006) in a browser.
41+
3142

3243
## Installation via NPM
3344

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"lodash.isequal": "^4.4.0"
1717
},
1818
"devDependencies": {
19+
"@kadira/storybook": "^2.35.3",
1920
"babel-core": "^6.18.2",
2021
"babel-eslint": "^4.1.3",
2122
"babel-preset-es2015": "^6.13.2",
@@ -58,7 +59,9 @@
5859
"release": "NODE_ENV=production gulp release",
5960
"start": "gulp dev",
6061
"test": "mocha test/config/setup.js test/__tests__/**/*",
61-
"watch": "gulp watch:lib"
62+
"watch": "gulp watch:lib",
63+
"storybook": "start-storybook -p 6006",
64+
"build-storybook": "build-storybook"
6265
},
6366
"keywords": [
6467
"chart",

‎stories/MixLineBar.js‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
import React from 'react';
2+
import {Bar} from 'react-chartjs-2';
3+
import { storiesOf, action, linkTo } from '@kadira/storybook';
4+
5+
const options = {
6+
responsive: true,
7+
tooltips: {
8+
mode: 'label'
9+
},
10+
elements: {
11+
line: {
12+
fill: false
13+
}
14+
},
15+
scales: {
16+
xAxes: [
17+
{
18+
display: true,
19+
gridLines: {
20+
display: false
21+
},
22+
labels: {
23+
show: true
24+
}
25+
}
26+
],
27+
yAxes: [
28+
{
29+
type: 'linear',
30+
display: true,
31+
position: 'left',
32+
id: 'y-axis-1',
33+
gridLines: {
34+
display: false
35+
},
36+
labels: {
37+
show: true
38+
}
39+
},
40+
{
41+
type: 'linear',
42+
display: true,
43+
position: 'right',
44+
id: 'y-axis-2',
45+
gridLines: {
46+
display: false
47+
},
48+
labels: {
49+
show: true
50+
}
51+
}
52+
]
53+
}
54+
};
55+
56+
storiesOf('Mix Line+Bar Example', module)
57+
.add('Line & Bar Stacked', () => {
58+
const data = {
59+
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
60+
datasets: [{
61+
label: 'Sales',
62+
type:'line',
63+
data: [51, 65, 40, 49, 60, 37, 40],
64+
fill: false,
65+
borderColor: '#EC932F',
66+
backgroundColor: '#EC932F',
67+
pointBorderColor: '#EC932F',
68+
pointBackgroundColor: '#EC932F',
69+
pointHoverBackgroundColor: '#EC932F',
70+
pointHoverBorderColor: '#EC932F',
71+
yAxisID: 'y-axis-2'
72+
},{
73+
type: 'bar',
74+
label: 'Visitor',
75+
data: [200, 185, 590, 621, 250, 400, 95],
76+
fill: false,
77+
backgroundColor: '#71B37C',
78+
borderColor: '#71B37C',
79+
hoverBackgroundColor: '#71B37C',
80+
hoverBorderColor: '#71B37C',
81+
yAxisID: 'y-axis-1'
82+
}]
83+
};
84+
return <Bar data={data} options={options} />;
85+
})
86+
.add('Line & Line Stacked', () => {
87+
const data = {
88+
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
89+
datasets: [{
90+
label: 'Sales',
91+
type:'line',
92+
data: [51, 65, 40, 49, 60, 37, 40],
93+
fill: false,
94+
borderColor: '#EC932F',
95+
backgroundColor: '#EC932F',
96+
pointBorderColor: '#EC932F',
97+
pointBackgroundColor: '#EC932F',
98+
pointHoverBackgroundColor: '#EC932F',
99+
pointHoverBorderColor: '#EC932F',
100+
yAxisID: 'y-axis-2'
101+
},{
102+
type: 'line',
103+
label: 'Visitor',
104+
data: [200, 185, 590, 621, 250, 400, 95],
105+
fill: false,
106+
backgroundColor: '#71B37C',
107+
borderColor: '#71B37C',
108+
hoverBackgroundColor: '#71B37C',
109+
hoverBorderColor: '#71B37C',
110+
yAxisID: 'y-axis-1'
111+
}]
112+
};
113+
return <Bar data={data} options={options} />;
114+
})
115+
.add('Line & Line Past vs. Future', () => {
116+
const data = {
117+
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
118+
datasets: [{
119+
label: 'Past',
120+
type:'line',
121+
data: [51, 65, 40, 49, , , ],
122+
fill: false,
123+
borderColor: '#EC932F',
124+
backgroundColor: '#EC932F',
125+
pointBorderColor: '#EC932F',
126+
pointBackgroundColor: '#EC932F',
127+
pointHoverBackgroundColor: '#EC932F',
128+
pointHoverBorderColor: '#EC932F',
129+
yAxisID: 'y-axis-2'
130+
},{
131+
type: 'line',
132+
label: 'Future',
133+
data: [, , , 49, 250, 400, 95],
134+
fill: false,
135+
backgroundColor: '#71B37C',
136+
borderColor: '#71B37C',
137+
hoverBackgroundColor: '#71B37C',
138+
hoverBorderColor: '#71B37C',
139+
yAxisID: 'y-axis-1'
140+
}]
141+
};
142+
143+
const optionsYaxes = {
144+
type: 'linear',
145+
display: true,
146+
position: 'left',
147+
id: 'y-axis-1',
148+
gridLines: {
149+
display: false
150+
},
151+
ticks: {
152+
min: 0,
153+
max: 400,
154+
stepSize: 50,
155+
},
156+
labels: {
157+
show: true
158+
}
159+
};
160+
const optionsCustom = {
161+
responsive: true,
162+
tooltips: {
163+
mode: 'label'
164+
},
165+
elements: {
166+
line: {
167+
fill: false
168+
}
169+
},
170+
scales: {
171+
xAxes: [
172+
{
173+
display: true,
174+
gridLines: {
175+
display: false
176+
},
177+
labels: {
178+
show: true
179+
}
180+
}
181+
],
182+
yAxes: [
183+
Object.assign({}, optionsYaxes, { id: 'y-axis-1' }),
184+
Object.assign({}, optionsYaxes, { id: 'y-axis-2', display: false }),
185+
]
186+
}
187+
};
188+
return <Bar data={data} options={optionsCustom} />;
189+
});

‎stories/StockExamples.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from 'react';
2+
import { storiesOf, action, linkTo } from '@kadira/storybook';
3+
4+
// all of the "stock" stand-alone examples
5+
import DoughnutExample from '../example/src/components/doughnut';
6+
import DynamicDoughnutExample from '../example/src/components/dynamic-doughnut';
7+
import PieExample from '../example/src/components/pie';
8+
import LineExample from '../example/src/components/line';
9+
import BarExample from '../example/src/components/bar';
10+
import HorizontalBarExample from '../example/src/components/horizontalBar';
11+
import RadarExample from '../example/src/components/radar';
12+
import PolarExample from '../example/src/components/polar';
13+
import MixedDataExample from '../example/src/components/mix';
14+
15+
storiesOf('Doughnut Example', module)
16+
.add('Basic Example', () => (
17+
<DoughnutExample />
18+
));
19+
storiesOf('DynamicDoughnut Example', module)
20+
.add('Basic Example', () => (
21+
<DynamicDoughnutExample />
22+
));
23+
storiesOf('Pie Example', module)
24+
.add('Basic Example', () => (
25+
<PieExample />
26+
));
27+
storiesOf('Line Example', module)
28+
.add('Basic Example', () => (
29+
<LineExample />
30+
));
31+
storiesOf('Bar Example', module)
32+
.add('Basic Example', () => (
33+
<BarExample />
34+
));
35+
storiesOf('HorizontalBar Example', module)
36+
.add('Basic Example', () => (
37+
<HorizontalBarExample />
38+
));
39+
storiesOf('Radar Example', module)
40+
.add('Basic Example', () => (
41+
<RadarExample />
42+
));
43+
storiesOf('Polar Example', module)
44+
.add('Basic Example', () => (
45+
<PolarExample />
46+
));
47+
storiesOf('Polar Example', module)
48+
.add('Basic Example', () => (
49+
<PolarExample />
50+
));
51+
52+

‎stories/Welcome.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from 'react';
2+
import { storiesOf, action, linkTo } from '@kadira/storybook';
3+
4+
const styles = {
5+
main: {
6+
margin: 15,
7+
maxWidth: 600,
8+
lineHeight: 1.4,
9+
fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
10+
},
11+
12+
logo: {
13+
width: 200,
14+
},
15+
16+
link: {
17+
color: '#1474f3',
18+
textDecoration: 'none',
19+
borderBottom: '1px solid #1474f3',
20+
paddingBottom: 2,
21+
},
22+
23+
code: {
24+
fontSize: 15,
25+
fontWeight: 600,
26+
padding: "2px 5px",
27+
border: "1px solid #eae9e9",
28+
borderRadius: 4,
29+
backgroundColor: '#f3f2f2',
30+
color: '#3a3a3a',
31+
},
32+
};
33+
34+
const Welcome = props => (
35+
<div style={styles.main}>
36+
<h1>React wrapper for Chart.js</h1>
37+
<p>
38+
Use the links on the left to see variations of usage, with different props.
39+
</p>
40+
<p>
41+
See also&nbsp;
42+
<a href="http://gor181.github.io/react-chartjs-2/">Examples</a>
43+
<a href="https://github.com/gor181/react-chartjs-2">Code</a>
44+
</p>
45+
</div>
46+
);
47+
48+
storiesOf('Welcome', module)
49+
.add('to react-chartjs-2', () => (
50+
<Welcome />
51+
));
52+

‎stories/index.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react';
2+
import { storiesOf, action, linkTo } from '@kadira/storybook';
3+
4+
import './Welcome';
5+
import './StockExamples';
6+
import './MixLineBar';
7+

0 commit comments

Comments
 (0)