diff --git a/ghost/admin/app/components/dashboard/charts/anchor.hbs b/ghost/admin/app/components/dashboard/charts/anchor.hbs index 36983e93dc..6be0b8899a 100644 --- a/ghost/admin/app/components/dashboard/charts/anchor.hbs +++ b/ghost/admin/app/components/dashboard/charts/anchor.hbs @@ -35,11 +35,13 @@
{{else}} - +
+ +
{{/if}}
diff --git a/ghost/admin/app/components/dashboard/charts/anchor.js b/ghost/admin/app/components/dashboard/charts/anchor.js index 0065d85783..ff6f123208 100644 --- a/ghost/admin/app/components/dashboard/charts/anchor.js +++ b/ghost/admin/app/components/dashboard/charts/anchor.js @@ -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() { diff --git a/ghost/admin/app/styles/layouts/dashboard.css b/ghost/admin/app/styles/layouts/dashboard.css index 7db4584b6a..6e08dee582 100644 --- a/ghost/admin/app/styles/layouts/dashboard.css +++ b/ghost/admin/app/styles/layouts/dashboard.css @@ -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;