scatter comp. accesses data thru meta - stillneed to fix d3 scat testing

googleinterns · Jul 11, 2020 · 9318109 · 9318109
1 parent 59b736b
commit 9318109
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 60 deletions.
diff --git a/src/components/vr-scatter-plot/vr-scatter-plot.component.ts b/src/components/vr-scatter-plot/vr-scatter-plot.component.ts
@@ -1,36 +1,28 @@
-import { Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild } from '@angular/core';
+import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import { Scatterplot } from '../../d3/scatterplot.d3';
 import { PreferenceService } from '../../services/preference/preference.service';
 import { DataService } from '../../services/data/data.service';
-import { AUDIFICATION_PREFERENCE, DATA_PREFERENCE, DATA_TABLE_PREFERENCE, TEXT_SUMMARY_PREFERENCE } from '../../i18n';
 import { Meta } from '../../datasets/metas/types';
-import { TimeSeriesDatum, TimeSeriesPoint, TimeSeriesQueryOptions, createTimeSeriesQuery } from '../../datasets/queries/time-series.query';
+import { TimeSeriesPoint, TimeSeriesQueryOptions } from '../../datasets/queries/time-series.query';
 import { LineChartDatum} from '../line-chart/line-chart.component';
-import { query } from '@angular/animations';
 import { XYPoint } from '../../datasets/metas/types';
 import { LineChartMeta, createLineChartMeta } from '../../datasets/metas/line-chart.meta';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { DAY } from '../../utils/timeUnits';
-import { datasets } from '../../datasets/'
 import { map, takeUntil } from 'rxjs/operators';
 
 
+
 @Component({
   selector: 'app-vr-scatter-plot',
   templateUrl: './vr-scatter-plot.component.html'
 })
