File

libs/depiction/src/lib/datasetlist/timeseries/timeseries-entry/timeseries-entry.component.ts

Description

Extends the FirstLatestTimeseriesEntryComponent, with the following functions:

  • handles the reference values of the dataset entry

Extends

FirstLatestTimeseriesEntryComponent

Implements

OnChanges

Metadata

encapsulation ViewEncapsulation.None
selector n52-timeseries-entry
styleUrls ./timeseries-entry.component.scss
templateUrl ./timeseries-entry.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(servicesConnector: HelgolandServicesConnector, timeSrvc: Time, internalIdHandler: InternalIdHandler, color: ColorService, refValCache: ReferenceValueColorCache, translateSrvc: TranslateService)
Parameters :
Name Type Optional
servicesConnector HelgolandServicesConnector No
timeSrvc Time No
internalIdHandler InternalIdHandler No
color ColorService No
refValCache ReferenceValueColorCache No
translateSrvc TranslateService No

Inputs

timeInterval
Type : TimeInterval
datasetOptions
Type : DatasetOptions
highlight
Type : boolean
datasetId
Type : string
selected
Type : boolean
datasetId
Type : string
selected
Type : boolean
datasetOptions
Type : DatasetOptions
highlight
Type : boolean
datasetId
Type : string
selected
Type : boolean
datasetId
Type : string
selected
Type : boolean
datasetId
Type : string
Inherited from ListEntryComponent
selected
Type : boolean
Inherited from ListEntryComponent

Outputs

onSelectDate
Type : EventEmitter<Date>
onEditOptions
Type : EventEmitter<DatasetOptions>
onShowGeometry
Type : EventEmitter<GeoJSON.GeoJsonObject>
onUpdateOptions
Type : EventEmitter<DatasetOptions>
onDeleteDataset
Type : EventEmitter<boolean>
onSelectDataset
Type : EventEmitter<boolean>
onDeleteDataset
Type : EventEmitter<boolean>
onSelectDataset
Type : EventEmitter<boolean>
onEditOptions
Type : EventEmitter<DatasetOptions>
onShowGeometry
Type : EventEmitter<GeoJSON.GeoJsonObject>
onUpdateOptions
Type : EventEmitter<DatasetOptions>
onDeleteDataset
Type : EventEmitter<boolean>
onSelectDataset
Type : EventEmitter<boolean>
onDeleteDataset
Type : EventEmitter<boolean>
onSelectDataset
Type : EventEmitter<boolean>
onDeleteDataset
Type : EventEmitter<boolean>
Inherited from ListEntryComponent
onSelectDataset
Type : EventEmitter<boolean>
Inherited from ListEntryComponent

Methods

