50 lines
1.2 KiB
JavaScript
50 lines
1.2 KiB
JavaScript
import loadScript from 'discourse/lib/load-script';
|
|
import { number } from 'discourse/lib/formatter';
|
|
|
|
export default Ember.Component.extend({
|
|
tagName: 'canvas',
|
|
refreshChart(){
|
|
const ctx = this.$()[0].getContext("2d");
|
|
const model = this.get("model");
|
|
const rawData = this.get("model.data");
|
|
|
|
var data = {
|
|
labels: rawData.map(r => r.x),
|
|
datasets: [{
|
|
data: rawData.map(r => r.y),
|
|
label: model.get('title'),
|
|
backgroundColor: "rgba(200,220,240,0.3)",
|
|
borderColor: "#08C"
|
|
}]
|
|
};
|
|
|
|
const config = {
|
|
type: 'line',
|
|
data: data,
|
|
options: {
|
|
responsive: true,
|
|
tooltips: {
|
|
callbacks: {
|
|
title: (context) => moment(context[0].xLabel, "YYYY-MM-DD").format("LL")
|
|
}
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
display: true,
|
|
ticks: {
|
|
callback: (label) => number(label),
|
|
suggestedMin: 0
|
|
}
|
|
}]
|
|
}
|
|
},
|
|
};
|
|
|
|
this._chart = new window.Chart(ctx, config);
|
|
},
|
|
|
|
didInsertElement(){
|
|
loadScript("/javascripts/Chart.min.js").then(() => this.refreshChart.apply(this));
|
|
}
|
|
});
|