Add react storybook

.storybook/config.js

@@ -0,0 +1,7 @@
+import { configure } from '@kadira/storybook';
+
+function loadStories() {
+  require('../stories');
+}
+
+configure(loadStories, module);

README.md

@@ -28,6 +28,17 @@ npm start
 
 Then open [`localhost:8000`](http://localhost:8000) in a browser.
 
+## Demo & Examples via React Storybook
+
+We have to build the package, then you can run storybook.
+
+```bash
+npm run build
+npm run storybook
+```
+
+Then open [`localhost:6006`](http://localhost:6006) in a browser.
+
 
 ## Installation via NPM
 

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",
@@ -58,7 +59,9 @@
     "release": "NODE_ENV=production gulp release",
     "start": "gulp dev",
     "test": "mocha test/config/setup.js test/__tests__/**/*",
-    "watch": "gulp watch:lib"
+    "watch": "gulp watch:lib",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "keywords": [
     "chart",

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 <Bar data={data} options={options} />;
+  })
+  .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 <Bar data={data} options={options} />;
+  })
+  .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 <Bar data={data} options={optionsCustom} />;
+  });

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', () => (
+    <DoughnutExample />
+  ));
+storiesOf('DynamicDoughnut Example', module)
+  .add('Basic Example', () => (
+    <DynamicDoughnutExample />
+  ));
+storiesOf('Pie Example', module)
+  .add('Basic Example', () => (
+    <PieExample />
+  ));
+storiesOf('Line Example', module)
+  .add('Basic Example', () => (
+    <LineExample />
+  ));
+storiesOf('Bar Example', module)
+  .add('Basic Example', () => (
+    <BarExample />
+  ));
+storiesOf('HorizontalBar Example', module)
+  .add('Basic Example', () => (
+    <HorizontalBarExample />
+  ));
+storiesOf('Radar Example', module)
+  .add('Basic Example', () => (
+    <RadarExample />
+  ));
+storiesOf('Polar Example', module)
+  .add('Basic Example', () => (
+    <PolarExample />
+  ));
+storiesOf('Polar Example', module)
+  .add('Basic Example', () => (
+    <PolarExample />
+  ));
+
+

stories/Welcome.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { storiesOf, action, linkTo } from '@kadira/storybook';
+
+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',
+  },
+};
+
+const Welcome = props => (
+  <div style={styles.main}>
+    <h1>React wrapper for Chart.js</h1>
+    <p>
+      Use the links on the left to see variations of usage, with different props.
+    </p>
+    <p>
+      See also&nbsp;
+      <a href="http://gor181.github.io/react-chartjs-2/">Examples</a>
+      <a href="https://github.com/gor181/react-chartjs-2">Code</a>
+    </p>
+  </div>
+);
+
+storiesOf('Welcome', module)
+  .add('to react-chartjs-2', () => (
+    <Welcome />
+  ));
+

stories/index.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { storiesOf, action, linkTo } from '@kadira/storybook';
+
+import './Welcome';
+import './StockExamples';
+import './MixLineBar';
+