File

libs/d3/src/lib/extended-data-d3-timeseries-graph/extended-data-d3-timeseries-graph.component.ts

Description

Extends the common d3 component, with the ability to add additional data to the graph. To set or change additional data, allways sets the complete array of data new. The componet just redraws if the array is reset.

Extends

D3TimeseriesGraphComponent

Implements

DoCheck AfterViewInit OnInit

Metadata

encapsulation ViewEncapsulation.None
providers D3GraphId
selector n52-extended-data-d3-timeseries-graph
styleUrls ../d3-timeseries-graph/d3-timeseries-graph.component.scss
templateUrl ../d3-timeseries-graph/d3-timeseries-graph.component.html

Index

Properties
Methods
Inputs
Outputs
HostListeners

Constructor

constructor(iterableDiffers: IterableDiffers, datasetIdResolver: InternalIdHandler, timeSrvc: Time, timeFormatLocaleService: D3TimeFormatLocaleService, colorService: ColorService, translateService: TranslateService, timezoneSrvc: TimezoneService, sumValues: SumValuesService, rangeCalc: RangeCalculationsService, graphHelper: D3GraphHelperService, graphService: D3Graphs, graphId: D3GraphId, servicesConnector: HelgolandServicesConnector)
Parameters :
Name Type Optional
iterableDiffers IterableDiffers No
datasetIdResolver InternalIdHandler No
timeSrvc Time No
timeFormatLocaleService D3TimeFormatLocaleService No
colorService ColorService No
translateService TranslateService No
timezoneSrvc TimezoneService No
sumValues SumValuesService No
rangeCalc RangeCalculationsService No
graphHelper D3GraphHelperService No
graphService D3Graphs No
graphId D3GraphId No
servicesConnector HelgolandServicesConnector No

Inputs

additionalData
Type : AdditionalData[]
Default value : []
hoveringService
Type : D3HoveringService
Default value : new D3SimpleHoveringService(this.timezoneSrvc)
mainTimeInterval
Type : Timespan
yaxisModifier
Type : boolean
datasetIds
Type : string[]
Default value : []

List of presented dataset ids.

datasetOptions
Type : Map<string | T>

The corresponding dataset options.

presenterOptions
Type : U

Options for general presentation of the data.

reloadForDatasets
Type : string[]

List of datasets for which a reload should be triggered, when the Array is set to new value.

selectedDatasetIds
Type : string[]
Default value : []

List of presented selected dataset ids.

timeInterval
Type : TimeInterval

The time interval in which the data should presented.

datasetIds
Type : string[]
Default value : []

List of presented dataset ids.

datasetOptions
Type : Map<string | T>

The corresponding dataset options.

presenterOptions
Type : U

Options for general presentation of the data.

reloadForDatasets
Type : string[]

List of datasets for which a reload should be triggered, when the Array is set to new value.

selectedDatasetIds
Type : string[]
Default value : []

List of presented selected dataset ids.

timeInterval
Type : TimeInterval

The time interval in which the data should presented.

Outputs

onClickDataPoint
Type : EventEmitter<literal type>
onHighlightChanged
Type : EventEmitter<HighlightOutput>
dataLoaded
Type : EventEmitter<Set<string>>

Event, which triggers list of datasets where data is currently loaded.

onContentLoading
Type : EventEmitter<boolean>

Event flag, while there is data loaded in the component.

onDatasetSelected
Type : EventEmitter<string[]>

Event with a list of selected datasets.

onMessageThrown
Type : EventEmitter<PresenterMessage>

Event, when there occured a message in the component.

onTimespanChanged
Type : EventEmitter<Timespan>

Event when the timespan in the presentation is adjusted.

dataLoaded
Type : EventEmitter<Set<string>>

Event, which triggers list of datasets where data is currently loaded.

onContentLoading
Type : EventEmitter<boolean>

Event flag, while there is data loaded in the component.

onDatasetSelected
Type : EventEmitter<string[]>

