Se arreglan problemas de Compatibilidad y se vuelven todos componentes funcionales.

Se prepara para produccion.
Se sube a version 1.1.5
Se sube a GitHub 1.1.5

.eslintrc

@@ -1,9 +1,6 @@
 {
   "parser": "babel-eslint",
-  "extends": [
+  "extends": "react-app",
-    "standard",
-    "standard-react"
-  ],
   "env": {
     "es6": true
   },

README.md

@@ -2,7 +2,7 @@
 
 > Libreria de chart.js para React.js
 
-[![NPM](https://img.shields.io/npm/v/chart-2-react.svg)](https://www.npmjs.com/package/chart-2-react) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+[![NPM](https://img.shields.io/npm/v/chart-2-react.svg)](https://www.npmjs.com/package/chartjs-2-react) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
 ## Install
 

example/.eslintcache

@@ -0,0 +1 @@
+[{"/home/coder/project/Chartjs-2-React/example/src/index.js":"1","/home/coder/project/Chartjs-2-React/example/src/App.js":"2"},{"size":164,"mtime":1584058544299,"results":"3","hashOfConfig":"4"},{"size":3054,"mtime":1607979071729,"results":"5","hashOfConfig":"4"},{"filePath":"6","messages":"7","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"8"},"3tjic6",{"filePath":"9","messages":"10","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/coder/project/Chartjs-2-React/example/src/index.js",[],["11","12"],"/home/coder/project/Chartjs-2-React/example/src/App.js",[],{"ruleId":"13","replacedBy":"14"},{"ruleId":"15","replacedBy":"16"},"no-native-reassign",["17"],"no-negated-in-lhs",["18"],"no-global-assign","no-unsafe-negation"]

example/package.json

@@ -1,20 +1,32 @@
 {
   "name": "chartjs-2-react-example",
   "homepage": "https://aleleba.github.io/chartjs-2-react",
-  "version": "0.0.0",
+  "version": "1.1.5",
   "license": "MIT",
   "private": true,
   "dependencies": {
+    "chartjs-2-react": "file:..",
     "prop-types": "^15.6.2",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
-    "react-scripts": "^1.1.4",
+    "react-scripts": "^4.0.1"
-    "chartjs-2-react": "file:.."
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

example/src/App.js

@@ -1,14 +1,100 @@
-import React, { Component } from 'react'
+import React, { Component } from 'react';
 
-import { RadialGauge } from 'chartjs-2-react'
+import { RadialGauge, Bar, Line } from 'chartjs-2-react';
 
 export default class App extends Component {
+
   render () {
+
     return (
-      <div style={{maxWidth: '600px', marginTop: '25px'}}>
+      <div style={{paddingBottom: '100px'}}>
+
+        <div style={{maxWidth: '600px', marginTop: '25px', margin: 'auto'}}>
           <h3 style={{textAlign: 'center'}}>RadialGauge Component:</h3>
           <RadialGauge />
         </div>
+
+        <div style={{maxWidth: '600px', marginTop: '25px', margin: 'auto'}}>
+          <h3 style={{textAlign: 'center'}}>Bar Component:</h3>
+          <Bar />
+        </div>
+
+        <div style={{maxWidth: '600px', marginTop: '25px', margin: 'auto'}}>
+          <h3 style={{textAlign: 'center'}}>Line Component:</h3>
+          <Line />
+        </div>
+
+        <div style={{maxWidth: '600px', marginTop: '25px', margin: 'auto'}}>
+          <h3 style={{textAlign: 'center'}}>Multi Axis Bar Line Component:</h3>
+          <Bar config={{
+            data: {
+              datasets: [{
+                  label: 'Bar Dataset',
+                  data: [10, 20, 30, 40],
+                  yAxisID: 'A',
+                  backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                  borderColor: 'rgba(75, 192, 192, 1)'
+              },
+              {
+                label: 'Bar Dataset',
+                data: [10, 20, 30, 40],
+                yAxisID: 'A',
+                backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                borderColor: 'rgba(75, 192, 192, 1)'
+              },
+              {
+                label: 'Bar Dataset',
+                data: [10, 20, 30, 40],
+                yAxisID: 'A',
+                backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                borderColor: 'rgba(75, 192, 192, 1)'
+              },
+              {
+                // Changes this dataset to become a line
+                type: 'line',
+                yAxisID: 'B',
+                label: 'Line Dataset',
+                data: [5, 8, 10, 30],
+                backgroundColor: 'transparent',
+                borderColor: 'rgba(75, 192, 192, 1)'
+              },
+              {
+                // Changes this dataset to become a line
+                type: 'line',
+                yAxisID: 'B',
+                label: 'Line Dataset',
+                data: [15, 20, 25, 30],
+                backgroundColor: 'transparent',
+                borderColor: 'rgba(75, 192, 192, 1)'
+              }],
+              labels: ['January', 'February', 'March', 'April'],
+          },
+          options: {
+            scales: {
+              yAxes: [{
+                id: 'A',
+                type: 'linear',
+                position: 'left',
+                /*ticks: {
+                  max: 1,
+                  min: 0
+                }*/
+              }, {
+                id: 'B',
+                type: 'linear',
+                position: 'right',
+                /*ticks: {
+                  max: 1,
+                  min: 0
+                }*/
+              }]
+            }
+          }
+          }}/>
+        </div>
+
+      </div>
     )
   }
+  
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chartjs-2-react",
-  "version": "1.0.9",
+  "version": "1.1.5",
   "description": "Libreria de chart.js para React.js",
   "author": "aleleba",
   "license": "MIT",
@@ -46,13 +46,13 @@
     "gh-pages": "^1.2.0",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
-    "react-scripts": "^1.1.4",
+    "react-scripts": "^4.0.1",
     "rollup": "^0.64.1",
     "rollup-plugin-babel": "^3.0.7",
     "rollup-plugin-commonjs": "^9.1.3",
     "rollup-plugin-node-resolve": "^3.3.0",
     "rollup-plugin-peer-deps-external": "^2.2.0",
-    "rollup-plugin-postcss": "^1.6.2",
+    "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-url": "^1.4.0"
   },
   "files": [
@@ -60,6 +60,7 @@
   ],
   "dependencies": {
     "chart.js": "^2.9.3",
-    "chartjs-chart-radial-gauge": "^1.0.3"
+    "chartjs-chart-radial-gauge": "^1.0.3",
+    "request": "^2.88.2"
   }
 }

src/Bar.jsx

@@ -0,0 +1,87 @@
+import React, { useState, useEffect } from 'react';
+
+import ID from './Service/ID.js';
+
+let BarComponent = props => {
+
+    let id = props.id ? props.id : ID(),
+        data = {
+            labels: ['Valor 1', 'Valor 2', 'Valor 3', 'Valor 4', 'Valor 5'],
+            datasets: [{
+                label: 'Valor',
+                data: [],
+                backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                borderColor: 'rgba(75, 192, 192, 1)',
+                borderWidth: 1
+            }]
+        },
+        options = {
+            responsive: true,
+            scales: {
+                yAxes: [{
+                    ticks: {
+                        beginAtZero: true
+                    }
+                }]
+            },
+            legend: {
+                display: true,
+                position: 'bottom'
+            }
+        }
+
+    for(let i = 0; i < 5 ; i ++){
+
+        let dato = Math.round(Math.random() * 25)
+
+        data.datasets[0].data.push(dato)
+
+    }
+
+    let [state, setState] = useState({
+        id,
+        chart: null,
+        data,
+        options
+    })
+
+    useEffect( ()=> {
+
+        var ctx = document.getElementById(`${state.id}`).getContext('2d');
+
+        let config = {
+            type: 'bar',
+            data: (props.config !== undefined) && (props.config.data !== undefined) ? props.config.data : state.data,
+            options: (props.config !== undefined) && (props.config.options !== undefined) ? props.config.options : state.options
+        }
+
+        setState({
+            id: props.id !== undefined ? props.id : state.id,
+            chart: new Chart(ctx, config)
+        })
+
+    }, [props])
+
+    if (state.chart !== null) {
+
+        if((props.config !== undefined) && (props.config.data !== undefined)){
+            state.chart.data.labels = props.config.data.labels
+            state.chart.data.datasets = props.config.data.datasets
+        }
+
+        if((props.config !== undefined) && (props.config.options !== undefined)){
+            state.chart.options = props.config.options
+        }
+  
+        state.chart.update();
+
+        return <canvas id={`${state.id}`} />
+
+
+    } else { 
+        return <canvas id={`${state.id}`} />
+    }
+
+}
+
+export default BarComponent

src/Line.jsx

@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react';
+
+import ID from './Service/ID.js';
+
+let LineComponent = props => {
+
+    let id = props.id ? props.id : ID(),
+        data = {
+            labels: ['Valor 1', 'Valor 2', 'Valor 3', 'Valor 4', 'Valor 5'],
+            datasets: [{
+                label: 'Valor',
+                fill: false,
+                data: [],
+                backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                borderColor: 'rgba(75, 192, 192, 1)',
+                borderWidth: 1
+            }]
+        },
+        options = {
+            responsive: true,
+            scales: {
+                yAxes: [{
+                    ticks: {
+                        beginAtZero: true
+                    }
+                }]
+            },
+            legend: {
+                display: true,
+                position: 'bottom'
+            }
+        }
+
+    for(let i = 0; i < 5 ; i ++){
+
+        let dato = Math.round(Math.random() * 25)
+
+        data.datasets[0].data.push(dato)
+
+    }
+
+    let [state, setState] = useState({
+        id,
+        chart: null,
+        data,
+        options
+    })
+
+    useEffect( ()=> {
+
+        var ctx = document.getElementById(`${state.id}`).getContext('2d');
+
+        let config = {
+            type: 'line',
+            data: (props.config !== undefined) && (props.config.data !== undefined) ? props.config.data : state.data,
+            options: (props.config !== undefined) && (props.config.options !== undefined) ? props.config.options : state.options
+        }
+
+        setState({
+            id: props.id !== undefined ? props.id : state.id,
+            chart: new Chart(ctx, config)
+        })
+
+    }, [props])
+
+    if (state.chart !== null) {
+
+        if((props.config !== undefined) && (props.config.data !== undefined)){
+            state.chart.data.labels = props.config.data.labels
+            state.chart.data.datasets = props.config.data.datasets
+        }
+
+        if((props.config !== undefined) && (props.config.options !== undefined)){
+            state.chart.options = props.config.options
+        }
+  
+        state.chart.update();
+
+        return <canvas id={`${state.id}`} />
+
+
+    } else { 
+        return <canvas id={`${state.id}`} />
+    }
+
+
+}
+
+export default LineComponent

src/RadialGauge.jsx

@@ -1,121 +1,119 @@
-import React, { Component } from 'react';
+import React, { useState, useEffect } from 'react';
 
 import Chart from 'chart.js';
 
 import 'chartjs-chart-radial-gauge/build/Chart.RadialGauge.umd.min.js';
 
-class RadialGauge extends Component {
+import ID from './Service/ID.js'
 
-  constructor(props) { 
+let RadialGauge = props => {
-    super(props)
 
   let porcentaje = Math.round(Math.random() * 100),
       porcentajeTexto = `${porcentaje} %`
         
-    this.state = {
+  let id = props.id ? props.id : ID()
+
+  let [state, setState] = useState({
+    id,
     chart: null,
     porcentaje,
     porcentajeTexto
-    }
+  })
 
-  }
+  useEffect( () => {
 
-  componentDidMount() {
+    var ctx = document.getElementById(`${state.id}`).getContext('2d');
-
-    var ctx = document.getElementById('chart').getContext('2d');
 
     var config = {
       type: 'radialGauge',
       data: {
-          labels: this.props.config ? (this.props.config.data ? (this.props.config.data.labels || ["Porcentaje"]) : ["Porcentaje"]) : ["Porcentaje"],
+        labels: props.config ? (props.config.data ? (props.config.data.labels || ["Porcentaje"]) : ["Porcentaje"]) : ["Porcentaje"],
         datasets: [
           {
-            data: this.props.config ? ((this.props.config.data) ? (this.props.config.data.datasets !== undefined ? [this.props.config.data.datasets.data] : [this.state.porcentaje]) : [this.state.porcentaje]) : [this.state.porcentaje],
+          data: props.config ? ((props.config.data) ? (props.config.data.datasets !== undefined ? [props.config.data.datasets.data] : [state.porcentaje]) : [state.porcentaje]) : [state.porcentaje],
-            backgroundColor: this.props.config ? ( this.props.config.data ? (((this.props.config.data.datasets !== undefined) && (this.props.config.data.datasets.backgroundColor)) ? this.props.config.data.datasets.backgroundColor : '#2A969E') : '#2A969E') : '#2A969E',
+          backgroundColor: props.config ? ( props.config.data ? (((props.config.data.datasets !== undefined) && (props.config.data.datasets.backgroundColor)) ? props.config.data.datasets.backgroundColor : '#2A969E') : '#2A969E') : '#2A969E',
-            borderWidth: this.props.config ? ( this.props.config.data ? (((this.props.config.data.datasets !== undefined) && (this.props.config.data.datasets.borderWidth)) ? this.props.config.data.datasets.borderWidth : 0) : 0) : 0,
+          borderWidth: props.config ? ( props.config.data ? (((props.config.data.datasets !== undefined) && (props.config.data.datasets.borderWidth)) ? props.config.data.datasets.borderWidth : 0) : 0) : 0,
-            label: this.props.config ? ( this.props.config.data ? (((this.props.config.data.datasets !== undefined) && (this.props.config.data.datasets.label)) ? this.props.config.data.datasets.label : "Porcentaje") : "Porcentaje") : "Porcentaje"
+          label: props.config ? ( props.config.data ? (((props.config.data.datasets !== undefined) && (props.config.data.datasets.label)) ? props.config.data.datasets.label : "Porcentaje") : "Porcentaje") : "Porcentaje"
           }
         ]
       },
       options: {
         title: {
-            display: this.props.config ? ((this.props.config.options) ? (this.props.config.options.title !== undefined ? this.props.config.options.title.display : false) : false) : false,
+          display: props.config ? ((props.config.options) ? (props.config.options.title !== undefined ? props.config.options.title.display : false) : false) : false,
-            text: this.props.config ? ((this.props.config.options) ? (((this.props.config.options.title) && (this.props.config.options.title.text)) !== undefined ? this.props.config.options.title.text : "Porcentaje") : "Porcentaje") : "Porcentaje"
+          text: props.config ? ((props.config.options) ? (((props.config.options.title) && (props.config.options.title.text)) !== undefined ? props.config.options.title.text : "Porcentaje") : "Porcentaje") : "Porcentaje"
         },
-          responsive: this.props.config ? ((this.props.config.options) ? (this.props.config.options.responsive || true) : true) : true,
+        responsive: props.config ? ((props.config.options) ? (props.config.options.responsive || true) : true) : true,
-          legend: this.props.config ? ((this.props.config.options) ? (this.props.config.options.leyend || {}) : {}) : {},
+        legend: props.config ? ((props.config.options) ? (props.config.options.leyend || {}) : {}) : {},
         animation: {
           // Boolean - Whether we animate the rotation of the radialGauge
-            animateRotate: this.props.config ? ((this.props.config.options) ? (this.props.config.options.animation !== undefined ? this.props.config.options.animation.animateRotate : true) : true ) : true,
+          animateRotate: props.config ? ((props.config.options) ? (props.config.options.animation !== undefined ? props.config.options.animation.animateRotate : true) : true ) : true,
           // Boolean - Whether we animate scaling the radialGauge from the centre
-            animateScale: this.props.config ? ((this.props.config.options) ? (this.props.config.options.animation !== undefined ? this.props.config.options.animation.animateScale : true) : true) : true
+          animateScale: props.config ? ((props.config.options) ? (props.config.options.animation !== undefined ? props.config.options.animation.animateScale : true) : true) : true
         },
       
         // The percentage of the chart that is the center area
-          centerPercentage: this.props.config ? ((this.props.config.options) ? (this.props.config.options.centerPercentage || 80) : 80 ) : 80,
+        centerPercentage: props.config ? ((props.config.options) ? (props.config.options.centerPercentage || 80) : 80 ) : 80,
       
         // The rotation for the start of the metric's arc
-          rotation: this.props.config ? ((this.props.config.options) ? (this.props.config.options.rotation || -Math.PI / 2) : -Math.PI / 2) : -Math.PI / 2,
+        rotation: props.config ? ((props.config.options) ? (props.config.options.rotation || -Math.PI / 2) : -Math.PI / 2) : -Math.PI / 2,
       
         // the color of the radial gauge's track
-          trackColor: this.props.config ? ((this.props.config.options) ? (this.props.config.options.trackColor || 'rgb(204, 221, 238)') : 'rgb(204, 221, 238)' ) : 'rgb(204, 221, 238)',
+        trackColor: props.config ? ((props.config.options) ? (props.config.options.trackColor || 'rgb(204, 221, 238)') : 'rgb(204, 221, 238)' ) : 'rgb(204, 221, 238)',
       
         // the domain for the data, default is [0, 100]
-          domain: this.props.config ? ((this.props.config.options) ? (this.props.config.options.domain || [0, 100]) : [0, 100]) : [0, 100],
+        domain: props.config ? ((props.config.options) ? (props.config.options.domain || [0, 100]) : [0, 100]) : [0, 100],
         
         // whether arc for the gauge should have rounded corners
-          roundedCorners: this.props.config ? ((this.props.config.options) ? (this.props.config.options.roundedCorners || true) : true) : true,
+        roundedCorners: props.config ? ((props.config.options) ? (props.config.options.roundedCorners || true) : true) : true,
       
         // center value options
         centerArea: {
           // whether to display the center text value
-            displayText: this.props.config ? ((this.props.config.options) ? (((this.props.config.options.centerArea !== undefined) && (this.props.config.options.centerArea.displayText)) ? this.props.config.options.centerArea.displayText : true) : true) : true,
+          displayText: props.config ? ((props.config.options) ? (((props.config.options.centerArea !== undefined) && (props.config.options.centerArea.displayText)) ? props.config.options.centerArea.displayText : true) : true) : true,
           // font for the center text
-            fontFamily: this.props.config ? ((this.props.config.options) ? (this.props.config.options.centerArea !== undefined ? this.props.config.options.centerArea.fontFamily : null) : null) : null,
+          fontFamily: props.config ? ((props.config.options) ? (props.config.options.centerArea !== undefined ? props.config.options.centerArea.fontFamily : null) : null) : null,
           // color of the center text
-            fontColor: this.props.config ? ((this.props.config.options) ? (this.props.config.options.centerArea !== undefined ? this.props.config.options.centerArea.fontColor : null) : null) : null,
+          fontColor: props.config ? ((props.config.options) ? (props.config.options.centerArea !== undefined ? props.config.options.centerArea.fontColor : null) : null) : null,
           // the size of the center text
-            fontSize: this.props.config ? ((this.props.config.options) ? (this.props.config.options.centerArea !== undefined ? this.props.config.options.centerArea.fontSize : null) : null) : null,
+          fontSize: props.config ? ((props.config.options) ? (props.config.options.centerArea !== undefined ? props.config.options.centerArea.fontSize : null) : null) : null,
           // padding around the center area
-            padding: this.props.config ? ((this.props.config.options) ? (this.props.config.options.centerArea !== undefined ? this.props.config.options.centerArea.padding : null) : null) : null,
+          padding: props.config ? ((props.config.options) ? (props.config.options.centerArea !== undefined ? props.config.options.centerArea.padding : null) : null) : null,
           // an image to use for the center background
-            backgroundImage: this.props.config ? ((this.props.config.options) ? (this.props.config.options.centerArea !== undefined ? this.props.config.options.centerArea.backgroundImage : null) : null) : null,
+          backgroundImage: props.config ? ((props.config.options) ? (props.config.options.centerArea !== undefined ? props.config.options.centerArea.backgroundImage : null) : null) : null,
           // a color to use for the center background
-            backgroundColor: this.props.config ? ((this.props.config.options) ? (this.props.config.options.centerArea !== undefined ? this.props.config.options.centerArea.backgroundColor : null) : null) : null,
+          backgroundColor: props.config ? ((props.config.options) ? (props.config.options.centerArea !== undefined ? props.config.options.centerArea.backgroundColor : null) : null) : null,
           // the text to display in the center
           // this could be a string or a callback that returns a string
           // if a callback is provided it will be called with (value, options)
-            text: this.props.config ? ((this.props.config.options) ? (this.props.config.options.centerArea !== undefined ? this.props.config.options.centerArea.text : null) : null) : null,
+          text: props.config ? ((props.config.options) ? (props.config.options.centerArea !== undefined ? props.config.options.centerArea.text : null) : null) : null,
         }
       }
     };
 
-    this.setState({
+    setState({
       chart: new Chart(ctx, config)
     })
 
-  }
+  }, [props])
 
-  render() {
+  if (state.chart !== null) {
 
-    if (this.state.chart !== null) {
+    props.config ? ((props.config.data) ? (props.config.data.datasets !== undefined ? (state.chart.data.datasets[0].data[0] = props.config.data.datasets.data) : [state.porcentaje]) : [state.porcentaje]) : [state.porcentaje]
 
-      this.props.config ? ((this.props.config.data) ? (this.props.config.data.datasets !== undefined ? (this.state.chart.data.datasets[0].data[0] = this.props.config.data.datasets.data) : [this.state.porcentaje]) : [this.state.porcentaje]) : [this.state.porcentaje]
+    //state.chart.data.datasets[0].data[0] = props.config.data.datasets.data)
 
-      //this.state.chart.data.datasets[0].data[0] = this.props.config.data.datasets.data)
+    props.config ? ((props.config.options) ? (props.config.options.centerArea !== undefined ? (state.chart.options.centerArea.text = props.config.options.centerArea.text) : null) : null) : null
 
-      this.props.config ? ((this.props.config.options) ? (this.props.config.options.centerArea !== undefined ? (this.state.chart.options.centerArea.text = this.props.config.options.centerArea.text) : null) : null) : null
+    //state.chart.options.centerArea.text = props.config.options.centerArea.text
 
-      //this.state.chart.options.centerArea.text = this.props.config.options.centerArea.text
+    state.chart.update();
 
-      this.state.chart.update();
+    return <canvas id={`${state.id}`} />
-
-      return <canvas id="chart" />
 
   } else {
-      return <canvas id="chart" />
+    return <canvas id={`${state.id}`} />
-    }
   }
+
 }
 
 export default RadialGauge

src/Service/ID.js

@@ -0,0 +1,25 @@
+// Generate unique IDs for use as pseudo-private/protected names.
+// Similar in concept to
+// <http://wiki.ecmascript.org/doku.php?id=strawman:names>.
+//
+// The goals of this function are twofold:
+// 
+// * Provide a way to generate a string guaranteed to be unique when compared
+//   to other strings generated by this function.
+// * Make the string complex enough that it is highly unlikely to be
+//   accidentally duplicated by hand (this is key if you're using `ID`
+//   as a private/protected name on an object).
+//
+// Use:
+//
+//     var privateName = ID();
+//     var o = { 'public': 'foo' };
+//     o[privateName] = 'bar';
+var ID = function () {
+  // Math.random should be unique because of its seeding algorithm.
+  // Convert it to base 36 (numbers + letters), and grab the first 9 characters
+  // after the decimal.
+  return '_' + Math.random().toString(36).substr(2, 9);
+};
+
+export default ID

src/index.js

@@ -1,5 +1,9 @@
 import RadialGauge from './RadialGauge.jsx';
+import Bar from './Bar.jsx';
+import Line from './Line.jsx';
 
 export { RadialGauge }
+export { Bar }
+export { Line }
 
 export default { RadialGauge }