src/app/modules/analytics/v2/components/benchmark/benchmark.component.html

@@ -11,7 +11,9 @@
       *ngIf="isNumber(value); else placeholderValue"
     >
       <ng-template ngSwitchCase="usd">
-        <div class="m-analytics__benchmarkValue">{{ value | currency }}</div>
+        <div class="m-analytics__benchmarkValue">
+          {{ value / 100 | currency }}
+        </div>
         <div class="m-analytics__benchmarkUnit">USD</div>
       </ng-template>
       <ng-template ngSwitchCase="eth">

src/app/modules/analytics/v2/dashboard.component.ts

@@ -63,6 +63,8 @@ export class AnalyticsDashboardComponent implements OnInit, OnDestroy {
       this.updateCategory(cat);
       if (cat === 'summary') {
         this.layout = 'summary';
+      } else {
+        this.layout = 'chart';
       }
     });
 

src/app/modules/analytics/v2/layouts/layout-summary/layout-summary.component.html

@@ -23,7 +23,7 @@
       ></m-analytics__benchmark>
     </div>
     <!-- CHART TILES -->
-    <ng-container *ngFor="let tile of fakeTiles">
+    <ng-container *ngFor="let tile of tiles">
       <div class="m-analyticsSummary__tile">
         <m-analytics__benchmark
           [label]="tile.label"

src/app/modules/analytics/v2/layouts/layout-summary/layout-summary.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
 import fakeData from './../../fake-data';
 import { Client } from '../../../../../services/api';
 import { Session } from '../../../../../services/session';
@@ -13,7 +13,7 @@ export class AnalyticsLayoutSummaryComponent implements OnInit {
   boosts: Array<any>;
   boostRows: Array<any> = [];
   fakeTiles;
-  url = '/api/v2/analytics/dashboards/';
+  url = 'api/v2/analytics/dashboards/';
   tiles = [
     {
       id: 'pageviews',
@@ -29,39 +29,56 @@ export class AnalyticsLayoutSummaryComponent implements OnInit {
       label: 'Daily Active Users',
       unit: 'number',
       interval: 'day',
-      endpoint:
-        this.url +
-        'traffic?metric=active_users&timespan=30d&filter=channel::all',
+      endpoint: this.url + 'traffic',
+      params: {
+        metric: 'active_users',
+        timespan: '30d',
+        filter: 'channel::all',
+      },
     },
     {
       id: 'active_users',
       label: 'Monthly Active Users',
       unit: 'number',
       interval: 'month',
-      endpoint:
-        this.url +
-        'traffic?metric=active_users&timespan=12m&filter=channel::all',
+      endpoint: this.url + 'traffic',
+      params: {
+        metric: 'active_users',
+        timespan: '1y',
+        filter: 'channel::all',
+      },
     },
     {
       id: 'signups',
       label: 'Signups',
       unit: 'number',
       interval: 'day',
-      endpoint:
-        this.url + 'traffic?metric=signups&timespan=30d&filter=channel::all',
+      endpoint: this.url + 'traffic',
+      params: {
+        metric: 'signups',
+        timespan: '30d',
+        filter: 'channel::all',
+      },
     },
     {
-      id: 'earnings',
+      id: 'earnings_total',
       label: 'Total PRO Earnings',
       unit: 'usd',
       interval: 'day',
-      endpoint:
-        this.url +
-        'earnings?metric=active_users&timespan=30d&filter=platform::all,view_type::total,channel::all',
+      endpoint: this.url + 'earnings',
+      params: {
+        metric: 'earnings_total',
+        timespan: '30d',
+        filter: 'platform::all,view_type::total,channel::all',
+      },
     },
   ];
 
-  constructor(private client: Client, public session: Session) {}
+  constructor(
+    private client: Client,
+    public session: Session,
+    private cd: ChangeDetectorRef
+  ) {}
 
   ngOnInit() {
     // TODO: confirm how permissions/security will work
@@ -74,25 +91,38 @@ export class AnalyticsLayoutSummaryComponent implements OnInit {
     // this.boostRows = [this.boosts.slice(0, 2), this.boosts.slice(2, 4)];
 
     this.getTiles();
-    this.loading = false;
   }
+
   async getTiles() {
-    this.tiles.forEach(tile => {
-      this.client
-        .get(tile.endpoint)
-        .then((response: any) => {
-          this.formatResponse(tile, response);
-        })
-        .catch(e => {
-          console.error(e);
-        });
+    this.tiles.forEach(async tile => {
+      try {
+        const response: any = await this.client.get(tile.endpoint, tile.params);
+        await this.formatResponse(tile, response);
+      } catch (e) {
+        console.error(e);
+      }
+      this.loading = false;
+      this.detectChanges();
     });
   }
 
-  formatResponse(tile, response) {
+  async formatResponse(tile, response) {
     const metric = response.dashboard.metrics.find(m => m.id === tile.id);
-    tile['metric'] = metric;
-    tile['value'] = metric.visualisation.segments[0].buckets.slice(-1).value;
-    tile['description'] = response.description;
+    if (!metric) return;
+    tile.metric = metric;
+    const buckets = metric.visualisation
+      ? metric.visualisation.segments[0].buckets
+      : [];
+    tile.value = buckets[buckets.length - 1]
+      ? buckets[buckets.length - 1].value
+      : 0;
+    tile.description = metric.description;
+    tile.visualisation = metric.visualisation;
+    this.cd.markForCheck();
+  }
+
+  detectChanges() {
+    this.cd.markForCheck();
+    this.cd.detectChanges();
   }
 }