Event with a list of selected datasets.

onMessageThrown
Type : EventEmitter<PresenterMessage>

Event, when there occured a message in the component.

onTimespanChanged
Type : EventEmitter<Timespan>

Event when the timespan in the presentation is adjusted.

HostListeners

window:resize
Arguments : '$event'
window:resize(event: Event)
window:resize
Arguments : '$event'
window:resize(event: Event)
Inherited from ResizableComponent

Methods

Private generateAdditionalInternalId
generateAdditionalInternalId(entry: AdditionalData)
Parameters :
Name Type Optional
entry AdditionalData No
Returns : string
Public ngAfterViewInit
ngAfterViewInit()
Returns : void
Public ngDoCheck
ngDoCheck()
Returns : void
Public ngOnInit
ngOnInit()
Returns : void
Private prepareAdditionalData
prepareAdditionalData()
Returns : void
Protected prepareYAxes
prepareYAxes()
Returns : void
Public redrawCompleteGraph
redrawCompleteGraph()
Returns : void
Protected timeIntervalChanges
timeIntervalChanges()
Returns : void
Protected addDataset
addDataset(id: string, url: string)
Parameters :
Name Type Optional
id string No
url string No
Returns : void
Private addReferenceValueData
addReferenceValueData(dataEntry: InternalDataEntry, styles: DatasetOptions, data: Data, uom: string)

Function to add referencevaluedata to the dataset (e.g. mean).

Parameters :
Name Type Optional Description
dataEntry InternalDataEntry No
styles DatasetOptions No

Object containing information for dataset styling

data Data<TimeValueTuple> No

Array of Arrays containing the measurement-data of the dataset

uom string No

String with the uom of a dataset

Returns : void
Private addTimespanJumpButtons
addTimespanJumpButtons()
Returns : void
Private calcTicks
calcTicks()
Returns : {}
Private calculateHeight
calculateHeight()

Function that returns the height of the graph diagram.

Returns : number
Private calculateLineWidth
calculateLineWidth(entry: InternalDataEntry)
Parameters :
Name Type Optional
entry InternalDataEntry No
Returns : number
Private calculatePointRadius
calculatePointRadius(entry: InternalDataEntry)
Parameters :
Name Type Optional
entry InternalDataEntry No
Returns : any
Private calculateWidth
calculateWidth()

Function that returns the width of the graph diagram.

Returns : number
Public centerTime
centerTime(timestamp: number)
Parameters :
Name Type Optional
timestamp number No
Returns : void
Private changeSelectedIds
changeSelectedIds(toHighlightDataset: HighlightDataset[], change: boolean)

Function that changes state of selected Ids.

Parameters :
Name Type Optional
toHighlightDataset HighlightDataset[] No
change boolean No
Returns : void
Public changeTime
changeTime(from: number, to: number)
Parameters :
Name Type Optional
from number No
to number No
Returns : void
Private clickDataPoint
clickDataPoint(d: DataEntry, entry: InternalDataEntry)
Parameters :
Name Type Optional
d DataEntry No
entry InternalDataEntry No
Returns : void
Private createLine
createLine(xScaleBase: d3.ScaleTime, yScaleBase: d3.ScaleLinear)
Parameters :
Name Type Optional
xScaleBase d3.ScaleTime<number | number> No
yScaleBase d3.ScaleLinear<number | number> No
Returns : any
Private createReferenceValueData
createReferenceValueData(data: Data, refId: string)
Parameters :
Name Type Optional
data Data<TimeValueTuple> No
refId string No
Returns : literal type[]
Protected createYAxisForId
createYAxisForId(id: string)
Parameters :
Name Type Optional
id string No
Returns : void
Protected datasetOptionsChanged
datasetOptionsChanged(internalId: string, options: DatasetOptions, firstChange: boolean)
Parameters :
Name Type Optional
internalId string No
options DatasetOptions No
firstChange boolean No
Returns : void
Protected drawAllCharts
drawAllCharts()

