TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-26 12:21:36 +03:00
Code Issues Projects Releases Wiki Activity

Improved the strange resizing issues for the main chart on new Dashboard

Browse Source
This commit is contained in:
James Morris 2022-07-14 16:00:12 +01:00
parent 8aeb5c181e
commit db0929d07a
3 changed files with 40 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ghost/admin/app/components/dashboard/charts/anchor.hbs
View File

@ -35,11 +35,13 @@
<div class="gh-loading-spinner"></div>
</div>
{{else}}
<EmberChart
@type={{this.chartType}}
@data={{this.chartData}}
@options={{this.chartOptions}}
@height={{200}} />
<div class="gh-dashboard-fader">
<EmberChart
@type={{this.chartType}}
@data={{this.chartData}}
@options={{this.chartOptions}}
@height={{200}} />
</div>
{{/if}}
</div>
<div id="gh-dashboard-anchor-tooltip" class="gh-dashboard-tooltip">

21
ghost/admin/app/components/dashboard/charts/anchor.js
View File

@ -51,13 +51,32 @@ export default class Anchor extends Component {
@service dashboardStats;
@service feature;
@tracked chartDisplay = 'total';
@tracked resizing = false;
@tracked resizeTimer = null;
displayOptions = DISPLAY_OPTIONS;
willDestroy(...args) {
super.willDestroy(...args);
window.removeEventListener('resize', this.resizer, false);
}
// this helps with ChartJS resizing stretching bug when resizing
resizer = () => {
this.resizing = true;
clearTimeout(this.resizeTimer); // this uses a trick to trigger only when resize is done
this.resizeTimer = setTimeout(() => {
this.resizing = false;
}, 500);
};
@action
loadCharts() {
this.dashboardStats.loadMemberCountStats();
window.addEventListener('resize', this.resizer, false);
if (this.hasPaidTiers) {
this.dashboardStats.loadMrrStats();
}
@ -73,7 +92,7 @@ export default class Anchor extends Component {
}
get loading() {
return this.dashboardStats.memberCountStats === null;
return this.dashboardStats.memberCountStats === null || this.resizing;
}
get totalMembers() {

13
ghost/admin/app/styles/layouts/dashboard.css
View File

@ -787,6 +787,15 @@ Dashboard Overview */
/* ---------------------------------
Dashboard Anchor */
@keyframes chartFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 100;
}
}
.gh-dashboard-anchor {
position: relative;
}
@ -1849,6 +1858,10 @@ Dashboard Tooltips */
margin-top: 24px;
}
.gh-dashboard-fader {
animation: chartFadeIn 150ms;
}
.gh-dashboard-totals .gh-dashboard-loading,
.gh-dashboard-totals .gh-dashboard-chart-container {
height: 200px;