@netdata/charts/dist/es6/chartLibraries/dygraph/hoverX.js

Netdata frontend SDK and chart utilities

import getOffsets from "../../helpers/eventOffset";
import { isHeatmap } from "../../helpers/heatmap";
var shouldFindMaxValue = {
  stacked: true,
  stackedBar: true
};
export default (function (chartUI) {
  var getClosestHeatmapDimension = function getClosestHeatmapDimension(offsetY) {
    var _chartUI$chart$getVis, _chartUI$chart;
    var ids = (_chartUI$chart$getVis = (_chartUI$chart = chartUI.chart).getVisibleHeatmapIds) === null || _chartUI$chart$getVis === void 0 ? void 0 : _chartUI$chart$getVis.call(_chartUI$chart);
    if (!(ids !== null && ids !== void 0 && ids.length)) return;
    var dygraph = chartUI.getDygraph();
    var closestId;
    var closestDistance = Infinity;
    ids.forEach(function (id, index) {
      var y = dygraph.toDomYCoord(index);
      if (!Number.isFinite(y)) return;
      var distance = Math.abs(y - offsetY);
      if (distance < closestDistance) {
        closestId = id;
        closestDistance = distance;
      }
    });
    return closestId;
  };
  var findClosest = function findClosest(event, points) {
    if (!Array.isArray(points)) return {};
    var _dygraph = chartUI.getDygraph();
    var _getOffsets = getOffsets(event),
      offsetX = _getOffsets.offsetX,
      offsetY = _getOffsets.offsetY;
    if (offsetY > _dygraph.getArea().h - 10) return {
      seriesName: "ANNOTATIONS"
    };
    if (offsetY < 15) return {
      seriesName: "ANOMALY_RATE"
    };
    if (isHeatmap(chartUI.chart)) {
      var dimensionId = getClosestHeatmapDimension(offsetY);
      return dimensionId ? {
        dimensionId: dimensionId
      } : {};
    }
    if (shouldFindMaxValue[chartUI.chart.getAttribute("chartType")]) {
      var _closestPoint$point;
      var closestPoint = _dygraph.findStackedPoint(offsetX, offsetY);
      if (((_closestPoint$point = closestPoint.point) === null || _closestPoint$point === void 0 ? void 0 : _closestPoint$point.canvasy) > offsetY) {
        closestPoint = points.reduce(function (max, p) {
          return p.yval > max.yval ? p : max;
        }, {
          yval: -Infinity
        });
        closestPoint = {
          point: closestPoint,
          row: closestPoint.idx,
          seriesName: closestPoint.name
        };
      }
      return closestPoint;
    }
    return _dygraph.findClosestPoint(offsetX, offsetY);
  };
  var lastX;
  var lastY;
  var lastPoints;
  var lastTimestamp;
  var getDimension = function getDimension(event, points) {
    var _findClosest = findClosest(event, points),
      seriesName = _findClosest.seriesName,
      dimensionId = _findClosest.dimensionId;
    if (dimensionId) return dimensionId;
    if (!seriesName) return;
    var seriesProps = chartUI.getDygraph().getPropertiesForSeries(seriesName);
    if (!seriesProps) return;
    var dimensionIds = chartUI.chart.getPayloadDimensionIds();
    if (!(dimensionIds !== null && dimensionIds !== void 0 && dimensionIds.length)) return;
    return dimensionIds[seriesProps.column - 1] || seriesProps.name;
  };
  var highlight = function highlight(event, x, points) {
    if (lastTimestamp === x) return;
    lastPoints = points;
    lastTimestamp = x;
    var offsets = getOffsets(event);
    lastX = offsets.offsetX;
    lastY = offsets.offsetY;
    var dimensionId = getDimension(event, points);
    if (!dimensionId) return;
    chartUI.sdk.trigger("highlightHover", chartUI.chart, x, dimensionId);
    chartUI.chart.trigger("highlightHover", x, dimensionId);
  };
  var isNearAnnotation = function isNearAnnotation(event) {
    var overlays = chartUI.chart.getAttribute("overlays");
    var dygraph = chartUI.getDygraph();
    var _getOffsets2 = getOffsets(event),
      offsetX = _getOffsets2.offsetX;
    for (var _i = 0, _Object$values = Object.values(overlays); _i < _Object$values.length; _i++) {
      var overlay = _Object$values[_i];
      if (overlay.type === "annotation") {
        var annotationX = dygraph.toDomXCoord(overlay.timestamp * 1000);
        if (Math.abs(offsetX - annotationX) < 10) {
          return true;
        }
      }
    }
    return false;
  };
  var annotate = function annotate(event, x) {
    if (isNearAnnotation(event)) return;
    var existingDraft = chartUI.chart.getAttribute("draftAnnotation");
    if (existingDraft && existingDraft.status === "editing") return;
    chartUI.chart.updateAttribute("draftAnnotation", {
      timestamp: x / 1000,
      createdAt: new Date(),
      status: "draft"
    });
    chartUI.sdk.trigger("annotationCreate", chartUI.chart, x / 1000);
    chartUI.chart.trigger("annotationCreate", x / 1000);
  };
  var click = function click(event, x, points) {
    if (lastTimestamp === x) return;
    lastPoints = points;
    lastTimestamp = x;
    var offsets = getOffsets(event);
    lastX = offsets.offsetX;
    lastY = offsets.offsetY;
    var dimensionId = getDimension(event, points);
    annotate(event, x);
    chartUI.sdk.trigger("highlightClick", chartUI.chart, x, dimensionId);
    chartUI.chart.trigger("highlightClick", x, dimensionId);
  };
  var mousemove = function mousemove(event) {
    var _getOffsets3 = getOffsets(event),
      offsetX = _getOffsets3.offsetX,
      offsetY = _getOffsets3.offsetY;
    if (Math.abs(offsetX - lastX) < 5 && Math.abs(offsetY - lastY) < 5) return;
    lastX = offsetX;
    lastY = offsetY;
    var dimensionId = getDimension(event, lastPoints);
    if (!dimensionId) return;
    chartUI.sdk.trigger("highlightHover", chartUI.chart, lastTimestamp, dimensionId);
    chartUI.chart.trigger("highlightHover", lastTimestamp, dimensionId);
  };
  var mouseout = function mouseout() {
    chartUI.sdk.trigger("highlightBlur", chartUI.chart);
    chartUI.chart.trigger("highlightBlur");
  };
  var destroy = function destroy() {
    lastY = null;
    lastPoints = null;
    lastTimestamp = null;
    chartUI.off("highlightCallback", highlight);
    chartUI.off("mousemove", mousemove);
    chartUI.off("mouseout", mouseout);
    chartUI.off("click", click);
  };
  var toggle = function toggle(enabled) {
    return enabled ? chartUI.on("highlightCallback", highlight).on("mousemove", mousemove).on("mouseout", mouseout).on("click", click) : destroy();
  };
  return {
    toggle: toggle,
    destroy: destroy
  };
});