(wip): multiple changes to make graphs work with production data

src/app/common/layout/v2-topbar/user-menu.component.html

@@ -42,10 +42,9 @@
 
  <li
  class="m-dropdownList__item m-user-menuDropdown__Item"
- *ngIf="isAdmin()"
  (click)="closeMenu()"
  >
- <a routerLink="/analytics/admin/network">
+ <a routerLink="/analytics/dashboard/traffic">
  <i class="material-icons">timeline</i>
  <span i18n>Analytics</span>
  </a>

src/app/modules/analytics/v2/components/chart/chart.component.ts

@@ -239,7 +239,7 @@ export class AnalyticsChartComponent implements OnInit, OnDestroy {
  this.data.push(segment);
  });
 
- if (this.segmentLength === 2) {
+ if (this.segmentLength === 2 && this.data[1]) {
  this.data[1].line.dash = 'dot';
  }
 

src/app/modules/analytics/v2/components/menu/menu.component.scss

@@ -128,8 +128,9 @@ m-analytics__menu {
  .catContainer {
  cursor: pointer;
  .cat {
- padding: 6px 0;
  a {
+ display: block;
+ padding: 6px 0;
  text-decoration: none;
  font-weight: 400;
  @include m-theme() {

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

@@ -14,7 +14,13 @@
  <div class="metricLabel">{{ metric.label }}</div>
  <!-- TODO the "number" pipe should be from backend so it can dynamically handle diff decimals/currency formats -->
  <div class="metricSummary" *ngIf="metric.summary">
- {{ metric.summary.current_value | number }}
+ <ng-container *ngIf="metric.unit === 'number'">
+ {{ metric.summary.current_value | number }}
+ </ng-container>
+ <ng-container *ngIf="metric.unit === 'usd'">
+ <span>$</span
+ >{{ metric.summary.current_value / 100 | number: '1.2-2' }}
+ </ng-container>
  </div>
 
  <div

src/app/modules/analytics/v2/components/metrics/metrics.component.ts

@@ -54,7 +54,7 @@ export class AnalyticsMetricsComponent implements OnInit, OnDestroy {
  if (metric.summary) {
  const delta =
  (metric.summary.current_value - metric.summary.comparison_value) /
- metric.summary.comparison_value;
+ (metric.summary.comparison_value || 0);
 
  metric['delta'] = delta;
  metric['hasChanged'] = delta === 0 ? false : true;

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

@@ -14,14 +14,16 @@
  <!-- TODO: make some sort of a map thing to make the entity fields have the same name for different entity types. Currently only made it to 'work' with fake image and fake blog but even those are streching it -->
  <ng-container *ngFor="let row of reformattedBuckets">
  <div class="row">
- <div class="entity col">
+ <div class="entity col" *ngIf="row.entity">
  <div class="entityTitle">
- <a [routerLink]="'/' + row.entity.route">{{ row.entity.title }}</a
- ><i class="material-icons">open_in_new</i>
+ <a [routerLink]="'/newsfeed/' + row.entity?.guid">
+ <span>{{ row.entity.title || 'Post' }}</span>
+ <i class="material-icons">open_in_new</i>
+ </a>
  </div>
  <div class="entityDetails">
- <a [routerLink]="'/' + row.entity.ownerObj.guid">{{
- row.entity.ownerObj.name
+ <a [routerLink]="'/' + row.entity.ownerObj?.guid">{{
+ row.entity.ownerObj?.name
  }}</a>
  <span>{{ row.entity.subtype | titlecase }}</span>
  <span>Published {{ row.entity.time_created * 1000 | date }}</span>

src/app/modules/analytics/v2/components/table/table.component.scss

@@ -53,8 +53,8 @@
  }
  }
  .entityDetails {
- display: flex;
- justify-content: space-between;
+ display: inline;
+ //justify-content: space-between;
  @include m-theme() {
  color: themed($m-grey-200);
  }
@@ -62,6 +62,7 @@
  @include m-theme() {
  color: themed($m-grey-200);
  }
+ margin-right: $minds-margin;
  }
  }
  }

src/app/modules/analytics/v2/components/table/table.component.ts

@@ -27,7 +27,7 @@ import {
 @Component({
  selector: 'm-analytics__table',
  templateUrl: './table.component.html',
- // changeDetection: ChangeDetectionStrategy.OnPush,
+ changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AnalyticsTableComponent implements OnInit, OnDestroy {
  subscription: Subscription;
@@ -47,8 +47,10 @@ export class AnalyticsTableComponent implements OnInit, OnDestroy {
  })
  );
  selectedMetric;
+
  constructor(
- private analyticsService: AnalyticsDashboardService // protected cd: ChangeDetectorRef
+ private analyticsService: AnalyticsDashboardService,
+ protected cd: ChangeDetectorRef
  ) {}
 
  ngOnInit() {
@@ -60,10 +62,12 @@ export class AnalyticsTableComponent implements OnInit, OnDestroy {
  );
 
  this.reformatBuckets();
+ this.detectChanges();
  });
  }
 
  reformatBuckets() {
+ this.reformattedBuckets = [];
  this.visualisation.buckets.forEach(bucket => {
  const reformattedBucket = {};
  const reformattedValues = [];
@@ -77,9 +81,15 @@ export class AnalyticsTableComponent implements OnInit, OnDestroy {
  reformattedBucket['values'] = reformattedValues;
  this.reformattedBuckets.push(reformattedBucket);
  });
+ console.log(this.reformattedBuckets);
  // TODO: reformat diff entity objs so template fields match
  }
 
+ detectChanges() {
+ this.cd.markForCheck();
+ this.cd.detectChanges();
+ }
+
  ngOnDestroy() {
  this.subscription.unsubscribe();
  }

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

@@ -97,6 +97,12 @@ export class AnalyticsDashboardComponent implements OnInit, OnDestroy {
  this.timespanFilter.options = timespans;
  this.detectChanges();
  });
+ this.analyticsService.category$.subscribe(category => {
+ this.detectChanges();
+ });
+ this.analyticsService.metrics$.subscribe(metrics => {
+ this.detectChanges();
+ });
  }
 
  updateTimespan(timespanId) {

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

 import { Injectable } from '@angular/core';
 
 import { FormControl } from '@angular/forms';
-import { BehaviorSubject, Observable, combineLatest } from 'rxjs';
+import { BehaviorSubject, Observable, combineLatest, of } from 'rxjs';
 import {
  map,
  distinctUntilChanged,
@@ -11,6 +11,7 @@ import {
  delay,
  debounceTime,
  throttleTime,
+ catchError,
 } from 'rxjs/operators';
 
 import { Client } from '../../../services/api/client';
@@ -494,12 +495,30 @@ export class AnalyticsDashboardService {
  ///debounceTime(300),
  tap(() => console.log('load from remote called')),
  distinctUntilChanged(deepDiff),
+ catchError(_ => {
+ console.log('caught error');
+ return of(null);
+ }),
  switchMap(([category, timespan, metric, filter]) => {
  console.log(category, timespan, metric, filter);
- return this.getDashboardResponse(category, timespan, metric, filter);
- })
+ try {
+ const response = this.getDashboardResponse(
+ category,
+ timespan,
+ metric,
+ filter
+ );
+ return response;
+ } catch (err) {
+ return null;
+ }
+ }),
+ catchError(_ => of(null))
  )
  .subscribe(response => {
+ if (!response) {
+ return;
+ }
  const dashboard = response.dashboard;
  this.ready$.next(true);
 
@@ -549,7 +568,7 @@ export class AnalyticsDashboardService {
 
  updateCategory(category: string) {
  console.log('update category called: ' + category);
- this.updateState({ ..._state, category, loading: true });
+ this.updateState({ ..._state, category, metrics: [], loading: true });
  }
  updateTimespan(timespan: string) {
  console.log('update timespan called: ' + timespan);
@@ -602,7 +621,10 @@ export class AnalyticsDashboardService {
  filter: string[]
  ): Observable<Response> {
  const url = buildQueryUrl(category, timespan, metric, filter);
- return this.httpClient.get<Response>(url).pipe(map(response => response));
+ return this.httpClient.get<Response>(url).pipe(
+ catchError(_ => of(null)),
+ map(response => response)
+ );
  }
 
  getData() {

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

-<m-analytics__metrics
- *ngIf="selectedMetric.visualisation.type === 'chart'"
-></m-analytics__metrics>
-<div class="filterableChartWrapper">
- <m-analytics__chart
+<ng-container *ngIf="selectedMetric && selectedMetric.visualisation">
+ <m-analytics__metrics
  *ngIf="selectedMetric.visualisation.type === 'chart'"
- ></m-analytics__chart>
- <m-analytics__table
- *ngIf="selectedMetric.visualisation.type === 'table'"
- ></m-analytics__table>
- <m-analytics__filters></m-analytics__filters>
-</div>
+ ></m-analytics__metrics>
+ <div class="filterableChartWrapper">
+ <m-analytics__chart
+ *ngIf="selectedMetric.visualisation.type === 'chart'"
+ ></m-analytics__chart>
+ <m-analytics__table
+ *ngIf="selectedMetric.visualisation.type === 'table'"
+ ></m-analytics__table>
+ <m-analytics__filters></m-analytics__filters>
+ </div>
+</ng-container>

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

-import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import {
+ Component,
+ OnInit,
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
+} from '@angular/core';
 import { Observable, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { AnalyticsDashboardService } from '../../dashboard.service';
@@ -20,15 +25,21 @@ export class AnalyticsLayoutChartComponent implements OnInit {
  })
  );
  selectedMetric;
- constructor(private analyticsService: AnalyticsDashboardService) {}
+
+ constructor(
+ private analyticsService: AnalyticsDashboardService,
+ private cd: ChangeDetectorRef
+ ) {}
 
  ngOnInit() {
  this.subscription = this.selectedMetric$.subscribe(metric => {
  this.selectedMetric = metric;
- try {
- } catch (err) {
- console.log(err);
- }
+ this.detectChanges();
  });
  }
+
+ detectChanges() {
+ this.cd.markForCheck();
+ this.cd.detectChanges();
+ }
 }