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;