feat(metrics): chart loading state

Pinelab-studio · Oct 31, 2024 · 1a811d4 · 1a811d4
1 parent 300fb95
commit 1a811d4
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 40 deletions.
diff --git a/packages/vendure-plugin-metrics/CHANGELOG.md b/packages/vendure-plugin-metrics/CHANGELOG.md
@@ -1,3 +1,7 @@
+# 1.4.2 (2024-10-31)
+
+- Loading state
+
 # 1.4.1 (2024-10-31)
 
 - Only fetch relations from DB when variants are passed in for better performance

diff --git a/packages/vendure-plugin-metrics/package.json b/packages/vendure-plugin-metrics/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pinelab/vendure-plugin-metrics",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "Vendure plugin measuring and visualizing e-commerce metrics",
   "author": "Martijn van de Brug <[email protected]>",
   "homepage": "https://pinelab-plugins.com/",

diff --git a/packages/vendure-plugin-metrics/src/api/metrics/average-order-value.ts b/packages/vendure-plugin-metrics/src/api/metrics/average-order-value.ts
@@ -85,9 +85,7 @@ export class AverageOrderValueMetric implements MetricStrategy<Order> {
     variants: ProductVariant[]
   ): NamedDatapoint[] {
     let legendLabel = variants.length
-      ? `Average order value of orders with ${variants
-          .map((v) => v.name)
-          .join(', ')}`
+      ? `Average order value of orders with selected variants`
       : 'Average order value';
     if (ctx.channel.pricesIncludeTax) {
       legendLabel += ' (incl. tax)';

diff --git a/packages/vendure-plugin-metrics/src/ui/metrics-widget.ts b/packages/vendure-plugin-metrics/src/ui/metrics-widget.ts
@@ -15,46 +15,51 @@ import {
 import { Observable } from 'rxjs';
 import { MetricsUiService } from './metrics-ui.service';
 import { ChartEntry } from './chartist/chartist.component';
-import { easings, LineChart, LineChartData, LineChartOptions } from 'chartist';
 
 @Component({
   selector: 'product-metrics-widget',
   template: `
-    <div>
-      <button
-        (click)="openProductSelectionDialog()"
-        class="btn btn-sm btn-secondary"
-      >
-        {{
-          'common.items-selected-count'
-            | translate : { count: selectedVariantIds?.length ?? 0 }
-        }}...
-      </button>
-      <button
-        class="btn btn-sm circular-button"
-        [attr.disabled]="selectedVariantIds.length == 0 ? 'disabled' : null"
-        (click)="clearProductVariantSelection()"
-      >
-        <clr-icon shape="times"></clr-icon>
-      </button>
-      <small *ngIf="selectedVariantNames.length">
-        {{ selectedVariantNames.join(' + ') }}
-      </small>
-    </div>
-    <br />
-    <br />
-    <vdr-chartist [entries]="selectedMetrics" style="padding-left: 50px; " />
-    <br />
-    <br />
-    <div class="flex">
-      <button
-        *ngFor="let metric of metrics$ | async"
-        class="button-small"
-        (click)="selectedMetrics = metric"
-        [class.active]="selectedMetrics?.summary.code === metric.summary.code"
-      >
-        {{ metric.summary.title }}
-      </button>
+    <div style="position: relative;">
+      <div>
+        <div *ngIf="loading" class="spinner-overlay">
+          <div class="spinner">Loading...</div>
+        </div>
+
+        <button
+          (click)="openProductSelectionDialog()"
+          class="btn btn-sm btn-secondary"
+        >
+          {{
+            'common.items-selected-count'
+              | translate : { count: selectedVariantIds?.length ?? 0 }
+          }}...
+        </button>
+        <button
+          class="btn btn-sm circular-button"
+          [attr.disabled]="selectedVariantIds.length == 0 ? 'disabled' : null"
+          (click)="clearProductVariantSelection()"
+        >
+          <clr-icon shape="times"></clr-icon>
+        </button>
+        <small *ngIf="selectedVariantNames.length">
+          {{ selectedVariantNames.join(' + ') }}
+        </small>
+      </div>
+      <br />
+      <br />
+      <vdr-chartist [entries]="selectedMetrics" style="padding-left: 50px; " />
+      <br />
+      <br />
+      <div class="flex">
+        <button
+          *ngFor="let metric of metrics$ | async"
+          class="button-small"
+          (click)="selectedMetrics = metric"
+          [class.active]="selectedMetrics?.summary.code === metric.summary.code"
+        >
+          {{ metric.summary.title }}
+        </button>
+      </div>
     </div>
   `,
   styles: [
@@ -91,6 +96,20 @@ import { easings, LineChart, LineChartData, LineChartOptions } from 'chartist';
         gap: 0.5rem;
       }
     `,
+    `
+      .spinner-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(255, 255, 255, 0.5);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 99;
+      }
+    `,
   ],
 })
 export class MetricsWidgetComponent implements OnInit {
@@ -101,6 +120,7 @@ export class MetricsWidgetComponent implements OnInit {
   nrOfOrdersChart?: any;
   selectedVariantIds: string[] = [];
   selectedVariantNames: string[] = [];
+  loading = true;
 
   constructor(
     private dataService: DataService,
@@ -148,12 +168,14 @@ export class MetricsWidgetComponent implements OnInit {
   }
 
   loadChartData() {
+    this.loading = true;
     this.metrics$ = this.metricsService.queryData(
       // this.selection$,
       this.selectedVariantIds
     );
     this.changeDetectorRef.detectChanges();
     this.metrics$?.subscribe(async (metrics) => {
+      this.loading = false;
       if (this.selectedMetrics) {
         this.selectedMetrics = metrics.find(
           (e) => e.summary.code == this.selectedMetrics?.summary.code