energylink/public/app/plugins/panel/heatmap/heatmap_tooltip.ts

///<reference path="../../../headers/common.d.ts" />

import d3 from 'd3';
import $ from 'jquery';
import _ from 'lodash';
import kbn from 'app/core/utils/kbn';
import {getValueBucketBound} from './heatmap_data_converter';

let TOOLTIP_PADDING_X = 30;
let TOOLTIP_PADDING_Y = 5;
let HISTOGRAM_WIDTH = 160;
let HISTOGRAM_HEIGHT = 40;

export class HeatmapTooltip {
  tooltip: any;
  scope: any;
  dashboard: any;
  panel: any;
  heatmapPanel: any;
  mouseOverBucket: boolean;
  originalFillColor: any;

  constructor(elem, scope) {
    this.scope = scope;
    this.dashboard = scope.ctrl.dashboard;
    this.panel = scope.ctrl.panel;
    this.heatmapPanel = elem;
    this.mouseOverBucket = false;
    this.originalFillColor = null;

    elem.on("mouseover", this.onMouseOver.bind(this));
    elem.on("mouseleave", this.onMouseLeave.bind(this));
  }

  onMouseOver(e) {
    if (!this.panel.tooltip.show || _.isEmpty(this.scope.ctrl.data.buckets)) { return; }

    if (!this.tooltip) {
      this.add();
      this.move(e);
    }
  }

  onMouseLeave() {
    this.destroy();
  }

  onMouseMove(e) {
    if (!this.panel.tooltip.show) { return; }

    this.move(e);
  }

  add() {
    this.tooltip = d3.select("body")
      .append("div")
      .attr("class", "heatmap-tooltip graph-tooltip grafana-tooltip");
  }

  destroy() {
    if (this.tooltip) {
      this.tooltip.remove();
    }

    this.tooltip = null;
  }

  show(pos, data) {
    if (!this.panel.tooltip.show || !data) { return; }

    let {xBucketIndex, yBucketIndex} = this.getBucketIndexes(pos, data);

    if (!data.buckets[xBucketIndex] || !this.tooltip) {
      this.destroy();
      return;
    }

    let boundBottom, boundTop, valuesNumber;
    let xData = data.buckets[xBucketIndex];
    let yData = xData.buckets[yBucketIndex];

    let tooltipTimeFormat = 'YYYY-MM-DD HH:mm:ss';
    let time = this.dashboard.formatDate(xData.x, tooltipTimeFormat);
    let decimals = this.panel.tooltipDecimals || 5;
    let valueFormatter = this.valueFormatter(decimals);

    let tooltipHtml = `<div class="graph-tooltip-time">${time}</div>
      <div class="heatmap-histogram"></div>`;

    if (yData) {
      boundBottom = valueFormatter(yData.bounds.bottom);
      boundTop = valueFormatter(yData.bounds.top);
      valuesNumber = yData.values.length;
      tooltipHtml += `<div>
        bucket: <b>${boundBottom} - ${boundTop}</b> <br>
        count: <b>${valuesNumber}</b> <br>
      </div>`;

      if (this.panel.tooltip.seriesStat && yData.seriesStat) {
        tooltipHtml = this.addSeriesStat(tooltipHtml, yData.seriesStat);
      }
    } else {
      if (!this.panel.tooltip.showHistogram) {
        this.destroy();
        return;
      }
      boundBottom = yBucketIndex;
      boundTop = '';
      valuesNumber = 0;
    }

    this.tooltip.html(tooltipHtml);

    if (this.panel.tooltip.showHistogram) {
      this.addHistogram(xData);
    }

    this.move(pos);
  }

  getBucketIndexes(pos, data) {
    let xBucketIndex, yBucketIndex;

    // if panelRelY is defined another panel wants us to show a tooltip
    if (pos.panelRelY) {
      xBucketIndex = getValueBucketBound(pos.x, data.xBucketSize, 1);
      let y = this.scope.yScale.invert(pos.panelRelY * this.scope.chartHeight);
      yBucketIndex = getValueBucketBound(y, data.yBucketSize, this.panel.yAxis.logBase);
      pos = this.getSharedTooltipPos(pos);

      if (!this.tooltip) {
        // Add shared tooltip for panel
        this.add();
      }
    } else {
      xBucketIndex = this.getXBucketIndex(pos.offsetX, data);
      yBucketIndex = this.getYBucketIndex(pos.offsetY, data);
    }

    return {xBucketIndex, yBucketIndex};
  }

