File

libs/d3/src/lib/d3-timeseries-graph/controls/d3-graph-copyright/d3-graph-copyright.component.ts

Extends

D3TimeseriesGraphControl

Implements

OnChanges

Metadata

encapsulation ViewEncapsulation.None
selector n52-d3-graph-copyright
styleUrls ./d3-graph-copyright.component.scss

Index

Properties
Methods
Inputs

Constructor

constructor(graphId: D3GraphId, graphs: D3Graphs, graphHelper: D3GraphHelperService)
Parameters :
Name Type Optional
graphId D3GraphId No
graphs D3Graphs No
graphHelper D3GraphHelperService No

Inputs

copyright
Type : D3Copyright

Copyright, which should be shown on the graph

Methods

Public adjustBackground
adjustBackground(background: d3.Selection, graphExtent: D3GraphExtent, preparedData: InternalDataEntry[], graph: d3.Selection, timespan: Timespan)
Parameters :
Name Type Optional
background d3.Selection<SVGSVGElement | any | any | any> No
graphExtent D3GraphExtent No
preparedData InternalDataEntry[] No
graph d3.Selection<SVGSVGElement | any | any | any> No
timespan Timespan No
Returns : void
Private createLabelRect
createLabelRect()
Returns : void
Private createLabelText
createLabelText()
Returns : void
Public graphInitialized
graphInitialized(graph: D3TimeseriesGraphComponent)
Parameters :
Name Type Optional
graph D3TimeseriesGraphComponent No
Returns : void
Public ngOnChanges
ngOnChanges(changes: SimpleChanges)
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void
Private setText
setText()
Returns : void
Public Optional adjustYAxis
adjustYAxis(axis: YAxis)
Inherited from D3TimeseriesGraphControl
Parameters :
Name Type Optional
axis YAxis No
Returns : void
Public Abstract graphInitialized
graphInitialized(graph: D3TimeseriesGraphComponent)
Inherited from D3TimeseriesGraphControl
Parameters :
Name Type Optional
graph D3TimeseriesGraphComponent No
Returns : any
Public ngAfterViewInit
ngAfterViewInit()
Inherited from D3TimeseriesGraphControl
Returns : void
Public ngOnDestroy
ngOnDestroy()
Inherited from D3TimeseriesGraphControl
Returns : void

Properties

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;   
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""