Draws for every preprared data entry the chart.

Returns : void
Private drawBackground
drawBackground()
Returns : void
Private drawBarChart
drawBarChart(entry: InternalDataEntry, yScaleBase: d3.ScaleLinear)
Parameters :
Name Type Optional
entry InternalDataEntry No
yScaleBase d3.ScaleLinear<number | number> No
Returns : void
Public drawBaseGraph
drawBaseGraph()
Returns : void
Protected drawChart
drawChart(entry: InternalDataEntry)

Function to draw the graph line for each dataset.

Parameters :
Name Type Optional Description
entry InternalDataEntry No

Object containing a dataset.

Returns : void
Private drawLineChart
drawLineChart(entry: InternalDataEntry, yScaleBase: d3.ScaleLinear)
Parameters :
Name Type Optional
entry InternalDataEntry No
yScaleBase d3.ScaleLinear<number | number> No
Returns : void
Private drawRefLineChart
drawRefLineChart(data: DataEntry[], color: string, width: number, yScaleBase: d3.ScaleLinear)
Parameters :
Name Type Optional
data DataEntry[] No
color string No
width number No
yScaleBase d3.ScaleLinear<number | number> No
Returns : void
Private drawXaxis
drawXaxis(bufferXrange: number)

Function that draws the x axis to the svg element.

Parameters :
Name Type Optional Description
bufferXrange number No

Number with the distance between left edge and the beginning of the graph.

Returns : void
Private drawYaxis
drawYaxis(axis: YAxis)

Function to draw the y axis for each dataset. Each uom has its own axis.

Parameters :
Name Type Optional Description
axis YAxis No

Object containing a dataset.

Returns : { buffer: number; yScale: any; }
Private drawYGridLines
drawYGridLines()
Returns : void
Public getDataset
getDataset(internalId: string)
Parameters :
Name Type Optional
internalId string No
Returns : any
Public getDrawingLayer
getDrawingLayer(id: string, front?: boolean)
Parameters :
Name Type Optional
id string No
front boolean Yes
Returns : d3.Selection<SVGGElement, any, any, any>
Private getFirstTick
getFirstTick(start: moment.Moment, t: literal type)
Parameters :
Name Type Optional
start moment.Moment No
t literal type No
Returns : any
Public getGraphElem
getGraphElem()
Returns : any
Private highlightLine
highlightLine(ids: string[])

Function to set selected Ids that should be highlighted.

Parameters :
Name Type Optional Description
ids string[] No

Array of Strings containing the Ids.

Returns : void
Private isNotDrawable
isNotDrawable()
Returns : boolean
Private loadAddedDataset
loadAddedDataset(dataset: HelgolandDataset)
Parameters :
Name Type Optional
dataset HelgolandDataset No
Returns : void
Private loadDatasetData
loadDatasetData(dataset: HelgolandTimeseries, force: boolean)
Parameters :
Name Type Optional
dataset HelgolandTimeseries No
force boolean No
Returns : void
Private mousemoveBarHovering
mousemoveBarHovering(d: literal type, entry: InternalDataEntry)
Parameters :
Name Type Optional
d literal type No
entry InternalDataEntry No
Returns : void
Private mouseoutBarHovering
mouseoutBarHovering(d: literal type, rectElems: any[], idx: number, entry: InternalDataEntry)
Parameters :
Name Type Optional
d literal type No
rectElems any[] No
idx number No
entry InternalDataEntry No
Returns : void
Private mouseoverBarHovering
mouseoverBarHovering(d: literal type, rectElems: any[], idx: number, entry: InternalDataEntry)
Parameters :
Name Type Optional
d literal type No
rectElems any[] No
idx number No
entry InternalDataEntry No
Returns : void
Public ngAfterViewInit
ngAfterViewInit()
Returns : void
Public ngOnDestroy
ngOnDestroy()
Returns : void
Private onCompleteLoadingData
onCompleteLoadingData(dataset: HelgolandTimeseries)
Parameters :
Name Type Optional
dataset HelgolandTimeseries No
Returns : void
Protected onLanguageChanged
onLanguageChanged(langChangeEvent: LangChangeEvent)
Parameters :
Name Type Optional
langChangeEvent LangChangeEvent No
Returns : void
Protected onResize
onResize()
Returns : void
Protected onTimezoneChanged
onTimezoneChanged()
Returns : void
Private prepareData
prepareData(dataset: HelgolandTimeseries, rawdata: HelgolandTimeseriesData)

