@grafana/flamegraph/dist/cjs/CallTree/ColorBarCell.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 ui = require('@grafana/ui');
var utils = require('./utils.cjs');

"use strict";
function ColorBarCell({
  node,
  data,
  colorScheme,
  theme,
  focusedNode
}) {
  const styles = ui.useStyles2(getStyles);
  const barColor = utils.getRowBarColor(node, data, colorScheme, theme);
  let barWidth;
  if (focusedNode) {
    if (node.id === focusedNode.parentId) {
      barWidth = "0%";
    } else {
      const relativePercent = focusedNode.total > 0 ? node.total / focusedNode.total * 100 : 0;
      barWidth = `${Math.min(relativePercent, 100)}%`;
    }
  } else {
    barWidth = `${Math.min(node.totalPercent, 100)}%`;
  }
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.colorBarContainer, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.colorBar, style: { width: barWidth, backgroundColor: barColor } }) });
}
function getStyles(theme) {
  return {
    colorBarContainer: css.css({
      width: "100%",
      height: "20px",
      display: "flex",
      alignItems: "center"
    }),
    colorBar: css.css({
      height: "16px",
      minWidth: "2px",
      borderRadius: theme.shape.radius.default
    })
  };
}

exports.ColorBarCell = ColorBarCell;
//# sourceMappingURL=ColorBarCell.cjs.map