File

libs/d3/src/lib/helper/hovering/d3-simple-hovering.service.ts

Extends

D3HoveringService

Index

Properties
Methods

Constructor

constructor(timezoneSrvc: TimezoneService)
Parameters :
Name Type Optional
timezoneSrvc TimezoneService No

Methods

Protected calculatePointRadius
calculatePointRadius(entry: InternalDataEntry)
Parameters :
Name Type Optional
entry InternalDataEntry No
Returns : any
Public hidePointHovering
hidePointHovering(d: DataEntry, entry: InternalDataEntry)
Parameters :
Name Type Optional
d DataEntry No
entry InternalDataEntry No
Returns : void
Public initPointHovering
initPointHovering(elem: d3.Selection)
Parameters :
Name Type Optional
elem d3.Selection<SVGGElement | any | any | any> No
Returns : void
Protected leftSidedTooltip
leftSidedTooltip(background: any, x: number)
Parameters :
Name Type Optional
background any No
x number No
Returns : boolean
Public positioningPointHovering
positioningPointHovering(x: number, y: number, color: string, background: any)
Parameters :
Name Type Optional
x number No
y number No
color string No
background any No
Returns : void
Protected setHoveringLabel
setHoveringLabel(d: DataEntry, entry: InternalDataEntry, timeseries: HelgolandTimeseries)
Parameters :
Name Type Optional
d DataEntry No
entry InternalDataEntry No
timeseries HelgolandTimeseries No
Returns : void
Public showPointHovering
showPointHovering(d: DataEntry, entry: InternalDataEntry, timeseries: HelgolandTimeseries)
Parameters :
Name Type Optional
d DataEntry No
entry InternalDataEntry No
timeseries HelgolandTimeseries No
Returns : void
Public Abstract hidePointHovering
hidePointHovering(d: DataEntry, entry: InternalDataEntry)
Inherited from D3HoveringService
Parameters :
Name Type Optional
d DataEntry No
entry InternalDataEntry No
Returns : any
Public Abstract initPointHovering
initPointHovering(elem: d3.Selection)
Inherited from D3HoveringService
Parameters :
Name Type Optional
elem d3.Selection<SVGGElement | any | any | any> No
Returns : any
Public Abstract positioningPointHovering
positioningPointHovering(x: number, y: number, color: string, background: any)
Inherited from D3HoveringService
Parameters :
Name Type Optional
x number No
y number No
color string No
background any No
Returns : any
Public Abstract showPointHovering
showPointHovering(d: DataEntry, entry: InternalDataEntry, timeseries: HelgolandTimeseries)
Inherited from D3HoveringService
Parameters :
Name Type Optional
d DataEntry No
entry InternalDataEntry No
timeseries HelgolandTimeseries No
Returns : any

Properties

Protected addLineWidth
Type : number
Default value : 2
Protected graphHelper
Type : D3GraphHelperService
Default value : new D3GraphHelperService()
Protected highlightRect
Type : d3.Selection<SVGGElement | any | any | any>
Protected highlightText
Type : d3.Selection<SVGGElement | any | any | any>
import 'moment-timezone';

import { Injectable } from '@angular/core';
import { HelgolandTimeseries, TimezoneService } from '@helgoland/core';
import * as d3 from 'd3';

import { DataEntry, InternalDataEntry } from '../../model/d3-general';
import { D3GraphHelperService } from './../d3-graph-helper.service';
import { D3HoveringService } from './d3-hovering-service';

@Injectable()
export class D3SimpleHoveringService extends D3HoveringService {

  protected highlightRect: d3.Selection<SVGGElement, any, any, any>;
  protected highlightText: d3.Selection<SVGGElement, any, any, any>;
  protected graphHelper: D3GraphHelperService = new D3GraphHelperService();

  protected addLineWidth = 2; // value added to linewidth

  constructor(
    protected timezoneSrvc: TimezoneService
  ) {
    super();
  }

  public initPointHovering(elem: d3.Selection<SVGGElement, any, any, any>) {
    this.highlightRect = elem.append('svg:rect');
    this.highlightText = elem.append('g');
  }

  public hidePointHovering(d: DataEntry, entry: InternalDataEntry) {
    if (this.highlightRect) { this.highlightRect.style('visibility', 'hidden'); }
    if (this.highlightText) { this.highlightText.selectAll('*').remove(); }
    // unhighlight hovered dot
    d3.select('#dot-' + d.timestamp + '-' + entry.hoverId)
      .attr('opacity', 1)
      .attr('r', this.calculatePointRadius(entry));
  }

  public showPointHovering(d: DataEntry, entry: InternalDataEntry, timeseries: HelgolandTimeseries) {
    if (this.highlightRect) { this.highlightRect.style('visibility', 'visible'); }
    if (this.highlightText) { this.highlightText.style('visibility', 'visible'); }

    // highlight hovered dot
    d3.select('#dot-' + d.timestamp + '-' + entry.hoverId)
      .attr('opacity', 0.8)
      .attr('r', this.calculatePointRadius(entry) + 3);

    this.setHoveringLabel(d, entry, timeseries);
  }

  public positioningPointHovering(x: number, y: number, color: string, background: any) {
    const padding = 2;
    const fontSize = 14; // shift for this size down
    const onLeftSide = this.leftSidedTooltip(background, x);
    const rectW: number = this.graphHelper.getDimensions(this.highlightText.node()).w;
    const rectH: number = this.graphHelper.getDimensions(this.highlightText.node()).h;
    let rectX: number = x + 15; // offset for right-side tooltip
    let rectY: number = y;
    if (!onLeftSide) {
      rectX = x - rectW - 10 - 2 * padding;
      rectY = y;
    }
    if ((y + rectH + 4) > background.node().getBBox().height) {
      rectY = rectY - rectH;
    }
    // create hovering label
    this.highlightRect
      .attr('class', 'mouseHoverDotRect')
      .style('fill', 'white')
      .style('fill-opacity', 1)
      .style('stroke', color)
      .style('stroke-width', '1px')
      .style('pointer-events', 'none')
      .attr('width', rectW + 2 * padding)
      .attr('height', rectH + 2 * padding)
      .attr('transform', 'translate(' + rectX + ', ' + rectY + ')');
    let labelY: number = y + fontSize;
    if ((y + rectH + 4) > background.node().getBBox().height) {
      labelY = labelY - rectH;
    }
    this.highlightText.attr('transform', 'translate(' + (rectX + padding) + ', ' + (labelY + padding) + ')');
    // this.lastHoverPositioning = new Date().getTime();
  }

  protected leftSidedTooltip(background: any, x: number) {
    return (background.node().getBBox().width) / 2 > x;
  }

  protected setHoveringLabel(d: DataEntry, entry: InternalDataEntry, timeseries: HelgolandTimeseries) {
    const stringedValue = (typeof d.value === 'number') ? parseFloat(d.value.toPrecision(15)).toString() : d.value;
    this.highlightText.append('text')
      .text(`${stringedValue} ${entry.axisOptions.uom} ${this.timezoneSrvc.formatTzDate(d.timestamp)}`)
      .attr('class', 'mouseHoverDotLabel')
      .style('pointer-events', 'none')
      .style('fill', 'black');
  }

  protected calculatePointRadius(entry: InternalDataEntry) {
    if (entry.selected) {
      return entry.options.pointRadius > 0 ? entry.options.pointRadius + this.addLineWidth : entry.options.pointRadius;
    } else {
      return entry.options.pointRadius;
    }
  }

}

result-matching ""

    No results matching ""