@grafana/ui/dist/esm/components/Table/TableNG/Cells/renderers.mjs

Grafana Components Library

import { jsx } from 'react/jsx-runtime';
import { clsx } from 'clsx';
import { memo } from 'react';
import { FieldType, isDataFrame, isTimeSeriesFrame } from '@grafana/data';
import '../../types.mjs';
import { getCellOptions } from '../utils.mjs';
import { getStyles as getStyles$7, ActionsCell } from './ActionsCell.mjs';
import { AutoCell, getStyles, getJsonCellStyles } from './AutoCell.mjs';
import { BarGaugeCell } from './BarGaugeCell.mjs';
import { getStyles as getStyles$6, DataLinksCell } from './DataLinksCell.mjs';
import { getStyles as getStyles$4, GeoCell } from './GeoCell.mjs';
import { getStyles as getStyles$3, ImageCell } from './ImageCell.mjs';
import { getStyles as getStyles$1, MarkdownCell } from './MarkdownCell.mjs';
import { getStyles as getStyles$2, PillCell } from './PillCell.mjs';
import { getStyles as getStyles$5, SparklineCell } from './SparklineCell.mjs';
import { TableCellDisplayMode } from '@grafana/schema';

"use strict";
const wrapComponentInMemo = (fn, name) => {
  const result = memo(fn);
  result.displayName = name;
  return result;
};
const AutoCellRenderer = wrapComponentInMemo(
  (props) => /* @__PURE__ */ jsx(AutoCell, { value: props.value, field: props.field, rowIdx: props.rowIdx }),
  "AutoCellRenderer"
);
function isCustomCellOptions(options) {
  return options.type === TableCellDisplayMode.Custom;
}
function mixinAutoCellStyles(fn) {
  return (theme, options) => {
    const styles = fn(theme, options);
    return clsx(styles, getStyles(theme, options));
  };
}
const CELL_REGISTRY = {
  [TableCellDisplayMode.Auto]: {
    renderer: AutoCellRenderer,
    getStyles: getStyles
  },
  [TableCellDisplayMode.ColorBackground]: {
    renderer: AutoCellRenderer,
    getStyles: getStyles
  },
  [TableCellDisplayMode.ColorText]: {
    renderer: AutoCellRenderer,
    getStyles: getStyles
  },
  [TableCellDisplayMode.JSONView]: {
    renderer: AutoCellRenderer,
    getStyles: mixinAutoCellStyles(getJsonCellStyles)
  },
  [TableCellDisplayMode.Actions]: {
    renderer: wrapComponentInMemo(
      (props) => {
        var _a;
        return /* @__PURE__ */ jsx(ActionsCell, { field: props.field, rowIdx: props.rowIdx, getActions: (_a = props.getActions) != null ? _a : () => [] });
      },
      "ActionsCellRenderer"
    ),
    getStyles: getStyles$7
  },
  [TableCellDisplayMode.DataLinks]: {
    renderer: wrapComponentInMemo(
      (props) => /* @__PURE__ */ jsx(DataLinksCell, { field: props.field, rowIdx: props.rowIdx }),
      "DataLinksCellRenderer"
    ),
    getStyles: getStyles$6
  },
  [TableCellDisplayMode.Gauge]: {
    renderer: wrapComponentInMemo(
      (props) => /* @__PURE__ */ jsx(
        BarGaugeCell,
        {
          field: props.field,
          value: props.value,
          theme: props.theme,
          height: props.height,
          width: props.width,
          rowIdx: props.rowIdx
        }
      ),
      "BarGaugeCellRenderer"
    )
  },
  [TableCellDisplayMode.Sparkline]: {
    // eslint-disable-next-line react/display-name
    renderer: wrapComponentInMemo(
      (props) => /* @__PURE__ */ jsx(
        SparklineCell,
        {
          value: props.value,
          field: props.field,
          timeRange: props.timeRange,
          rowIdx: props.rowIdx,
          theme: props.theme,
          width: props.width
        }
      ),
      "SparklineCellRenderer"
    ),
    getStyles: getStyles$5
  },
  [TableCellDisplayMode.Geo]: {
    renderer: wrapComponentInMemo(
      (props) => /* @__PURE__ */ jsx(GeoCell, { value: props.value, height: props.height }),
      "GeoCellRenderer"
    ),
    getStyles: getStyles$4
  },
  [TableCellDisplayMode.Image]: {
    renderer: wrapComponentInMemo(
      (props) => /* @__PURE__ */ jsx(ImageCell, { cellOptions: props.cellOptions, field: props.field, value: props.value, rowIdx: props.rowIdx }),
      "ImageCellRenderer"
    ),
    getStyles: getStyles$3
  },
  [TableCellDisplayMode.Pill]: {
    renderer: wrapComponentInMemo(
      (props) => /* @__PURE__ */ jsx(
        PillCell,
        {
          rowIdx: props.rowIdx,
          field: props.field,
          theme: props.theme,
          getTextColorForBackground: props.getTextColorForBackground
        }
      ),
      "PillCellRenderer"
    ),
    getStyles: getStyles$2,
    testField: (field) => field.type === FieldType.string || field.type === FieldType.other && field.values.some((val) => Array.isArray(val))
  },
  [TableCellDisplayMode.Markdown]: {
    renderer: wrapComponentInMemo(
      (props) => /* @__PURE__ */ jsx(MarkdownCell, { field: props.field, rowIdx: props.rowIdx, disableSanitizeHtml: props.disableSanitizeHtml }),
      "MarkdownCellRenderer"
    ),
    getStyles: getStyles$1,
    testField: (field) => field.type === FieldType.string
  },
  [TableCellDisplayMode.Custom]: {
    renderer: wrapComponentInMemo((props) => {
      if (!isCustomCellOptions(props.cellOptions) || !props.cellOptions.cellComponent) {
        return null;
      }
      const CustomCellComponent = props.cellOptions.cellComponent;
      return /* @__PURE__ */ jsx(CustomCellComponent, { field: props.field, rowIndex: props.rowIdx, frame: props.frame, value: props.value });
    }, "CustomCellRenderer")
  }
};
function getCellRenderer(field, cellOptions = getCellOptions(field)) {
  var _a, _b, _c, _d;
  const cellType = (_a = cellOptions == null ? void 0 : cellOptions.type) != null ? _a : TableCellDisplayMode.Auto;
  if (cellType === TableCellDisplayMode.Auto) {
    return CELL_REGISTRY[getAutoRendererDisplayMode(field)].renderer;
  }
  if (((_b = CELL_REGISTRY[cellType]) == null ? void 0 : _b.testField) && CELL_REGISTRY[cellType].testField(field) !== true) {
    return AutoCellRenderer;
  }
  return (_d = (_c = CELL_REGISTRY[cellType]) == null ? void 0 : _c.renderer) != null ? _d : AutoCellRenderer;
}
function getCellSpecificStyles(cellType, field, theme, options) {
  var _a, _b;
  if (cellType === TableCellDisplayMode.Auto) {
    return getAutoRendererStyles(theme, options, field);
  }
  return (_b = (_a = CELL_REGISTRY[cellType]) == null ? void 0 : _a.getStyles) == null ? void 0 : _b.call(_a, theme, options);
}
function getAutoRendererStyles(theme, options, field) {
  var _a, _b;
  const impliedDisplayMode = getAutoRendererDisplayMode(field);
  if (impliedDisplayMode !== TableCellDisplayMode.Auto) {
    return (_b = (_a = CELL_REGISTRY[impliedDisplayMode]) == null ? void 0 : _a.getStyles) == null ? void 0 : _b.call(_a, theme, options);
  }
  return getStyles(theme, options);
}
function getAutoRendererDisplayMode(field) {
  if (field.type === FieldType.geo) {
    return TableCellDisplayMode.Geo;
  }
  if (field.type === FieldType.frame) {
    const firstValue = field.values[0];
    if (isDataFrame(firstValue) && isTimeSeriesFrame(firstValue)) {
      return TableCellDisplayMode.Sparkline;
    }
  }
  return TableCellDisplayMode.Auto;
}

export { AutoCellRenderer, getAutoRendererDisplayMode, getCellRenderer, getCellSpecificStyles };
//# sourceMappingURL=renderers.mjs.map