- add chartjs-plugin-zoom via npm

- add label to timeseries graph only for 08:00 and 18:00

src/app/app.component.html

@@ -46,16 +46,13 @@
 <section id="app" class="hero">
 
 
-    <div class="main columns">
+    <div>
 
-        <div class="canvas-area is-8 column">
-            <!-- <div id="div-map">
+        <router-outlet></router-outlet>
 
-                <app-map [mapId]="'map'" [mapOptions]="mapOptions" [serviceUrl]="providerUrl" [baseMaps]="baseMaps"
-                    (onSelected)="onStationSelected($event)" (onMapInitializedEvent)="onMapInitialized($event)">
-                </app-map>
-                
-            </div> -->
+    </div>
+        <!-- <div class="canvas-area is-8 column">
+           
             <router-outlet></router-outlet>
         </div>
 
@@ -64,25 +61,12 @@
                 <app-messages></app-messages>
             </div>
         </div>
-    </div>
+    </div> -->
+    
     <!-- <app-dashboard></app-dashboard> -->
     <!-- <span>{{ name }} app is running!</span> -->
 
-    <!-- <div>
-    <n52-station-map-selector [mapId]="'timeseries'" [serviceUrl]="providerUrl"
-        [mapOptions]="mapOptions"></n52-station-map-selector>
-    </div>
-    <div>Is loading: {{loadingStations}}</div> -->
-
-
-    <!-- <h1>{{ name }}</h1>
-    <nav>
-    <a routerLink="/dashboard">Dashboard</a>
-    <a routerLink="/map">Map</a> 
-    </nav>-->
-    <!-- <router-outlet></router-outlet>  -->
-
-    <!-- <app-messages></app-messages> -->
+   
 
 </section>
 

src/app/services/dataset-api.service.ts

@@ -18,7 +18,7 @@ import { deserialize } from 'class-transformer';
 import { map } from 'rxjs/operators';
 import { InternalIdHandler } from '../../common/components/services/internal-id-handler.service';
 
-import moment from "moment";
+import * as moment from "moment";
 import { Timespan } from '../../shared/models/timespan';
 import { GeomonDataset } from '../../shared/models/dataset';
 

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

@@ -1,4 +1,16 @@
-<!-- <h2>Bar Chart</h2>
-<canvas id="line-chart" width="800" height="450"></canvas> -->
-<geomon-timeseries-chart [datasetOptions]="datasetOptions" 
-[datasetIds]="datasetIds" [timeInterval]="datasetService.timespan"></geomon-timeseries-chart>
+
+ <div class="main columns">
+
+    <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" [timeInterval]="datasetService.timespan"></geomon-timeseries-chart>
+
+    </div>
+
+    <div class="input-area is-4 column">
+    Test
+    </div>
+
+</div>

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

@@ -5,8 +5,20 @@
     </n52-station-map-selector>
 </div> -->
 
-<div id="div-map">
-    <app-map [mapId]="'map'" [mapOptions]="mapOptions" [serviceUrl]="providerUrl" [baseMaps]="baseMaps"
-        (onSelected)="onStationSelected($event)" (onMapInitializedEvent)="onMapInitialized($event)"  class="vbox boxItem fullHeight">
-    </app-map>
+<div class="main columns">
+
+    <div class="canvas-area is-8 column">
+        <div id="div-map">
+            <app-map [mapId]="'map'" [mapOptions]="mapOptions" [serviceUrl]="providerUrl" [baseMaps]="baseMaps"
+                (onSelected)="onStationSelected($event)" (onMapInitializedEvent)="onMapInitialized($event)"
+                class="vbox boxItem fullHeight">
+            </app-map>
+        </div>
+
+    </div>
+
+    <div class="input-area is-4 column">
+
+    </div>
+
 </div>