(wip): various fixes for infinite loops

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

@@ -399,7 +399,7 @@ export class AnalyticsChartComponent implements OnInit, OnDestroy {
  const dataUpdate = this.setData();
  const layoutUpdate = this.setLayout();
 
- Plotly.update('graphDiv', dataUpdate, layoutUpdate);
+ // Plotly.update('graphDiv', dataUpdate, layoutUpdate);
  }
 
  // GRAPH /\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/
@@ -407,11 +407,6 @@ export class AnalyticsChartComponent implements OnInit, OnDestroy {
  // // -------------------------------------------
  // // DRAW THE GRAPH ----------------------------
  // -------------------------------------------
- Plotly.plot('graphDiv', this.data, this.layout, {
- displayModeBar: false,
- responsive: true, // Doesn't do anything
- });
- this.setVertLineHeights();
  }
 
  setVertLineHeights() {
@@ -435,61 +430,6 @@ export class AnalyticsChartComponent implements OnInit, OnDestroy {
  this.hoverVertLines.shapes[this.thisPoint].line.color = this.getColor(
  'm-grey-50'
  );
- Plotly.relayout('graphDiv', this.hoverVertLines);
-
- // SHOW MARKER
- Plotly.restyle('graphDiv', {
- marker: {
- opacity: this.hoverMarkerOpacities,
- size: this.defaultMarkerSize,
- },
- });
-
- // SHOW TOOLTIP
- const xaxis = $event.points[0].xaxis,
- yaxis = $event.points[0].yaxis,
- tooltipDistX = xaxis.d2p($event.points[0].x),
- tooltipDistY = yaxis.d2p($event.points[0].y);
-
- this.hoverInfoDiv.style.opacity = 1;
-
- // console.log(xaxis._offset);
- // console.log(yaxis._offset);
- if (this.thisPoint < this.segmentLength / 2) {
- this.hoverInfoDiv.style.top = tooltipDistX + xaxis._offset + 20 + 'px';
- this.hoverInfoDiv.style.left = tooltipDistY + yaxis._offset + 20 + 'px';
- } else {
- // TODO move the second half of tooltips to the left of points
- // TODO also shift down/up if with x% of rangeMin/rangeMax???
- this.hoverInfoDiv.style.top = tooltipDistX + xaxis._offset + 20 + 'px';
- this.hoverInfoDiv.style.left = tooltipDistY + yaxis._offset + 20 + 'px';
- }
- // // Plotly.restyle(this.graphDiv, this.hoverStyles, 0);
-
- // this.hoverInfoTextX = $event.points.map(function(d) {
- // return '' + d.x;
- // });
-
- // this.hoverInfoTextY = $event.points.map(function(d) {
- // return d.y.toPrecision(3) + ' borks';
- // });
-
- // this.hoverInfoComparisonTextXy = $event.points.map(function(d) {
- // // TODO: how best to connect current with comparison segment data
- // return 'vs 700 Tues Oct 1st';
- // });
-
- // const xaxis = $event.points[0].xaxis,
- // yaxis = $event.points[0].yaxis;
-
- // $event.points.forEach(function(p) {
- // this.closestHoverPointPositionX = xaxis.d2p(p.x);
- // this.closestHoverPointPositionY = yaxis.d2p(p.x);
- // });
-
- // this.hoverInfoXDiv.textContent = this.hoverInfoXText.join();
- // this.hoverInfoYDiv.textContent = this.hoverInfoYText.join();
- // this.hoverInfoComparisonXyDiv.textContent = this.hoverInfoComparisonXyText.join();
  }
 
  // $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
@@ -500,12 +440,10 @@ export class AnalyticsChartComponent implements OnInit, OnDestroy {
  this.hoverVertLines.shapes[this.thisPoint].line.color = this.getColor(
  'm-grey-50-transparent'
  );
- Plotly.relayout('graphDiv', this.hoverVertLines);
 
  // HIDE MARKER
  this.hoverInfoDiv.style.opacity = 0;
  this.hoverMarkerOpacities[this.thisPoint] = this.defaultMarkerOpacity;
- Plotly.restyle('graphDiv', 'marker.opacity', this.hoverMarkerOpacities);
  }
 
  // // TODO: reimplement bc plotly responsive config doesn't work

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

-<div class="metricsContainer" *ngIf="vm$ | async as vm">
+<div class="metricsContainer" *ngIf="metrics$ | async as metrics">
  <div
  class="metric"
- *ngFor="let metric of vm.metrics"
+ *ngFor="let metric of metrics"
  (click)="updateMetric(metric)"
- [ngClass]="{ active: metric.id === vm.metric.id }"
+ [ngClass]="{ active: metric.visualisation }"
  >
  <div class="metricLabel">{{ metric.label }}</div>
  <!-- TODO the "| number" pipe should be from backend so it can dynamically handle diff decimals/currency formats -->

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

@@ -5,6 +5,8 @@ import {
  OnDestroy,
 } from '@angular/core';
 import { Observable, Subscription } from 'rxjs';
+import { map } from 'rxjs/operators';
+
 import {
  AnalyticsDashboardService,
  Category,
@@ -38,29 +40,35 @@ export class AnalyticsMetricsComponent implements OnInit, OnDestroy {
 
  //TODO: (maybe) interface ViewMetric implements Metric {}
  vm$: Observable<UserState> = this.analyticsService.vm$;
- vm: UserState;
+ metrics$;
 
  constructor(private analyticsService: AnalyticsDashboardService) {}
 
  ngOnInit() {
- this.subscription = this.vm$.subscribe(viewModel => (this.vm = viewModel));
- this.vm.metrics.forEach(metric => {
- const delta =
- (metric.summary.current_value - metric.summary.comparison_value) /
- metric.summary.comparison_value;
+ this.metrics$ = this.vm$.pipe(map(vm => {
+ const metrics = vm.metrics.map(metric => ({...metric})); // Clone to avoid updating
+
+ for (let metric of metrics) {
+ const delta =
+ (metric.summary.current_value - metric.summary.comparison_value) /
+ metric.summary.comparison_value;
 
- metric['delta'] = delta;
- metric['hasChanged'] = delta === 0 ? false : true;
+  metric['delta'] = delta;
+  metric['hasChanged'] = delta === 0 ? false : true;
 
- if (
- (delta > 0 && metric.summary.comparison_positive_inclination) ||
- (delta < 0 && !metric.summary.comparison_positive_inclination)
- ) {
- metric['positiveTrend'] = true;
- } else {
- metric['positiveTrend'] = false;
+ if (
+ (delta > 0 && metric.summary.comparison_positive_inclination) ||
+ (delta < 0 && !metric.summary.comparison_positive_inclination)
+ ) {
+ metric['positiveTrend'] = true;
+ metric['positiveTrendy'] = true;
+ } else {
+ metric['positiveTrend'] = false;
+ }
  }
- });
+
+ return metrics;
+ }));
  }
 
  updateMetric(metric) {
@@ -68,6 +76,6 @@ export class AnalyticsMetricsComponent implements OnInit, OnDestroy {
  }
 
  ngOnDestroy() {
-   this.subscription.unsubscribe();
+ // this.subscription.unsubscribe();
  }
 }

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

@@ -6,15 +6,15 @@
  <i class="material-icons">menu</i>
  <div class="cat" *ngFor="let cat of cats">
  <span [ngClass]="{ selected: cat.id === vm.category }">{{
- cat.label
+ cat?.label
  }}</span>
  </div>
  </div>
  </section>
- <section class="main">
+ <section class="main" *ngIf="(ready$ | async)">
  <div class="mainHeader">
  <h3 class="selectedCatLabel">
- {{ selectedCat.label }}
+ {{ selectedCat?.label }}
  </h3>
  <div class="globalFilters">
  <div class="channelSearch">
@@ -35,11 +35,11 @@
  ></m-analytics__layout--chart>
  <!-- <m-analytics__layout--table
  class="m-analytics__layout"
- *ngIf="selectedCat.type === 'table'"
+ *ngIf="selectedCat?.type === 'table'"
  ></m-analytics__layout--table>
  <m-analytics__layout--summary
  class="m-analytics__layout"
- *ngIf="selectedCat.type === 'summary'"
+ *ngIf="selectedCat?.type === 'summary'"
  ></m-analytics__layout--summary> -->
  </section>
 </div>

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

@@ -53,6 +53,7 @@ export class AnalyticsDashboardComponent implements OnInit, OnDestroy {
  options: [],
  };
  vm$: Observable<UserState> = this.analyticsService.vm$;
+ ready$: Observable<boolean> = this.analyticsService.ready$;
  vm: UserState;
 
  constructor(