Se implementa la libreria de create-react-library para que funcione la libreria.
Se sube a version 1.0.6 Se sube a GitHub 1.0.6
This commit is contained in:
parent
57a1f1835f
commit
6a86b929c3
9
.babelrc
Normal file
9
.babelrc
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"presets": [
|
||||
["env", {
|
||||
"modules": false
|
||||
}],
|
||||
"stage-0",
|
||||
"react"
|
||||
]
|
||||
}
|
||||
9
.editorconfig
Normal file
9
.editorconfig
Normal file
@ -0,0 +1,9 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
23
.eslintrc
Normal file
23
.eslintrc
Normal file
@ -0,0 +1,23 @@
|
||||
{
|
||||
"parser": "babel-eslint",
|
||||
"extends": [
|
||||
"standard",
|
||||
"standard-react"
|
||||
],
|
||||
"env": {
|
||||
"es6": true
|
||||
},
|
||||
"plugins": [
|
||||
"react"
|
||||
],
|
||||
"parserOptions": {
|
||||
"sourceType": "module"
|
||||
},
|
||||
"rules": {
|
||||
// don't force es6 functions to include space before paren
|
||||
"space-before-function-paren": 0,
|
||||
|
||||
// allow specifying true explicitly for boolean props
|
||||
"react/jsx-boolean-value": 0
|
||||
}
|
||||
}
|
||||
24
.gitignore
vendored
24
.gitignore
vendored
@ -1,2 +1,22 @@
|
||||
#Ignorar node_modules
|
||||
/node_modules
|
||||
|
||||
# See https://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
node_modules
|
||||
|
||||
# builds
|
||||
build
|
||||
dist
|
||||
.rpt2_cache
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
4
.travis.yml
Normal file
4
.travis.yml
Normal file
@ -0,0 +1,4 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- 9
|
||||
- 8
|
||||
30
README.md
30
README.md
@ -1,6 +1,30 @@
|
||||
# Librería de Chart.js 2 para React.js
|
||||
# chartjs-2-react
|
||||
|
||||
Esta es una libreria de chart.js para React.js. Se compondrá de varios componentes. Espera para ampliar la documentación
|
||||
> Libreria de chart.js para React.js
|
||||
|
||||
[](https://www.npmjs.com/package/chart-2-react) [](https://standardjs.com)
|
||||
|
||||
## Install
|
||||
|
||||
```bash
|
||||
npm install --save chart-2-react
|
||||
```
|
||||
|
||||
<!--## Usage
|
||||
|
||||
```jsx
|
||||
import React, { Component } from 'react'
|
||||
|
||||
import MyComponent from 'chart-2-react'
|
||||
|
||||
class Example extends Component {
|
||||
render () {
|
||||
return (
|
||||
<MyComponent />
|
||||
)
|
||||
}
|
||||
}
|
||||
```-->
|
||||
|
||||
## License
|
||||
[MIT](https://choosealicense.com/licenses/mit/)
|
||||
[MIT](https://choosealicense.com/licenses/mit/)
|
||||
|
||||
@ -1,95 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import Chart from 'chart.js';
|
||||
|
||||
import 'chartjs-chart-radial-gauge/build/Chart.RadialGauge.umd.min.js';
|
||||
|
||||
class RadialGauge extends Component {
|
||||
|
||||
componentDidMount(){
|
||||
|
||||
var ctx = document.getElementById('chart').getContext('2d');
|
||||
|
||||
/*var gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);
|
||||
gradientStroke.addColorStop(0, "#2A969E");
|
||||
gradientStroke.addColorStop(1, "#2A969E");*/
|
||||
//gradientStroke.addColorStop(2, "#f49080");
|
||||
|
||||
var config = {
|
||||
type: 'radialGauge',
|
||||
data: {
|
||||
labels: this.props.config.data.labels || ["Porcentaje"],
|
||||
datasets: [
|
||||
{
|
||||
data: this.props.config.data.datasets !== undefined ? [this.props.config.data.datasets.data] : [0],
|
||||
backgroundColor: ((this.props.config.data.datasets !== undefined) && (this.props.config.data.datasets.backgroundColor)) ? this.props.config.data.datasets.backgroundColor : '#2A969E',
|
||||
borderWidth: ((this.props.config.data.datasets !== undefined) && (this.props.config.data.datasets.borderWidth)) ? this.props.config.data.datasets.borderWidth : 0,
|
||||
label: ((this.props.config.data.datasets !== undefined) && (this.props.config.data.datasets.label)) ? this.props.config.data.datasets.label : "Porcentaje"
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
title: {
|
||||
display: this.props.config.options.title !== undefined ? this.props.config.options.title.display : false,
|
||||
text: ((this.props.config.options.title) && (this.props.config.options.title.text)) !== undefined ? this.props.config.options.title.text : "Porcentaje"
|
||||
},
|
||||
responsive: this.props.config.options.responsive || true,
|
||||
legend: this.props.config.options.leyend || {},
|
||||
animation: {
|
||||
// Boolean - Whether we animate the rotation of the radialGauge
|
||||
animateRotate: this.props.config.options.animation !== undefined ? this.props.config.options.animation.animateRotate : true,
|
||||
// Boolean - Whether we animate scaling the radialGauge from the centre
|
||||
animateScale: this.props.config.options.animation !== undefined ? this.props.config.options.animation.animateScale : true
|
||||
},
|
||||
|
||||
// The percentage of the chart that is the center area
|
||||
centerPercentage: this.props.config.options.centerPercentage || 80,
|
||||
|
||||
// The rotation for the start of the metric's arc
|
||||
rotation: this.props.config.options.rotation || -Math.PI / 2,
|
||||
|
||||
// the color of the radial gauge's track
|
||||
trackColor: this.props.config.options.trackColor || 'rgb(204, 221, 238)',
|
||||
|
||||
// the domain for the data, default is [0, 100]
|
||||
domain: this.props.config.options.domain || [0, 100],
|
||||
|
||||
// whether arc for the gauge should have rounded corners
|
||||
roundedCorners: this.props.config.options.roundedCorners || true,
|
||||
|
||||
// center value options
|
||||
centerArea: {
|
||||
// whether to display the center text value
|
||||
displayText: ((this.props.config.options.centerArea !== undefined) && (this.props.config.options.centerArea.displayText)) ? this.props.config.options.centerArea.displayText : true,
|
||||
// font for the center text
|
||||
fontFamily: this.props.config.options.centerArea !== undefined ? this.props.config.options.centerArea.fontFamily : null,
|
||||
// color of the center text
|
||||
fontColor: this.props.config.options.centerArea !== undefined ? this.props.config.options.centerArea.fontColor : null,
|
||||
// the size of the center text
|
||||
fontSize: this.props.config.options.centerArea !== undefined ? this.props.config.options.centerArea.fontSize : null,
|
||||
// padding around the center area
|
||||
padding: this.props.config.options.centerArea !== undefined ? this.props.config.options.centerArea.padding : null,
|
||||
// an image to use for the center background
|
||||
backgroundImage: this.props.config.options.centerArea !== undefined ? this.props.config.options.centerArea.backgroundImage : null,
|
||||
// a color to use for the center background
|
||||
backgroundColor: this.props.config.options.centerArea !== undefined ? this.props.config.options.centerArea.backgroundColor : 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.options.centerArea !== undefined ? this.props.config.options.centerArea.text : null,
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
new Chart(ctx, config);
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<canvas id="chart" />
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default RadialGauge
|
||||
2164
example/README.md
Normal file
2164
example/README.md
Normal file
File diff suppressed because it is too large
Load Diff
26081
example/package-lock.json
generated
Normal file
26081
example/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
20
example/package.json
Normal file
20
example/package.json
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "chart-2-react-example",
|
||||
"homepage": "https://aleleba.github.io/chart-2-react",
|
||||
"version": "0.0.0",
|
||||
"license": "MIT",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"prop-types": "^15.6.2",
|
||||
"react": "^16.4.1",
|
||||
"react-dom": "^16.4.1",
|
||||
"react-scripts": "^1.1.4",
|
||||
"chart-2-react": "file:.."
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test --env=jsdom",
|
||||
"eject": "react-scripts eject"
|
||||
}
|
||||
}
|
||||
20
example/public/index.html
Normal file
20
example/public/index.html
Normal file
@ -0,0 +1,20 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="theme-color" content="#000000">
|
||||
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||
|
||||
<title>chart-2-react</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>
|
||||
You need to enable JavaScript to run this app.
|
||||
</noscript>
|
||||
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
8
example/public/manifest.json
Normal file
8
example/public/manifest.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"short_name": "chart-2-react",
|
||||
"name": "chart-2-react",
|
||||
"start_url": "./index.html",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
14
example/src/App.js
Normal file
14
example/src/App.js
Normal file
@ -0,0 +1,14 @@
|
||||
import React, { Component } from 'react'
|
||||
|
||||
import { RadialGaugue } from 'chart-2-react'
|
||||
|
||||
export default class App extends Component {
|
||||
render () {
|
||||
return (
|
||||
<div style={{maxWidth: '600px', marginTop: '25px'}}>
|
||||
<h3 style={{textAlign: 'center'}}>RadialGaugue Component:</h3>
|
||||
<RadialGaugue />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
5
example/src/index.css
Normal file
5
example/src/index.css
Normal file
@ -0,0 +1,5 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
7
example/src/index.js
Normal file
7
example/src/index.js
Normal file
@ -0,0 +1,7 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
|
||||
import './index.css'
|
||||
import App from './App'
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('root'))
|
||||
7
index.js
7
index.js
@ -1,7 +0,0 @@
|
||||
//import RadialGauge from './RadialGauge';
|
||||
|
||||
export { default as RadialGauge } from './RadialGauge';
|
||||
|
||||
/*module.exports = {
|
||||
RadialGauge,
|
||||
}*/
|
||||
17268
package-lock.json
generated
17268
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
70
package.json
70
package.json
@ -1,17 +1,63 @@
|
||||
{
|
||||
{
|
||||
"name": "chartjs-2-react",
|
||||
"version": "1.0.5",
|
||||
"description": "Libreria de chart.js para react desarrollada por Alejandro Lembke Barrientos.",
|
||||
"main": "index.jsx",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [
|
||||
"react",
|
||||
"chart.js."
|
||||
],
|
||||
"author": "Alejandro Lembke Barrientos",
|
||||
"version": "1.0.6",
|
||||
"description": "Libreria de chart.js para React.js",
|
||||
"author": "aleleba",
|
||||
"license": "MIT",
|
||||
"repository": "aleleba/chart-2-react",
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.es.js",
|
||||
"jsnext:main": "dist/index.es.js",
|
||||
"engines": {
|
||||
"node": ">=8",
|
||||
"npm": ">=5"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "cross-env CI=1 react-scripts test --env=jsdom",
|
||||
"test:watch": "react-scripts test --env=jsdom",
|
||||
"build": "rollup -c",
|
||||
"start": "rollup -c -w",
|
||||
"prepare": "npm run build",
|
||||
"predeploy": "cd example && npm install && npm run build",
|
||||
"deploy": "gh-pages -d example/build"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"prop-types": "^15.5.4",
|
||||
"react": "^15.0.0 || ^16.0.0",
|
||||
"react-dom": "^15.0.0 || ^16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@svgr/rollup": "^2.4.1",
|
||||
"babel-core": "^6.26.3",
|
||||
"babel-eslint": "^8.2.5",
|
||||
"babel-plugin-external-helpers": "^6.22.0",
|
||||
"babel-preset-env": "^1.7.0",
|
||||
"babel-preset-react": "^6.24.1",
|
||||
"babel-preset-stage-0": "^6.24.1",
|
||||
"cross-env": "^5.1.4",
|
||||
"eslint": "^5.0.1",
|
||||
"eslint-config-standard": "^11.0.0",
|
||||
"eslint-config-standard-react": "^6.0.0",
|
||||
"eslint-plugin-import": "^2.13.0",
|
||||
"eslint-plugin-node": "^7.0.1",
|
||||
"eslint-plugin-promise": "^4.0.0",
|
||||
"eslint-plugin-react": "^7.10.0",
|
||||
"eslint-plugin-standard": "^3.1.0",
|
||||
"gh-pages": "^1.2.0",
|
||||
"react": "^16.4.1",
|
||||
"react-dom": "^16.4.1",
|
||||
"react-scripts": "^1.1.4",
|
||||
"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-url": "^1.4.0"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"dependencies": {
|
||||
"chart.js": "^2.9.3",
|
||||
"chartjs-chart-radial-gauge": "^1.0.3"
|
||||
|
||||
39
rollup.config.js
Normal file
39
rollup.config.js
Normal file
@ -0,0 +1,39 @@
|
||||
import babel from 'rollup-plugin-babel'
|
||||
import commonjs from 'rollup-plugin-commonjs'
|
||||
import external from 'rollup-plugin-peer-deps-external'
|
||||
import postcss from 'rollup-plugin-postcss'
|
||||
import resolve from 'rollup-plugin-node-resolve'
|
||||
import url from 'rollup-plugin-url'
|
||||
import svgr from '@svgr/rollup'
|
||||
|
||||
import pkg from './package.json'
|
||||
|
||||
export default {
|
||||
input: 'src/index.js',
|
||||
output: [
|
||||
{
|
||||
file: pkg.main,
|
||||
format: 'cjs',
|
||||
sourcemap: true
|
||||
},
|
||||
{
|
||||
file: pkg.module,
|
||||
format: 'es',
|
||||
sourcemap: true
|
||||
}
|
||||
],
|
||||
plugins: [
|
||||
external(),
|
||||
postcss({
|
||||
modules: true
|
||||
}),
|
||||
url(),
|
||||
svgr(),
|
||||
babel({
|
||||
exclude: 'node_modules/**',
|
||||
plugins: [ 'external-helpers' ]
|
||||
}),
|
||||
resolve(),
|
||||
commonjs()
|
||||
]
|
||||
}
|
||||
5
src/.eslintrc
Normal file
5
src/.eslintrc
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"env": {
|
||||
"jest": true
|
||||
}
|
||||
}
|
||||
102
src/RadialGauge.jsx
Normal file
102
src/RadialGauge.jsx
Normal file
@ -0,0 +1,102 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import Chart from 'chart.js';
|
||||
|
||||
import 'chartjs-chart-radial-gauge/build/Chart.RadialGauge.umd.min.js';
|
||||
|
||||
class RadialGauge extends Component {
|
||||
|
||||
componentDidMount(){
|
||||
|
||||
var ctx = document.getElementById('chart').getContext('2d');
|
||||
|
||||
/*var gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);
|
||||
gradientStroke.addColorStop(0, "#2A969E");
|
||||
gradientStroke.addColorStop(1, "#2A969E");*/
|
||||
//gradientStroke.addColorStop(2, "#f49080");
|
||||
|
||||
var config
|
||||
|
||||
var randomScalingFactor = function() {
|
||||
return Math.round(Math.random() * 100);
|
||||
};
|
||||
|
||||
config = {
|
||||
type: 'radialGauge',
|
||||
data: {
|
||||
labels: this.props.config ? (this.props.config.data ? (this.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] : [randomScalingFactor()]) : [randomScalingFactor()]) : [randomScalingFactor()],
|
||||
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',
|
||||
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,
|
||||
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"
|
||||
}
|
||||
]
|
||||
},
|
||||
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,
|
||||
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"
|
||||
},
|
||||
responsive: this.props.config ? ((this.props.config.options) ? (this.props.config.options.responsive || true) : true) : true,
|
||||
legend: this.props.config ? ((this.props.config.options) ? (this.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,
|
||||
// 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
|
||||
},
|
||||
|
||||
// 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,
|
||||
|
||||
// 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,
|
||||
|
||||
// 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)',
|
||||
|
||||
// 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],
|
||||
|
||||
// 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,
|
||||
|
||||
// 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,
|
||||
// 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,
|
||||
// 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,
|
||||
// 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,
|
||||
// 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,
|
||||
// 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,
|
||||
// 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,
|
||||
// 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,
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
new Chart(ctx, config);
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<canvas id="chart" />
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default RadialGauge
|
||||
3
src/index.js
Normal file
3
src/index.js
Normal file
@ -0,0 +1,3 @@
|
||||
import RadialGaugue from './RadialGauge.jsx';
|
||||
|
||||
export { RadialGaugue }
|
||||
8
src/styles.css
Normal file
8
src/styles.css
Normal file
@ -0,0 +1,8 @@
|
||||
/* add css styles here (optional) */
|
||||
|
||||
.test {
|
||||
display: inline-block;
|
||||
margin: 2em auto;
|
||||
border: 2px solid #000;
|
||||
font-size: 2em;
|
||||
}
|
||||
7
src/test.js
Normal file
7
src/test.js
Normal file
@ -0,0 +1,7 @@
|
||||
import ExampleComponent from './'
|
||||
|
||||
describe('ExampleComponent', () => {
|
||||
it('is truthy', () => {
|
||||
expect(ExampleComponent).toBeTruthy()
|
||||
})
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user