Compare commits

...

3 Commits
1.1.1 ... 1.1.4

Author SHA1 Message Date
54eaf0675a Se actualizan todas las dependencias para que no existan vulnerabilidades.
Se sube a version 1.1.4
Se sube a Github 1.1.4
2020-12-13 14:25:53 -06:00
433a810c46 Se agrega ejemplo de MultiAxis Chart.
Se sube a version 1.1.3
Se sube a GitHub 1.1.3
2020-07-10 19:05:18 +00:00
af8bee047b Se agrega la funcion para que cuando se actualice props se actualice la grafica.
Se sube a version 1.1.2
Se sube a GitHub 1.1.2
Se sube a NPM 1.1.2
2020-02-12 08:56:44 -06:00
5 changed files with 17229 additions and 7747 deletions

View File

@ -24,6 +24,75 @@ export default class App extends Component {
<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>
)
}

24878
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,6 +1,6 @@
{
"name": "chartjs-2-react",
"version": "1.1.1",
"version": "1.1.4",
"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"
}
}

View File

@ -71,6 +71,15 @@ class BarComponent extends Component {
render(){
if (this.state.chart !== null) {
if((this.props.config !== undefined) && (this.props.config.data !== undefined)){
this.state.chart.data.labels = this.props.config.data.labels
this.state.chart.data.datasets = this.props.config.data.datasets
}
if((this.props.config !== undefined) && (this.props.config.options !== undefined)){
this.state.chart.options = this.props.config.options
}
this.state.chart.update();

View File

@ -70,8 +70,17 @@ class LineComponent extends Component {
}
render(){
if (this.state.chart !== null) {
if((this.props.config !== undefined) && (this.props.config.data !== undefined)){
this.state.chart.data.labels = this.props.config.data.labels
this.state.chart.data.datasets = this.props.config.data.datasets
}
if((this.props.config !== undefined) && (this.props.config.options !== undefined)){
this.state.chart.options = this.props.config.options
}
this.state.chart.update();