Added basic date-handling to stats page

ref https://linear.app/tryghost/issue/ANAL-21/filtering-the-dashboard

- Added the very basic date filter back from the dashboard
- Without this, it's very hard to see that the basic concept is working
- This method can be reused for creating any filter

ghost/admin/app/components/stats/charts/top-locations.hbs

@@ -1 +1 @@
-<div {{react-render this.ReactComponent}}></div>
+<div {{react-render this.ReactComponent props=(hash chartDays=@chartDays)}}></div>

ghost/admin/app/components/stats/charts/top-locations.js

@@ -4,7 +4,7 @@ import moment from 'moment-timezone';
 import {BarList, useQuery} from '@tinybirdco/charts';
 import {inject} from 'ghost-admin/decorators/inject';
 
-export default class TopPages extends Component {
+export default class TopLocations extends Component {
     @inject config;
 
     ReactComponent = (props) => {

ghost/admin/app/controllers/stats.js

@@ -1,4 +1,34 @@
 import Controller from '@ember/controller';
+import {action} from '@ember/object';
+import {tracked} from '@glimmer/tracking';
+
+// 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 StatsController extends Controller {
+    daysOptions = DAYS_OPTIONS;
+
+    /**
+     * @type {number|'all'}
+     * Amount of days to load for member count and MRR related charts
+     */
+    @tracked chartDays = 30 + 1;
+
+    @action
+    onDaysChange(selected) {
+        this.chartDays = selected.value;
+    }
+
+    get selectedDaysOption() {
+        return this.daysOptions.find(d => d.value === this.chartDays);
+    }
 }

ghost/admin/app/templates/stats.hbs

@@ -1,8 +1,24 @@
 <section class="gh-canvas gh-canvas-sticky">
     <GhCanvasHeader class="gh-canvas-header sticky break tablet post-header">
         <GhCustomViewTitle @title="Stats" />
+            <div class="gh-dashboard-select">
+                <PowerSelect
+                    @selected={{this.selectedDaysOption}}
+                    @options={{this.daysOptions}}
+                    @searchEnabled={{false}}
+                    @onChange={{this.onDaysChange}}
+                    @triggerComponent={{component "gh-power-select/trigger"}}
+                    @triggerClass="gh-contentfilter-menu-trigger"
+                    @dropdownClass="gh-contentfilter-menu-dropdown is-narrow"
+                    @matchTriggerWidth={{false}}
+                    @horizontalPosition="right"
+                    as |option|
+                >
+                    {{#if option.name}}{{option.name}}{{else}}<span class="red">Unknown option</span>{{/if}}
+                </PowerSelect>
+            </div>
     </GhCanvasHeader>
 
-    <Stats::Charts::TopLocations />
+    <Stats::Charts::TopLocations @chartDays={{this.chartDays}} />
 
 </section>