mirror of
https://github.com/discourse/discourse.git
synced 2024-12-22 20:16:28 +08:00
14b436923c
### UI changes
All of the UI changes described are gated behind the `use_legacy_pageviews`
site setting.
This commit changes the admin dashboard pageviews report to
use the "Consolidated Pageviews with Browser Detection" report
introduced in 2f2da72747 with
the following changes:
* The report name is changed to "Site traffic"
* The pageview count on the dashboard is counting only using the new method
* The old "Consolidated Pageviews" report is renamed as "Consolidated Legacy Pageviews"
* By default "known crawlers" and "other" sources of pageviews are hidden on the report
When `use_legacy_pageviews` is `true`, we do not show or allow running
the "Site traffic" report for admins. When `use_legacy_pageviews` is `false`,
we do not show or allow running the following legacy reports:
* consolidated_page_views
* consolidated_page_views_browser_detection
* page_view_anon_reqs
* page_view_logged_in_reqs
### Historical data changes
Also part of this change is that, since we introduced our new "Consolidated
Pageviews with Browser Detection" report, some admins are confused at either:
* The lack of data before a certain date , which didn’t exist before
we started collecting it
* Comparing this and the current "Consolidated Pageviews" report data,
which rolls up "Other Pageviews" into "Anonymous Browser" and so it
appears inaccurate
All pageview data in the new report before the date where the _first_
anon or logged in browser pageview was recorded is now hidden.
109 lines
2.7 KiB
Plaintext
109 lines
2.7 KiB
Plaintext
import Component from "@glimmer/component";
|
|
import { number } from "discourse/lib/formatter";
|
|
import { makeArray } from "discourse-common/lib/helpers";
|
|
import Report from "admin/models/report";
|
|
import Chart from "./chart";
|
|
|
|
export default class AdminReportStackedChart extends Component {
|
|
get chartConfig() {
|
|
const { model } = this.args;
|
|
|
|
const options = this.args.options || {};
|
|
options.hiddenLabels ??= [];
|
|
|
|
const chartData = makeArray(model.chartData || model.data).map((cd) => ({
|
|
label: cd.label,
|
|
color: cd.color,
|
|
data: Report.collapse(model, cd.data),
|
|
req: cd.req,
|
|
}));
|
|
|
|
const data = {
|
|
labels: chartData[0].data.mapBy("x"),
|
|
datasets: chartData.map((cd) => ({
|
|
label: cd.label,
|
|
stack: "pageviews-stack",
|
|
data: cd.data,
|
|
backgroundColor: cd.color,
|
|
hidden: options.hiddenLabels.includes(cd.req),
|
|
})),
|
|
};
|
|
|
|
return {
|
|
type: "bar",
|
|
data,
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
responsiveAnimationDuration: 0,
|
|
hover: { mode: "index" },
|
|
animation: {
|
|
duration: 0,
|
|
},
|
|
plugins: {
|
|
tooltip: {
|
|
mode: "index",
|
|
intersect: false,
|
|
callbacks: {
|
|
beforeFooter: (tooltipItem) => {
|
|
const total = tooltipItem.reduce(
|
|
(sum, item) => sum + parseInt(item.parsed.y || 0, 10),
|
|
0
|
|
);
|
|
return `= ${total}`;
|
|
},
|
|
title: (tooltipItem) =>
|
|
moment(tooltipItem[0].label, "YYYY-MM-DD").format("LL"),
|
|
},
|
|
},
|
|
},
|
|
|
|
layout: {
|
|
padding: {
|
|
left: 0,
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
},
|
|
},
|
|
scales: {
|
|
y: [
|
|
{
|
|
stacked: true,
|
|
display: true,
|
|
ticks: {
|
|
callback: (label) => number(label),
|
|
sampleSize: 5,
|
|
maxRotation: 25,
|
|
minRotation: 25,
|
|
},
|
|
},
|
|
],
|
|
x: [
|
|
{
|
|
display: true,
|
|
gridLines: { display: false },
|
|
type: "time",
|
|
time: {
|
|
unit: Report.unitForDatapoints(data.labels.length),
|
|
},
|
|
ticks: {
|
|
sampleSize: 5,
|
|
maxRotation: 50,
|
|
minRotation: 50,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
},
|
|
};
|
|
}
|
|
|
|
<template>
|
|
<Chart
|
|
@chartConfig={{this.chartConfig}}
|
|
class="admin-report-chart admin-report-stacked-chart"
|
|
/>
|
|
</template>
|
|
}
|