Skip to content

Commit bfa0867

Browse files
dangreendangreen
authored
docs(examples): examples to open as sandbox (#820)
1 parent 79c6637 commit bfa0867

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+1027
-382
lines changed

‎.lintstagedrc

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"src/**/*.{ts,tsx}": ["eslint", "prettier --write"],
33
"stories/**/*.{ts,tsx}": ["eslint", "prettier --write"],
4+
"sandboxes/**/*.{ts,tsx}": ["eslint", "prettier --write"],
45
"test/**/*.{ts,tsx}": ["eslint", "prettier --write"]
56
}

‎.storybook/main.js

+8-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1+
const path = require('path');
2+
13
module.exports = {
2-
stories: [
3-
'../stories/*.tsx'
4-
],
4+
stories: ['../stories/*.tsx'],
55
addons: [
66
'@storybook/addon-docs',
77
'@storybook/addon-controls',
88
'@storybook/addon-actions',
99
],
10-
}
10+
webpackFinal(config) {
11+
config.resolve.alias['react-chartjs-2'] = path.resolve(__dirname, '../src');
12+
return config;
13+
},
14+
};

‎.storybook/manager.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { addons } from '@storybook/addons';
22

3-
import { theme } from './theme'
3+
import { theme } from './theme';
44

55
addons.setConfig({
66
theme,
77
panelPosition: 'right',
8-
})
8+
});

‎.storybook/preview.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { configureActions } from '@storybook/addon-actions'
1+
import { configureActions } from '@storybook/addon-actions';
22

33
configureActions({
44
depth: 5,
5-
})
5+
});

‎package.json

+8-2
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
"build": "rollup -c & yarn emitDeclarations",
2929
"prepublishOnly": "yarn build",
3030
"start:storybook": "start-storybook -p 6006 --ci",
31-
"test:lint": "eslint 'src/**/*.{ts,tsx}' 'stories/**/*.{ts,tsx}' 'test/**/*.{ts,tsx}'",
31+
"test:lint": "eslint 'src/**/*.{ts,tsx}' 'stories/**/*.{ts,tsx}' 'sandboxes/**/*.{ts,tsx}' 'test/**/*.{ts,tsx}'",
3232
"test:unit": "jest -c jest.config.json",
3333
"test:build": "yarn build",
3434
"test:size": "size-limit",
@@ -66,6 +66,7 @@
6666
"@types/jest": "^27.0.2",
6767
"@types/lodash": "^4.14.150",
6868
"@types/react": "^17.0.28",
69+
"@types/react-dom": "^17.0.10",
6970
"@typescript-eslint/eslint-plugin": "^5.0.0",
7071
"@typescript-eslint/parser": "^5.0.0",
7172
"browserslist": "^4.17.3",
@@ -103,7 +104,12 @@
103104
"webpack": "^5.58.2"
104105
},
105106
"tsd": {
106-
"directory": "./test"
107+
"directory": "./test",
108+
"compilerOptions": {
109+
"paths": {
110+
"react-chartjs-2": ["./src"]
111+
}
112+
}
107113
},
108114
"files": [
109115
"dist"

‎sandboxes/bar/grouped/App.tsx

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from 'react';
2+
import { Bar } from 'react-chartjs-2';
3+
import faker from 'faker';
4+
5+
export const options = {
6+
plugins: {
7+
title: {
8+
display: true,
9+
text: 'Chart.js Bar Chart - Stacked',
10+
},
11+
},
12+
responsive: true,
13+
interaction: {
14+
mode: 'index' as const,
15+
intersect: false,
16+
},
17+
scales: {
18+
x: {
19+
stacked: true,
20+
},
21+
y: {
22+
stacked: true,
23+
},
24+
},
25+
};
26+
27+
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
28+
29+
export const data = {
30+
labels,
31+
datasets: [
32+
{
33+
label: 'Dataset 1',
34+
data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
35+
backgroundColor: 'rgb(255, 99, 132)',
36+
stack: 'Stack 0',
37+
},
38+
{
39+
label: 'Dataset 2',
40+
data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
41+
backgroundColor: 'rgb(75, 192, 192)',
42+
stack: 'Stack 0',
43+
},
44+
{
45+
label: 'Dataset 3',
46+
data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
47+
backgroundColor: 'rgb(53, 162, 235)',
48+
stack: 'Stack 1',
49+
},
50+
],
51+
};
52+
53+
export function App() {
54+
return <Bar options={options} data={data} />;
55+
}

‎sandboxes/bar/grouped/index.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react';
2+
import { render } from 'react-dom';
3+
4+
import { App } from './App';
5+
6+
const rootElement = document.getElementById('root');
7+
render(<App />, rootElement);

‎sandboxes/bar/grouped/package.json

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"main": "index.tsx",
3+
"dependencies": {
4+
"chart.js": "^3.6.0",
5+
"faker": "5.5.3",
6+
"react": "17.0.2",
7+
"react-chartjs-2": "^3.3.0",
8+
"react-dom": "17.0.2",
9+
"react-scripts": "4.0.3"
10+
},
11+
"devDependencies": {
12+
"@types/react": "17.0.20",
13+
"@types/react-dom": "17.0.9",
14+
"typescript": "4.4.2"
15+
}
16+
}

