@grafana/ui/dist/cjs/components/Table/TableNG/Cells/SparklineCell.cjs

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var memoize = require('micro-memoize');
var data = require('@grafana/data');
var i18n = require('@grafana/i18n');
var schema = require('@grafana/schema');
var measureText = require('../../../../utils/measureText.cjs');
var FormattedValueDisplay = require('../../../FormattedValueDisplay/FormattedValueDisplay.cjs');
var Sparkline = require('../../../Sparkline/Sparkline.cjs');
var MaybeWrapWithLink = require('../components/MaybeWrapWithLink.cjs');
var styles = require('../styles.cjs');
var utils = require('../utils.cjs');

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

var memoize__default = /*#__PURE__*/_interopDefaultCompat(memoize);

"use strict";
const defaultSparklineCellConfig = {
  type: schema.TableCellDisplayMode.Sparkline,
  drawStyle: schema.GraphDrawStyle.Line,
  lineInterpolation: schema.LineInterpolation.Smooth,
  lineWidth: 1,
  fillOpacity: 17,
  gradientMode: schema.GraphGradientMode.Hue,
  pointSize: 2,
  barAlignment: schema.BarAlignment.Center,
  showPoints: schema.VisibilityMode.Never,
  hideValue: false
};
const SparklineCell = (props) => {
  var _a, _b;
  const { field, value, theme, timeRange, rowIdx, width } = props;
  const sparkline = utils.prepareSparklineValue(value, field);
  if (!sparkline) {
    return /* @__PURE__ */ jsxRuntime.jsx(MaybeWrapWithLink.MaybeWrapWithLink, { field, rowIdx, children: field.config.noValue || i18n.t("grafana-ui.table.sparkline.no-data", "no data") });
  }
  if (sparkline.x && !sparkline.x.config.interval && sparkline.x.values.length > 1) {
    sparkline.x.config.interval = sparkline.x.values[1] - sparkline.x.values[0];
  }
  sparkline.y.values = sparkline.y.values.map((v) => {
    if (!Number.isFinite(v)) {
      return null;
    } else {
      return v;
    }
  });
  const range = data.getMinMaxAndDelta(sparkline.y);
  sparkline.y.config.min = range.min;
  sparkline.y.config.max = range.max;
  sparkline.y.state = { range };
  sparkline.timeRange = timeRange;
  const cellOptions = getTableSparklineCellOptions(field);
  const config = {
    color: field.config.color,
    custom: {
      ...defaultSparklineCellConfig,
      ...cellOptions
    }
  };
  const hideValue = cellOptions.hideValue;
  let valueWidth = 0;
  let valueElement = null;
  if (!hideValue) {
    const newValue = data.isDataFrameWithValue(value) ? value.value : null;
    const displayValue = field.display(newValue);
    const alignmentFactor = utils.getAlignmentFactor(field, displayValue, rowIdx);
    valueWidth = measureText.measureText(`${(_a = alignmentFactor.prefix) != null ? _a : ""}${alignmentFactor.text}${(_b = alignmentFactor.suffix) != null ? _b : ""}`, 16).width + theme.spacing.gridSize;
    valueElement = /* @__PURE__ */ jsxRuntime.jsx(FormattedValueDisplay.FormattedValueDisplay, { style: { width: valueWidth }, value: displayValue });
  }
  return /* @__PURE__ */ jsxRuntime.jsxs(MaybeWrapWithLink.MaybeWrapWithLink, { field, rowIdx, children: [
    valueElement,
    /* @__PURE__ */ jsxRuntime.jsx(Sparkline.Sparkline, { width: width - valueWidth, height: 25, sparkline, config, theme })
  ] });
};
function getTableSparklineCellOptions(field) {
  let options = utils.getCellOptions(field);
  if (options.type === schema.TableCellDisplayMode.Auto) {
    options = { ...options, type: schema.TableCellDisplayMode.Sparkline };
  }
  if (options.type === schema.TableCellDisplayMode.Sparkline) {
    return options;
  }
  throw new Error(`Expected options type ${schema.TableCellDisplayMode.Sparkline} but got ${options.type}`);
}
const getStyles = memoize__default.default(
  (theme, { textAlign }) => css.css({
    "&, & > a": {
      width: "100%",
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between",
      gap: theme.spacing(1),
      ...textAlign === "right" && { flexDirection: "row-reverse" }
    }
  }),
  { isMatchingKey: styles.isTableCellStylesKeyEqual }
);

exports.SparklineCell = SparklineCell;
exports.getStyles = getStyles;
//# sourceMappingURL=SparklineCell.cjs.map