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

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var data = require('@grafana/data');
var schema = require('@grafana/schema');
var ThemeContext = require('../../../themes/ThemeContext.cjs');
var measureText = require('../../../utils/measureText.cjs');
var FormattedValueDisplay = require('../../FormattedValueDisplay/FormattedValueDisplay.cjs');
var Sparkline = require('../../Sparkline/Sparkline.cjs');
var cellUtils = require('../cellUtils.cjs');

"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, innerWidth, tableStyles, cell, cellProps, timeRange } = props;
  const sparkline = getSparkline(cell.value);
  const theme = ThemeContext.useTheme2();
  if (!sparkline) {
    return /* @__PURE__ */ jsxRuntime.jsx("div", { ...cellProps, className: tableStyles.cellContainer, children: field.config.noValue || "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 = (_b = (_a = field.config.custom) == null ? void 0 : _a.cellOptions) == null ? void 0 : _b.hideValue;
  let valueWidth = 0;
  let valueElement = null;
  if (!hideValue) {
    const value = data.isDataFrameWithValue(cell.value) ? cell.value.value : null;
    const displayValue = field.display(value);
    const alignmentFactor = cellUtils.getAlignmentFactor(field, displayValue, cell.row.index);
    valueWidth = measureText.measureText(data.formattedValueToString(alignmentFactor), 16).width + theme.spacing.gridSize;
    valueElement = /* @__PURE__ */ jsxRuntime.jsx(
      FormattedValueDisplay.FormattedValueDisplay,
      {
        style: {
          width: `${valueWidth - theme.spacing.gridSize}px`,
          textAlign: "right",
          marginRight: theme.spacing(1)
        },
        value: displayValue
      }
    );
  }
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...cellProps, className: tableStyles.cellContainer, children: [
    valueElement,
    /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
      Sparkline.Sparkline,
      {
        width: innerWidth - valueWidth,
        height: tableStyles.cellHeightInner,
        sparkline,
        config,
        theme: tableStyles.theme
      }
    ) })
  ] });
};
function getSparkline(value) {
  if (Array.isArray(value)) {
    return {
      y: {
        name: "test",
        type: data.FieldType.number,
        values: value,
        config: {}
      }
    };
  }
  if (data.isDataFrame(value)) {
    const timeField = value.fields.find((x) => x.type === data.FieldType.time);
    const numberField = value.fields.find((x) => x.type === data.FieldType.number);
    if (timeField && numberField) {
      return { x: timeField, y: numberField };
    }
  }
  return;
}
function getTableSparklineCellOptions(field) {
  let options = cellUtils.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}`);
}

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