diff --git a/ghost/admin/app/components/dashboard/dashboard-v5.hbs b/ghost/admin/app/components/dashboard/dashboard-v5.hbs index 980e13af0a..faf22cff57 100644 --- a/ghost/admin/app/components/dashboard/dashboard-v5.hbs +++ b/ghost/admin/app/components/dashboard/dashboard-v5.hbs @@ -32,6 +32,22 @@ {{/if}} + +
+ + {{#if option.name}}{{option.name}}{{else}}Unknown option{{/if}} + +
{{#if (enable-developer-experiments)}} diff --git a/ghost/admin/app/components/dashboard/dashboard-v5.js b/ghost/admin/app/components/dashboard/dashboard-v5.js index 6220525d5e..de43f01578 100644 --- a/ghost/admin/app/components/dashboard/dashboard-v5.js +++ b/ghost/admin/app/components/dashboard/dashboard-v5.js @@ -2,14 +2,45 @@ import Component from '@glimmer/component'; import {action} from '@ember/object'; import {inject as service} from '@ember/service'; +// Options 30 and 90 need an extra day to be able to distribute ticks/gridlines evenly +const DAYS_OPTIONS = [{ + name: '7 Days', + value: 7 +}, { + name: '30 Days', + value: 30 + 1 +}, { + name: '90 Days', + value: 90 + 1 +}]; + export default class DashboardDashboardV5Component extends Component { @service dashboardStats; + daysOptions = DAYS_OPTIONS; + @action onInsert() { this.dashboardStats.loadSiteStatus(); } + @action + onDaysChange(selected) { + this.days = selected.value; + } + + get days() { + return this.dashboardStats.chartDays; + } + + set days(days) { + this.dashboardStats.chartDays = days; + } + + get selectedDaysOption() { + return this.daysOptions.find(d => d.value === this.days); + } + get isLoading() { return this.dashboardStats.siteStatus === null; } diff --git a/ghost/admin/app/components/dashboard/v5/charts/anchor.hbs b/ghost/admin/app/components/dashboard/v5/charts/anchor.hbs index 9c8f5bf6e7..994b16a439 100644 --- a/ghost/admin/app/components/dashboard/v5/charts/anchor.hbs +++ b/ghost/admin/app/components/dashboard/v5/charts/anchor.hbs @@ -67,21 +67,5 @@ {{/if}} -
- - {{#if option.name}}{{option.name}}{{else}}Unknown option{{/if}} - -
- diff --git a/ghost/admin/app/components/dashboard/v5/charts/anchor.js b/ghost/admin/app/components/dashboard/v5/charts/anchor.js index 6e2ad3fd1a..af1b7f45c5 100644 --- a/ghost/admin/app/components/dashboard/v5/charts/anchor.js +++ b/ghost/admin/app/components/dashboard/v5/charts/anchor.js @@ -9,18 +9,6 @@ import {tracked} from '@glimmer/tracking'; const DATE_FORMAT = 'D MMM, YYYY'; -// Options 30 and 90 need an extra day to be able to distribute ticks/gridlines evenly -const DAYS_OPTIONS = [{ - name: '7 Days', - value: 7 -}, { - name: '30 Days', - value: 30 + 1 -}, { - name: '90 Days', - value: 90 + 1 -}]; - const DISPLAY_OPTIONS = [{ name: 'Total members', value: 'total' @@ -64,17 +52,8 @@ export default class Anchor extends Component { @service feature; @tracked chartDisplay = 'total'; - daysOptions = DAYS_OPTIONS; displayOptions = DISPLAY_OPTIONS; - get days() { - return this.dashboardStats.chartDays; - } - - set days(days) { - this.dashboardStats.chartDays = days; - } - @action loadCharts() { this.dashboardStats.loadMemberCountStats(); @@ -89,15 +68,6 @@ export default class Anchor extends Component { this.chartDisplay = selected.value; } - @action - onDaysChange(selected) { - this.days = selected.value; - } - - get selectedDaysOption() { - return this.daysOptions.find(d => d.value === this.days); - } - get selectedDisplayOption() { return this.displayOptions.find(d => d.value === this.chartDisplay) ?? this.displayOptions[0]; } diff --git a/ghost/admin/app/styles/layouts/dashboard-v5.css b/ghost/admin/app/styles/layouts/dashboard-v5.css index 38961742c0..96780415b4 100644 --- a/ghost/admin/app/styles/layouts/dashboard-v5.css +++ b/ghost/admin/app/styles/layouts/dashboard-v5.css @@ -66,6 +66,7 @@ Dashboard v5 Layout */ } .gh-dashboard5-layout { + position: relative; max-width: 1230px; margin: 0 auto; } @@ -398,6 +399,12 @@ Dashboard v5 Layout */ transition: none; } +.gh-dashboard5-layout > .gh-dashboard5-select { + top: -62px; + right: -8px; + z-index: 999; +} + .gh-dashboard5-triple { display: flex; flex-direction: column;