- npm updates

- add legend-entry-component files
- add DatasetOptions class

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

@@ -1,12 +1,13 @@
-import { Input, Component, AfterViewInit, ViewChild, ElementRef, SimpleChanges } from '@angular/core';
+import { Input, Component, AfterViewInit, ViewChild, ElementRef, SimpleChanges, DoCheck, IterableDiffer} from '@angular/core';
 // import * as d3 from 'd3';
-import { Chart, LogarithmicScale, registerables } from 'chart.js';
+import { Chart, registerables } from 'chart.js';
 
 import { GeomonTimeseries, DataConst, GeomonTimeseriesData } from '../../../shared/models/dataset';
 import { DatasetApiService } from '../../../app/services/dataset-api.service';
 import { DatasetService } from '../../../app/services/dataset.service';
 
 import { Timespan } from '../../../shared/models/timespan';
+import { DatasetOptions } from '../../../shared/models/options';
 import { TimeService } from '../../core/time/time.service';
 import * as moment from 'moment';
 // import 'moment-duration-format';
@@ -14,27 +15,36 @@ import { TimeValueTuple, Data } from '../../../shared/models/dataset';
 import 'chartjs-adapter-moment';
 
 import zoomPlugin from 'chartjs-plugin-zoom';
+
 Chart.register(zoomPlugin);
+import { InternalIdHandler, InternalDatasetId } from '../../../common/components/services/internal-id-handler.service';
+
+// interface Color {
+//     borderColor: string,
+//     pointBackgroundColor: string
+// }
 
 @Component({
     selector: 'geomon-timeseries-chart',
     templateUrl: './geomon-timeseries-chart.component.html',
     styleUrls: ['./geomon-timeseries-chart.component.scss']
 })
-export class GeomonTimeseriesChartComponent implements AfterViewInit {
+export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
+
+  
 
     // @ViewChild('geomon_timeseries', { static: true })
     // public chartElem: ElementRef;
 
 
-    @ViewChild('geomon_timeseries') public chartElem: ElementRef;
+    @ViewChild('chart') private chartElem: ElementRef;
 
-    lineChart: Chart;
+    private lineChart: Chart;
     /**
     * The corresponding dataset options.
     */
     @Input()
-    public datasetOptions: Map<string, GeomonTimeseries>;
+    public datasetOptions: Map<string, DatasetOptions>;
 
     /**
     * List of presented dataset ids.
@@ -42,6 +52,13 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit {
     @Input()
     public datasetIds: string[] = [];
 
+    
+    /**
+     * List of presented selected dataset ids.
+     */
+     @Input()
+     public selectedDatasetIds: string[] = [];
+ 
 
     /**
      * The time interval in which the data should presented.
@@ -66,12 +83,39 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit {
         left: 10
     };
 
+    // private datasetIdsDiffer: IterableDiffer<string>;
+    private selectedDatasetIdsDiffer: IterableDiffer<string>;
+
     constructor(
+        protected datasetIdResolver: InternalIdHandler,
         protected datasetApiService: DatasetApiService,
         protected timeService: TimeService,
-        public datasetService: DatasetService<GeomonTimeseries>,
+        public datasetService: DatasetService<DatasetOptions>,
     ) { }
 
+    public ngDoCheck(): void {
+        // const selectedDatasetIdsChanges = this.selectedDatasetIdsDiffer.diff(this.selectedDatasetIds);
+        // if (selectedDatasetIdsChanges) {
+        //     selectedDatasetIdsChanges.forEachAddedItem((addedItem) => {
+        //         this.setSelectedId(addedItem.item);
+        //     });
+        //     selectedDatasetIdsChanges.forEachRemovedItem((removedItem) => {
+        //         this.removeSelectedId(removedItem.item);
+        //     });
+        // }
+    }
+
+    protected setSelectedId(internalId: string): void {
+        // const internalEntry = this.preparedData.find((e) => e.internalId === internalId);
+        // if (internalEntry) { internalEntry.selected = true; }
+        // this.redrawCompleteGraph();
+    }
+
+    protected removeSelectedId(internalId: string): void {
+        // const internalEntry = this.preparedData.find((e) => e.internalId === internalId);
+        // if (internalEntry) { internalEntry.selected = false; }
+    }
+
     ngAfterViewInit(): void {        // this.createSvg();
 
         this.canvas = document.getElementById("line-chart") as HTMLCanvasElement;
@@ -83,8 +127,9 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit {
 
         for (let i = 0; i < this.datasetIds.length; i++) {
             let datasetId = this.datasetIds[i];
-            let dataset = this.datasetOptions.get(datasetId);
-            this.addDataset(dataset.id, 'https://geomon.geologie.ac.at/52n-sos-webapp/api/');
+            let datasetOptions = this.datasetOptions.get(datasetId);
+            // this.internalId = this.internalIdHandler.resolveInternalId(datasetId);  
+            this.addDatasetByInternalId(datasetOptions.internalId);
         }
 
         // let firstDatasetId = this.datasetIds[0];
@@ -108,11 +153,17 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit {
         return this.datasetMap.get(internalId);
     }
 
+    protected addDatasetByInternalId(internalId: string) {
+        const internalIdObj = this.datasetIdResolver.resolveInternalId(internalId);
+        this.addDataset(internalIdObj.id, internalIdObj.url);
+    }
+
     protected addDataset(id: string, url: string): void {
         // this.servicesConnector.getDataset({ id, url }, { locale: this.translateService.currentLang, type: DatasetType.Timeseries }).subscribe(
         //     res => this.loadAddedDataset(res),
         //     error => this.errorHandler.handleDatasetLoadError(error)
         // );
+
         this.datasetApiService.getDataset(id, url).subscribe({
             next: (res: GeomonTimeseries) => this.loadAddedDataset(res),
             error: (err: any) => console.error('Observer got an error: ' + err),
@@ -252,6 +303,8 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit {
         for (let i = 0; i < 6; i++) {
             color += letters[Math.floor(Math.random() * 16)];
         }
+        let datasetOptions = this.datasetOptions.get(dataset.internalId);
+        datasetOptions.color = color;
         var newDataset = {
             label: dataset.label,
             // backgroundColor: 'rgba(99, 255, 132, 0.2)',
@@ -284,7 +337,7 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit {
 
     private initChart(): void {
 
-        this.lineChart = new Chart(this.canvas, {
+        this.lineChart = new Chart(this.chartElem.nativeElement, {
             type: 'line',
             data: {
                 // labels: [1500, 1600, 1700, 1750, 1800, 1850, 1900, 1950, 1999, 2050],
@@ -319,6 +372,8 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit {
                 ]
             },
             options: {
+                responsive: true,
+                maintainAspectRatio: false,
                 plugins: {
                     zoom: {
                         pan: {
@@ -379,7 +434,8 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit {
             //   }
             // }
         });
-        this.width = this.calculateWidth() - 20; // add buffer to the left to garantee visualization of last date (tick x-axis)
+
+        // this.width = this.calculateWidth() - 20; // add buffer to the left to garantee visualization of last date (tick x-axis)
     }
 
     /**