@grafana/flamegraph/dist/cjs/FlameGraph/FlameGraphTooltip.cjs

Grafana flamegraph visualization component

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var data = require('@grafana/data');
var ui = require('@grafana/ui');

"use strict";
const FlameGraphTooltip = ({ data, item, totalTicks, position, collapseConfig }) => {
  const styles = ui.useStyles2(getStyles);
  if (!(item && position)) {
    return null;
  }
  let content;
  if (data.isDiffFlamegraph()) {
    const tableData = getDiffTooltipData(data, item, totalTicks);
    content = /* @__PURE__ */ jsxRuntime.jsx(
      ui.InteractiveTable,
      {
        className: styles.tooltipTable,
        columns: [
          { id: "label", header: "" },
          { id: "baseline", header: "Baseline" },
          { id: "comparison", header: "Comparison" },
          { id: "diff", header: "Diff" }
        ],
        data: tableData,
        getRowId: (originalRow) => originalRow.rowId
      }
    );
  } else {
    const tooltipData = getTooltipData(data, item, totalTicks);
    content = /* @__PURE__ */ jsxRuntime.jsxs("p", { className: styles.lastParagraph, children: [
      tooltipData.unitTitle,
      /* @__PURE__ */ jsxRuntime.jsx("br", {}),
      "Total: ",
      /* @__PURE__ */ jsxRuntime.jsx("b", { children: tooltipData.unitValue }),
      " (",
      tooltipData.percentValue,
      "%)",
      /* @__PURE__ */ jsxRuntime.jsx("br", {}),
      "Self: ",
      /* @__PURE__ */ jsxRuntime.jsx("b", { children: tooltipData.unitSelf }),
      " (",
      tooltipData.percentSelf,
      "%)",
      /* @__PURE__ */ jsxRuntime.jsx("br", {}),
      "Samples: ",
      /* @__PURE__ */ jsxRuntime.jsx("b", { children: tooltipData.samples })
    ] });
  }
  return /* @__PURE__ */ jsxRuntime.jsx(ui.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.VizTooltipContainer, { className: styles.tooltipContainer, position, offset: { x: 15, y: 0 }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.tooltipContent, children: [
    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: styles.tooltipName, children: [
      data.getLabel(item.itemIndexes[0]),
      collapseConfig && collapseConfig.collapsed ? /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
        /* @__PURE__ */ jsxRuntime.jsx("br", {}),
        "and ",
        collapseConfig.items.length,
        " similar items"
      ] }) : ""
    ] }),
    content
  ] }) }) });
};
const getTooltipData = (data, item, totalTicks) => {
  const displayValue = data.valueDisplayProcessor(item.value);
  const displaySelf = data.getSelfDisplay(item.itemIndexes);
  const percentValue = Math.round(1e4 * (displayValue.numeric / totalTicks)) / 100;
  const percentSelf = Math.round(1e4 * (displaySelf.numeric / totalTicks)) / 100;
  let unitValue = displayValue.text + displayValue.suffix;
  let unitSelf = displaySelf.text + displaySelf.suffix;
  const unitTitle = data.getUnitTitle();
  if (unitTitle === "Count") {
    if (!displayValue.suffix) {
      unitValue = displayValue.text;
    }
    if (!displaySelf.suffix) {
      unitSelf = displaySelf.text;
    }
  }
  return {
    percentValue,
    percentSelf,
    unitTitle,
    unitValue,
    unitSelf,
    samples: displayValue.numeric.toLocaleString()
  };
};
const formatWithSuffix = (value, formatter) => {
  const displayValue = formatter(value);
  return displayValue.text + displayValue.suffix;
};
const getDiffTooltipData = (data$1, item, totalTicks) => {
  const levels = data$1.getLevels();
  const totalTicksRight = levels[0][0].valueRight;
  const totalTicksLeft = totalTicks - totalTicksRight;
  const valueLeft = item.value - item.valueRight;
  const percentageLeft = Math.round(1e4 * valueLeft / totalTicksLeft) / 100;
  const percentageRight = Math.round(1e4 * item.valueRight / totalTicksRight) / 100;
  const diff = (percentageRight - percentageLeft) / percentageLeft * 100;
  const displayValueLeft = getValueWithUnit(data$1, data$1.valueDisplayProcessor(valueLeft));
  const displayValueRight = getValueWithUnit(data$1, data$1.valueDisplayProcessor(item.valueRight));
  const shortValFormat = data.getValueFormat("short");
  return [
    {
      rowId: "1",
      label: "% of total",
      baseline: percentageLeft + "%",
      comparison: percentageRight + "%",
      diff: formatWithSuffix(diff, shortValFormat) + "%"
    },
    {
      rowId: "2",
      label: "Value",
      baseline: displayValueLeft,
      comparison: displayValueRight,
      diff: getValueWithUnit(data$1, data$1.valueDisplayProcessor(item.valueRight - valueLeft))
    },
    {
      rowId: "3",
      label: "Samples",
      baseline: formatWithSuffix(valueLeft, shortValFormat),
      comparison: formatWithSuffix(item.valueRight, shortValFormat),
      diff: formatWithSuffix(item.valueRight - valueLeft, shortValFormat)
    }
  ];
};
function getValueWithUnit(data, displayValue) {
  let unitValue = displayValue.text + displayValue.suffix;
  const unitTitle = data.getUnitTitle();
  if (unitTitle === "Count") {
    if (!displayValue.suffix) {
      unitValue = displayValue.text;
    }
  }
  return unitValue;
}
const getStyles = (theme) => ({
  tooltipContainer: css.css({
    title: "tooltipContainer",
    overflow: "hidden"
  }),
  tooltipContent: css.css({
    title: "tooltipContent",
    fontSize: theme.typography.bodySmall.fontSize,
    width: "100%"
  }),
  tooltipName: css.css({
    title: "tooltipName",
    marginTop: 0,
    wordBreak: "break-all"
  }),
  lastParagraph: css.css({
    title: "lastParagraph",
    marginBottom: 0
  }),
  name: css.css({
    title: "name",
    marginBottom: "10px"
  }),
  tooltipTable: css.css({
    title: "tooltipTable",
    maxWidth: "400px"
  })
});

exports.default = FlameGraphTooltip;
exports.getDiffTooltipData = getDiffTooltipData;
exports.getTooltipData = getTooltipData;
//# sourceMappingURL=FlameGraphTooltip.cjs.map