- watch all changes on DataOptions models in dataservice

- npm updates

src/app/components/platform-detail/platform-detail.component.html

@@ -1,10 +1,12 @@
 <div>
-    <h2>{{ platform.label }} Details</h2>
+
+    <h2><span [innerHTML]="platform.label"></span> Details</h2>
     <div><span>id: </span>{{platform.id}}</div>
+    <div><span>label: </span>{{platform.label}}</div>
     <div>     
-      <label for="hero-name">Platform label: </label>
+      <!-- <label for="hero-name">Platform label: {{ platform.label }}</label> -->
       <!-- <input id="hero-name" [(ngModel)]="hero.name" placeholder="Hero name"/> -->
-      <!-- <input type="text" id="hero-name" [(ngModel)]="platform.label" placeholder="Platform label"/> -->
+      <!-- <input id="hero-name"  [value]="platform.label" placeholder="Platform label"/> -->
     </div>
     <button (click)="goBack()">go back</button>
   </div>

src/app/components/platform-detail/platform-detail.component.ts

@@ -14,28 +14,42 @@ import { DatasetApiService } from '../../services/dataset-api.service';
 })
 export class PlatformDetailComponent implements OnInit {
 
-  platform: GeomonPlatform;
+  public platform: GeomonPlatform | undefined;
+  public loading: boolean;
+  public error: any;
+  title: string = 'AppComponent';
 
   constructor(
     private route: ActivatedRoute,
     private datasetService: DatasetApiService,
     private location: Location
-  ) {}
+  ) {
+    this.getHero();
+  }
 
   ngOnInit(): void {
-    this.getHero();
+    // this.getHero();
   }
 
   getHero(): void {
     const id = String(this.route.snapshot.paramMap.get('id'));
     this.datasetService.getPlatform(id, 'https://geomon.geologie.ac.at/52n-sos-webapp/api/')
-		.subscribe((platform) => {
+		.subscribe({
+      next: (platform: GeomonPlatform) => {
         this.platform = platform;
+        this.title = "neuer Titel im Event";
+      },
+      error: (err: any) => this.handleError(err)
 		});   
     
    
   }
 
+  protected handleError(error: any) {
+    this.loading = false;
+    this.error = error;
+}
+
   goBack(): void {
     this.location.back();
   }

src/app/services/dataset.service.ts

@@ -58,6 +58,7 @@ export class DatasetService<T extends DatasetOptions> {
         //     options.forEach((e) => temp.push(e));
         //     // this.saveState();
         // }
+        options.visible = true;
         this.datasetOptions.set(internalId, options);
 
         this.datasetIdsChanged.emit(this.datasetIds);

src/app/views/diagram-view/diagram-view.component.html

@@ -3,7 +3,7 @@
     <div class="canvas-area is-8 column">
         <!-- <h2>Bar Chart</h2>
     <canvas id="line-chart" width="800" height="450"></canvas> -->
-        <geomon-timeseries-chart [datasetOptions]="datasetOptions" [datasetIds]="datasetIds"
+        <geomon-timeseries-chart [datasetOptions]="datasetOptions" [datasetArray]="datasetArray" [datasetIds]="datasetIds"
             [timeInterval]="datasetService.timespan" [selectedDatasetIds]="selectedIds"></geomon-timeseries-chart>
 
     </div>

src/app/views/diagram-view/diagram-view.component.ts

@@ -18,6 +18,7 @@ export class DiagramViewComponent implements OnInit {
     public selectedIds: string[] = [];
 
     public datasetOptions: Map<string, DatasetOptions> = new Map();
+     public datasetArray: Array <DatasetOptions>;
 
     public diagramLoading: boolean;
     public overviewLoading: boolean;
@@ -43,6 +44,7 @@ export class DiagramViewComponent implements OnInit {
     private setDatasets() {
         this.datasetIds = this.datasetService.datasetIds;
         this.datasetOptions = this.datasetService.datasetOptions;
+        this.datasetArray = Array.from(this.datasetOptions.values());
     }
 
     public removeAllTimeseries() {
@@ -65,8 +67,14 @@ export class DiagramViewComponent implements OnInit {
         this.selectedIds = [];
       }
 
-    public onUpdateOptions(options: DatasetOptions, internalId: string) {
+    public onUpdateOptions(datasetOption: DatasetOptions, internalId: string) {
-        this.datasetService.updateDatasetOptions(options, internalId);
+        // this.datasetService.updateDatasetOptions(datasetOption, internalId);
+
+        // let arrIndex = this.datasetArray.findIndex(x => x.internalId === internalId);
+        // this.datasetArray[arrIndex] = datasetOption;
+
+        // this.datasetOptions = new Map <string, DatasetOptions>([]);
+        // this.datasetOptions =  this.datasetService.datasetOptions;
     }
     
 

src/common/graphjs/geomon-timeseries-chart/geomon-timeseries-chart.component.ts

@@ -1,5 +1,5 @@
 import {
-    Input, Component, AfterViewInit, ViewChild, ElementRef, SimpleChanges, DoCheck, IterableDiffer,  IterableDiffers
+    Input, Component, AfterViewInit, ViewChild, ElementRef, SimpleChanges, DoCheck, IterableDiffer, IterableDiffers, KeyValueDiffer, KeyValueDiffers, KeyValueChangeRecord
 } from '@angular/core';
 // import * as d3 from 'd3';
 import { Chart, ChartDataset, registerables } from 'chart.js';
@@ -21,7 +21,7 @@ import zoomPlugin from 'chartjs-plugin-zoom';
 Chart.register(zoomPlugin);
 import { InternalIdHandler, InternalDatasetId } from '../../../common/components/services/internal-id-handler.service';
 
-import { InternalDataEntry } from '../../../shared/models/chart';
+import { DataEntry, InternalDataEntry } from '../../../shared/models/chart';
 // interface Color {
 //     borderColor: string,
 //     pointBackgroundColor: string
@@ -48,6 +48,10 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
     */
     @Input()
     public datasetOptions: Map<string, DatasetOptions>;
+    protected oldDatasetOptions: Map<string, DatasetOptions>;
+
+    @Input()
+    public datasetArray: Array<DatasetOptions> = [];
 
     /**
     * List of presented dataset ids.
@@ -90,8 +94,15 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
     private datasetIdsDiffer: IterableDiffer<string>;
     private selectedDatasetIdsDiffer: IterableDiffer<string>;
 
+    // siehe https://www.concretepage.com/angular/angular-keyvaluediffers
+    empDifferMap = new Map<string, any>();
+    empMap = new Map<string, DatasetOptions>();
+    private arrayDiffer: any;
+    changeLogs: string[] = [];
+
     constructor(
         protected iterableDiffers: IterableDiffers,
+        private kvDiffers: KeyValueDiffers,
         protected datasetIdResolver: InternalIdHandler,
         protected datasetApiService: DatasetApiService,
         protected timeService: TimeService,
@@ -101,6 +112,23 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
         this.selectedDatasetIdsDiffer = this.iterableDiffers.find([]).create();
     }
 
+    ngOnInit() {
+        // this.arrayDiffer = this.kvDiffers.find(this.datasetArray).create();
+        this.datasetArray.forEach(emp => {
+            // this.empDifferMap[emp.internalId] = this.kvDiffers.find(emp).create();
+            this.empDifferMap.set(emp.internalId, this.kvDiffers.find(emp).create());
+            // this.empMap[emp.internalId] = emp;
+            this.empMap.set(emp.internalId, emp);
+        })
+    }
+
+
+
+    private setProperty<T, K extends keyof T>(o: T, propertyName: K, value: any): void {
+        // return o[propertyName]; // o[propertyName] is of type T[K]
+        o[propertyName] = value;
+    }
+
     public ngDoCheck(): void {
 
         const selectedDatasetIdsChanges = this.selectedDatasetIdsDiffer.diff(this.selectedDatasetIds);
@@ -113,11 +141,41 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
             });
         }
 
-        if(this.datasetOptions){
+        for (let [key, empDiffer] of this.empDifferMap) {
-            let test = this.datasetOptions;
+            let empChanges = empDiffer.diff(this.empMap.get(key));
+            if (empChanges) {
+                empChanges.forEachChangedItem((record: KeyValueChangeRecord<string, any>) => {
+                    // console.log('Previous value: ' + record.previousValue);
+                    // console.log('Current value: ' + record.currentValue);
+                    // console.log('Attribute: ' + record.key);
+                    let attribute = record.key;
+                    const internalEntry = this.preparedData.find((e) => e.internalId === key);
+                    this.setProperty(internalEntry, attribute as keyof InternalDataEntry, record.currentValue);
+
+                    // internalEntry[attribute as keyof InternalDataEntry] = record.currentValue;
+                    this.processData(internalEntry, internalEntry.datasetIndex);
+                    this.lineChart.update();
+                });
             }
         }
 
+
+        // let empArrayChanges = this.arrayDiffer.diff(this.datasetArray); 
+        // if (empArrayChanges) {
+        //     empArrayChanges.forEachAddedItem((record) => {
+        //       let emp = record.currentValue;
+        //       console.log('Added ' + emp.name);
+        //     });
+        //     empArrayChanges.forEachRemovedItem((record) => {
+        //       let emp = record.previousValue;
+        //       console.log('Removed ' + emp.name);
+        //     });
+        //   }
+
+
+
+    }  
+
     protected setSelectedId(internalId: string): void {
         const internalEntry = this.preparedData.find((e) => e.internalId === internalId);
         if (internalEntry) { internalEntry.selected = true; }
@@ -141,9 +199,9 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
 
         for (let i = 0; i < this.datasetIds.length; i++) {
             let datasetId = this.datasetIds[i];
-            let datasetOptions = this.datasetOptions.get(datasetId);
+            let datasetOption = this.datasetOptions.get(datasetId);
             // this.internalId = this.internalIdHandler.resolveInternalId(datasetId);  
-            this.addDatasetByInternalId(datasetOptions.internalId);
+            this.addDatasetByInternalId(datasetOption.internalId);
         }
 
         // let firstDatasetId = this.datasetIds[0];
@@ -161,6 +219,14 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
         // if (changes.reloadForDatasets && this.reloadForDatasets && this.reloadDataForDatasets.length > 0) {
         //     this.reloadDataForDatasets(this.reloadForDatasets);
         // }
+
+        if (changes.datasetOptions && this.datasetOptions) {
+            // this.preparedData.forEach((dataEntry: InternalDataEntry, index) => {
+
+            //     this.processData(dataEntry, index);
+            // });
+            let test = changes.datasetOptions;
+        }
     }
 
     public getDataset(internalId: string) {
@@ -191,8 +257,19 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
         this.loadDatasetData(dataset, false);
     }
 
+    protected datasetOptionsChanged(internalId: string, options: DatasetOptions, firstChange: boolean): void {
+        if (!firstChange && this.datasetMap.has(internalId)) {
+            const internalEntry = this.preparedData.find((e) => e.internalId === internalId);
+            if (internalEntry) {
+                internalEntry.visible = options.visible;
+            }
+
+            this.processData(internalEntry, internalEntry.datasetIndex)
+        }
+    }
+
     // load data of dataset
-    private loadDatasetData(dataset: GeomonTimeseries, fprce: boolean): void {
+    private loadDatasetData(dataset: GeomonTimeseries, force: boolean): void {
         // const datasetOptions = this.datasetOptions.get(dataset.internalId);
 
         // https://github.com/52North/helgoland-toolbox/blob/9ff9a42b34cd3deb181d56d76d48eba7c101554e/libs/core/src/lib/api-communication/connectors/dataset-api-v3-connector/dataset-api-v3-connector.ts#L270
@@ -267,7 +344,7 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
                 return res;
             }
 
-            let values = Array.from( grouped_items.values() );
+            let values = Array.from(grouped_items.values());
             values = [].concat(...values);
             let xLabels = values.map(function (label) {
                 let date = moment(label[0]).format("DD/MM HH:mm");
@@ -342,7 +419,7 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
                 }
             },
             referenceValueData: [],
-            visible: datasetOptions.visible,
+            visible: true //datasetOptions.visible,
             // bar: barConfig
         };
 
@@ -393,7 +470,7 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
             dataset = this.lineChart.data.datasets[datasetIndex];
             dataset.label = dataEntry.axisOptions.label;
             dataset.borderWidth = dataEntry.selected ? 4 : 1;
-            // dataset.hidden = dataEntry.selected;
+            dataset.hidden = !dataEntry.visible;
         } else {
             dataset = {
                 label: dataEntry.axisOptions.label,
@@ -405,6 +482,7 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
                 data: dataEntry.data,
             };
             this.lineChart.data.datasets.push(dataset);
+            dataEntry.datasetIndex = this.lineChart.data.datasets.length - 1;
         }
 
         // You add the newly created dataset to the list of `data`
@@ -414,7 +492,7 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
             // return xLabels.includes(val.toString()) ? val : null;
             //     return index % 2 === 0 ? (val) : '';           
             let valTime = moment(val, "DD/MM HH:mm").format("HH:mm");
-            if (valTime == "08:00" || valTime == "18:00"){
+            if (valTime == "08:00" || valTime == "18:00") {
                 return val;
             } else {
                 return null;
@@ -426,10 +504,18 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
         }
     }
 
+    // public reloadDataForDatasets(datasetIds: string[]): void {
+    //     datasetIds.forEach(id => {
+    //         if (this.datasetMap.has(id)) {
+    //             this.loadDatasetData(this.datasetMap.get(id), true);
+    //         }
+    //     });
+    // }
+
     private redrawCompleteGraph(): void {
         this.preparedData.forEach((dataEntry: InternalDataEntry, index) => {
 
-            this.processData(dataEntry, index);
+            this.processData(dataEntry, dataEntry.datasetIndex);
         });
         this.lineChart.update();
     }

src/shared/models/chart.ts

@@ -10,6 +10,7 @@ export interface DataEntry {
 
 export interface InternalDataEntry {
     internalId: string;
+    datasetIndex?: number;
     // hoverId: string;
     data: number[];
     selected?: boolean;

src/shared/models/options.ts

@@ -73,6 +73,7 @@ export class DatasetOptions {
     ) {
         this.internalId = internalId;
         this.color = color;
+        this.visible = true;
     }
 }