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

- watch all changes on DataOptions models in dataservice

Browse source 
- npm updates
This commit is contained in:
Arno Kaimbacher 2021-10-12 16:42:07 +02:00
parent 7f13e31251
commit cd4119b986
9 changed files with 948 additions and 467 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1178
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

10
src/app/components/platform-detail/platform-detail.component.html
View file

@ -1,10 +1,12 @@
<div>
<h2>{{ platform.label }} Details</h2>
<h2><span [innerHTML]="platform.label"></span> Details</h2>
<div><span>id: </span>{{platform.id}}</div>
<div>
<label for="hero-name">Platform label: </label>
<div><span>label: </span>{{platform.label}}</div>
<div>
<!-- <label for="hero-name">Platform label: {{ platform.label }}</label> -->
<!-- <input id="hero-name" [(ngModel)]="hero.name" placeholder="Hero name"/> -->
<!-- <input type="text" id="hero-name" [(ngModel)]="platform.label" placeholder="Platform label"/> -->
<!-- <input id="hero-name" [value]="platform.label" placeholder="Platform label"/> -->
</div>
<button (click)="goBack()">go back</button>
</div>

24
src/app/components/platform-detail/platform-detail.component.ts
View file

@ -14,28 +14,42 @@ import { DatasetApiService } from '../../services/dataset-api.service';
})
export class PlatformDetailComponent implements OnInit {
platform: GeomonPlatform;
public platform: GeomonPlatform | undefined;
public loading: boolean;
public error: any;
title: string = 'AppComponent';
constructor(
private route: ActivatedRoute,
private datasetService: DatasetApiService,
private location: Location
) {}
) {
this.getHero();
}
ngOnInit(): void {
this.getHero();
// this.getHero();
}
getHero(): void {
const id = String(this.route.snapshot.paramMap.get('id'));
this.datasetService.getPlatform(id, 'https://geomon.geologie.ac.at/52n-sos-webapp/api/')
.subscribe((platform) => {
this.platform = platform;
.subscribe({
next: (platform: GeomonPlatform) => {
this.platform = platform;
this.title = "neuer Titel im Event";
},
error: (err: any) => this.handleError(err)
});
}
protected handleError(error: any) {
this.loading = false;
this.error = error;
}
goBack(): void {
this.location.back();
}

1
src/app/services/dataset.service.ts
View file

@ -58,6 +58,7 @@ export class DatasetService<T extends DatasetOptions> {
// options.forEach((e) => temp.push(e));
// // this.saveState();
// }
options.visible = true;
this.datasetOptions.set(internalId, options);
this.datasetIdsChanged.emit(this.datasetIds);

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

@ -3,7 +3,7 @@
<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"
<geomon-timeseries-chart [datasetOptions]="datasetOptions" [datasetArray]="datasetArray" [datasetIds]="datasetIds"
[timeInterval]="datasetService.timespan" [selectedDatasetIds]="selectedIds"></geomon-timeseries-chart>
</div>

12
src/app/views/diagram-view/diagram-view.component.ts
View file

@ -18,6 +18,7 @@ export class DiagramViewComponent implements OnInit {
public selectedIds: string[] = [];
public datasetOptions: Map<string, DatasetOptions> = new Map();
public datasetArray: Array <DatasetOptions>;
public diagramLoading: boolean;
public overviewLoading: boolean;
@ -43,6 +44,7 @@ export class DiagramViewComponent implements OnInit {
private setDatasets() {
this.datasetIds = this.datasetService.datasetIds;
this.datasetOptions = this.datasetService.datasetOptions;
this.datasetArray = Array.from(this.datasetOptions.values());
}
public removeAllTimeseries() {
@ -65,8 +67,14 @@ export class DiagramViewComponent implements OnInit {
this.selectedIds = [];
}
public onUpdateOptions(options: DatasetOptions, internalId: string) {
this.datasetService.updateDatasetOptions(options, internalId);
public onUpdateOptions(datasetOption: DatasetOptions, internalId: string) {
// this.datasetService.updateDatasetOptions(datasetOption, internalId);
// let arrIndex = this.datasetArray.findIndex(x => x.internalId === internalId);
// this.datasetArray[arrIndex] = datasetOption;
// this.datasetOptions = new Map <string, DatasetOptions>([]);
// this.datasetOptions = this.datasetService.datasetOptions;
}

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

@ -1,5 +1,5 @@
import {
Input, Component, AfterViewInit, ViewChild, ElementRef, SimpleChanges, DoCheck, IterableDiffer, IterableDiffers
import {
Input, Component, AfterViewInit, ViewChild, ElementRef, SimpleChanges, DoCheck, IterableDiffer, IterableDiffers, KeyValueDiffer, KeyValueDiffers, KeyValueChangeRecord
} from '@angular/core';
// import * as d3 from 'd3';
import { Chart, ChartDataset, registerables } from 'chart.js';
@ -21,7 +21,7 @@ import zoomPlugin from 'chartjs-plugin-zoom';
Chart.register(zoomPlugin);
import { InternalIdHandler, InternalDatasetId } from '../../../common/components/services/internal-id-handler.service';
import { InternalDataEntry } from '../../../shared/models/chart';
import { DataEntry, InternalDataEntry } from '../../../shared/models/chart';
// interface Color {
// borderColor: string,
// pointBackgroundColor: string
@ -34,7 +34,7 @@ import { InternalDataEntry } from '../../../shared/models/chart';
})
export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
// @ViewChild('geomon_timeseries', { static: true })
// public chartElem: ElementRef;
@ -48,6 +48,10 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
*/
@Input()
public datasetOptions: Map<string, DatasetOptions>;
protected oldDatasetOptions: Map<string, DatasetOptions>;
@Input()
public datasetArray: Array<DatasetOptions> = [];
/**
* List of presented dataset ids.
@ -55,13 +59,13 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
@Input()
public datasetIds: string[] = [];
/**
* List of presented selected dataset ids.
*/
@Input()
public selectedDatasetIds: string[] = [];
@Input()
public selectedDatasetIds: string[] = [];
/**
* The time interval in which the data should presented.
@ -90,17 +94,41 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
private datasetIdsDiffer: IterableDiffer<string>;
private selectedDatasetIdsDiffer: IterableDiffer<string>;
// siehe https://www.concretepage.com/angular/angular-keyvaluediffers
empDifferMap = new Map<string, any>();
empMap = new Map<string, DatasetOptions>();
private arrayDiffer: any;
changeLogs: string[] = [];
constructor(
protected iterableDiffers: IterableDiffers,
private kvDiffers: KeyValueDiffers,
protected datasetIdResolver: InternalIdHandler,
protected datasetApiService: DatasetApiService,
protected timeService: TimeService,
public datasetService: DatasetService<DatasetOptions>,
) {
) {
this.datasetIdsDiffer = this.iterableDiffers.find([]).create();
this.selectedDatasetIdsDiffer = this.iterableDiffers.find([]).create();
}
ngOnInit() {
// this.arrayDiffer = this.kvDiffers.find(this.datasetArray).create();
this.datasetArray.forEach(emp => {
// this.empDifferMap[emp.internalId] = this.kvDiffers.find(emp).create();
this.empDifferMap.set(emp.internalId, this.kvDiffers.find(emp).create());
// this.empMap[emp.internalId] = emp;
this.empMap.set(emp.internalId, emp);
})
}
private setProperty<T, K extends keyof T>(o: T, propertyName: K, value: any): void {
// return o[propertyName]; // o[propertyName] is of type T[K]
o[propertyName] = value;
}
public ngDoCheck(): void {
const selectedDatasetIdsChanges = this.selectedDatasetIdsDiffer.diff(this.selectedDatasetIds);
@ -113,10 +141,40 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
});
}
if(this.datasetOptions){
let test = this.datasetOptions;
for (let [key, empDiffer] of this.empDifferMap) {
let empChanges = empDiffer.diff(this.empMap.get(key));
if (empChanges) {
empChanges.forEachChangedItem((record: KeyValueChangeRecord<string, any>) => {
// console.log('Previous value: ' + record.previousValue);
// console.log('Current value: ' + record.currentValue);
// console.log('Attribute: ' + record.key);
let attribute = record.key;
const internalEntry = this.preparedData.find((e) => e.internalId === key);
this.setProperty(internalEntry, attribute as keyof InternalDataEntry, record.currentValue);
// internalEntry[attribute as keyof InternalDataEntry] = record.currentValue;
this.processData(internalEntry, internalEntry.datasetIndex);
this.lineChart.update();
});
}
}
}
// let empArrayChanges = this.arrayDiffer.diff(this.datasetArray);
// if (empArrayChanges) {
// empArrayChanges.forEachAddedItem((record) => {
// let emp = record.currentValue;
// console.log('Added ' + emp.name);
// });
// empArrayChanges.forEachRemovedItem((record) => {
// let emp = record.previousValue;
// console.log('Removed ' + emp.name);
// });
// }
}
protected setSelectedId(internalId: string): void {
const internalEntry = this.preparedData.find((e) => e.internalId === internalId);
@ -130,7 +188,7 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
this.redrawCompleteGraph();
}
ngAfterViewInit(): void {
ngAfterViewInit(): void {
this.canvas = document.getElementById("line-chart") as HTMLCanvasElement;
@ -141,9 +199,9 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
for (let i = 0; i < this.datasetIds.length; i++) {
let datasetId = this.datasetIds[i];
let datasetOptions = this.datasetOptions.get(datasetId);
let datasetOption = this.datasetOptions.get(datasetId);
// this.internalId = this.internalIdHandler.resolveInternalId(datasetId);
this.addDatasetByInternalId(datasetOptions.internalId);
this.addDatasetByInternalId(datasetOption.internalId);
}
// let firstDatasetId = this.datasetIds[0];
@ -161,6 +219,14 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
// if (changes.reloadForDatasets && this.reloadForDatasets && this.reloadDataForDatasets.length > 0) {
// this.reloadDataForDatasets(this.reloadForDatasets);
// }
if (changes.datasetOptions && this.datasetOptions) {
// this.preparedData.forEach((dataEntry: InternalDataEntry, index) => {
// this.processData(dataEntry, index);
// });
let test = changes.datasetOptions;
}
}
public getDataset(internalId: string) {
@ -191,8 +257,19 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
this.loadDatasetData(dataset, false);
}
protected datasetOptionsChanged(internalId: string, options: DatasetOptions, firstChange: boolean): void {
if (!firstChange && this.datasetMap.has(internalId)) {
const internalEntry = this.preparedData.find((e) => e.internalId === internalId);
if (internalEntry) {
internalEntry.visible = options.visible;
}
this.processData(internalEntry, internalEntry.datasetIndex)
}
}
// load data of dataset
private loadDatasetData(dataset: GeomonTimeseries, fprce: boolean): void {
private loadDatasetData(dataset: GeomonTimeseries, force: boolean): void {
// const datasetOptions = this.datasetOptions.get(dataset.internalId);
// https://github.com/52North/helgoland-toolbox/blob/9ff9a42b34cd3deb181d56d76d48eba7c101554e/libs/core/src/lib/api-communication/connectors/dataset-api-v3-connector/dataset-api-v3-connector.ts#L270
@ -244,17 +321,17 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
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);
}
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] };
@ -267,7 +344,7 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
return res;
}
let values = Array.from( grouped_items.values() );
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");
@ -323,7 +400,7 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
datasetOptions.color = color;
let dataEntry: InternalDataEntry = {
internalId: dataset.internalId,
internalId: dataset.internalId,
selected: this.selectedDatasetIds.indexOf(dataset.internalId) >= 0,
// data: datasetOptions.visible ? data.values.map(d => ({ timestamp: d[0], value: d[1] })) : [],
data: values,
@ -342,7 +419,7 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
}
},
referenceValueData: [],
visible: datasetOptions.visible,
visible: true //datasetOptions.visible,
// bar: barConfig
};
@ -380,7 +457,7 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
// chart.options.scales.y.ticks.callback = (value, index, values) => {
// return value + '°';
// }
chart.update();
this.width = this.calculateWidth();
}
@ -393,9 +470,9 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
dataset = this.lineChart.data.datasets[datasetIndex];
dataset.label = dataEntry.axisOptions.label;
dataset.borderWidth = dataEntry.selected ? 4 : 1;
// dataset.hidden = dataEntry.selected;
dataset.hidden = !dataEntry.visible;
} else {
dataset = {
dataset = {
label: dataEntry.axisOptions.label,
// selected: dataEntry.selected,
// backgroundColor: 'rgba(99, 255, 132, 0.2)',
@ -405,31 +482,40 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
data: dataEntry.data,
};
this.lineChart.data.datasets.push(dataset);
dataEntry.datasetIndex = this.lineChart.data.datasets.length - 1;
}
// You add the newly created dataset to the list of `data`
// You add the newly created dataset to the list of `data`
// this.lineChart.data.datasets.push(newDataset);
this.lineChart.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"){
if (valTime == "08:00" || valTime == "18:00") {
return val;
} else {
return null;
}
}
this.lineChart.options.scales.y.ticks.callback = (value, index, values) => {
return value + '°';
this.lineChart.options.scales.y.ticks.callback = (value, index, values) => {
return value + '°';
}
}
// public reloadDataForDatasets(datasetIds: string[]): void {
// datasetIds.forEach(id => {
// if (this.datasetMap.has(id)) {
// this.loadDatasetData(this.datasetMap.get(id), true);
// }
// });
// }
private redrawCompleteGraph(): void {
this.preparedData.forEach((dataEntry: InternalDataEntry, index) => {
this.processData(dataEntry, index);
this.processData(dataEntry, dataEntry.datasetIndex);
});
this.lineChart.update();
}
@ -479,18 +565,18 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
enabled: true
},
zoom: {
wheel: {
enabled: true,
},
pinch: {
enabled: true
},
mode: 'xy',
wheel: {
enabled: true,
},
pinch: {
enabled: true
},
mode: 'xy',
}
},
legend: {
display: false
}
},
legend: {
display: false
}
},
scales: {
y: {
@ -514,10 +600,10 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
year: "yyyy",
}
},
ticks: {
// callback: function(val, index) {
// // Hide the label of every 2nd dataset
// return index % 2 === 0 ? (val) : '';

1
src/shared/models/chart.ts
View file

@ -10,6 +10,7 @@ export interface DataEntry {
export interface InternalDataEntry {
internalId: string;
datasetIndex?: number;
// hoverId: string;
data: number[];
selected?: boolean;

1
src/shared/models/options.ts
View file

@ -73,6 +73,7 @@ export class DatasetOptions {
) {
this.internalId = internalId;
this.color = color;
this.visible = true;
}
}