-export class VRScatterPlotComponent implements OnInit, OnChanges, OnDestroy{
+export class VRScatterPlotComponent<T extends Meta>implements OnInit, OnChanges, OnDestroy{
   @Input() endDate = new Date();
   @Input() startDate = new Date(this.endDate.getTime() - 30 * DAY);
-  meta: LineChartMeta;
+  @Input() meta: Meta;
+  @Input() meta2: LineChartMeta;
   private vrScatterPlot: Scatterplot;
-  private shape: string;
-  private color: string;
-  dataset$ = this.preferenceService.dataset$;
-  dataTable$ = this.preferenceService.dataTable$;
-  textSummary$ = this.preferenceService.textSummary$;
-  time = new Date(Date.now() - 100 * DAY);
-  data: XYPoint<Date, number>[] = [];
   componentMetas: Meta[];
   queryOptions$ = new BehaviorSubject<TimeSeriesQueryOptions>({
     range: [this.startDate, this.endDate],
@@ -40,62 +32,67 @@ export class VRScatterPlotComponent implements OnInit, OnChanges, OnDestroy{
     points: [],
   });
   private destroy$ = new Subject();
-  activePoint$ = new BehaviorSubject<TimeSeriesPoint | null>(null);
-
 
   constructor(
-    private dataService: DataService,
-    private preferenceService: PreferenceService,
+    private preferenceService: PreferenceService
   ) {
-    //dataService.preference
-
-    dataService = new DataService(preferenceService);
-    for (let i = 1; i <= 100; i++) {
-      this.data.push({
-        x: new Date(this.time.getTime() + i * DAY),
-        y: 20,
-      });
-    }
-    this.meta = createLineChartMeta(
-      'Line Chart',
-      (options: TimeSeriesQueryOptions) => [{
-        label: 'Dummy Data',
-        points: this.data,
-      }],
-    );
-
-      this.dataService.dataset$
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(dataset => {
-        this.componentMetas = dataset.metas
-         this.meta = dataset.metas[0] as any;
-      });
+    this.preferenceService = preferenceService;
+  }
 
-      // this.dataService.dataset$ will print out data array points
-      console.log(dataService.dataset$);
-      this.vrScatterPlot = new Scatterplot('a-sphere');
+  ngOnInit() {
+    this.vrScatterPlot = new Scatterplot('a-sphere');
+    const dataService = new DataService(this.preferenceService);
+    dataService.dataset$
+    .pipe(takeUntil(this.destroy$))
+    .subscribe(dataset => {
+      // componentMetas is initialized to different dataset metas - will help funnel dataset
+      this.componentMetas = dataset.metas;
+      // dataset.metas[0].type = 'tabbed' and dataset.metas[1] = 'line'
+      this.meta = dataset.metas[0];
+      if (this.isTabbed()) {
+        this.meta2 = (this.meta as any).metas[0];
+        console.log(this.meta2);
+      } else {
+        this.meta2 = this.meta[0];
+      }
+      // calling this.init() from inside bc when code above is in constructor,
+      // and code in this.init() is in ngOnInit() there is sync problem
+      this.init();
+    });
   }
 
-  get datum() {
-    return this.datum$.value;
+  ngOnDestroy() {
   }
 
-  ngOnInit() {
+  ngOnChanges(changes: SimpleChanges): void {
+  }
+
+  init(){
     this.queryOptions$
     .pipe(takeUntil(this.destroy$))
     .pipe(map(queryOption => {
-      console.log(this.meta.query(queryOption)[0]);
-      return this.meta.query(queryOption)[0];
+      // this.meta2.query(queryOption)[0]) has label, points, style and is of type BehaviorSubject<LineChartData>
+      return this.meta2.query(queryOption)[0];
     }))
     .subscribe(this.datum$);
-    console.log(this.datum$.value.points);
-
-   this.vrScatterPlot.init(document.querySelector('a-scene'), this.data);
+    this.vrScatterPlot.init(document.querySelector('a-scene'), this.datum$.value.points);
   }
 
-  ngOnDestroy() {
+  isTabbed(): boolean {
+    return 'tabbed' === this.meta.type;
   }
 
-  ngOnChanges(changes: SimpleChanges): void {
-    }
+  get datum() {
+    return this.datum$.value;
   }
+
+  sleep(milliseconds: number) {
+      const timeStart = new Date().getTime();
+      while (true) {
+        const elapsedTime = new Date().getTime() - timeStart;
+        if (elapsedTime > milliseconds) {
+          break;
+        }
+      }
+    }
+}
diff --git a/src/d3/scatterplot.d3.ts b/src/d3/scatterplot.d3.ts
@@ -26,20 +26,21 @@ export class Scatterplot{
     this.container = container;
     this.generatePts();
     this.setColor('blue');
-    this.createSky('pink');
+    this.createSky('gray');
   }
 
   private generatePts() {
     // create a scale so that there is correspondence between data set and screen render
     const hscale = d3.scaleLinear();
-    // hscale.domain([0, d3.max(this.data) as number])       // max of dataset
+    // hscale needs to be reassessed - this.data not of type number - need to write function to return max of each dimension
+    // hscale.domain([0, d3.max(this.data)]       // max of dataset
     // .range([0, 10]);                                      // linear mapping of data set values to values from 0 to 10
      // enter identifies any DOM elements to be added when # array elements doesn't match
     d3.select(this.container).selectAll(this.shape).data(this.data).enter().append(this.shape);
     // d is data at index, i within
     // select all shapes within given container
     d3.select(this.container).selectAll(this.shape).attr('position', (d, i) => {
-      const x = this.data[i].y;
+      const x = this.data[i].y - this.data[i].y;
       const y = i * 10;
       const z = -10;
       return `${x} ${y} ${z}`;
@@ -51,9 +52,9 @@ export class Scatterplot{
     });
   }
 
-  private createSky(color: string){
+  private createSky(color: string | number){
     const sky = document.createElement('a-sky');
-    sky.id = "sky";
+    sky.id = 'sky';
     this.container?.appendChild(sky);
     d3.select(this.container).selectAll('#sky').attr('color', () => {
       return color;