helgoland-toolbox documentation
  1. Components
  2. ExtendedDataD3TimeseriesGraphComponent

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)
Defined in libs/d3/src/lib/extended-data-d3-timeseries-graph/extended-data-d3-timeseries-graph.component.ts:80
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 : []
Defined in libs/d3/src/lib/extended-data-d3-timeseries-graph/extended-data-d3-timeseries-graph.component.ts:79
hoveringService
Type : D3HoveringService
Default value : new D3SimpleHoveringService(this.timezoneSrvc)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:76
mainTimeInterval
Type : Timespan
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:71
yaxisModifier
Type : boolean
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:74
datasetIds
Type : string[]
Default value : []
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:38

List of presented dataset ids.
datasetOptions
Type : Map<string | T>
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:56

The corresponding dataset options.
presenterOptions
Type : U
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:63

Options for general presentation of the data.
reloadForDatasets
Type : string[]
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:70

List of datasets for which a reload should be triggered, when the Array is set to new value.
selectedDatasetIds
Type : string[]
Default value : []
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:44

List of presented selected dataset ids.
timeInterval
Type : TimeInterval
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:50

The time interval in which the data should presented.
datasetIds
Type : string[]
Default value : []
Inherited from DatasetPresenterComponent
Defined in DatasetPresenterComponent:38

List of presented dataset ids.
datasetOptions
Type : Map<string | T>
Inherited from DatasetPresenterComponent
Defined in DatasetPresenterComponent:56

The corresponding dataset options.
presenterOptions
Type : U
Inherited from DatasetPresenterComponent
Defined in DatasetPresenterComponent:63

Options for general presentation of the data.
reloadForDatasets
Type : string[]
Inherited from DatasetPresenterComponent
Defined in DatasetPresenterComponent:70

List of datasets for which a reload should be triggered, when the Array is set to new value.
selectedDatasetIds
Type : string[]
Default value : []
Inherited from DatasetPresenterComponent
Defined in DatasetPresenterComponent:44

List of presented selected dataset ids.
timeInterval
Type : TimeInterval
Inherited from DatasetPresenterComponent
Defined in DatasetPresenterComponent:50

The time interval in which the data should presented.

Outputs

onClickDataPoint
Type : EventEmitter<literal type>
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:82
onHighlightChanged
Type : EventEmitter<HighlightOutput>
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:79
dataLoaded
Type : EventEmitter<Set<string>>
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:100

Event, which triggers list of datasets where data is currently loaded.
onContentLoading
Type : EventEmitter<boolean>
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:94

Event flag, while there is data loaded in the component.
onDatasetSelected
Type : EventEmitter<string[]>
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:76

Event with a list of selected datasets.
onMessageThrown
Type : EventEmitter<PresenterMessage>
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:88

Event, when there occured a message in the component.
onTimespanChanged
Type : EventEmitter<Timespan>
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:82

Event when the timespan in the presentation is adjusted.
dataLoaded
Type : EventEmitter<Set<string>>
Inherited from DatasetPresenterComponent
Defined in DatasetPresenterComponent:100

Event, which triggers list of datasets where data is currently loaded.
onContentLoading
Type : EventEmitter<boolean>
Inherited from DatasetPresenterComponent
Defined in DatasetPresenterComponent:94

Event flag, while there is data loaded in the component.
onDatasetSelected
Type : EventEmitter<string[]>
Inherited from DatasetPresenterComponent
Defined in DatasetPresenterComponent:76

Event with a list of selected datasets.
onMessageThrown
Type : EventEmitter<PresenterMessage>
Inherited from DatasetPresenterComponent
Defined in DatasetPresenterComponent:88

Event, when there occured a message in the component.
onTimespanChanged
Type : EventEmitter<Timespan>
Inherited from DatasetPresenterComponent
Defined in DatasetPresenterComponent:82

Event when the timespan in the presentation is adjusted.

HostListeners

window:resize
Arguments : '$event'
window:resize(event: Event)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:6
window:resize
Arguments : '$event'
window:resize(event: Event)
Inherited from ResizableComponent
Defined in ResizableComponent:6

Methods

