@grafana/ui/dist/cjs/components/Table/Cells/BarGaugeCell.cjs

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var data = require('@grafana/data');
var schema = require('@grafana/schema');
var BarGauge = require('../../BarGauge/BarGauge.cjs');
var DataLinksActionsTooltip = require('../DataLinksActionsTooltip.cjs');
var cellUtils = require('../cellUtils.cjs');

"use strict";
const defaultScale = {
  mode: data.ThresholdsMode.Absolute,
  steps: [
    {
      color: "blue",
      value: -Infinity
    },
    {
      color: "green",
      value: 20
    }
  ]
};
const BarGaugeCell = (props) => {
  var _a;
  const { field, innerWidth, tableStyles, cell, cellProps, row } = props;
  const displayValue = field.display(cell.value);
  const cellOptions = cellUtils.getCellOptions(field);
  let config = data.getFieldConfigWithMinMax(field, false);
  if (!config.thresholds) {
    config = {
      ...config,
      thresholds: defaultScale
    };
  }
  let barGaugeMode = schema.BarGaugeDisplayMode.Gradient;
  let valueDisplayMode = void 0;
  if (cellOptions.type === schema.TableCellDisplayMode.Gauge) {
    barGaugeMode = (_a = cellOptions.mode) != null ? _a : schema.BarGaugeDisplayMode.Gradient;
    valueDisplayMode = cellOptions.valueDisplayMode !== void 0 ? cellOptions.valueDisplayMode : schema.BarGaugeValueMode.Text;
  }
  const getLinks = () => {
    if (typeof field.getLinks !== "function") {
      return [];
    }
    return field.getLinks({ valueRowIndex: row.index });
  };
  const alignmentFactors = cellUtils.getAlignmentFactor(field, displayValue, cell.row.index);
  const renderComponent = () => {
    return /* @__PURE__ */ jsxRuntime.jsx(
      BarGauge.BarGauge,
      {
        width: innerWidth,
        height: tableStyles.cellHeightInner,
        field: config,
        display: field.display,
        text: { valueSize: 14 },
        value: displayValue,
        orientation: data.VizOrientation.Horizontal,
        theme: tableStyles.theme,
        alignmentFactors,
        itemSpacing: 1,
        lcdCellWidth: 8,
        displayMode: barGaugeMode,
        valueDisplayMode
      }
    );
  };
  const [tooltipCoords, setTooltipCoords] = React.useState();
  const { shouldShowLink, hasMultipleLinksOrActions } = cellUtils.getDataLinksActionsTooltipUtils(getLinks());
  const shouldShowTooltip = hasMultipleLinksOrActions && tooltipCoords !== void 0;
  const links = getLinks();
  return (
    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
    /* @__PURE__ */ jsxRuntime.jsx(
      "div",
      {
        ...cellProps,
        className: tableStyles.cellContainer,
        style: { ...cellProps.style, cursor: hasMultipleLinksOrActions ? "context-menu" : "auto" },
        onClick: ({ clientX, clientY }) => {
          setTooltipCoords({ clientX, clientY });
        },
        children: shouldShowLink ? DataLinksActionsTooltip.renderSingleLink(links[0], renderComponent()) : shouldShowTooltip ? /* @__PURE__ */ jsxRuntime.jsx(
          DataLinksActionsTooltip.DataLinksActionsTooltip,
          {
            links,
            value: renderComponent(),
            coords: tooltipCoords,
            onTooltipClose: () => setTooltipCoords(void 0)
          }
        ) : renderComponent()
      }
    )
  );
};

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