Private createRefValId
createRefValId(refId: string)
Parameters :
Name Type Optional
refId string No
Returns : string
Protected setParameters
setParameters()
Returns : void
Public toggleInformation
toggleInformation()
Returns : void
Public toggleReferenceValue
toggleReferenceValue(refValue: ReferenceValue)
Parameters :
Name Type Optional
refValue ReferenceValue No
Returns : void
Private checkDataInTimespan
checkDataInTimespan()
Returns : void
Public jumpToFirstTimeStamp
jumpToFirstTimeStamp()
Returns : void
Public jumpToLastTimeStamp
jumpToLastTimeStamp()
Returns : void
Public ngOnChanges
ngOnChanges(changes: SimpleChanges)
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void
Protected setParameters
setParameters()
Returns : void
Public editDatasetOptions
editDatasetOptions()
Returns : void
Public showGeometry
showGeometry()
Returns : void
Public toggleVisibility
toggleVisibility()
Returns : void
Protected loadDataset
loadDataset(lang?: string)
Parameters :
Name Type Optional
lang string Yes
Returns : void
Protected setDataset
setDataset(timeseries: HelgolandTimeseries)
Parameters :
Name Type Optional
timeseries HelgolandTimeseries No
Returns : void
Protected setParameters
setParameters()
Returns : void
Protected Abstract loadDataset
loadDataset(lang?: string)
Parameters :
Name Type Optional
lang string Yes
Returns : void
Public ngOnDestroy
ngOnDestroy()
Returns : void
Public ngOnInit
ngOnInit()
Returns : void
Protected onLanguageChanged
onLanguageChanged(langChangeEvent: LangChangeEvent)
Parameters :
Name Type Optional
langChangeEvent LangChangeEvent No
Returns : void
Public removeDataset
removeDataset()
Returns : void
Public toggleSelection
toggleSelection()
Returns : void
Protected loadDataset
loadDataset(lang?: string)
Parameters :
Name Type Optional
lang string Yes
Returns : void
Protected setDataset
setDataset(timeseries: HelgolandTimeseries)
Parameters :
Name Type Optional
timeseries HelgolandTimeseries No
Returns : void
Protected setParameters
setParameters()
Returns : void
Protected Abstract loadDataset
loadDataset(lang?: string)
Parameters :
Name Type Optional
lang string Yes
Returns : void
Public ngOnDestroy
ngOnDestroy()
Returns : void
Public ngOnInit
ngOnInit()
Returns : void
Protected onLanguageChanged
onLanguageChanged(langChangeEvent: LangChangeEvent)
Parameters :
Name Type Optional
langChangeEvent LangChangeEvent No
Returns : void
Public removeDataset
removeDataset()
Returns : void
Public toggleSelection
toggleSelection()
Returns : void
Public editDatasetOptions
editDatasetOptions()
Returns : void
Public showGeometry
showGeometry()
Returns : void
Public toggleVisibility
toggleVisibility()
Returns : void
Protected loadDataset
loadDataset(lang?: string)
Parameters :
Name Type Optional
lang string Yes
Returns : void
Protected setDataset
setDataset(timeseries: HelgolandTimeseries)
Parameters :
Name Type Optional
timeseries HelgolandTimeseries No
Returns : void
Protected setParameters
setParameters()
Returns : void
Protected Abstract loadDataset
loadDataset(lang?: string)
Parameters :
Name Type Optional
lang string Yes
Returns : void
Public ngOnDestroy
ngOnDestroy()
Returns : void
Public ngOnInit
ngOnInit()
Returns : void
Protected onLanguageChanged
onLanguageChanged(langChangeEvent: LangChangeEvent)
Parameters :
Name Type Optional
langChangeEvent LangChangeEvent No
Returns : void
Public removeDataset
removeDataset()
Returns : void
Public toggleSelection
toggleSelection()
Returns : void
Protected loadDataset
loadDataset(lang?: string)
Parameters :
Name Type Optional
lang string Yes
Returns : void
Protected setDataset
setDataset(timeseries: HelgolandTimeseries)
Parameters :
Name Type Optional
timeseries HelgolandTimeseries No
Returns : void
Protected setParameters
setParameters()
Returns : void
Protected Abstract loadDataset
loadDataset(lang?: string)
Parameters :
Name Type Optional
lang string Yes
Returns : void
Public ngOnDestroy
ngOnDestroy()
Returns : void
Public ngOnInit
ngOnInit()
Returns : void
Protected onLanguageChanged
onLanguageChanged(langChangeEvent: LangChangeEvent)
Parameters :
Name Type Optional
langChangeEvent LangChangeEvent No
Returns : void
Public removeDataset
removeDataset()
Returns : void
Public toggleSelection
toggleSelection()
Returns : void
Protected Abstract loadDataset
loadDataset(lang?: string)
Inherited from ListEntryComponent
Parameters :
Name Type Optional
lang string Yes
Returns : void
Public ngOnDestroy
ngOnDestroy()
Inherited from ListEntryComponent
Returns : void
Public ngOnInit
ngOnInit()
Inherited from ListEntryComponent
Returns : void
Protected onLanguageChanged
onLanguageChanged(langChangeEvent: LangChangeEvent)
Inherited from ListEntryComponent
Parameters :
Name Type Optional
langChangeEvent LangChangeEvent No
Returns : void
Public removeDataset
removeDataset()
Inherited from ListEntryComponent
Returns : void
Public toggleSelection
toggleSelection()
Inherited from ListEntryComponent
Returns : void

Properties

Public informationVisible
Default value : false
Public referenceValues
Type : ReferenceValue[]
Public firstValue
Type : FirstLastValue
Public hasData
Default value : true
Public lastValue
Type : FirstLastValue
Public categoryLabel
Type : string
Public dataset
Type : HelgolandTimeseries
Public phenomenonLabel
Type : string
Public platformLabel
Type : string
Public procedureLabel
Type : string
Public uom
Type : string
Protected internalId
Type : InternalDatasetId
Private langChangeSubscription
Type : Subscription
Public loading
Type : boolean
Public categoryLabel
Type : string
Public dataset
Type : HelgolandTimeseries
Public phenomenonLabel
Type : string
Public platformLabel
Type : string
Public procedureLabel
Type : string
Public uom
Type : string
Protected internalId
Type : InternalDatasetId
Private langChangeSubscription
Type : Subscription
Public loading
Type : boolean
Public categoryLabel
Type : string
Public dataset
Type : HelgolandTimeseries
Public phenomenonLabel
Type : string
Public platformLabel
Type : string
Public procedureLabel
Type : string
Public uom
Type : string
Protected internalId
Type : InternalDatasetId
Private langChangeSubscription
Type : Subscription
Public loading
Type : boolean
Public categoryLabel
Type : string
Public dataset
Type : HelgolandTimeseries
Public phenomenonLabel
Type : string
Public platformLabel
Type : string
Public procedureLabel
Type : string
Public uom
Type : string
Protected internalId
Type : InternalDatasetId
Private langChangeSubscription
Type : Subscription
Public loading
Type : boolean
Protected internalId
Type : InternalDatasetId
Inherited from ListEntryComponent
Private langChangeSubscription
Type : Subscription
Inherited from ListEntryComponent
Public loading
Type : boolean
Inherited from ListEntryComponent
import { Component, Injectable, OnChanges, ViewEncapsulation } from '@angular/core';
import {
    ColorService,
    DatasetOptions,
    HelgolandServicesConnector,
    IdCache,
    InternalIdHandler,
    ReferenceValue,
    Time,
} from '@helgoland/core';
import { TranslateService } from '@ngx-translate/core';

