@grafana/ui/dist/cjs/components/Table/cellUtils.cjs

Grafana Components Library

'use strict';

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

var tinycolor = require('tinycolor2');
var data = require('@grafana/data');
var schema = require('@grafana/schema');
var colors = require('../../utils/colors.cjs');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

var tinycolor__default = /*#__PURE__*/_interopDefaultCompat(tinycolor);

"use strict";
function getTextAlign(field) {
  if (!field) {
    return "flex-start";
  }
  if (field.config.custom) {
    const custom = field.config.custom;
    switch (custom.align) {
      case "right":
        return "flex-end";
      case "left":
        return "flex-start";
      case "center":
        return "center";
    }
  }
  if (field.type === data.FieldType.number) {
    return "flex-end";
  }
  return "flex-start";
}
const defaultCellOptions = { type: schema.TableCellDisplayMode.Auto };
function getCellOptions(field) {
  var _a, _b, _c;
  if ((_a = field.config.custom) == null ? void 0 : _a.displayMode) {
    return migrateTableDisplayModeToCellOptions((_b = field.config.custom) == null ? void 0 : _b.displayMode);
  }
  if (!((_c = field.config.custom) == null ? void 0 : _c.cellOptions)) {
    return defaultCellOptions;
  }
  return field.config.custom.cellOptions;
}
function migrateTableDisplayModeToCellOptions(displayMode) {
  switch (displayMode) {
    // In the case of the gauge we move to a different option
    case "basic":
    case "gradient-gauge":
    case "lcd-gauge":
      let gaugeMode = schema.BarGaugeDisplayMode.Basic;
      if (displayMode === "gradient-gauge") {
        gaugeMode = schema.BarGaugeDisplayMode.Gradient;
      } else if (displayMode === "lcd-gauge") {
        gaugeMode = schema.BarGaugeDisplayMode.Lcd;
      }
      return {
        type: schema.TableCellDisplayMode.Gauge,
        mode: gaugeMode
      };
    // Also true in the case of the color background
    case "color-background":
    case "color-background-solid":
      let mode = schema.TableCellBackgroundDisplayMode.Basic;
      if (displayMode === "color-background") {
        mode = schema.TableCellBackgroundDisplayMode.Gradient;
      }
      return {
        type: schema.TableCellDisplayMode.ColorBackground,
        mode
      };
    default:
      return {
        // @ts-ignore TS5 / TS6
        type: displayMode
      };
  }
}
function getAlignmentFactor(field, displayValue, rowIndex) {
  var _a;
  let alignmentFactor = (_a = field.state) == null ? void 0 : _a.alignmentFactors;
  if (alignmentFactor) {
    if (data.formattedValueToString(alignmentFactor).length < data.formattedValueToString(displayValue).length) {
      alignmentFactor = { ...displayValue };
      field.state.alignmentFactors = alignmentFactor;
    }
    return alignmentFactor;
  } else {
    alignmentFactor = { ...displayValue };
    const maxIndex = Math.min(field.values.length, rowIndex + 1e3);
    for (let i = rowIndex + 1; i < maxIndex; i++) {
      const nextDisplayValue = field.display(field.values[i]);
      if (data.formattedValueToString(alignmentFactor).length > data.formattedValueToString(nextDisplayValue).length) {
        alignmentFactor.text = displayValue.text;
      }
    }
    if (field.state) {
      field.state.alignmentFactors = alignmentFactor;
    } else {
      field.state = { alignmentFactors: alignmentFactor };
    }
    return alignmentFactor;
  }
}
function getCellColors(theme, cellOptions, displayValue) {
  var _a;
  const darkeningFactor = theme.isDark ? 1 : -0.7;
  let textColor = void 0;
  let bgColor = void 0;
  let bgHoverColor = void 0;
  if (cellOptions.type === schema.TableCellDisplayMode.ColorText) {
    textColor = displayValue.color;
  } else if (cellOptions.type === schema.TableCellDisplayMode.ColorBackground) {
    const mode = (_a = cellOptions.mode) != null ? _a : schema.TableCellBackgroundDisplayMode.Gradient;
    if (mode === schema.TableCellBackgroundDisplayMode.Basic) {
      textColor = colors.getTextColorForAlphaBackground(displayValue.color, theme.isDark);
      bgColor = tinycolor__default.default(displayValue.color).toRgbString();
      bgHoverColor = tinycolor__default.default(displayValue.color).setAlpha(1).toRgbString();
    } else if (mode === schema.TableCellBackgroundDisplayMode.Gradient) {
      const hoverColor = tinycolor__default.default(displayValue.color).setAlpha(1).toRgbString();
      const bgColor2 = tinycolor__default.default(displayValue.color).darken(10 * darkeningFactor).spin(5);
      textColor = colors.getTextColorForAlphaBackground(displayValue.color, theme.isDark);
      bgColor = `linear-gradient(120deg, ${bgColor2.toRgbString()}, ${displayValue.color})`;
      bgHoverColor = `linear-gradient(120deg, ${bgColor2.setAlpha(1).toRgbString()}, ${hoverColor})`;
    }
  }
  return { textColor, bgColor, bgHoverColor };
}
const getDataLinksActionsTooltipUtils = (links, actions) => {
  const hasMultipleLinksOrActions = links.length > 1 || Boolean(actions == null ? void 0 : actions.length);
  const shouldShowLink = links.length === 1 && !Boolean(actions == null ? void 0 : actions.length);
  return { shouldShowLink, hasMultipleLinksOrActions };
};
const shouldTriggerTooltip = (event) => {
  return event.target === event.currentTarget;
};
const tooltipOnClickHandler = (setTooltipCoords) => {
  return (event) => {
    if (shouldTriggerTooltip(event)) {
      const { clientX, clientY } = event;
      setTooltipCoords({ clientX, clientY });
    }
  };
};

exports.getAlignmentFactor = getAlignmentFactor;
exports.getCellColors = getCellColors;
exports.getCellOptions = getCellOptions;
exports.getDataLinksActionsTooltipUtils = getDataLinksActionsTooltipUtils;
exports.getTextAlign = getTextAlign;
exports.migrateTableDisplayModeToCellOptions = migrateTableDisplayModeToCellOptions;
exports.tooltipOnClickHandler = tooltipOnClickHandler;
//# sourceMappingURL=cellUtils.cjs.map