Private generateAdditionalInternalId
generateAdditionalInternalId(entry: AdditionalData)
Defined in libs/d3/src/lib/extended-data-d3-timeseries-graph/extended-data-d3-timeseries-graph.component.ts:209
Parameters :
Name Type Optional
entry AdditionalData No
Returns : string
Public ngAfterViewInit
ngAfterViewInit()
Defined in libs/d3/src/lib/extended-data-d3-timeseries-graph/extended-data-d3-timeseries-graph.component.ts:138
Returns : void
Public ngDoCheck
ngDoCheck()
Defined in libs/d3/src/lib/extended-data-d3-timeseries-graph/extended-data-d3-timeseries-graph.component.ts:118
Returns : void
Public ngOnInit
ngOnInit()
Defined in libs/d3/src/lib/extended-data-d3-timeseries-graph/extended-data-d3-timeseries-graph.component.ts:114
Returns : void
Private prepareAdditionalData
prepareAdditionalData()
Defined in libs/d3/src/lib/extended-data-d3-timeseries-graph/extended-data-d3-timeseries-graph.component.ts:158
Returns : void
Protected prepareYAxes
prepareYAxes()
Defined in libs/d3/src/lib/extended-data-d3-timeseries-graph/extended-data-d3-timeseries-graph.component.ts:150
Returns : void
Public redrawCompleteGraph
redrawCompleteGraph()
Defined in libs/d3/src/lib/extended-data-d3-timeseries-graph/extended-data-d3-timeseries-graph.component.ts:133
Returns : void
Protected timeIntervalChanges
timeIntervalChanges()
Defined in libs/d3/src/lib/extended-data-d3-timeseries-graph/extended-data-d3-timeseries-graph.component.ts:142
Returns : void
Protected addDataset
addDataset(id: string, url: string)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:221
Parameters :
Name Type Optional
id string No
url string No
Returns : void
Private addReferenceValueData
addReferenceValueData(dataEntry: InternalDataEntry, styles: DatasetOptions, data: Data, uom: string)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:436

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()
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:737
Returns : void
Private calcTicks
calcTicks()
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:878
Returns : {}
Private calculateHeight
calculateHeight()
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:525

Function that returns the height of the graph diagram.

Returns : number
Private calculateLineWidth
calculateLineWidth(entry: InternalDataEntry)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:1362
Parameters :
Name Type Optional
entry InternalDataEntry No
Returns : number
Private calculatePointRadius
calculatePointRadius(entry: InternalDataEntry)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:1370
Parameters :
Name Type Optional
entry InternalDataEntry No
Returns : any
Private calculateWidth
calculateWidth()
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:532

Function that returns the width of the graph diagram.

Returns : number
Public centerTime
centerTime(timestamp: number)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:276
Parameters :
Name Type Optional
timestamp number No
Returns : void
Private changeSelectedIds
changeSelectedIds(toHighlightDataset: HighlightDataset[], change: boolean)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:1108

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)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:281
Parameters :
Name Type Optional
from number No
to number No
Returns : void
Private clickDataPoint
clickDataPoint(d: DataEntry, entry: InternalDataEntry)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:729
Parameters :
Name Type Optional
d DataEntry No
entry InternalDataEntry No
Returns : void
Private createLine
createLine(xScaleBase: d3.ScaleTime, yScaleBase: d3.ScaleLinear)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:1284
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)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:449
Parameters :
Name Type Optional
data Data<TimeValueTuple> No
refId string No
Returns : literal type[]
Protected createYAxisForId
createYAxisForId(id: string)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:682
Parameters :
Name Type Optional
id string No
Returns : void
Protected datasetOptionsChanged
datasetOptionsChanged(internalId: string, options: DatasetOptions, firstChange: boolean)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:262
Parameters :
Name Type Optional
internalId string No
options DatasetOptions No
firstChange boolean No
Returns : void
Protected drawAllCharts
drawAllCharts()
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:809

Draws for every preprared data entry the chart.