Function to prepare each dataset for the graph and adding it to an array of datasets.

Parameters :
Name Type Optional Description
dataset HelgolandTimeseries No

Object of the whole dataset

rawdata HelgolandTimeseriesData No
Returns : void
Protected prepareYAxes
prepareYAxes()
Returns : void
Protected presenterOptionsChanged
presenterOptionsChanged(options: D3PlotOptions)
Parameters :
Name Type Optional
options D3PlotOptions No
Returns : void
Protected processData
processData(entry: InternalDataEntry)

Function that processes the data to calculate y axis range of each dataset.

Parameters :
Name Type Optional Description
entry InternalDataEntry No

Object containing dataset related data.

Returns : void
Public redrawCompleteGraph
redrawCompleteGraph()

Function to plot the whole graph and its dependencies (graph line, graph axes, event handlers)

Returns : void
Public registerObserver
registerObserver(obs: D3GraphObserver)
Parameters :
Name Type Optional
obs D3GraphObserver No
Returns : void
Public reloadDataForDatasets
reloadDataForDatasets(datasetIds: string[])
Parameters :
Name Type Optional
datasetIds string[] No
Returns : void
Protected removeDataset
removeDataset(internalId: string)
Parameters :
Name Type Optional
internalId string No
Returns : void
Protected removeSelectedId
removeSelectedId(internalId: string)
Parameters :
Name Type Optional
internalId string No
Returns : void
Private round
round(date: moment.Moment, duration: moment.Duration)
Parameters :
Name Type Optional
date moment.Moment No
duration moment.Duration No
Returns : any
Private s4
s4()

Function to generate components of the uuid for a diagram

Returns : string
Protected setSelectedId
setSelectedId(internalId: string)
Parameters :
Name Type Optional
internalId string No
Returns : void
Public setTimespan
setTimespan(timespan: Timespan)

Just sets the timespan, which is used for the diagram visualisation

Parameters :
Name Type Optional
timespan Timespan No
Returns : void
Private tickInterval
tickInterval(interval: number, start: number, stop: number)
Parameters :
Name Type Optional
interval number No
start number No
stop number No
Returns : literal type
Private ticks
ticks(ts: Timespan, interval: number)
Parameters :
Name Type Optional
ts Timespan No
interval number No
Returns : {}
Protected timeIntervalChanges
timeIntervalChanges()
Returns : void
Public unregisterObserver
unregisterObserver(obs: D3GraphObserver)
Parameters :
Name Type Optional
obs D3GraphObserver No
Returns : void
Private uuidv4
uuidv4()

Function to generate uuid for a diagram

Returns : string
Private wrapText
wrapText(textObj: any, width: number, xposition: number, yaxisModifier: boolean, axisLabel: string)

Function to wrap the text for the y axis label.

Parameters :
Name Type Optional Description
textObj any No
width number No

width of the axis which must not be crossed

xposition number No

position to center the label in the middle

