File

libs/d3/src/lib/d3-overview-timeseries-graph/d3-overview-timeseries-graph.component.ts

Implements

OnChanges AfterViewInit OnDestroy

Metadata

selector n52-d3-overview-timeseries-graph
styleUrls ./d3-overview-timeseries-graph.component.scss
templateUrl ./d3-overview-timeseries-graph.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(timeSrvc: Time, cd: ChangeDetectorRef)
Parameters :
Name Type Optional
timeSrvc Time No
cd ChangeDetectorRef No

Inputs

datasetIds
Type : string[]
datasetOptions
Type : Map<string | DatasetOptions>
presenterOptions
Type : D3PlotOptions
rangefactor
Type : number
reloadForDatasets
Type : string[]
timeInterval
Type : TimeInterval

Outputs

onContentLoading
Type : EventEmitter<boolean>
onLoading
Type : EventEmitter<boolean>
onTimespanChanged
Type : EventEmitter<Timespan>

Methods

Private calculateOverviewRange
calculateOverviewRange()
Returns : void
Public ngAfterViewInit
ngAfterViewInit()
Returns : void
Public ngOnChanges
ngOnChanges(changes: SimpleChanges)
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void
Public ngOnDestroy
ngOnDestroy()
Returns : void
Public onGraphLoading
onGraphLoading(loading: boolean)
Parameters :
Name Type Optional
loading boolean No
Returns : void
Public timeSpanChanged
timeSpanChanged(timespan: Timespan)
Parameters :
Name Type Optional
timespan Timespan No
Returns : void

Properties

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%;
    }
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""