- add chartjs-plugin-zoom via npm

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

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

@@ -8,11 +8,13 @@ import { DatasetService } from '../../../app/services/dataset.service';
 
 import { Timespan } from '../../../shared/models/timespan';
 import { TimeService } from '../../core/time/time.service';
-import moment from 'moment';
+import * as moment from 'moment';
 // import 'moment-duration-format';
 import { TimeValueTuple, Data } from '../../../shared/models/dataset';
 import 'chartjs-adapter-moment';
-import { MAT_SELECTION_LIST_VALUE_ACCESSOR } from '@angular/material/list';
+
+import zoomPlugin from 'chartjs-plugin-zoom';
+Chart.register(zoomPlugin);
 
 @Component({
     selector: 'geomon-timeseries-chart',
@@ -159,8 +161,57 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit {
 
             const data = this.generalizeData(rawdata, this.width, this.timespan);
 
+
+            let grouped_items = groupBy(rawdata.values, function (b: TimeValueTuple) {
+                return moment(b[0]).format('YYYY-MM-DD');
+            });
+
+            // Object.keys(grouped_items).forEach(function (value: any, key: string) {
+            for (let [key, value] of grouped_items) {
+                // grouped_items[key] = findMinMax(grouped_items.get(key));
+                // let test = grouped_items.get(key);
+                let reducedValues = findMinMax(grouped_items.get(key));
+                let ar = new Array<TimeValueTuple>(reducedValues.min);
+                // ar.push(reducedValues.min, reducedValues.max);
+                grouped_items.set(key, ar);
+            }
+
+            function groupBy(list: Array<[number, number]>, keyGetter: any): Map<string, TimeValueTuple[]> {
+                const map = new Map();
+                list.forEach((item: any) => {
+                     const key = keyGetter(item);
+                     const collection = map.get(key);
+                     if (!collection) {
+                         map.set(key, [item]);
+                     } else {
+                         collection.push(item);
+                     }
+                });
+                return map;
+            }
+            
+
+            function findMinMax(values: TimeValueTuple[]) {
+                var res = { min: values[0], max: values[0] };
+
+                values.forEach(function (val: [number, number]) {
+                    res.min = val[0] < res.min[0] ? val : res.min;
+                    res.max = val[0] > res.max[0] ? val : res.max;
+                });
+
+                return res;
+            }
+
+            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");
+                return date;
+            });
+            // console.log(values);
+
             // this.datasetMap.get(dataset.internalId).data = data;
-            this.addData(this.lineChart, dataset, rawdata);
+            this.addData(this.lineChart, dataset, rawdata, xLabels);
         }
     }
 
@@ -181,7 +232,7 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit {
         return data;
     }
 
-    private addData(chart: Chart, dataset: GeomonTimeseries, data: GeomonTimeseriesData): void {
+    private addData(chart: Chart, dataset: GeomonTimeseries, data: GeomonTimeseriesData, xLabels: string[]): void {
 
         let labels = data.values.map(function (label) {
             let date = moment(label[0]).format("YYYY-MM-DD HH:mm");
@@ -205,12 +256,28 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit {
             label: dataset.label,
             // backgroundColor: 'rgba(99, 255, 132, 0.2)',
             backgroundColor: color,
-            // borderColor: 'rgba(99, 255, 132, 1)',
+            borderColor: color, //'rgba(99, 255, 132, 1)',
             borderWidth: 1,
             data: values,
         }
         // You add the newly created dataset to the list of `data`
         chart.data.datasets.push(newDataset);
+        chart.options.scales.x.ticks.callback = (val, index) => {
+            //     // Hide the label of every 2nd dataset
+            // 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"){
+                return val;
+            } else {
+                return null;
+            }
+
+        }
+        chart.options.scales.y.ticks.callback = (value, index, values) => { 
+                    return value + '°';
+        }
+      
         chart.update();
         this.width = this.calculateWidth();
     }
@@ -252,20 +319,36 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit {
                 ]
             },
             options: {
+                plugins: {
+                    zoom: {
+                        pan: {
+                            enabled: true
+                        },
+                        zoom: {
+                          wheel: {
+                            enabled: true,
+                          },
+                          pinch: {
+                            enabled: true
+                          },                          
+                          mode: 'xy',
+                        }
+                      }
+                },
                 scales: {
                     y: {
                         suggestedMin: 0,    // minimum will be 0, unless there is a lower value.
                         // OR //
                         beginAtZero: true   // minimum value will be 0.                       
                     },
-                   
+
                     x: {
-                        type: 'time',                      
-                       
+                        type: 'time',
+
                         time: {
-                            unit: 'minute',                          
+                            unit: 'minute',
                             displayFormats: {
-                                minute: "DD/MM HH:mm",                              
+                                minute: "DD/MM HH:mm",
                                 hour: "DD/MM HH:mm",
                                 day: "dd/MM",
                                 week: "dd/MM",
@@ -274,12 +357,21 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit {
                                 year: "yyyy",
                             }
                         },
-                        // ticks: {
-                        //     labelOffset: 10
-                        // }
+                        
+                        ticks: {
+                            
+                            
+                            // callback: function(val, index) {
+                            //     // Hide the label of every 2nd dataset
+                            //     return index % 2 === 0 ? (val) : '';
+                            //   },
+                            // autoSkip: true,
+                            // maxRotation: 0,
+                            // minRotation: 0
+                        }
                     }
-            },
-        }
+                },
+            }
             // options: {
             //   title: {
             //     display: true,