Updated top metrics to refetch on change (#21033)

closes
https://linear.app/tryghost/issue/ANAL-67/audience-filtering-doesnt-update-the-top-metrics-just-the-charts

- We want the data to be refetched whenever the chart range or audience
args change
- I don't think this is the right pattern, but we're going to move to a
react project in a few weeks, and I think this will be ok for that long

ghost/admin/app/components/stats/kpis-overview.hbs

@@ -1,5 +1,5 @@
 
-<div class="gh-stats-tabs-header">
+<div class="gh-stats-tabs-header" {{did-insert this.fetchDataIfNeeded @chartRange @audience}}>
     <div class="gh-stats-tabs">
         <button type="button" class="gh-stats-tab min-width {{if this.uniqueVisitorsTabSelected 'is-selected'}}" {{on "click" this.changeTabToUniqueVisitors}}>
             <Stats::Parts::Metric

ghost/admin/app/components/stats/kpis-overview.js

@@ -43,14 +43,19 @@ export default class KpisOverview extends Component {
 
     constructor() {
         super(...arguments);
-        this.fetchData.perform();
+        this.fetchDataIfNeeded();
+    }
+
+    @action
+    fetchDataIfNeeded() {
+        this.fetchData.perform(this.args.chartRange, this.args.audience);
     }
 
     @task
-    *fetchData() {
+    *fetchData(chartRange, audience) {
         try {
             const endDate = moment().endOf('day');
-            const startDate = moment().subtract(this.args.chartRange - 1, 'days').startOf('day');
+            const startDate = moment().subtract(chartRange - 1, 'days').startOf('day');
 
             const params = new URLSearchParams({
                 site_uuid: this.config.stats.id,
@@ -58,8 +63,8 @@ export default class KpisOverview extends Component {
                 date_to: endDate.format('YYYY-MM-DD')
             });
 
-            if (this.args.audience.length > 0) {
-                params.append('member_status', this.args.audience.join(','));
+            if (audience.length > 0) {
+                params.append('member_status', audience.join(','));
             }
 
             const response = yield fetch(`${this.config.stats.endpoint}/v0/pipes/kpis.json?${params}`, {