yaxisModifier boolean No
axisLabel string No
Returns : void
Protected Abstract addDataset
addDataset(id: string, url: string)
Parameters :
Name Type Optional
id string No
url string No
Returns : void
Protected addDatasetByInternalId
addDatasetByInternalId(internalId: string)
Parameters :
Name Type Optional
internalId string No
Returns : void
Protected Abstract datasetOptionsChanged
datasetOptionsChanged(internalId: string, options: T, firstChange: boolean)
Parameters :
Name Type Optional
internalId string No
options T No
firstChange boolean No
Returns : void
Public ngDoCheck
ngDoCheck()
Returns : void
Public ngOnChanges
ngOnChanges(changes: SimpleChanges)
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void
Public ngOnDestroy
ngOnDestroy()
Returns : void
Protected Abstract onLanguageChanged
onLanguageChanged(langChangeEvent: LangChangeEvent)
Parameters :
Name Type Optional
langChangeEvent LangChangeEvent No
Returns : void
Protected Abstract onTimezoneChanged
onTimezoneChanged(timezone: string)
Parameters :
Name Type Optional
timezone string No
Returns : void
Protected Abstract presenterOptionsChanged
presenterOptionsChanged(options: U)
Parameters :
Name Type Optional
options U No
Returns : void
Public Abstract reloadDataForDatasets
reloadDataForDatasets(datasets: string[])
Parameters :
Name Type Optional
datasets string[] No
Returns : void
Protected Abstract removeDataset
removeDataset(internalId: string)
Parameters :
Name Type Optional
internalId string No
Returns : void
Protected Abstract removeSelectedId
removeSelectedId(internalId: string)
Parameters :
Name Type Optional
internalId string No
Returns : void
Protected Abstract setSelectedId
setSelectedId(internalId: string)
Parameters :
Name Type Optional
internalId string No
Returns : void
Protected Abstract timeIntervalChanges
timeIntervalChanges()
Returns : void
Protected Abstract onResize
onResize()
Returns : void
Protected Abstract addDataset
addDataset(id: string, url: string)
Parameters :
Name Type Optional
id string No
url string No
Returns : void
Protected addDatasetByInternalId
addDatasetByInternalId(internalId: string)
Parameters :
Name Type Optional
internalId string No
Returns : void
Protected Abstract datasetOptionsChanged
datasetOptionsChanged(internalId: string, options: T, firstChange: boolean)
Parameters :
Name Type Optional
internalId string No
options T No
firstChange boolean No
Returns : void
Public ngDoCheck
ngDoCheck()
Returns : void
Public ngOnChanges
ngOnChanges(changes: SimpleChanges)
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void
Public ngOnDestroy
ngOnDestroy()
Returns : void
Protected Abstract onLanguageChanged
onLanguageChanged(langChangeEvent: LangChangeEvent)
Parameters :
Name Type Optional
langChangeEvent LangChangeEvent No
Returns : void
Protected Abstract onTimezoneChanged
onTimezoneChanged(timezone: string)
Parameters :
Name Type Optional
timezone string No
Returns : void
Protected Abstract presenterOptionsChanged
presenterOptionsChanged(options: U)
Parameters :
Name Type Optional
options U No
Returns : void
Public Abstract reloadDataForDatasets
reloadDataForDatasets(datasets: string[])
Parameters :
Name Type Optional
datasets string[] No
Returns : void
Protected Abstract removeDataset
removeDataset(internalId: string)
Parameters :
Name Type Optional
internalId string No
Returns : void
Protected Abstract removeSelectedId
removeSelectedId(internalId: string)
Parameters :
Name Type Optional
internalId string No
Returns : void
Protected Abstract setSelectedId
setSelectedId(internalId: string)
Parameters :
Name Type Optional
internalId string No
Returns : void
Protected Abstract timeIntervalChanges
timeIntervalChanges()
Returns : void
Protected Abstract onResize
onResize()
Inherited from ResizableComponent
Returns : void

Properties

