libs/d3/src/lib/extended-data-d3-timeseries-graph/extended-data-d3-timeseries-graph.component.ts
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.
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 |
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 :
|
additionalData | |
Type : AdditionalData[]
|
|
Default value : []
|
|
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. |
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. |
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
|
Private generateAdditionalInternalId | ||||||
generateAdditionalInternalId(entry: AdditionalData)
|
||||||
Parameters :
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)
|
Inherited from
D3TimeseriesGraphComponent
|
Defined in
D3TimeseriesGraphComponent:221
|
Returns :
void
|
Private addReferenceValueData | ||||||||||||||||||||
addReferenceValueData(dataEntry: InternalDataEntry, styles: DatasetOptions, data: Data
|
||||||||||||||||||||
Inherited from
D3TimeseriesGraphComponent
|
||||||||||||||||||||
Defined in
D3TimeseriesGraphComponent:436
|
||||||||||||||||||||
Function to add referencevaluedata to the dataset (e.g. mean).
Parameters :
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 :
Returns :
number
|
Private calculatePointRadius | ||||||
calculatePointRadius(entry: InternalDataEntry)
|
||||||
Inherited from
D3TimeseriesGraphComponent
|
||||||
Defined in
D3TimeseriesGraphComponent:1370
|
||||||
Parameters :
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 :
Returns :
void
|
Private changeSelectedIds | |||||||||
changeSelectedIds(toHighlightDataset: HighlightDataset[], change: boolean)
|
|||||||||
Inherited from
D3TimeseriesGraphComponent
|
|||||||||
Defined in
D3TimeseriesGraphComponent:1108
|
|||||||||
Function that changes state of selected Ids.
Parameters :
Returns :
void
|
Public changeTime |
changeTime(from: number, to: number)
|
Inherited from
D3TimeseriesGraphComponent
|
Defined in
D3TimeseriesGraphComponent:281
|
Returns :
void
|
Private clickDataPoint | |||||||||
clickDataPoint(d: DataEntry, entry: InternalDataEntry)
|
|||||||||
Inherited from
D3TimeseriesGraphComponent
|
|||||||||
Defined in
D3TimeseriesGraphComponent:729
|
|||||||||
Parameters :
Returns :
void
|
Private createLine | |||||||||
createLine(xScaleBase: d3.ScaleTime
|
|||||||||
Inherited from
D3TimeseriesGraphComponent
|
|||||||||
Defined in
D3TimeseriesGraphComponent:1284
|
|||||||||
Parameters :
Returns :
any
|
Private createReferenceValueData | |||||||||
createReferenceValueData(data: Data
|
|||||||||
Inherited from
D3TimeseriesGraphComponent
|
|||||||||
Defined in
D3TimeseriesGraphComponent:449
|
|||||||||
Parameters :
Returns :
literal type[]
|
Protected createYAxisForId | ||||||
createYAxisForId(id: string)
|
||||||
Inherited from
D3TimeseriesGraphComponent
|
||||||
Defined in
D3TimeseriesGraphComponent:682
|
||||||
Parameters :
Returns :
void
|
Protected datasetOptionsChanged | ||||||||||||
datasetOptionsChanged(internalId: string, options: DatasetOptions, firstChange: boolean)
|
||||||||||||
Inherited from
D3TimeseriesGraphComponent
|
||||||||||||
Defined in
D3TimeseriesGraphComponent:262
|
||||||||||||
Parameters :
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 :
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 :
Returns :
void
|
Private drawLineChart | |||||||||
drawLineChart(entry: InternalDataEntry, yScaleBase: d3.ScaleLinear
|
|||||||||
Inherited from
D3TimeseriesGraphComponent
|
|||||||||
Defined in
D3TimeseriesGraphComponent:1177
|
|||||||||
Parameters :
Returns :
void
|
Private drawRefLineChart | |||||||||||||||
drawRefLineChart(data: DataEntry[], color: string, width: number, yScaleBase: d3.ScaleLinear
|
|||||||||||||||
Inherited from
D3TimeseriesGraphComponent
|
|||||||||||||||
Defined in
D3TimeseriesGraphComponent:1164
|
|||||||||||||||
Parameters :
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 :
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 :
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 :
Returns :
any
|
Public getDrawingLayer |
getDrawingLayer(id: string, front?: boolean)
|
Inherited from
D3TimeseriesGraphComponent
|
Defined in
D3TimeseriesGraphComponent:562
|
Returns :
d3.Selection<SVGGElement, any, any, any>
|
Private getFirstTick | |||||||||
getFirstTick(start: moment.Moment, t: literal type)
|
|||||||||
Inherited from
D3TimeseriesGraphComponent
|
|||||||||
Defined in
D3TimeseriesGraphComponent:897
|
|||||||||
Parameters :
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 :
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 :
Returns :
void
|
Private loadDatasetData | |||||||||
loadDatasetData(dataset: HelgolandTimeseries, force: boolean)
|
|||||||||
Inherited from
D3TimeseriesGraphComponent
|
|||||||||
Defined in
D3TimeseriesGraphComponent:299
|
|||||||||
Parameters :
Returns :
void
|
Private mousemoveBarHovering | |||||||||
mousemoveBarHovering(d: literal type, entry: InternalDataEntry)
|
|||||||||
Inherited from
D3TimeseriesGraphComponent
|
|||||||||
Defined in
D3TimeseriesGraphComponent:1264
|
|||||||||
Parameters :
Returns :
void
|
Private mouseoutBarHovering | |||||||||||||||
mouseoutBarHovering(d: literal type, rectElems: any[], idx: number, entry: InternalDataEntry)
|
|||||||||||||||
Inherited from
D3TimeseriesGraphComponent
|
|||||||||||||||
Defined in
D3TimeseriesGraphComponent:1274
|
|||||||||||||||
Parameters :
Returns :
void
|
Private mouseoverBarHovering | |||||||||||||||
mouseoverBarHovering(d: literal type, rectElems: any[], idx: number, entry: InternalDataEntry)
|
|||||||||||||||
Inherited from
D3TimeseriesGraphComponent
|
|||||||||||||||
Defined in
D3TimeseriesGraphComponent:1241
|
|||||||||||||||
Parameters :
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 :
Returns :
void
|
Protected onLanguageChanged | ||||||
onLanguageChanged(langChangeEvent: LangChangeEvent)
|
||||||
Inherited from
D3TimeseriesGraphComponent
|
||||||
Defined in
D3TimeseriesGraphComponent:205
|
||||||
Parameters :
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 :
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 :
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 :
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 :
Returns :
void
|
Public reloadDataForDatasets | ||||||
reloadDataForDatasets(datasetIds: string[])
|
||||||
Inherited from
D3TimeseriesGraphComponent
|
||||||
Defined in
D3TimeseriesGraphComponent:213
|
||||||
Parameters :
Returns :
void
|
Protected removeDataset | ||||||
removeDataset(internalId: string)
|
||||||
Inherited from
D3TimeseriesGraphComponent
|
||||||
Defined in
D3TimeseriesGraphComponent:228
|
||||||
Parameters :
Returns :
void
|
Protected removeSelectedId | ||||||
removeSelectedId(internalId: string)
|
||||||
Inherited from
D3TimeseriesGraphComponent
|
||||||
Defined in
D3TimeseriesGraphComponent:248
|
||||||
Parameters :
Returns :
void
|
Private round | |||||||||
round(date: moment.Moment, duration: moment.Duration)
|
|||||||||
Inherited from
D3TimeseriesGraphComponent
|
|||||||||
Defined in
D3TimeseriesGraphComponent:901
|
|||||||||
Parameters :
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 :
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 :
Returns :
void
|
Private tickInterval |
tickInterval(interval: number, start: number, stop: number)
|
Inherited from
D3TimeseriesGraphComponent
|
Defined in
D3TimeseriesGraphComponent:907
|
Returns :
literal type
|
Private ticks |
ticks(ts: Timespan, interval: number)
|
Inherited from
D3TimeseriesGraphComponent
|
Defined in
D3TimeseriesGraphComponent:883
|
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 :
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 :
Returns :
void
|
Protected Abstract addDataset |
addDataset(id: string, url: string)
|
Inherited from
D3TimeseriesGraphComponent
|
Defined in
D3TimeseriesGraphComponent:191
|
Returns :
void
|
Protected addDatasetByInternalId | ||||||
addDatasetByInternalId(internalId: string)
|
||||||
Inherited from
D3TimeseriesGraphComponent
|
||||||
Defined in
D3TimeseriesGraphComponent:180
|
||||||
Parameters :
Returns :
void
|
Protected Abstract datasetOptionsChanged |
datasetOptionsChanged(internalId: string, options: T, firstChange: boolean)
|
Inherited from
D3TimeseriesGraphComponent
|
Defined in
D3TimeseriesGraphComponent:201
|
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 :
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 :
Returns :
void
|
Protected Abstract onTimezoneChanged | ||||||
onTimezoneChanged(timezone: string)
|
||||||
Inherited from
D3TimeseriesGraphComponent
|
||||||
Defined in
D3TimeseriesGraphComponent:187
|
||||||
Parameters :
Returns :
void
|
Protected Abstract presenterOptionsChanged | ||||||
presenterOptionsChanged(options: U)
|
||||||
Inherited from
D3TimeseriesGraphComponent
|
||||||
Defined in
D3TimeseriesGraphComponent:199
|
||||||
Parameters :
Returns :
void
|
Public Abstract reloadDataForDatasets | ||||||
reloadDataForDatasets(datasets: string[])
|
||||||
Inherited from
D3TimeseriesGraphComponent
|
||||||
Defined in
D3TimeseriesGraphComponent:178
|
||||||
Parameters :
Returns :
void
|
Protected Abstract removeDataset | ||||||
removeDataset(internalId: string)
|
||||||
Inherited from
D3TimeseriesGraphComponent
|
||||||
Defined in
D3TimeseriesGraphComponent:193
|
||||||
Parameters :
Returns :
void
|
Protected Abstract removeSelectedId | ||||||
removeSelectedId(internalId: string)
|
||||||
Inherited from
D3TimeseriesGraphComponent
|
||||||
Defined in
D3TimeseriesGraphComponent:197
|
||||||
Parameters :
Returns :
void
|
Protected Abstract setSelectedId | ||||||
setSelectedId(internalId: string)
|
||||||
Inherited from
D3TimeseriesGraphComponent
|
||||||
Defined in
D3TimeseriesGraphComponent:195
|
||||||
Parameters :
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
|
Returns :
void
|
Protected addDatasetByInternalId | ||||||
addDatasetByInternalId(internalId: string)
|
||||||
Inherited from
DatasetPresenterComponent
|
||||||
Defined in
DatasetPresenterComponent:180
|
||||||
Parameters :
Returns :
void
|
Protected Abstract datasetOptionsChanged |
datasetOptionsChanged(internalId: string, options: T, firstChange: boolean)
|
Inherited from
DatasetPresenterComponent
|
Defined in
DatasetPresenterComponent:201
|
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 :
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 :
Returns :
void
|
Protected Abstract onTimezoneChanged | ||||||
onTimezoneChanged(timezone: string)
|
||||||
Inherited from
DatasetPresenterComponent
|
||||||
Defined in
DatasetPresenterComponent:187
|
||||||
Parameters :
Returns :
void
|
Protected Abstract presenterOptionsChanged | ||||||
presenterOptionsChanged(options: U)
|
||||||
Inherited from
DatasetPresenterComponent
|
||||||
Defined in
DatasetPresenterComponent:199
|
||||||
Parameters :
Returns :
void
|
Public Abstract reloadDataForDatasets | ||||||
reloadDataForDatasets(datasets: string[])
|
||||||
Inherited from
DatasetPresenterComponent
|
||||||
Defined in
DatasetPresenterComponent:178
|
||||||
Parameters :
Returns :
void
|
Protected Abstract removeDataset | ||||||
removeDataset(internalId: string)
|
||||||
Inherited from
DatasetPresenterComponent
|
||||||
Defined in
DatasetPresenterComponent:193
|
||||||
Parameters :
Returns :
void
|
Protected Abstract removeSelectedId | ||||||
removeSelectedId(internalId: string)
|
||||||
Inherited from
DatasetPresenterComponent
|
||||||
Defined in
DatasetPresenterComponent:197
|
||||||
Parameters :
Returns :
void
|
Protected Abstract setSelectedId | ||||||
setSelectedId(internalId: string)
|
||||||
Inherited from
DatasetPresenterComponent
|
||||||
Defined in
DatasetPresenterComponent:195
|
||||||
Parameters :
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
|
Private additionalDataDiffer |
Type : IterableDiffer<AdditionalData>
|
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;
}
}