Returns : void
Private drawBackground
drawBackground()
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:1075
Returns : void
Private drawBarChart
drawBarChart(entry: InternalDataEntry, yScaleBase: d3.ScaleLinear)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:1208
Parameters :
Name Type Optional
entry InternalDataEntry No
yScaleBase d3.ScaleLinear<number | number> No
Returns : void
Public drawBaseGraph
drawBaseGraph()
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:543
Returns : void
Protected drawChart
drawChart(entry: InternalDataEntry)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:1131

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)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:1177
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)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:1164
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)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:818

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)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:965

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()
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:549
Returns : void
Public getDataset
getDataset(internalId: string)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:285
Parameters :
Name Type Optional
internalId string No
Returns : any
Public getDrawingLayer
getDrawingLayer(id: string, front?: boolean)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:562
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)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:897
Parameters :
Name Type Optional
start moment.Moment No
t literal type No
Returns : any
Public getGraphElem
getGraphElem()
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:201
Returns : any
Private highlightLine
highlightLine(ids: string[])
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:1088

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()
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:664
Returns : boolean
Private loadAddedDataset
loadAddedDataset(dataset: HelgolandDataset)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:289
Parameters :
Name Type Optional
dataset HelgolandDataset No
Returns : void
Private loadDatasetData
loadDatasetData(dataset: HelgolandTimeseries, force: boolean)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:299
Parameters :
Name Type Optional
dataset HelgolandTimeseries No
force boolean No
Returns : void
Private mousemoveBarHovering
mousemoveBarHovering(d: literal type, entry: InternalDataEntry)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:1264
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)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:1274
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)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:1241
Parameters :
Name Type Optional
d literal type No
rectElems any[] No
idx number No
entry InternalDataEntry No
Returns : void
Public ngAfterViewInit
ngAfterViewInit()
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:164
Returns : void
Public ngOnDestroy
ngOnDestroy()
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:188
Returns : void
Private onCompleteLoadingData
onCompleteLoadingData(dataset: HelgolandTimeseries)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:340
Parameters :
Name Type Optional
dataset HelgolandTimeseries No
Returns : void
Protected onLanguageChanged
onLanguageChanged(langChangeEvent: LangChangeEvent)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:205
Parameters :
Name Type Optional
langChangeEvent LangChangeEvent No
Returns : void
Protected onResize
onResize()
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:272
Returns : void
Protected onTimezoneChanged
onTimezoneChanged()
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:209
Returns : void
Private prepareData
prepareData(dataset: HelgolandTimeseries, rawdata: HelgolandTimeseriesData)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:352

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()
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:678
Returns : void
Protected presenterOptionsChanged
presenterOptionsChanged(options: D3PlotOptions)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:254
Parameters :
Name Type Optional
options D3PlotOptions No
Returns : void
Protected processData
processData(entry: InternalDataEntry)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:467

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()
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:573

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

Returns : void
Public registerObserver
registerObserver(obs: D3GraphObserver)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:193
Parameters :
Name Type Optional
obs D3GraphObserver No
Returns : void
Public reloadDataForDatasets
reloadDataForDatasets(datasetIds: string[])
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:213
Parameters :
Name Type Optional
datasetIds string[] No
Returns : void
Protected removeDataset
removeDataset(internalId: string)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:228
Parameters :
Name Type Optional
internalId string No
Returns : void
Protected removeSelectedId
removeSelectedId(internalId: string)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:248
Parameters :
Name Type Optional
internalId string No
Returns : void
Private round
round(date: moment.Moment, duration: moment.Duration)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:901
Parameters :
Name Type Optional
date moment.Moment No
duration moment.Duration No
Returns : any
Private s4
s4()
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:1356

Function to generate components of the uuid for a diagram

Returns : string
Protected setSelectedId
setSelectedId(internalId: string)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:242
Parameters :
Name Type Optional
internalId string No
Returns : void
Public setTimespan
setTimespan(timespan: Timespan)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:539

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)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:907
Parameters :
Name Type Optional
interval number No
start number No
stop number No
Returns : literal type
Private ticks
ticks(ts: Timespan, interval: number)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:883
Parameters :
Name Type Optional
ts Timespan No
interval number No
Returns : {}
Protected timeIntervalChanges
timeIntervalChanges()
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:268
Returns : void
Public unregisterObserver
unregisterObserver(obs: D3GraphObserver)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:197
Parameters :
Name Type Optional
obs D3GraphObserver No
Returns : void
Private uuidv4
uuidv4()
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:1349

Function to generate uuid for a diagram

