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
|
## 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",
|
"name": "chartjs-2-react",
|
||||||
"version": "1.0.5",
|
"version": "1.0.6",
|
||||||
"description": "Libreria de chart.js para react desarrollada por Alejandro Lembke Barrientos.",
|
"description": "Libreria de chart.js para React.js",
|
||||||
"main": "index.jsx",
|
"author": "aleleba",
|
||||||
"scripts": {
|
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
|
||||||
},
|
|
||||||
"keywords": [
|
|
||||||
"react",
|
|
||||||
"chart.js."
|
|
||||||
],
|
|
||||||
"author": "Alejandro Lembke Barrientos",
|
|
||||||
"license": "MIT",
|
"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": {
|
"dependencies": {
|
||||||
"chart.js": "^2.9.3",
|
"chart.js": "^2.9.3",
|
||||||
"chartjs-chart-radial-gauge": "^1.0.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