import {
    FirstLatestTimeseriesEntryComponent,
} from '../first-latest-timeseries-entry/first-latest-timeseries-entry.component';

@Injectable()
export class ReferenceValueColorCache extends IdCache<{ color: string, visible: boolean }> { }

/**
 * Extends the FirstLatestTimeseriesEntryComponent, with the following functions:
 *  - handles the reference values of the dataset entry
 */
@Component({
    selector: 'n52-timeseries-entry',
    templateUrl: './timeseries-entry.component.html',
    styleUrls: ['./timeseries-entry.component.scss'],
    encapsulation: ViewEncapsulation.None
})
export class TimeseriesEntryComponent extends FirstLatestTimeseriesEntryComponent implements OnChanges {

    public informationVisible = false;
    public referenceValues: ReferenceValue[];

    constructor(
        protected servicesConnector: HelgolandServicesConnector,
        protected timeSrvc: Time,
        protected internalIdHandler: InternalIdHandler,
        protected color: ColorService,
        protected refValCache: ReferenceValueColorCache,
        protected translateSrvc: TranslateService
    ) {
        super(servicesConnector, internalIdHandler, translateSrvc, timeSrvc);
    }

    public toggleInformation() {
        this.informationVisible = !this.informationVisible;
    }

    public toggleReferenceValue(refValue: ReferenceValue) {
        const options = JSON.parse(JSON.stringify(this.datasetOptions)) as DatasetOptions;
        const idx = options.showReferenceValues.findIndex((entry) => entry.id === refValue.referenceValueId);
        const refValId = this.createRefValId(refValue.referenceValueId);
        if (idx > -1) {
            refValue.visible = false;
            options.showReferenceValues.splice(idx, 1);
        } else {
            refValue.visible = true;
            options.showReferenceValues.push({ id: refValue.referenceValueId, color: refValue.color });
        }
        this.refValCache.get(refValId).visible = refValue.visible;
        this.onUpdateOptions.emit(options);
    }

    protected setParameters() {
        super.setParameters();
        if (this.dataset.referenceValues) {
            this.dataset.referenceValues.forEach((e) => {
                const refValId = this.createRefValId(e.referenceValueId);
                const refValOption = this.datasetOptions.showReferenceValues.find((o) => o.id === e.referenceValueId);
                if (refValOption) {
                    this.refValCache.set(refValId, {
                        color: refValOption.color,
                        visible: true
                    });
                }
                if (!this.refValCache.has(refValId)) {
                    this.refValCache.set(refValId, {
                        color: this.color.getColor(),
                        visible: false
                    });
                }
                e.color = this.refValCache.get(refValId).color;
                e.visible = this.refValCache.get(refValId).visible;
            });
        }
    }

