libs/d3/src/lib/d3-overview-timeseries-graph/d3-overview-timeseries-graph.component.ts
OnChanges
AfterViewInit
OnDestroy
selector | n52-d3-overview-timeseries-graph |
styleUrls | ./d3-overview-timeseries-graph.component.scss |
templateUrl | ./d3-overview-timeseries-graph.component.html |
Properties |
|
Methods |
|
Inputs |
Outputs |
constructor(timeSrvc: Time, cd: ChangeDetectorRef)
|
|||||||||
Parameters :
|
datasetIds | |
Type : string[]
|
|
datasetOptions | |
Type : Map<string | DatasetOptions>
|
|
presenterOptions | |
Type : D3PlotOptions
|
|
rangefactor | |
Type : number
|
|
reloadForDatasets | |
Type : string[]
|
|
timeInterval | |
Type : TimeInterval
|
|
onContentLoading | |
Type : EventEmitter<boolean>
|
|
onLoading | |
Type : EventEmitter<boolean>
|
|
onTimespanChanged | |
Type : EventEmitter<Timespan>
|
|
Private calculateOverviewRange |
calculateOverviewRange()
|
Returns :
void
|
Public ngAfterViewInit |
ngAfterViewInit()
|
Returns :
void
|
Public ngOnChanges | ||||||
ngOnChanges(changes: SimpleChanges)
|
||||||
Parameters :
Returns :
void
|
Public ngOnDestroy |
ngOnDestroy()
|
Returns :
void
|
Public onGraphLoading | ||||||
onGraphLoading(loading: boolean)
|
||||||
Parameters :
Returns :
void
|
Public timeSpanChanged | ||||||
timeSpanChanged(timespan: Timespan)
|
||||||
Parameters :
Returns :
void
|
Private init |
Default value : false
|
Public overviewTimespan |
Type : Timespan
|
Public timespan |
Type : Timespan
|
import {
AfterViewInit,
ChangeDetectorRef,
Component,
EventEmitter,
Input,
OnChanges,
OnDestroy,
Output,
SimpleChanges,
} from '@angular/core';
import { DatasetOptions, Time, TimeInterval, Timespan } from '@helgoland/core';
import { D3PlotOptions } from '../model/d3-plot-options';
@Component({
selector: 'n52-d3-overview-timeseries-graph',
templateUrl: './d3-overview-timeseries-graph.component.html',
styleUrls: ['./d3-overview-timeseries-graph.component.scss']
})
export class D3OverviewTimeseriesGraphComponent implements OnChanges, AfterViewInit, OnDestroy {
@Input()
public datasetIds: string[];
@Input()
public datasetOptions: Map<string, DatasetOptions>;
@Input()
public presenterOptions: D3PlotOptions;
@Input()
public timeInterval: TimeInterval;
@Input()
public rangefactor: number;
@Input()
public reloadForDatasets: string[];
@Output()
public onTimespanChanged: EventEmitter<Timespan> = new EventEmitter();
@Output()
public onLoading: EventEmitter<boolean> = new EventEmitter();
@Output()
public onContentLoading: EventEmitter<boolean> = new EventEmitter();
public overviewTimespan: Timespan;
public timespan: Timespan;
private init = false;
constructor(
protected timeSrvc: Time,
protected cd: ChangeDetectorRef
) {
if (this.presenterOptions) {
this.presenterOptions.overview = true;
} else {
this.presenterOptions = { overview: true };
}
}
public ngAfterViewInit(): void {
this.rangefactor = this.rangefactor || 1;
this.calculateOverviewRange();
this.init = true;
this.cd.detectChanges();
}
public ngOnChanges(changes: SimpleChanges) {
if (changes.timeInterval && this.init) {
this.calculateOverviewRange();
}
}
public ngOnDestroy(): void {
this.cd.detach();
}
public timeSpanChanged(timespan: Timespan) {
this.onTimespanChanged.emit(timespan);
}
public onGraphLoading(loading: boolean) {
this.onContentLoading.emit(loading);
}
private calculateOverviewRange() {
const timespan = this.timeSrvc.createTimespanOfInterval(this.timeInterval);
this.timespan = timespan;
this.overviewTimespan = this.timeSrvc.getBufferedTimespan(timespan, this.rangefactor);
}
}
<n52-d3-timeseries-graph [datasetIds]="datasetIds" [datasetOptions]="datasetOptions" [reloadForDatasets]="reloadForDatasets"
[timeInterval]="overviewTimespan" [mainTimeInterval]="timespan" [presenterOptions]="presenterOptions" (onTimespanChanged)="timeSpanChanged($event)"
(onContentLoading)="onGraphLoading($event)"></n52-d3-timeseries-graph>
./d3-overview-timeseries-graph.component.scss
:host {
.d3 {
height: 100%;
}
}