Trying out moving the date dropdown

no issue

- seeing if this feels better up above than it is when inside the anchor

ghost/admin/app/components/dashboard/dashboard-v5.hbs

@@ -32,6 +32,22 @@
             <Dashboard::V5::Resources::Community />
         </div>
     {{/if}}
+
+    <div class="gh-dashboard5-select">
+        <PowerSelect
+            @selected={{this.selectedDaysOption}}
+            @options={{this.daysOptions}}
+            @searchEnabled={{false}}
+            @onChange={{this.onDaysChange}}
+            @triggerComponent="gh-power-select/trigger"
+            @triggerClass="gh-contentfilter-menu-trigger"
+            @dropdownClass="gh-contentfilter-menu-dropdown is-narrow"
+            @matchTriggerWidth={{false}}
+            as |option|
+        >
+            {{#if option.name}}{{option.name}}{{else}}<span class="red">Unknown option</span>{{/if}}
+        </PowerSelect>
+    </div>
 </section>
 
 {{#if (enable-developer-experiments)}}

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;
     }

ghost/admin/app/components/dashboard/v5/charts/anchor.hbs

@@ -67,21 +67,5 @@
             {{/if}}
         </div>
 
-        <div class="gh-dashboard5-select">
-            <PowerSelect
-                @selected={{this.selectedDaysOption}}
-                @options={{this.daysOptions}}
-                @searchEnabled={{false}}
-                @onChange={{this.onDaysChange}}
-                @triggerComponent="gh-power-select/trigger"
-                @triggerClass="gh-contentfilter-menu-trigger"
-                @dropdownClass="gh-contentfilter-menu-dropdown is-narrow"
-                @matchTriggerWidth={{false}}
-                as |option|
-            >
-                {{#if option.name}}{{option.name}}{{else}}<span class="red">Unknown option</span>{{/if}}
-            </PowerSelect>
-        </div>
-
     </article>
 </section>

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];
     }

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;