kaiarn/geomon.viewer
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Wiki Activity

- add chartjs-plugin-zoom via npm

Browse source 
- add label to timeseries graph only for 08:00 and 18:00
This commit is contained in:
Arno Kaimbacher 2021-10-01 14:37:43 +02:00
parent 4241bd2cb9
commit dbf8aa495e
10 changed files with 2198 additions and 2258 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
notes.txt
View file

@ -222,8 +222,15 @@ CREATE src/app/app-router.service.ts (138 bytes)
=============================== chart.js ======================================
npm install --save chart.js
import { Chart } from 'chart.js';
npm install --save moment
npm install moment chartjs-adapter-moment --save
import 'chartjs-adapter-moment';
npm install chartjs-plugin-zoom
import zoomPlugin from 'chartjs-plugin-zoom';
Chart.register(zoomPlugin);

4242
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

1
package.json
View file

@ -64,6 +64,7 @@
"bulma": "^0.9.3",
"chart.js": "^3.5.1",
"chartjs-adapter-moment": "^1.0.0",
"chartjs-plugin-zoom": "^1.1.1",
"core-js": "^3.16.0",
"leaflet": "^1.7.1",
"moment": "^2.29.1",

28
src/app/app.component.html
View file

@ -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 class="canvas-area is-8 column">
</div> -->
<router-outlet></router-outlet>
</div>
@ -64,26 +61,13 @@
<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>

2
src/app/services/dataset-api.service.ts
View file

@ -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';

20
src/app/views/diagram-view/diagram-view.component.html
View file

@ -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>

16
src/app/views/map-view/map-view.component.html
View file

@ -5,8 +5,20 @@
</n52-station-map-selector>
</div> -->
<div id="div-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">
(onSelected)="onStationSelected($event)" (onMapInitializedEvent)="onMapInitialized($event)"
class="vbox boxItem fullHeight">
</app-map>
</div>
</div>
<div class="input-area is-4 column">
</div>
</div>

108
src/common/graphjs/geomon-timeseries-chart/geomon-timeseries-chart.component.ts
View file

@ -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,6 +319,22 @@ 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.
@ -274,9 +357,18 @@ 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
}
}
},
}

6
src/shared/models/dataset.ts
View file

@ -132,11 +132,11 @@ export interface GeomonData { }
export class GeomonTimeseriesData implements GeomonData {
referenceValues: ReferenceValues<TimeValueTuple> = {};
valueBeforeTimespan: TimeValueTuple;
valueAfterTimespan: TimeValueTuple;
valueBeforeTimespan: [number, number]; // TimeValueTuple;
valueAfterTimespan: [number, number]; //TimeValueTuple;
constructor(
public values: TimeValueTuple[],
public values: Array<[number, number]>,
) { }
}

2
src/styles.scss
View file

@ -94,7 +94,7 @@ ul {
}
.main {
padding-top: 51px;
padding-top: 65px;
// display: flex;
flex-direction: row;
flex-wrap: wrap;