feat(admin-ui): Implement refresh for metrics chart widget

packages/admin-ui/src/lib/dashboard/src/widgets/order-chart-widget/order-chart-widget.component.html

@@ -21,4 +21,8 @@
     >
         {{ 'dashboard.metric-average-order-value' | translate }}
     </button>
+    <div class="flex-spacer"></div>
+    <button class="button-small" (click)="refresh()">
+        <clr-icon shape="refresh"></clr-icon>
+    </button>
 </div>

packages/admin-ui/src/lib/dashboard/src/widgets/order-chart-widget/order-chart-widget.component.ts

@@ -7,8 +7,8 @@ import {
     MetricType,
 } from '@vendure/admin-ui/core';
 import { gql } from 'apollo-angular';
-import { BehaviorSubject, combineLatest, Observable, switchMap } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { BehaviorSubject, combineLatest, Observable, Subject, switchMap } from 'rxjs';
+import { distinctUntilChanged, map, startWith } from 'rxjs/operators';
 
 export const GET_ORDER_CHART_DATA = gql`
     query GetOrderChartData($refresh: Boolean, $types: [MetricType!]!) {
@@ -32,7 +32,7 @@ export const GET_ORDER_CHART_DATA = gql`
 export class OrderChartWidgetComponent implements OnInit {
     constructor(private dataService: DataService) {}
     metrics$: Observable<ChartEntry[]>;
-    refresh$ = new BehaviorSubject(false);
+    refresh$ = new Subject<boolean>();
     metricType$ = new BehaviorSubject(MetricType.OrderTotal);
     MetricType = MetricType;
 
@@ -42,34 +42,43 @@ export class OrderChartWidgetComponent implements OnInit {
             .refetchOnChannelChange()
             .mapStream(data => data.activeChannel.defaultCurrencyCode || undefined);
         const uiState$ = this.dataService.client.uiState().mapStream(data => data.uiState);
+        const metricType$ = this.metricType$.pipe(distinctUntilChanged());
+        this.metrics$ = combineLatest(metricType$, currencyCode$, uiState$).pipe(
+            switchMap(([metricType, currencyCode, uiState]) =>
+                this.refresh$.pipe(
+                    startWith(false),
+                    switchMap(refresh =>
+                        this.dataService
+                            .query(GetOrderChartDataDocument, {
+                                types: [metricType],
+                                refresh,
+                            })
+                            .mapSingle(data => data.metricSummary)
+                            .pipe(
+                                map(metrics => {
+                                    const formatValueAs: 'currency' | 'number' =
+                                        metricType === MetricType.OrderCount ? 'number' : 'currency';
+                                    const locale = `${uiState.language}-${uiState.locale}`;
 
-        this.metrics$ = combineLatest(this.refresh$, this.metricType$, currencyCode$, uiState$).pipe(
-            switchMap(([refresh, metricType, currencyCode, uiState]) =>
-                this.dataService
-                    .query(GetOrderChartDataDocument, {
-                        types: [metricType],
-                        refresh,
-                    })
-                    .mapSingle(data => data.metricSummary)
-                    .pipe(
-                        map(metrics => {
-                            const formatValueAs: 'currency' | 'number' =
-                                metricType === MetricType.OrderCount ? 'number' : 'currency';
-                            const locale = `${uiState.language}-${uiState.locale}`;
-
-                            const formatOptions: ChartFormatOptions = {
-                                formatValueAs,
-                                currencyCode,
-                                locale,
-                            };
-                            return (
-                                metrics
-                                    .find(m => m.type === metricType)
-                                    ?.entries.map(entry => ({ ...entry, formatOptions })) ?? []
-                            );
-                        }),
+                                    const formatOptions: ChartFormatOptions = {
+                                        formatValueAs,
+                                        currencyCode,
+                                        locale,
+                                    };
+                                    return (
+                                        metrics
+                                            .find(m => m.type === metricType)
+                                            ?.entries.map(entry => ({ ...entry, formatOptions })) ?? []
+                                    );
+                                }),
+                            ),
                     ),
+                ),
             ),
         );
     }
+
+    refresh() {
+        this.refresh$.next(true);
+    }
 }