Private additionalDataDiffer
Type : IterableDiffer<AdditionalData>
Private addLineWidth
Type : number
Default value : 2
Private background
Type : d3.Selection<SVGSVGElement | any | any | any>
Private currentTimeId
Type : string
Public d3Elem
Type : ElementRef
Decorators :
@ViewChild('d3timeseries', {static: true})
Protected datasetMap
Type : Map<string | DataConst>
Default value : new Map()
Protected graph
Type : d3.Selection<SVGSVGElement | any | any | any>
Protected graphBody
Type : any
Private graphInteraction
Type : d3.Selection<SVGSVGElement | any | any | any>
Private height
Type : number
Public highlightOutput
Type : HighlightOutput
Private lastHoverPositioning
Type : number
Private leftOffset
Type : number
Private listOfSeparation
Default value : Array()
Protected listOfUoms
Type : string[]
Default value : []
Private loadingCounter
Type : number
Default value : 0
Private loadingData
Type : Set<string>
Default value : new Set()
Private margin
Type : object
Default value : { top: 10, right: 10, bottom: 40, left: 40 }
Private maxLabelwidth
Type : number
Default value : 0
Private observer
Type : Set<D3GraphObserver>
Default value : new Set()
Public plotOptions
Type : D3PlotOptions
Default value : { showReferenceValues: false, generalizeAllways: true, togglePanZoom: true, hoverable: true, hoverStyle: HoveringStyle.point, grid: true, yaxis: true, overview: false, showTimeLabel: true, requestBeforeAfterValues: false, timespanBufferFactor: 0.2, sendDataRequestOnlyIfDatasetTimespanCovered: true }
Protected preparedAxes
Type : Map<string | YAxisSettings>
Default value : new Map()
Protected preparedData
Type : InternalDataEntry[]
Default value : []
Protected rawSvg
Type : d3.Selection<SVGSVGElement | any | any | any>
Private runningDataRequests
Type : Map<string | Subscription>
Default value : new Map()
Private width
Type : number
Private xScaleBase
Type : d3.ScaleTime<number | number>
Private yAxes
Type : YAxis[]
Default value : []

calculated y axes for the diagram

Private yScaleBase
Type : d3.ScaleLinear<number | number>
Private datasetIdsDiffer
Type : IterableDiffer<string>
Private langChangeSubscription
Type : Subscription
Protected oldDatasetOptions
Type : Map<string | T>
Protected oldPresenterOptions
Type : U
Private selectedDatasetIdsDiffer
Type : IterableDiffer<string>
Protected timespan
Type : Timespan
Private timezoneSubscription
Type : Subscription
Private datasetIdsDiffer
Type : IterableDiffer<string>
Private langChangeSubscription
Type : Subscription
Protected oldDatasetOptions
Type : Map<string | T>
Protected oldPresenterOptions
Type : U
Private selectedDatasetIdsDiffer
Type : IterableDiffer<string>
Protected timespan
Type : Timespan
Private timezoneSubscription
Type : Subscription
import {
  AfterViewInit,
  Component,
  DoCheck,
  Input,
  IterableDiffer,
  IterableDiffers,
  OnInit,
  ViewEncapsulation,
} from '@angular/core';
import {
  ColorService,
  DatasetOptions,
  HelgolandServicesConnector,
  InternalIdHandler,
  SumValuesService,
  Time,
  TimezoneService,
} from '@helgoland/core';
import { TranslateService } from '@ngx-translate/core';

import { D3TimeseriesGraphComponent } from '../d3-timeseries-graph/d3-timeseries-graph.component';
import { D3GraphHelperService } from '../helper/d3-graph-helper.service';
import { D3GraphId } from '../helper/d3-graph-id.service';
import { D3TimeFormatLocaleService } from '../helper/d3-time-format-locale.service';
import { InternalDataEntry } from '../model/d3-general';
import { D3Graphs } from './../helper/d3-graphs.service';
import { RangeCalculationsService } from './../helper/range-calculations.service';

/**
 * Additional Data which can be add to the component {@link ExtendedDataD3TimeseriesGraphComponent} as Input.
 * One of the optional properties 'linkedDatasetId' and 'yaxisLabel' is mandatory.
 */
