github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-24 14:19:49 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: attempts to make charts loading less laggy (#8529)

Browse Source
This commit is contained in:
Joffrey JAFFEUX 2019-12-11 15:49:17 +01:00 committed by GitHub
parent 06c6062ed2
commit dc6b02f050
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/assets/javascripts/admin/components/admin-report-chart.js.es6
View File

@ -87,6 +87,11 @@ export default Component.extend({
loadScript("/javascripts/Chart.min.js").then(() => { loadScript("/javascripts/Chart.min.js").then(() => {
this._resetChart(); this._resetChart();
if (!this.element) {
return;
}
this._chart = new window.Chart(context, this._buildChartConfig(data)); this._chart = new window.Chart(context, this._buildChartConfig(data));
}); });
}, },
@ -107,6 +112,10 @@ export default Component.extend({
}, },
responsive: true, responsive: true,
maintainAspectRatio: false, maintainAspectRatio: false,
responsiveAnimationDuration: 0,
animation: {
duration: 0
},
layout: { layout: {
padding: { padding: {
left: 0, left: 0,
@ -123,7 +132,10 @@ export default Component.extend({
userCallback: label => { userCallback: label => {
if (Math.floor(label) === label) return label; if (Math.floor(label) === label) return label;
}, },
callback: label => number(label) callback: label => number(label),
sampleSize: 5,
maxRotation: 25,
minRotation: 25
} }
} }
], ],
@ -134,6 +146,11 @@ export default Component.extend({
type: "time", type: "time",
time: { time: {
parser: "YYYY-MM-DD" parser: "YYYY-MM-DD"
},
ticks: {
sampleSize: 5,
maxRotation: 50,
minRotation: 50
} }
} }
] ]

17
app/assets/javascripts/admin/components/admin-report-stacked-chart.js.es6
View File

@ -56,7 +56,7 @@ export default Component.extend({
const chartData = makeArray(model.get("chartData") || model.get("data")); const chartData = makeArray(model.get("chartData") || model.get("data"));
const data = { const data = {
labels: chartData[0].data.map(cd => cd.x), labels: chartData[0].data.mapBy("x"),
datasets: chartData.map(cd => { datasets: chartData.map(cd => {
return { return {
label: cd.label, label: cd.label,
@ -69,6 +69,7 @@ export default Component.extend({
loadScript("/javascripts/Chart.min.js").then(() => { loadScript("/javascripts/Chart.min.js").then(() => {
this._resetChart(); this._resetChart();
this._chart = new window.Chart(context, this._buildChartConfig(data)); this._chart = new window.Chart(context, this._buildChartConfig(data));
}); });
}, },
@ -80,7 +81,11 @@ export default Component.extend({
options: { options: {
responsive: true, responsive: true,
maintainAspectRatio: false, maintainAspectRatio: false,
responsiveAnimationDuration: 0,
hover: { mode: "index" }, hover: { mode: "index" },
animation: {
duration: 0
},
tooltips: { tooltips: {
mode: "index", mode: "index",
intersect: false, intersect: false,
@ -114,7 +119,10 @@ export default Component.extend({
userCallback: label => { userCallback: label => {
if (Math.floor(label) === label) return label; if (Math.floor(label) === label) return label;
}, },
callback: label => number(label) callback: label => number(label),
sampleSize: 5,
maxRotation: 25,
minRotation: 25
} }
} }
], ],
@ -127,6 +135,11 @@ export default Component.extend({
time: { time: {
parser: "YYYY-MM-DD", parser: "YYYY-MM-DD",
minUnit: "day" minUnit: "day"
},
ticks: {
sampleSize: 5,
maxRotation: 50,
minRotation: 50
} }
} }
] ]

1
app/assets/stylesheets/common/admin/admin_report_chart.scss
View File

@ -1,2 +1,3 @@
.admin-report-chart { .admin-report-chart {
animation: fadein 2s;
} }