joyent-portal/legacy/spikes/graphs-matrix/chartjs-whiskers/client/chart/base.js
Sérgio Ramos 8295bd6882 chore: initial lerna setup
this shall be a progressive process
2017-05-25 10:56:50 +01:00

77 lines
1.6 KiB
JavaScript

const buildArray = require('build-array');
const Chart = require('chart.js');
const React = require('react');
const whisker = require('chartjs-chart-box-plot');
whisker(Chart);
module.exports = React.createClass({
ref: function(name) {
this._refs = this._refs || {};
return (el) => {
this._refs[name] = el;
};
},
componentDidMount: function() {
const {
datasets = [],
labels = 0,
stacked = false,
xAxe = false,
yAxe = false,
legend = false,
max = 100,
min = 0
} = this.props;
const _labels = !Array.isArray(labels)
? buildArray(labels).map((v, i) => '')
: labels;
this._chart = new Chart(this._refs.component, {
type: 'whisker',
responsive: true,
options: {
scales: {
xAxes: [{
barPercentage: 1.0,
categoryPercentage: 1.0
}],
yAxes: [{
ticks: {
min: min,
max: max
}
}]
},
legend: {
display: true
}
},
data: {
labels: _labels,
datasets: datasets
}
});
},
componentWillReceiveProps: function(nextProps) {
const {
datasets = [],
labels = 0
} = this.props;
this._chart.data.datasets = datasets;
this._chart.data.labels = buildArray(labels).map((v, i) => '');
this._chart.update(0);
},
render: function() {
return (
<canvas
ref={this.ref('component')}
width='400'
height='400'
/>
);
}
});