Returns : string
Private wrapText
wrapText(textObj: any, width: number, xposition: number, yaxisModifier: boolean, axisLabel: string)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:1315

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)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:191
Parameters :
Name Type Optional
id string No
url string No
Returns : void
Protected addDatasetByInternalId
addDatasetByInternalId(internalId: string)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:180
Parameters :
Name Type Optional
internalId string No
Returns : void
Protected Abstract datasetOptionsChanged
datasetOptionsChanged(internalId: string, options: T, firstChange: boolean)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:201
Parameters :
Name Type Optional
internalId string No
options T No
firstChange boolean No
Returns : void
Public ngDoCheck
ngDoCheck()
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:139
Returns : void
Public ngOnChanges
ngOnChanges(changes: SimpleChanges)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:124
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void
Public ngOnDestroy
ngOnDestroy()
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:134
Returns : void
Protected Abstract onLanguageChanged
onLanguageChanged(langChangeEvent: LangChangeEvent)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:185
Parameters :
Name Type Optional
langChangeEvent LangChangeEvent No
Returns : void
Protected Abstract onTimezoneChanged
onTimezoneChanged(timezone: string)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:187
Parameters :
Name Type Optional
timezone string No
Returns : void
Protected Abstract presenterOptionsChanged
presenterOptionsChanged(options: U)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:199
Parameters :
Name Type Optional
options U No
Returns : void
Public Abstract reloadDataForDatasets
reloadDataForDatasets(datasets: string[])
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:178
Parameters :
Name Type Optional
datasets string[] No
Returns : void
Protected Abstract removeDataset
removeDataset(internalId: string)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:193
Parameters :
Name Type Optional
internalId string No
Returns : void
Protected Abstract removeSelectedId
removeSelectedId(internalId: string)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:197
Parameters :
Name Type Optional
internalId string No
Returns : void
Protected Abstract setSelectedId
setSelectedId(internalId: string)
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:195
Parameters :
Name Type Optional
internalId string No
Returns : void
Protected Abstract timeIntervalChanges
timeIntervalChanges()
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:189
Returns : void
Protected Abstract onResize
onResize()
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:10
Returns : void
Protected Abstract addDataset
addDataset(id: string, url: string)
Inherited from DatasetPresenterComponent
Defined in DatasetPresenterComponent:191
Parameters :
Name Type Optional
id string No
url string No
Returns : void
Protected addDatasetByInternalId
addDatasetByInternalId(internalId: string)
Inherited from DatasetPresenterComponent
Defined in DatasetPresenterComponent:180
Parameters :
Name Type Optional
internalId string No
Returns : void
Protected Abstract datasetOptionsChanged
datasetOptionsChanged(internalId: string, options: T, firstChange: boolean)
Inherited from DatasetPresenterComponent
Defined in DatasetPresenterComponent:201
Parameters :
Name Type Optional
internalId string No
options T No
firstChange boolean No
Returns : void
Public ngDoCheck
ngDoCheck()
Inherited from DatasetPresenterComponent
Defined in DatasetPresenterComponent:139
Returns : void
Public ngOnChanges
ngOnChanges(changes: SimpleChanges)
Inherited from DatasetPresenterComponent
Defined in DatasetPresenterComponent:124
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void
Public ngOnDestroy
ngOnDestroy()
Inherited from DatasetPresenterComponent
Defined in DatasetPresenterComponent:134
Returns : void
Protected Abstract onLanguageChanged
onLanguageChanged(langChangeEvent: LangChangeEvent)
Inherited from DatasetPresenterComponent
Defined in DatasetPresenterComponent:185
Parameters :
Name Type Optional
langChangeEvent LangChangeEvent No
Returns : void
Protected Abstract onTimezoneChanged
onTimezoneChanged(timezone: string)
Inherited from DatasetPresenterComponent
Defined in DatasetPresenterComponent:187
Parameters :
Name Type Optional
timezone string No
Returns : void
Protected Abstract presenterOptionsChanged
presenterOptionsChanged(options: U)
Inherited from DatasetPresenterComponent
Defined in DatasetPresenterComponent:199
Parameters :
Name Type Optional
options U No
Returns : void
Public Abstract reloadDataForDatasets
reloadDataForDatasets(datasets: string[])
Inherited from DatasetPresenterComponent
Defined in DatasetPresenterComponent:178
Parameters :
Name Type Optional
datasets string[] No
Returns : void
Protected Abstract removeDataset
removeDataset(internalId: string)
Inherited from DatasetPresenterComponent
Defined in DatasetPresenterComponent:193
Parameters :
Name Type Optional
internalId string No
Returns : void
Protected Abstract removeSelectedId
removeSelectedId(internalId: string)
Inherited from DatasetPresenterComponent
Defined in DatasetPresenterComponent:197
Parameters :
Name Type Optional
internalId string No
Returns : void
Protected Abstract setSelectedId
setSelectedId(internalId: string)
Inherited from DatasetPresenterComponent
Defined in DatasetPresenterComponent:195
Parameters :
Name Type Optional
internalId string No
Returns : void
Protected Abstract timeIntervalChanges
timeIntervalChanges()
Inherited from DatasetPresenterComponent
Defined in DatasetPresenterComponent:189
Returns : void
Protected Abstract onResize
onResize()
Inherited from ResizableComponent
Defined in ResizableComponent:10
Returns : void