export interface AdditionalData {
  /**
   * Linked to an existing dataset in the graph component and uses it dataset options if no other datasetoptions are presented.
   */
  linkedDatasetId?: string;
  /**
   * Y-Axis label if no link to an existing dataset is given.
   */
  yaxisLabel?: string;
  /**
   * The dataset options, which describes the styling of the additional data.
   */
  datasetOptions?: DatasetOptions;
  /**
   * Internal Id connected with the dataset options
   */
  internalId: string;
  /**
   * The additional data arrey with tupels of timestamp and value.
   */
  data: AdditionalDataEntry[];
}

/**
 * Additional data entry tuple
 */
export interface AdditionalDataEntry {
  timestamp: number;
  value: number;
}

/**
 * Extends the common d3 component, with the ability to add additional data to the graph. To set or change  additional data, allways sets the complete array of data new. The componet just redraws if
 * the array is reset.
 */
@Component({
  selector: 'n52-extended-data-d3-timeseries-graph',
  templateUrl: '../d3-timeseries-graph/d3-timeseries-graph.component.html',
  styleUrls: ['../d3-timeseries-graph/d3-timeseries-graph.component.scss'],
  providers: [D3GraphId],
  encapsulation: ViewEncapsulation.None
})
export class ExtendedDataD3TimeseriesGraphComponent extends D3TimeseriesGraphComponent implements DoCheck, AfterViewInit, OnInit {

  @Input()
  public additionalData: AdditionalData[] = [];
  private additionalDataDiffer: IterableDiffer<AdditionalData>;

  constructor(
    protected iterableDiffers: IterableDiffers,
    protected datasetIdResolver: InternalIdHandler,
    protected timeSrvc: Time,
    protected timeFormatLocaleService: D3TimeFormatLocaleService,
    protected colorService: ColorService,
    protected translateService: TranslateService,
    protected timezoneSrvc: TimezoneService,
    protected sumValues: SumValuesService,
    protected rangeCalc: RangeCalculationsService,
    protected graphHelper: D3GraphHelperService,
    protected graphService: D3Graphs,
    protected graphId: D3GraphId,
    protected servicesConnector: HelgolandServicesConnector
  ) {
    super(
      iterableDiffers,
      datasetIdResolver,
      timeSrvc,
      timeFormatLocaleService,
      colorService,
      translateService,
      timezoneSrvc,
      sumValues,
      rangeCalc,
      graphHelper,
      graphService,
      graphId,
      servicesConnector
    );
  }

  public ngOnInit(): void {
    this.additionalDataDiffer = this.iterableDiffers.find(this.additionalData).create();
  }

  public ngDoCheck() {
    super.ngDoCheck();
    const additionalDataChanges = this.additionalDataDiffer.diff(this.additionalData);
    if (additionalDataChanges && this.additionalData && this.graph) {
      additionalDataChanges.forEachRemovedItem((removedItem) => {
        const id = this.generateAdditionalInternalId(removedItem.item);
        const spliceIdx = this.preparedData.findIndex((entry) => entry.internalId === id);
        if (spliceIdx >= 0) {
          this.preparedData.splice(spliceIdx, 1);
        }
      });
      this.redrawCompleteGraph();
    }
  }

  public redrawCompleteGraph() {
    this.prepareAdditionalData();
    super.redrawCompleteGraph();
  }

  public ngAfterViewInit(): void {
    super.ngAfterViewInit();
  }

  protected timeIntervalChanges(): void {
    if (this.datasetMap.size > 0) {
      super.timeIntervalChanges();
    } else {
      this.redrawCompleteGraph();
    }
  }

  protected prepareYAxes() {
    super.prepareYAxes();
    this.additionalData.forEach(entry => {
      const id = this.generateAdditionalInternalId(entry);
      this.createYAxisForId(id);
    });
  }