‎sandboxes/bar/horizontal/App.tsx

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React from 'react';
2+
import { Bar } from 'react-chartjs-2';
3+
import faker from 'faker';
4+
5+
export const options = {
6+
indexAxis: 'y' as const,
7+
elements: {
8+
bar: {
9+
borderWidth: 2,
10+
},
11+
},
12+
responsive: true,
13+
plugins: {
14+
legend: {
15+
position: 'right' as const,
16+
},
17+
title: {
18+
display: true,
19+
text: 'Chart.js Horizontal Bar Chart',
20+
},
21+
},
22+
};
23+
24+
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
25+
26+
export const data = {
27+
labels,
28+
datasets: [
29+
{
30+
label: 'Dataset 1',
31+
data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
32+
borderColor: 'rgb(255, 99, 132)',
33+
backgroundColor: 'rgba(255, 99, 132, 0.5)',
34+
},
35+
{
36+
label: 'Dataset 2',
37+
data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
38+
borderColor: 'rgb(53, 162, 235)',
39+
backgroundColor: 'rgba(53, 162, 235, 0.5)',
40+
},
41+
],
42+
};
43+
44+
export function App() {
45+
return <Bar options={options} data={data} />;
46+
}

‎sandboxes/bar/horizontal/index.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react';
2+
import { render } from 'react-dom';
3+
4+
import { App } from './App';
5+
6+
const rootElement = document.getElementById('root');
7+
render(<App />, rootElement);

‎sandboxes/bar/horizontal/package.json

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"main": "index.tsx",
3+
"dependencies": {
4+
"chart.js": "^3.6.0",
5+
"faker": "5.5.3",
6+
"react": "17.0.2",
7+
"react-chartjs-2": "^3.3.0",
8+
"react-dom": "17.0.2",
9+
"react-scripts": "4.0.3"
10+
},
11+
"devDependencies": {
12+
"@types/react": "17.0.20",
13+
"@types/react-dom": "17.0.9",
14+
"typescript": "4.4.2"
15+
}
16+
}

‎sandboxes/bar/stacked/App.tsx

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React from 'react';
2+
import { Bar } from 'react-chartjs-2';
3+
import faker from 'faker';
4+
5+
export const options = {
6+
plugins: {
7+
title: {
8+
display: true,
9+
text: 'Chart.js Bar Chart - Stacked',
10+
},
11+
},
12+
responsive: true,
13+
scales: {
14+
x: {
15+
stacked: true,
16+
},
17+
y: {
18+
stacked: true,
19+
},
20+
},
21+
};
22+
23+
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
24+
25+
export const data = {
26+
labels,
27+
datasets: [
28+
{
29+
label: 'Dataset 1',
30+
data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
31+
backgroundColor: 'rgb(255, 99, 132)',
32+
},
33+
{
34+
label: 'Dataset 2',
35+
data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
36+
backgroundColor: 'rgb(75, 192, 192)',
37+
},
38+
{
39+
label: 'Dataset 3',
40+
data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
41+
backgroundColor: 'rgb(53, 162, 235)',
42+
},
43+
],
44+
};
45+
46+
export function App() {
47+
return <Bar options={options} data={data} />;
48+
}

‎sandboxes/bar/stacked/index.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react';
2+
import { render } from 'react-dom';
3+
4+
import { App } from './App';
5+
6+
const rootElement = document.getElementById('root');
7+
render(<App />, rootElement);

‎sandboxes/bar/stacked/package.json

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"main": "index.tsx",
3+
"dependencies": {
4+
"chart.js": "^3.6.0",
5+
"faker": "5.5.3",
6+
"react": "17.0.2",
7+
"react-chartjs-2": "^3.3.0",
8+
"react-dom": "17.0.2",
9+
"react-scripts": "4.0.3"
10+
},
11+
"devDependencies": {
12+
"@types/react": "17.0.20",
13+
"@types/react-dom": "17.0.9",
14+
"typescript": "4.4.2"
15+
}
16+
}

‎sandboxes/bar/vertical/App.tsx

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react';
2+
import { Bar } from 'react-chartjs-2';
3+
import faker from 'faker';
4+
5+
export const options = {
6+
responsive: true,
7+
plugins: {
8+
legend: {
9+
position: 'top' as const,
10+
},
11+
title: {
12+
display: true,
13+
text: 'Chart.js Bar Chart',
14+
},
15+
},
16+
};
17+
18+
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
19+
20+
export const data = {
21+
labels,
22+
datasets: [
23+
{
24+
label: 'Dataset 1',
25+
data: labels.map(() => faker.datatype.number({ min: 0, max: 1000 })),
26+
backgroundColor: 'rgba(255, 99, 132, 0.5)',
27+
},
28+
{
29+
label: 'Dataset 2',
30+
data: labels.map(() => faker.datatype.number({ min: 0, max: 1000 })),
31+
backgroundColor: 'rgba(53, 162, 235, 0.5)',
32+
},
33+
],
34+
};
35+
36+
export function App() {
37+
return <Bar options={options} data={data} />;
38+
}

‎sandboxes/bar/vertical/index.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react';
2+
import { render } from 'react-dom';
3+
4+
import { App } from './App';
5+
6+
const rootElement = document.getElementById('root');
7+
render(<App />, rootElement);

‎sandboxes/bar/vertical/package.json

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"main": "index.tsx",
3+
"dependencies": {
4+
"chart.js": "^3.6.0",
5+
"faker": "5.5.3",
6+
"react": "17.0.2",
7+
"react-chartjs-2": "^3.3.0",
8+
"react-dom": "17.0.2",
9+
"react-scripts": "4.0.3"
10+
},
11+
"devDependencies": {
12+
"@types/react": "17.0.20",
13+
"@types/react-dom": "17.0.9",
14+
"typescript": "4.4.2"
15+
}
16+
}

0 commit comments

Comments
 (0)