import Component from "@ember/component"; import loadScript from "discourse/lib/load-script"; export default Component.extend({ tagName: "canvas", type: "line", refreshChart() { const ctx = this.element.getContext("2d"); const model = this.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,${this.type === "bar" ? 1 : 0.3})`, borderColor: "#08C" } ] }; const config = { type: this.type, data: data, options: { responsive: true, tooltips: { callbacks: { title: context => moment(context[0].xLabel, "YYYY-MM-DD").format("LL") } }, scales: { yAxes: [ { display: true, ticks: { stepSize: 1 } } ] } } }; this._chart = new window.Chart(ctx, config); }, didInsertElement() { loadScript("/javascripts/Chart.min.js").then(() => this.refreshChart.apply(this) ); } });