Properties

Private additionalDataDiffer
Type : IterableDiffer<AdditionalData>
Defined in libs/d3/src/lib/extended-data-d3-timeseries-graph/extended-data-d3-timeseries-graph.component.ts:80
Private addLineWidth
Type : number
Default value : 2
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:117
Private background
Type : d3.Selection<SVGSVGElement | any | any | any>
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:93
Private currentTimeId
Type : string
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:120
Public d3Elem
Type : ElementRef
Decorators :
@ViewChild('d3timeseries', {static: true})
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:85
Protected datasetMap
Type : Map<string | DataConst>
Default value : new Map()
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:98
Protected graph
Type : d3.Selection<SVGSVGElement | any | any | any>
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:91
Protected graphBody
Type : any
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:92
Private graphInteraction
Type : d3.Selection<SVGSVGElement | any | any | any>
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:143
Private height
Type : number
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:108
Public highlightOutput
Type : HighlightOutput
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:87
Private lastHoverPositioning
Type : number
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:142
Private leftOffset
Type : number
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:106
Private listOfSeparation
Default value : Array()
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:102
Protected listOfUoms
Type : string[]
Default value : []
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:99
Private loadingCounter
Type : number
Default value : 0
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:118
Private loadingData
Type : Set<string>
Default value : new Set()
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:119
Private margin
Type : object
Default value : { top: 10, right: 10, bottom: 40, left: 40 }
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:110
Private maxLabelwidth
Type : number
Default value : 0
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:116
Private observer
Type : Set<D3GraphObserver>
Default value : new Set()
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:122
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 }
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:127
Protected preparedAxes
Type : Map<string | YAxisSettings>
Default value : new Map()
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:97
Protected preparedData
Type : InternalDataEntry[]
Default value : []
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:96
Protected rawSvg
Type : d3.Selection<SVGSVGElement | any | any | any>
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:90
Private runningDataRequests
Type : Map<string | Subscription>
Default value : new Map()
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:124
Private width
Type : number
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:109
Private xScaleBase
Type : d3.ScaleTime<number | number>
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:104
Private yAxes
Type : YAxis[]
Default value : []
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:101

calculated y axes for the diagram

Private yScaleBase
Type : d3.ScaleLinear<number | number>
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:105
Private datasetIdsDiffer
Type : IterableDiffer<string>
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:104
Private langChangeSubscription
Type : Subscription
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:106
Protected oldDatasetOptions
Type : Map<string | T>
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:57
Protected oldPresenterOptions
Type : U
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:64
Private selectedDatasetIdsDiffer
Type : IterableDiffer<string>
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:105
Protected timespan
Type : Timespan
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:102
Private timezoneSubscription
Type : Subscription
Inherited from D3TimeseriesGraphComponent
Defined in D3TimeseriesGraphComponent:107
Private datasetIdsDiffer
Type : IterableDiffer<string>
Inherited from DatasetPresenterComponent
Defined in DatasetPresenterComponent:104
Private langChangeSubscription
Type : Subscription
Inherited from DatasetPresenterComponent
Defined in DatasetPresenterComponent:106
Protected oldDatasetOptions
Type : Map<string | T>
Inherited from DatasetPresenterComponent
Defined in DatasetPresenterComponent:57
Protected oldPresenterOptions
Type : U
Inherited from DatasetPresenterComponent
Defined in DatasetPresenterComponent:64
Private selectedDatasetIdsDiffer
Type : IterableDiffer<string>
Inherited from DatasetPresenterComponent
Defined in DatasetPresenterComponent:105
Protected timespan
Type : Timespan
Inherited from DatasetPresenterComponent
Defined in DatasetPresenterComponent:102
Private timezoneSubscription
Type : Subscription
Inherited from DatasetPresenterComponent
Defined in DatasetPresenterComponent:107 
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 ""