  getXBucketIndex(offsetX, data) {
    let x = this.scope.xScale.invert(offsetX - this.scope.yAxisWidth).valueOf();
    let xBucketIndex = getValueBucketBound(x, data.xBucketSize, 1);
    return xBucketIndex;
  }

  getYBucketIndex(offsetY, data) {
    let y = this.scope.yScale.invert(offsetY - this.scope.chartTop);
    let yBucketIndex = getValueBucketBound(y, data.yBucketSize, this.panel.yAxis.logBase);
    return yBucketIndex;
  }

  getSharedTooltipPos(pos) {
    // get pageX from position on x axis and pageY from relative position in original panel
    pos.pageX = this.heatmapPanel.offset().left + this.scope.xScale(pos.x);
    pos.pageY = this.heatmapPanel.offset().top + this.scope.chartHeight * pos.panelRelY;
    return pos;
  }

  addSeriesStat(tooltipHtml, seriesStat) {
    tooltipHtml += "series: <br>";
    _.forEach(seriesStat, (values, series) => {
      tooltipHtml += `&nbsp;&nbsp;-&nbsp;&nbsp;${series}: <b>${values}</b><br>`;
    });

    return tooltipHtml;
  }

  addHistogram(data) {
    let xBucket = this.scope.ctrl.data.buckets[data.x];
    let yBucketSize = this.scope.ctrl.data.yBucketSize;
    let {min, max, ticks} = this.scope.ctrl.data.yAxis;
    let histogramData = _.map(xBucket.buckets, bucket => {
      return [bucket.y, bucket.values.length];
    });
    histogramData = _.filter(histogramData, d => {
      return d[0] >= min && d[0] <= max;
    });

    let scale = this.scope.yScale.copy();
    let histXScale = scale
      .domain([min, max])
      .range([0, HISTOGRAM_WIDTH]);

    let barWidth;
    if (this.panel.yAxis.logBase === 1) {
      barWidth = Math.floor(HISTOGRAM_WIDTH / (max - min) * yBucketSize * 0.9);
    } else {
      barWidth = Math.floor(HISTOGRAM_WIDTH / ticks / yBucketSize * 0.9);
    }
    barWidth = Math.max(barWidth, 1);

    let histYScale = d3.scaleLinear()
      .domain([0, _.max(_.map(histogramData, d => d[1]))])
      .range([0, HISTOGRAM_HEIGHT]);

    let histogram = this.tooltip.select(".heatmap-histogram")
      .append("svg")
      .attr("width", HISTOGRAM_WIDTH)
      .attr("height", HISTOGRAM_HEIGHT);

    histogram.selectAll(".bar").data(histogramData)
      .enter().append("rect")
      .attr("x", d => {
        return histXScale(d[0]);
      })
      .attr("width", barWidth)
      .attr("y", d => {
        return HISTOGRAM_HEIGHT - histYScale(d[1]);
      })
      .attr("height", d => {
        return histYScale(d[1]);
      });
  }

  move(pos) {
    if (!this.tooltip) { return; }

    let elem = $(this.tooltip.node())[0];
    let tooltipWidth = elem.clientWidth;
    let tooltipHeight = elem.clientHeight;

    let left = pos.pageX + TOOLTIP_PADDING_X;
    let top = pos.pageY + TOOLTIP_PADDING_Y;

    if (pos.pageX + tooltipWidth + 40 > window.innerWidth) {
      left = pos.pageX - tooltipWidth - TOOLTIP_PADDING_X;
    }

    if (pos.pageY - window.pageYOffset + tooltipHeight + 20 > window.innerHeight) {
      top = pos.pageY - tooltipHeight - TOOLTIP_PADDING_Y;
    }

    return this.tooltip
      .style("left", left + "px")
      .style("top", top + "px");
  }

  valueFormatter(decimals) {
    let format = this.panel.yAxis.format;
    return function(value) {
      if (_.isInteger(value)) {
        decimals = 0;
      }
      return kbn.valueFormats[format](value, decimals);
    };
  }
}