2023-02-23 10:32:53 -05:00
|
|
|
import { tagName } from "@ember-decorators/component";
|
2019-10-23 12:30:52 -04:00
|
|
|
import Component from "@ember/component";
|
2016-04-14 01:46:01 -04:00
|
|
|
import loadScript from "discourse/lib/load-script";
|
|
|
|
|
2023-02-23 10:32:53 -05:00
|
|
|
@tagName("canvas")
|
|
|
|
export default class AdminGraph extends Component {
|
|
|
|
type = "line";
|
2019-03-28 23:54:49 -04:00
|
|
|
|
2016-04-14 01:46:01 -04:00
|
|
|
refreshChart() {
|
2019-07-16 06:45:15 -04:00
|
|
|
const ctx = this.element.getContext("2d");
|
2019-05-27 04:15:39 -04:00
|
|
|
const model = this.model;
|
2016-04-14 01:46:01 -04:00
|
|
|
const rawData = this.get("model.data");
|
|
|
|
|
2021-01-27 06:39:20 -05:00
|
|
|
let data = {
|
2016-04-14 01:46:01 -04:00
|
|
|
labels: rawData.map((r) => r.x),
|
|
|
|
datasets: [
|
|
|
|
{
|
|
|
|
data: rawData.map((r) => r.y),
|
|
|
|
label: model.get("title"),
|
2019-05-27 04:42:53 -04:00
|
|
|
backgroundColor: `rgba(200,220,240,${this.type === "bar" ? 1 : 0.3})`,
|
2016-04-14 01:46:01 -04:00
|
|
|
borderColor: "#08C",
|
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|
|
|
|
|
|
|
|
const config = {
|
2019-05-27 04:15:39 -04:00
|
|
|
type: this.type,
|
2021-11-09 18:31:41 -05:00
|
|
|
data,
|
2016-04-14 01:46:01 -04:00
|
|
|
options: {
|
|
|
|
responsive: true,
|
2021-08-23 07:49:49 -04:00
|
|
|
plugins: {
|
|
|
|
tooltip: {
|
|
|
|
callbacks: {
|
|
|
|
title: (context) =>
|
|
|
|
moment(context[0].label, "YYYY-MM-DD").format("LL"),
|
|
|
|
},
|
2018-05-17 16:44:33 -04:00
|
|
|
},
|
|
|
|
},
|
2016-04-14 01:46:01 -04:00
|
|
|
scales: {
|
2021-08-23 07:49:49 -04:00
|
|
|
y: [
|
2016-04-14 01:46:01 -04:00
|
|
|
{
|
|
|
|
display: true,
|
|
|
|
ticks: {
|
2019-03-29 00:14:11 -04:00
|
|
|
stepSize: 1,
|
2018-06-15 11:03:24 -04:00
|
|
|
},
|
2016-04-14 01:46:01 -04:00
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
2016-04-14 02:30:04 -04:00
|
|
|
this._chart = new window.Chart(ctx, config);
|
2023-02-23 10:32:53 -05:00
|
|
|
}
|
2016-04-14 01:46:01 -04:00
|
|
|
|
|
|
|
didInsertElement() {
|
|
|
|
loadScript("/javascripts/Chart.min.js").then(() =>
|
|
|
|
this.refreshChart.apply(this)
|
|
|
|
);
|
2023-02-23 10:32:53 -05:00
|
|
|
}
|
|
|
|
}
|