github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-24 11:52:56 +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(() => {
this._resetChart();
if (!this.element) {
return;
}
this._chart = new window.Chart(context, this._buildChartConfig(data));
});
},
@ -107,6 +112,10 @@ export default Component.extend({
},
responsive: true,
maintainAspectRatio: false,
responsiveAnimationDuration: 0,
animation: {
duration: 0
},
layout: {
padding: {
left: 0,
@ -123,7 +132,10 @@ export default Component.extend({
userCallback: 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",
time: {
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 data = {
labels: chartData[0].data.map(cd => cd.x),
labels: chartData[0].data.mapBy("x"),
datasets: chartData.map(cd => {
return {
label: cd.label,
@ -69,6 +69,7 @@ export default Component.extend({
loadScript("/javascripts/Chart.min.js").then(() => {
this._resetChart();
this._chart = new window.Chart(context, this._buildChartConfig(data));
});
},
@ -80,7 +81,11 @@ export default Component.extend({
options: {
responsive: true,
maintainAspectRatio: false,
responsiveAnimationDuration: 0,
hover: { mode: "index" },
animation: {
duration: 0
},
tooltips: {
mode: "index",
intersect: false,
@ -114,7 +119,10 @@ export default Component.extend({
userCallback: 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: {
parser: "YYYY-MM-DD",
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 {
animation: fadein 2s;
}