2019-10-23 12:30:52 -04:00
|
|
|
import Component from "@ember/component";
|
2020-12-18 08:18:52 -05:00
|
|
|
import discourseDebounce from "discourse-common/lib/debounce";
|
2018-07-19 14:33:11 -04:00
|
|
|
import loadScript from "discourse/lib/load-script";
|
2019-11-01 13:06:50 -04:00
|
|
|
import { makeArray } from "discourse-common/lib/helpers";
|
2018-07-19 14:33:11 -04:00
|
|
|
import { number } from "discourse/lib/formatter";
|
2020-12-18 08:18:52 -05:00
|
|
|
import { schedule } from "@ember/runloop";
|
2018-07-19 14:33:11 -04:00
|
|
|
|
2019-10-23 12:30:52 -04:00
|
|
|
export default Component.extend({
|
2018-07-19 14:33:11 -04:00
|
|
|
classNames: ["admin-report-chart"],
|
|
|
|
limit: 8,
|
|
|
|
total: 0,
|
2020-07-28 10:14:41 -04:00
|
|
|
options: null,
|
2018-07-19 14:33:11 -04:00
|
|
|
|
2018-12-12 05:11:56 -05:00
|
|
|
init() {
|
|
|
|
this._super(...arguments);
|
|
|
|
|
|
|
|
this.resizeHandler = () =>
|
2020-12-18 08:18:52 -05:00
|
|
|
discourseDebounce(this, this._scheduleChartRendering, 500);
|
2018-12-12 05:11:56 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
didInsertElement() {
|
|
|
|
this._super(...arguments);
|
|
|
|
|
|
|
|
$(window).on("resize.chart", this.resizeHandler);
|
|
|
|
},
|
|
|
|
|
2018-07-19 14:33:11 -04:00
|
|
|
willDestroyElement() {
|
|
|
|
this._super(...arguments);
|
|
|
|
|
2018-12-12 05:11:56 -05:00
|
|
|
$(window).off("resize.chart", this.resizeHandler);
|
|
|
|
|
2018-07-19 14:33:11 -04:00
|
|
|
this._resetChart();
|
|
|
|
},
|
|
|
|
|
|
|
|
didReceiveAttrs() {
|
|
|
|
this._super(...arguments);
|
|
|
|
|
2020-12-18 08:18:52 -05:00
|
|
|
discourseDebounce(this, this._scheduleChartRendering, 100);
|
2018-12-12 05:11:56 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
_scheduleChartRendering() {
|
2019-10-30 09:48:24 -04:00
|
|
|
schedule("afterRender", () => {
|
2019-07-16 06:45:15 -04:00
|
|
|
this._renderChart(
|
|
|
|
this.model,
|
|
|
|
this.element && this.element.querySelector(".chart-canvas")
|
|
|
|
);
|
2018-12-12 05:11:56 -05:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2019-07-16 06:45:15 -04:00
|
|
|
_renderChart(model, chartCanvas) {
|
2020-09-22 10:28:28 -04:00
|
|
|
if (!chartCanvas) {
|
|
|
|
return;
|
|
|
|
}
|
2018-12-12 05:11:56 -05:00
|
|
|
|
2019-07-16 06:45:15 -04:00
|
|
|
const context = chartCanvas.getContext("2d");
|
2020-07-28 10:14:41 -04:00
|
|
|
const chartData = this._applyChartGrouping(
|
|
|
|
model,
|
|
|
|
makeArray(model.get("chartData") || model.get("data"), "weekly"),
|
|
|
|
this.options
|
|
|
|
);
|
2019-10-31 13:55:01 -04:00
|
|
|
const prevChartData = makeArray(
|
2018-12-12 05:11:56 -05:00
|
|
|
model.get("prevChartData") || model.get("prev_data")
|
|
|
|
);
|
|
|
|
|
|
|
|
const labels = chartData.map((d) => d.x);
|
|
|
|
|
|
|
|
const data = {
|
|
|
|
labels,
|
|
|
|
datasets: [
|
|
|
|
{
|
|
|
|
data: chartData.map((d) => Math.round(parseFloat(d.y))),
|
|
|
|
backgroundColor: prevChartData.length
|
|
|
|
? "transparent"
|
|
|
|
: model.secondary_color,
|
2019-01-22 04:22:41 -05:00
|
|
|
borderColor: model.primary_color,
|
|
|
|
pointRadius: 3,
|
|
|
|
borderWidth: 1,
|
|
|
|
pointBackgroundColor: model.primary_color,
|
|
|
|
pointBorderColor: model.primary_color,
|
2018-12-12 05:11:56 -05:00
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|
|
|
|
|
|
|
|
if (prevChartData.length) {
|
|
|
|
data.datasets.push({
|
|
|
|
data: prevChartData.map((d) => Math.round(parseFloat(d.y))),
|
|
|
|
borderColor: model.primary_color,
|
|
|
|
borderDash: [5, 5],
|
|
|
|
backgroundColor: "transparent",
|
|
|
|
borderWidth: 1,
|
|
|
|
pointRadius: 0,
|
2018-07-19 14:33:11 -04:00
|
|
|
});
|
2018-12-12 05:11:56 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
loadScript("/javascripts/Chart.min.js").then(() => {
|
|
|
|
this._resetChart();
|
2019-12-11 09:49:17 -05:00
|
|
|
|
|
|
|
if (!this.element) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2020-07-28 10:14:41 -04:00
|
|
|
this._chart = new window.Chart(
|
|
|
|
context,
|
|
|
|
this._buildChartConfig(data, this.options)
|
|
|
|
);
|
2018-07-19 14:33:11 -04:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2020-07-28 10:14:41 -04:00
|
|
|
_buildChartConfig(data, options) {
|
2018-07-19 14:33:11 -04:00
|
|
|
return {
|
|
|
|
type: "line",
|
|
|
|
data,
|
|
|
|
options: {
|
|
|
|
tooltips: {
|
|
|
|
callbacks: {
|
|
|
|
title: (tooltipItem) =>
|
|
|
|
moment(tooltipItem[0].xLabel, "YYYY-MM-DD").format("LL"),
|
|
|
|
},
|
|
|
|
},
|
|
|
|
legend: {
|
|
|
|
display: false,
|
|
|
|
},
|
|
|
|
responsive: true,
|
|
|
|
maintainAspectRatio: false,
|
2019-12-11 09:49:17 -05:00
|
|
|
responsiveAnimationDuration: 0,
|
|
|
|
animation: {
|
|
|
|
duration: 0,
|
|
|
|
},
|
2018-07-19 14:33:11 -04:00
|
|
|
layout: {
|
|
|
|
padding: {
|
|
|
|
left: 0,
|
|
|
|
top: 0,
|
|
|
|
right: 0,
|
|
|
|
bottom: 0,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
scales: {
|
|
|
|
yAxes: [
|
|
|
|
{
|
|
|
|
display: true,
|
2018-10-30 04:58:03 -04:00
|
|
|
ticks: {
|
|
|
|
userCallback: (label) => {
|
2020-09-22 10:28:28 -04:00
|
|
|
if (Math.floor(label) === label) {
|
|
|
|
return label;
|
|
|
|
}
|
2018-10-30 04:58:03 -04:00
|
|
|
},
|
2019-12-11 09:49:17 -05:00
|
|
|
callback: (label) => number(label),
|
|
|
|
sampleSize: 5,
|
|
|
|
maxRotation: 25,
|
|
|
|
minRotation: 25,
|
2018-10-30 04:58:03 -04:00
|
|
|
},
|
2018-07-19 14:33:11 -04:00
|
|
|
},
|
|
|
|
],
|
|
|
|
xAxes: [
|
|
|
|
{
|
|
|
|
display: true,
|
|
|
|
gridLines: { display: false },
|
|
|
|
type: "time",
|
|
|
|
time: {
|
2020-07-28 10:14:41 -04:00
|
|
|
unit: this._unitForGrouping(options),
|
2019-12-11 09:49:17 -05:00
|
|
|
},
|
|
|
|
ticks: {
|
|
|
|
sampleSize: 5,
|
|
|
|
maxRotation: 50,
|
|
|
|
minRotation: 50,
|
2018-07-19 14:33:11 -04:00
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
_resetChart() {
|
|
|
|
if (this._chart) {
|
|
|
|
this._chart.destroy();
|
|
|
|
this._chart = null;
|
|
|
|
}
|
2020-07-28 10:14:41 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
_applyChartGrouping(model, data, options) {
|
|
|
|
if (!options.chartGrouping || options.chartGrouping === "daily") {
|
|
|
|
return data;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (
|
|
|
|
options.chartGrouping === "weekly" ||
|
|
|
|
options.chartGrouping === "monthly"
|
|
|
|
) {
|
|
|
|
const isoKind = options.chartGrouping === "weekly" ? "isoWeek" : "month";
|
|
|
|
const kind = options.chartGrouping === "weekly" ? "week" : "month";
|
|
|
|
const startMoment = moment(model.start_date, "YYYY-MM-DD");
|
|
|
|
|
|
|
|
let currentIndex = 0;
|
|
|
|
let currentStart = startMoment.clone().startOf(isoKind);
|
|
|
|
let currentEnd = startMoment.clone().endOf(isoKind);
|
|
|
|
const transformedData = [
|
|
|
|
{
|
|
|
|
x: currentStart.format("YYYY-MM-DD"),
|
|
|
|
y: 0,
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
data.forEach((d) => {
|
|
|
|
let date = moment(d.x, "YYYY-MM-DD");
|
|
|
|
|
|
|
|
if (!date.isBetween(currentStart, currentEnd)) {
|
|
|
|
currentIndex += 1;
|
|
|
|
currentStart = currentStart.add(1, kind).startOf(isoKind);
|
|
|
|
currentEnd = currentEnd.add(1, kind).endOf(isoKind);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (transformedData[currentIndex]) {
|
|
|
|
transformedData[currentIndex].y += d.y;
|
|
|
|
} else {
|
|
|
|
transformedData[currentIndex] = {
|
|
|
|
x: d.x,
|
|
|
|
y: d.y,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
return transformedData;
|
|
|
|
}
|
|
|
|
|
|
|
|
// ensure we return something if grouping is unknown
|
|
|
|
return data;
|
|
|
|
},
|
|
|
|
|
|
|
|
_unitForGrouping(options) {
|
|
|
|
switch (options.chartGrouping) {
|
|
|
|
case "monthly":
|
|
|
|
return "month";
|
|
|
|
case "weekly":
|
|
|
|
return "week";
|
|
|
|
default:
|
|
|
|
return "day";
|
|
|
|
}
|
2018-07-19 14:33:11 -04:00
|
|
|
},
|
|
|
|
});
|