(chore): various fixes

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

@@ -92,6 +92,7 @@ export class AnalyticsChartComponent implements OnInit, OnDestroy {
  } catch (err) {
  console.log(err);
  }
+ this.detectChanges();
  });
 
  this.timespanSubscription = this.analyticsService.timespan$.subscribe(
@@ -231,7 +232,7 @@ export class AnalyticsChartComponent implements OnInit, OnDestroy {
  this.hoverInfo['date'] = this.segments[0].buckets[this.hoverPoint].date;
  this.hoverInfo['value'] = this.segments[0].buckets[this.hoverPoint].value;
 
- if (this.isComparison) {
+ if (this.isComparison && this.segments[1]) {
  this.hoverInfo['comparisonValue'] = this.segments[1].buckets[
  this.hoverPoint
  ].value;

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

@@ -117,6 +117,10 @@ m-analytics__metrics {
  transition: background-color 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  }
  }
+ m-tooltip {
+ vertical-align: middle;
+ margin-left: 4px;
+ }
  .metricSummary {
  font-size: 17px;
  margin-top: 8px;

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

@@ -2,6 +2,7 @@ import {
  Component,
  OnInit,
  ChangeDetectionStrategy,
+ ChangeDetectorRef,
  OnDestroy,
 } from '@angular/core';
 import { Observable, Subscription } from 'rxjs';
@@ -49,12 +50,13 @@ export class AnalyticsMetricsComponent implements OnInit, OnDestroy {
 
  constructor(
  private analyticsService: AnalyticsDashboardService,
- public session: Session
+ public session: Session,
+ private cd: ChangeDetectorRef
  ) {}
 
  ngOnInit() {
  this.user = this.session.getLoggedInUser();
- if (this.user.isAdmin) {
+ if (this.session.isAdmin()) {
  this.userRoles.push('admin');
  }
  if (this.user.pro) {
@@ -104,6 +106,11 @@ export class AnalyticsMetricsComponent implements OnInit, OnDestroy {
  this.analyticsService.updateMetric(metric.id);
  }
 
+ detectChanges() {
+ this.cd.markForCheck();
+ this.cd.detectChanges();
+ }
+
  ngOnDestroy() {
  // this.subscription.unsubscribe();
  }

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

-<div class="spinnerContainer">
- <div
- class="mdl-spinner mdl-js-spinner is-active"
- [mdl]
- [hidden]="!loading"
- ></div>
-</div>
 <div class="tableWrapper" [hidden]="loading">
  <div class="header row">
  <div

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

-div.filterableChartWrapper {
+.tableWrapper .filterableChartWrapper {
  padding: 0;
  width: 100%;
 }
-div.filtersContainer {
+.tableWrapper .filtersContainer {
  display: none;
 }
 .tableWrapper {

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

@@ -72,6 +72,8 @@ export class AnalyticsTableComponent implements OnInit, OnDestroy {
  const reformattedBucket = {};
  const reformattedValues = [];
 
+ if (!bucket.values['entity']) return;
+
  this.columns.forEach((column, i) => {
  if (i === 0) {
  reformattedBucket['entity'] = this.reformatEntity(
@@ -123,12 +125,12 @@ export class AnalyticsTableComponent implements OnInit, OnDestroy {
  const routesByType = [
  {
  ids: ['image', 'video'],
- route: 'media/' + entity.urn.split(':')[2],
+ route: '/media/' + entity.urn.split(':')[2],
  },
 
  {
  ids: ['activity', 'remind'],
- route: `newsfeed/${entity.urn.split(':')[2]}`,
+ route: `/newsfeed/${entity.urn.split(':')[2]}`,
  },
  {
  ids: ['blog'],
@@ -136,7 +138,7 @@ export class AnalyticsTableComponent implements OnInit, OnDestroy {
  },
  {
  ids: ['channel'],
- route: entity.name,
+ route: '/' + entity.name,
  },
  ];
 

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

@@ -166,11 +166,11 @@ export class AnalyticsDashboardService {
  );
  metrics$ = this.state$.pipe(
  map(state => state.metrics),
- //distinctUntilChanged(deepDiff),
- distinctUntilChanged((prev, curr) => {
- console.log(JSON.stringify(prev), JSON.stringify(curr));
- return deepDiff(prev, curr);
- }),
+ distinctUntilChanged(deepDiff),
+ //distinctUntilChanged((prev, curr) => {
+ // console.log(JSON.stringify(prev), JSON.stringify(curr));
+ // return deepDiff(prev, curr);
+ //}),
  tap(metrics => console.log('metrics changed', metrics))
  );
  filter$ = this.state$.pipe(
@@ -317,7 +317,7 @@ export class AnalyticsDashboardService {
  console.log('update category called: ' + category);
  // TODO: uncomment this
  // this.updateState({ ..._state, category, metrics: [], loading: true });
- this.updateState({ ..._state, category, loading: true });
+ this.updateState({ ..._state, category, metrics: [], loading: true });
  }
  updateTimespan(timespan: string) {
  console.log('update timespan called: ' + timespan);

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

+<div class="spinnerContainer" *ngIf="loading$ | async">
+ <div class="mdl-spinner mdl-js-spinner is-active" [mdl]></div>
+</div>
 <ng-container *ngIf="selectedMetric && selectedMetric.visualisation">
  <m-analytics__metrics
  *ngIf="selectedMetric.visualisation.type === 'chart'"

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

@@ -4,7 +4,7 @@ import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
 } from '@angular/core';
-import { Observable, Subscription } from 'rxjs';
+import { Observable, Subscription, combineLatest } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { AnalyticsDashboardService } from '../../dashboard.service';
 
@@ -15,13 +15,14 @@ import { AnalyticsDashboardService } from '../../dashboard.service';
 })
 export class AnalyticsLayoutChartComponent implements OnInit {
  subscription: Subscription;
- selectedMetric$ = this.analyticsService.metrics$.pipe(
- map(metrics => {
- console.log(
- metrics,
- metrics.find(metric => metric.visualisation !== null)
- );
- return metrics.find(metric => metric.visualisation !== null);
+ loading$ = this.analyticsService.loading$;
+ selectedMetric$ = combineLatest(
+ this.analyticsService.metrics$,
+ this.analyticsService.metric$,
+ this.analyticsService.category$
+ ).pipe(
+ map(([metrics, id, category]) => {
+ return metrics.find(metric => metric.id == id);
  })
  );
  selectedMetric;
@@ -33,6 +34,7 @@ export class AnalyticsLayoutChartComponent implements OnInit {
 
  ngOnInit() {
  this.subscription = this.selectedMetric$.subscribe(metric => {
+ console.log('new metric');
  this.selectedMetric = metric;
  this.detectChanges();
  });
@@ -42,4 +44,8 @@ export class AnalyticsLayoutChartComponent implements OnInit {
  this.cd.markForCheck();
  this.cd.detectChanges();
  }
+
+ ngOnDestroy() {
+ this.subscription.unsubscribe();
+ }
 }