libs/d3/src/lib/d3-timeseries-graph/controls/d3-graph-copyright/d3-graph-copyright.component.ts
encapsulation | ViewEncapsulation.None |
selector | n52-d3-graph-copyright |
styleUrls | ./d3-graph-copyright.component.scss |
Properties |
|
Methods |
|
Inputs |
constructor(graphId: D3GraphId, graphs: D3Graphs, graphHelper: D3GraphHelperService)
|
||||||||||||
Parameters :
|
copyright | |
Type : D3Copyright
|
|
Copyright, which should be shown on the graph |
Public adjustBackground | ||||||||||||||||||
adjustBackground(background: d3.Selection
|
||||||||||||||||||
Parameters :
Returns :
void
|
Private createLabelRect |
createLabelRect()
|
Returns :
void
|
Private createLabelText |
createLabelText()
|
Returns :
void
|
Public graphInitialized | ||||||
graphInitialized(graph: D3TimeseriesGraphComponent)
|
||||||
Parameters :
Returns :
void
|
Public ngOnChanges | ||||||
ngOnChanges(changes: SimpleChanges)
|
||||||
Parameters :
Returns :
void
|
Private setText |
setText()
|
Returns :
void
|
Public Optional adjustYAxis | ||||||
adjustYAxis(axis: YAxis)
|
||||||
Inherited from
D3TimeseriesGraphControl
|
||||||
Defined in
D3TimeseriesGraphControl:77
|
||||||
Parameters :
Returns :
void
|
Public Abstract graphInitialized | ||||||
graphInitialized(graph: D3TimeseriesGraphComponent)
|
||||||
Inherited from
D3TimeseriesGraphControl
|
||||||
Defined in
D3TimeseriesGraphControl:75
|
||||||
Parameters :
Returns :
any
|
Public ngAfterViewInit |
ngAfterViewInit()
|
Inherited from
D3TimeseriesGraphControl
|
Defined in
D3TimeseriesGraphControl:63
|
Returns :
void
|
Public ngOnDestroy |
ngOnDestroy()
|
Inherited from
D3TimeseriesGraphControl
|
Defined in
D3TimeseriesGraphControl:71
|
Returns :
void
|
Private background |
Type : d3.Selection<SVGSVGElement | any | any | any>
|
Private copyrightLayer |
Type : d3.Selection<SVGGElement | any | any | any>
|
Private d3Graph |
Type : D3TimeseriesGraphComponent
|
Private graphExtent |
Type : D3GraphExtent
|
Private labelRect |
Type : d3.Selection<BaseType | any | any | any>
|
Private labelText |
Type : d3.Selection<BaseType | any | any | any>
|
import { Component, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
import { Timespan } from '@helgoland/core';
import { D3GraphHelperService } from '../../../helper/d3-graph-helper.service';
import { D3GraphId } from '../../../helper/d3-graph-id.service';
import { D3Graphs } from '../../../helper/d3-graphs.service';
import { InternalDataEntry } from '../../../model/d3-general';
import { D3Copyright } from '../../../model/d3-plot-options';
import { D3GraphExtent, D3TimeseriesGraphControl } from '../../d3-timeseries-graph-control';
import { D3TimeseriesGraphComponent } from '../../d3-timeseries-graph.component';
import { BaseType } from 'd3';
@Component({
selector: 'n52-d3-graph-copyright',
template: '',
styleUrls: ['./d3-graph-copyright.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class D3GraphCopyrightComponent extends D3TimeseriesGraphControl implements OnChanges {
/**
* Copyright, which should be shown on the graph
*/
@Input() copyright: D3Copyright;
private d3Graph: D3TimeseriesGraphComponent;
private copyrightLayer: d3.Selection<SVGGElement, any, any, any>;
private labelRect: d3.Selection<BaseType, any, any, any>;
private labelText: d3.Selection<BaseType, any, any, any>;
private background: d3.Selection<SVGSVGElement, any, any, any>;
private graphExtent: D3GraphExtent;
constructor(
protected graphId: D3GraphId,
protected graphs: D3Graphs,
protected graphHelper: D3GraphHelperService
) {
super(graphId, graphs, graphHelper);
}
public ngOnChanges(changes: SimpleChanges): void {
if (changes.copyright && this.copyright) {
this.setText();
}
}
public graphInitialized(graph: D3TimeseriesGraphComponent) {
this.d3Graph = graph;
}
public adjustBackground(
background: d3.Selection<SVGSVGElement, any, any, any>,
graphExtent: D3GraphExtent,
preparedData: InternalDataEntry[],
graph: d3.Selection<SVGSVGElement, any, any, any>,
timespan: Timespan
): void {
this.background = background;
this.graphExtent = graphExtent;
if (this.copyright) {
if (!this.copyrightLayer) {
this.copyrightLayer = this.d3Graph.getDrawingLayer('copyright');
this.createLabelRect();
this.createLabelText();
this.setText();
}
}
}
private createLabelText() {
this.labelText = this.copyrightLayer.append('svg:text')
.attr('class', 'copyright-text')
.style('pointer-events', 'none');
}
private createLabelRect() {
this.labelRect = this.copyrightLayer.append('svg:rect')
.attr('class', 'copyright-rect')
.style('fill', 'none')
.style('stroke', 'none')
.style('pointer-events', 'none');
}
private setText() {
if (this.copyrightLayer) {
const backgroundDim = this.graphHelper.getDimensions(this.background.node());
let x = 3;
let y = 3;
this.labelText.text(this.copyright.label);
if (this.copyright.positionX === 'right') {
x = backgroundDim.w - this.graphExtent.margin.right - this.graphHelper.getDimensions(this.labelText.node()).w;
}
if (this.copyright.positionY === 'bottom') {
y = backgroundDim.h - this.graphExtent.margin.top * 2;
}
const yTransform = y + this.graphHelper.getDimensions(this.labelText.node()).h - 3;
const xTransform = this.graphExtent.leftOffset + x;
this.labelText
.attr('transform', 'translate(' + xTransform + ', ' + yTransform + ')');
this.labelRect.attr('width', this.graphHelper.getDimensions(this.labelText.node()).w)
.attr('height', this.graphHelper.getDimensions(this.labelText.node()).h)
.attr('transform', 'translate(' + xTransform + ', ' + y + ')');
}
}
}
./d3-graph-copyright.component.scss
.copyright-text {
fill: grey;
}