  private prepareAdditionalData() {
    if (this.additionalData) {
      this.additionalData.forEach(entry => {
        if ((entry.linkedDatasetId || entry.yaxisLabel) && entry.data && entry.data.length > 0) {

          const options = entry.datasetOptions || this.datasetOptions.get(entry.linkedDatasetId);
          const dataset = this.datasetMap.get(entry.linkedDatasetId);
          const prepDataIdx = this.preparedData.findIndex(e => e.internalId.indexOf(entry.linkedDatasetId) > -1 || e.internalId.indexOf(entry.internalId) > -1);
          let dataEntry: InternalDataEntry;
          if (prepDataIdx === -1) {
            dataEntry = {
              internalId: this.generateAdditionalInternalId(entry),
              hoverId: `hov-${Math.random().toString(36).substr(2, 9)}`,
              options,
              data: options.visible ? entry.data.map(e => ({ timestamp: e.timestamp, value: e.value })) : [],
              axisOptions: {
                uom: dataset ? dataset.uom : entry.yaxisLabel,
                label: dataset ? dataset.label : entry.yaxisLabel,
                zeroBased: options.zeroBasedYAxis,
                yAxisRange: options.yAxisRange,
                autoRangeSelection: options.autoRangeSelection,
                separateYAxis: options.separateYAxis
              },
              referenceValueData: [],
              visible: options.visible
            };
            if (dataset) {
              dataEntry.axisOptions.parameters = {
                feature: dataset.parameters.feature,
                phenomenon: dataset.parameters.phenomenon,
                offering: dataset.parameters.offering
              };
            }
            this.preparedData.push(dataEntry);
          } else {
            dataEntry = this.preparedData[prepDataIdx];
            dataEntry.axisOptions.uom = dataset ? dataset.uom : entry.yaxisLabel;
            dataEntry.axisOptions.label = dataset ? dataset.label : entry.yaxisLabel;
            dataEntry.data = options.visible ? entry.data.map(e => ({ timestamp: e.timestamp, value: e.value })) : [];
          }

          this.processData(dataEntry);

        } else {
          console.warn('Please check the additional entry, it needs at least a \'linkedDatasetId\' or a \'yaxisLabel\' property and a \'data\' property: ', entry);
        }
      });
    }
  }


  private generateAdditionalInternalId(entry: AdditionalData): string {
    return entry.linkedDatasetId ? entry.linkedDatasetId + 'add' : entry.internalId + 'add';
  }
}
<div class="d3" #d3timeseries>
    <n52-d3-graph-pan-zoom-interaction></n52-d3-graph-pan-zoom-interaction>
    <n52-d3-graph-copyright [copyright]="plotOptions.copyright"></n52-d3-graph-copyright>
    <n52-d3-graph-hover-line *ngIf="plotOptions.hoverStyle === 'line'"></n52-d3-graph-hover-line>
    <n52-d3-graph-hover-point *ngIf="plotOptions.hoverStyle === 'point'" [hoveringService]="hoveringService"
        (onHighlightChanged)="onHighlightChanged.emit($event)">
    </n52-d3-graph-hover-point>
    <n52-d3-graph-overview-selection *ngIf="plotOptions.overview" [mainTimeInterval]="mainTimeInterval"></n52-d3-graph-overview-selection>
</div>

../d3-timeseries-graph/d3-timeseries-graph.component.scss

.d3 {
    height: 100%;
    width: 100%;
    /* disable text selection */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
    
    .grid .tick line {
        stroke: lightgrey;
        stroke-opacity: 0.7;
        shape-rendering: crispEdges;
    }

    .grid.x-grid .domain{
        stroke-width: 0;
    }

    .graphDots .hover {
        stroke-width: 20px;
        stroke-opacity: .5;
    }

    text.yaxisTextLabel {
        fill: black;
        font: 18px times;

        &.selected {
            font-weight: bold;
        }
    }

    rect.y.axisDiv {
        fill: grey;
        opacity: 0.0;

        &.selected {
            opacity: 0.5;
        }

        &:hover {
            opacity: 0.3;
        }
    }

    .formerButton,
    .laterButton {
        fill: grey;
        opacity: 0.3;
        &:hover {
            opacity: 0.6;
        }
    }
    .arrow {
        stroke: grey;
        stroke-width: 3px;
    }
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""