    private createRefValId(refId: string) {
        return this.dataset.url + refId;
    }

}
<div class="legendItem" style="position: relative;" [ngStyle]="{'border-color': datasetOptions?.color}" [ngClass]="{'selected': selected}"
  (click)="toggleSelection()">
  <div class="loading-overlay" *ngIf="loading" [ngStyle]="{'background-color': datasetOptions?.color}">
    <div class="fa fa-refresh fa-spin fa-3x fa-fw"></div>
  </div>
  <div>
    <div class="legendItemheader" [ngClass]="{'highlight': highlight}">
      <div class="legendItemLabel" [ngStyle]="{'color': datasetOptions?.color}">
        <n52-label-mapper label="{{platformLabel}}"></n52-label-mapper>
        <!-- <n52-favorite-toggler [dataset]="dataset"></n52-favorite-toggler> -->
      </div>
      <div class="noDataWarning firstLastEntry" *ngIf="!hasData">
        <div>
          <span class="fa fa-exclamation-triangle red"></span>
          <span class="small-label">Keine Daten verfügbar</span>
        </div>
        <div class="additionalLegendEntry" (click)="jumpToLastTimeStamp(); $event.stopPropagation();">
          <span class="fa fa-chevron-right"></span>
          <span class="small-label">Springe zur letzten Messung</span>
        </div>
      </div>
      <div class="small-label">
        <n52-label-mapper label="{{phenomenonLabel}}"></n52-label-mapper>
        <span *ngIf="uom">
          <span>[</span>
          <n52-label-mapper label="{{uom}}"></n52-label-mapper>
          <span>]</span>
        </span>
      </div>
      <div class="small-label">
        <n52-label-mapper label="{{procedureLabel}}"></n52-label-mapper>
      </div>
      <div class="small-label" *ngIf="categoryLabel != phenomenonLabel">
        <n52-label-mapper label="{{categoryLabel}}"></n52-label-mapper>
      </div>
    </div>
    <div class="legendicons">
      <span class="fa" [ngClass]="{'fa-chevron-down': !informationVisible, 'fa-chevron-up': informationVisible}" (click)="toggleInformation(); $event.stopPropagation();"></span>
      <span class="fa" [ngClass]="{'fa-eye-slash': datasetOptions?.visible, 'fa-eye': !datasetOptions?.visible}" (click)="toggleVisibility(); $event.stopPropagation();"></span>
      <span class="fa fa-map-marker" (click)="showGeometry(); $event.stopPropagation();"></span>
      <span class="fa fa-pencil" (click)="editDatasetOptions(); $event.stopPropagation();" [ngStyle]="{color: datasetOptions?.color}"></span>
      <span class="fa fa-times" (click)="removeDataset(); $event.stopPropagation();"></span>
    </div>
    <div class="collapseLegendEntry small-label" *ngIf="informationVisible">
      <div class="firstLastEntry additionalLegendEntry" *ngIf="firstValue" (click)="jumpToFirstTimeStamp(); $event.stopPropagation();">
        <span class="fa fa-chevron-right"></span>
        <span>Erster Wert bei</span>
        <span>{{firstValue.timestamp| tzDate: 'L LT z'}}</span>
        <span class="hidden-medium">({{firstValue.value}} {{uom}})</span>
      </div>
      <div class="firstLastEntry additionalLegendEntry" *ngIf="lastValue" (click)="jumpToLastTimeStamp(); $event.stopPropagation();">
        <span class="fa fa-chevron-right"></span>
        <span>Letzter Wert bei</span>
        <span>{{lastValue.timestamp| tzDate: 'L LT z'}}</span>
        <span class="hidden-medium">({{lastValue.value}} {{uom}})</span>
      </div>
      <div *ngIf="dataset?.referenceValues">
        <div class="additionalLegendEntry" *ngFor="let ref of dataset.referenceValues" (click)="toggleReferenceValue(ref); $event.stopPropagation();"
          [ngClass]="{'selected': ref.visible}" [ngStyle]="{color: ref.color}">
          <span class="fa fa-chevron-right"></span>
          <span>{{ref.label}}</span>
        </div>
      </div>
      <!-- <div class="additionalLegendEntry" ng-click="$event.stopPropagation(); createExportCsv(timeseries)">
                <span class="glyphicon glyphicon-download"></span>
                <span translate="export.label"></span>
            </div> -->
      <!-- <div class="additionalLegendEntry">
                <swc-procedure-metadata timeseries='timeseries'></swc-procedure-metadata>
                <swc-timeseries-raw-data-output timeseries='timeseries'></swc-timeseries-raw-data-output>
                <swc-sos-url timeseries='timeseries'></swc-sos-url>
            </div> -->
    </div>
  </div>
</div>

./timeseries-entry.component.scss

.geometryViewerModal {
    .modal-body {
        height: 50vh;
    }
}

n52-timeseries-entry {
    .legendItem {
        background-color: white;
        padding: 5px;
        border-radius: 5px;
        margin-bottom: 5px;
        .small-label {
            font-size: 90%;
            word-break: break-all;
        }
        &.selected {
            padding: 0px;
            border-width: 5px;
            border-style: solid;
        }
        .legendItemheader {
            cursor: pointer;
            &.highlight {
                font-weight: bold;
            }
        }
        .legendicons {
            span {
                margin: 0 4%;
                font-size: 150%;
                &:hover {
                    cursor: pointer;
                }
            }
            .delete {
                z-index: 5;
            }
        }
        .noDataWarning {
            border: red solid 2px;
            border-radius: 5px;
            padding: 3px;
            .red {
                color: red;
            }
        }
        .additionalLegendEntry {
            &:hover {
                cursor: pointer;
            }
            &.selected {
                font-weight: bolder;
            }
        }
        .refEntry.selected {
            border-style: solid;
            border-width: 2px;
            border-radius: 2px;
            margin: 2px 0;
        }
        .loading-overlay {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0.5;
            z-index: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            .fa-spin {
                $icon-size: 25px;
                color: white;
                font-size: $icon-size;
                width: $icon-size;
                height: $icon-size;
            }
        }
    }
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""