view data fixes

apps/website/lib/view-models/AnalyticsMetricsViewModel.ts

@@ -2,40 +2,45 @@
  * Analytics metrics view model
  * Represents metrics data for analytics
  *
- * Note: No matching generated DTO available yet
+ * Accepts AnalyticsMetricsViewData as input and produces UI-ready data.
  */
-export class AnalyticsMetricsViewModel {
-  pageViews: number;
-  uniqueVisitors: number;
-  averageSessionDuration: number;
-  bounceRate: number;
+import { AnalyticsMetricsViewData } from "../view-data/AnalyticsMetricsViewData";
+import { ViewModel } from "../contracts/view-models/ViewModel";
+import { NumberDisplay } from "../display-objects/NumberDisplay";
+import { DurationDisplay } from "../display-objects/DurationDisplay";
+import { PercentDisplay } from "../display-objects/PercentDisplay";
 
-  constructor(data: { pageViews: number; uniqueVisitors: number; averageSessionDuration: number; bounceRate: number }) {
-    this.pageViews = data.pageViews;
-    this.uniqueVisitors = data.uniqueVisitors;
-    this.averageSessionDuration = data.averageSessionDuration;
-    this.bounceRate = data.bounceRate;
+export class AnalyticsMetricsViewModel extends ViewModel {
+  readonly pageViews: number;
+  readonly uniqueVisitors: number;
+  readonly averageSessionDuration: number;
+  readonly bounceRate: number;
+
+  constructor(viewData: AnalyticsMetricsViewData) {
+    super();
+    this.pageViews = viewData.pageViews;
+    this.uniqueVisitors = viewData.uniqueVisitors;
+    this.averageSessionDuration = viewData.averageSessionDuration;
+    this.bounceRate = viewData.bounceRate;
   }
 
   /** UI-specific: Formatted page views */
   get formattedPageViews(): string {
-    return this.pageViews.toLocaleString();
+    return NumberDisplay.format(this.pageViews);
   }
 
   /** UI-specific: Formatted unique visitors */
   get formattedUniqueVisitors(): string {
-    return this.uniqueVisitors.toLocaleString();
+    return NumberDisplay.format(this.uniqueVisitors);
   }
 
   /** UI-specific: Formatted session duration */
   get formattedSessionDuration(): string {
-    const minutes = Math.floor(this.averageSessionDuration / 60);
-    const seconds = Math.floor(this.averageSessionDuration % 60);
-    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+    return DurationDisplay.formatSeconds(this.averageSessionDuration);
   }
 
   /** UI-specific: Formatted bounce rate */
   get formattedBounceRate(): string {
-    return `${this.bounceRate.toFixed(1)}%`;
+    return PercentDisplay.format(this.bounceRate);
   }
 }