- remove d3.js and add chart.js

- add extra chartjs.module
- add extra diagram-view component for binding properties to chartjs chart

src/app/app-routing.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { BarComponent } from './components/bar/bar.component';
+import { DiagramViewComponent } from './views/diagram-view/diagram-view.component';
 
 //neu
 import { DashboardComponent } from './dashboard/dashboard.component';
@@ -11,10 +11,11 @@ import { MapViewComponent } from './views/map-view/map-view.component';
 
 const routes: Routes = [
   { path: '', redirectTo: '/map', pathMatch: 'full' },
+  
   { path: 'dashboard', component: DashboardComponent },
 //   { path: 'detail/:id', component: HeroDetailComponent },
   { path: 'map', component: MapViewComponent },
-  { path: 'bar', component: BarComponent }
+  { path: 'diagram', component: DiagramViewComponent }
 ];
 
 @NgModule({

src/app/app.component.html

@@ -27,7 +27,7 @@
             <a class="navbar-item"  routerLink="/map"  routerLinkActive="is-active">
                 Map
             </a>
-            <a class="navbar-item"  routerLink="/bar"  routerLinkActive="is-active">
+            <a class="navbar-item"  routerLink="/diagram"  routerLinkActive="is-active">
                 Bar
             </a>
         </div>

src/app/app.module.ts

@@ -9,6 +9,7 @@ import { DashboardComponent } from './dashboard/dashboard.component';
 import { MapViewComponent } from "./views/map-view/map-view.component";
 
 import { ComponentsModule } from '../../src/common/components/components.module';
+import { GraphjsModule } from '../../src/common/graphjs/graphjs.module';
 
 import { HttpClientModule, HttpClient } from '@angular/common/http'; //for http requests
 import { MarkerService } from './services/marker.service';
@@ -20,7 +21,7 @@ import { MessagesComponent } from './messages/messages.component';
 import { MessageService } from "./services/message.service";
 import { DatasetService } from "./services/dataset.service";
 import { MapService } from '../common/components/services/map.service';
-import { BarComponent } from './components/bar/bar.component';
+import { DiagramViewComponent } from './views/diagram-view/diagram-view.component';
 // import { LocateService } from '@helgoland/map';
 // import { MapCache } from '@helgoland/map';
 
@@ -29,17 +30,18 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { DatasetByStationSelectorComponent } from './components/dataset-by-station-selector/dataset-by-station-selector.component';
 // import { MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material';
 import { MatListModule } from '@angular/material/list';
+import {MatBadgeModule} from '@angular/material/badge';
 
 import { InternalIdHandler } from '../common/components/services/internal-id-handler.service';
 
 @NgModule({
   // declarations: The components, directives, and pipes that belong to this NgModule.
-  declarations: [AppComponent, MapComponent, DashboardComponent, MessagesComponent, MapViewComponent, BarComponent, DatasetByStationSelectorComponent],
+  declarations: [AppComponent, MapComponent, DashboardComponent, MessagesComponent, MapViewComponent, DiagramViewComponent, DatasetByStationSelectorComponent],
   // entryComponents: [
   //   DatasetByStationSelectorComponent
   // ],
   // imports: Other modules whose exported classes are needed by component templates declared in this NgModule.
-  imports: [BrowserModule, HttpClientModule, AppRoutingModule, ComponentsModule, BrowserAnimationsModule, MatDialogModule, MatListModule],
+  imports: [BrowserModule, HttpClientModule, AppRoutingModule, ComponentsModule, GraphjsModule, BrowserAnimationsModule, MatDialogModule, MatListModule, MatBadgeModule],
   providers: [
     MarkerService, PopupService, HttpService, DatasetApiService, StationService, MessageService, MapService,DatasetService, InternalIdHandler
  

src/app/components/bar/bar.component.html

@@ -1,2 +0,0 @@
-<h2>Bar Chart</h2>
-<figure id="bar"></figure>

src/app/components/bar/bar.component.ts

@@ -1,75 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import * as d3 from 'd3';
-
-@Component({
-    selector: 'app-bar',
-    templateUrl: './bar.component.html',
-    styleUrls: ['./bar.component.css']
-})
-export class BarComponent implements OnInit {
-
-    private data = [
-        { "Framework": "Vue", "Stars": "166443", "Released": "2014" },
-        { "Framework": "React", "Stars": "150793", "Released": "2013" },
-        { "Framework": "Angular", "Stars": "62342", "Released": "2016" },
-        { "Framework": "Backbone", "Stars": "27647", "Released": "2010" },
-        { "Framework": "Ember", "Stars": "21471", "Released": "2011" },
-    ];
-    private svg: any;
-    private margin = 50;
-    private width = 750 - (this.margin * 2);
-    private height = 400 - (this.margin * 2);
-
-    constructor() { }
-
-    ngOnInit(): void {
-        this.createSvg();
-        this.drawBars(this.data);
-    }
-
-    private createSvg(): void {
-        this.svg = d3.select("figure#bar")
-            .append("svg")
-            .attr("width", this.width + (this.margin * 2))
-            .attr("height", this.height + (this.margin * 2))
-            .append("g")
-            .attr("transform", "translate(" + this.margin + "," + this.margin + ")");
-    }
-
-    private drawBars(data: any[]): void {
-        // Create the X-axis band scale
-        const x = d3.scaleBand()
-            .range([0, this.width])
-            .domain(data.map(d => d.Framework))
-            .padding(0.2);
-
-        // Draw the X-axis on the DOM
-        this.svg.append("g")
-            .attr("transform", "translate(0," + this.height + ")")
-            .call(d3.axisBottom(x))
-            .selectAll("text")
-            .attr("transform", "translate(-10,0)rotate(-45)")
-            .style("text-anchor", "end");
-
-        // Create the Y-axis band scale
-        const y = d3.scaleLinear()
-            .domain([0, 200000])
-            .range([this.height, 0]);
-
-        // Draw the Y-axis on the DOM
-        this.svg.append("g")
-            .call(d3.axisLeft(y));
-
-        // Create and fill the bars
-        this.svg.selectAll("bars")
-            .data(data)
-            .enter()
-            .append("rect")
-            .attr("x", (d: any) => x(d.Framework))
-            .attr("y", (d: any) => y(d.Stars))
-            .attr("width", x.bandwidth())
-            .attr("height",(d: any) => this.height - y(d.Stars))
-            .attr("fill", "#d04a35");
-    }
-
-}

src/app/components/dataset-by-station-selector/dataset-by-station-selector.component.html

@@ -55,23 +55,24 @@
             </div>
         </div>
     </div> -->
-    <mat-selection-list>
-        <mat-list-option *ngFor="let timeseries of phenomenonMatchedList" color="primary" [value]="timeseries" [selected]="timeseries.selected">
-          <div mat-line>
-            {{ timeseries.parameters.phenomenon.label }}
-          </div>
-          <div mat-line>
-            Sensor: {{ timeseries.parameters.procedure.label }}
-            {{ timeseries.internalId }}
-            <span
-              *ngIf="timeseries.parameters.category.label && timeseries.parameters.category.label != timeseries.parameters.phenomenon.label">({{timeseries.parameters.category.label}})</span>
-          </div>
-          <div mat-line *ngIf="timeseries.lastValue">
-            <span>{{timeseries.lastValue.value}}</span>
-            <span>{{timeseries.uom}}</span>           
-          </div>
+    <mat-selection-list  (selectionChange)="adjustSelection($event)">
+        <mat-list-option *ngFor="let timeseries of phenomenonMatchedList" color="primary" [value]="timeseries"
+            [selected]="timeseries.selected">
+            <div mat-line>
+                {{ timeseries.parameters.phenomenon.label }}
+            </div>
+            <div mat-line>
+                Sensor: {{ timeseries.parameters.procedure.label }}
+                {{ timeseries.internalId }}
+                <span
+                    *ngIf="timeseries.parameters.category.label && timeseries.parameters.category.label != timeseries.parameters.phenomenon.label">({{timeseries.parameters.category.label}})</span>
+            </div>
+            <div mat-line *ngIf="timeseries.lastValue">
+                <span>{{timeseries.lastValue.value}}</span>
+                <span>{{timeseries.uom}}</span>
+            </div>
         </mat-list-option>
-      </mat-selection-list>
+    </mat-selection-list>
 
 </mat-dialog-content>
 
@@ -80,5 +81,7 @@
         Close
     </button>
     <div style="flex: 1"></div>
-    <button class="mat-raised-button mat-primary">Diagram</button>
+    <button mat-raised-button mat-dialog-close [matBadge]="datasetService.datasetIds.length" (click)="appRouter.toDiagram()">
+        Diagram
+    </button>
 </mat-dialog-actions>

src/app/components/dataset-by-station-selector/dataset-by-station-selector.component.ts

@@ -6,8 +6,10 @@ import { GeomonTimeseries, GeomonDataset } from './../../../shared/models/datase
 import { Station } from './../../../shared/models/station';
 
 import { MatDialogRef } from '@angular/material/dialog';
+import { MatSelectionListChange } from '@angular/material/list';
 
 import { DatasetService } from '../../services/dataset.service';
+import { AppRouterService } from './../../services/app-router.service';
 
 // https://material.angular.io/components/dialog/overview
 // https://blog.angular-university.io/angular-material-dialog/
@@ -49,7 +51,8 @@ export class DatasetByStationSelectorComponent implements OnInit {
     constructor(
         protected datasetApiService: DatasetApiService,
         private dialogRef: MatDialogRef<DatasetByStationSelectorComponent>,
-        public datasetService : DatasetService<GeomonTimeseries>
+        public datasetService : DatasetService<GeomonTimeseries>,
+        public appRouter: AppRouterService,
     ) { }
 
     public ngOnInit() {
@@ -101,8 +104,18 @@ export class DatasetByStationSelectorComponent implements OnInit {
         this.onSelectionChanged.emit(selection);
     }
 
-    close() {
+    public close() {
         this.dialogRef.close();
     }
 
+    public adjustSelection(change: MatSelectionListChange) {
+       
+        const id = (change.option.value as SelectableDataset).internalId;
+        if (change.option.selected) {
+          this.datasetService.addDataset(id, change.option.value as GeomonTimeseries);
+        } else {
+          this.datasetService.removeDataset(id);
+        }
+      }
+
 }

src/app/services/app-router.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AppRouterService {
+
+  private router: Router
+
+  constructor(router: Router) { 
+    this.router = router;
+  }
+
+  public toDiagram() {
+    this.router.navigate(['diagram'])
+  }
+  
+}

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

@@ -0,0 +1,3 @@
+<!-- <h2>Bar Chart</h2>
+<canvas id="line-chart" width="800" height="450"></canvas> -->
+<geomon-timeseries-chart></geomon-timeseries-chart>

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

@@ -0,0 +1,61 @@
+import { Component, OnInit } from '@angular/core';
+// import * as d3 from 'd3';
+
+import { DatasetService } from '../../services/dataset.service';
+import { AppRouterService } from '../../services/app-router.service';
+import { GeomonTimeseries, GeomonDataset } from '../../../shared/models/dataset';
+
+@Component({
+    selector: 'app-bar',
+    templateUrl: './diagram-view.component.html',
+    styleUrls: ['./diagram-view.component.css']
+})
+export class DiagramViewComponent implements OnInit {
+
+    public datasetIds: string[] = [];
+
+    public selectedIds: string[] = [];
+
+    public datasetOptions: Map<string, GeomonTimeseries> = new Map();
+
+    public diagramLoading: boolean;
+    public overviewLoading: boolean;
+
+    // public diagramConfig: DiagramConfig = {
+    //     overviewVisible: true,
+    //     yaxisVisible: this.d3diagramOptions.yaxis,
+    //     yaxisModifier: true,
+    //     hoverstyle: this.d3diagramOptions.hoverStyle
+    // };
+
+    constructor(
+        public datasetService: DatasetService<GeomonTimeseries>,
+        public appRouter: AppRouterService,) { }
+
+    ngOnInit(): void {
+        // this.createSvg();
+        // this.drawBars(this.data);     
+
+        this.setDatasets();
+    }
+
+    private setDatasets() {
+        this.datasetIds = this.datasetService.datasetIds;
+        this.datasetOptions = this.datasetService.datasetService;
+    }
+
+    public clearSelection() {
+        this.selectedIds = [];
+    }
+
+    public removeAllTimeseries() {
+        this.datasetService.removeAllDatasets();
+    }
+
+    public deleteTimeseries(internalId: string) {
+        this.datasetService.removeDataset(internalId);
+    }
+
+    
+
+}