@grafana/ui/dist/cjs/components/VizTooltip/SeriesTable.cjs

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var SeriesIcon = require('../VizLegend/SeriesIcon.cjs');

"use strict";
const getSeriesTableRowStyles = (theme) => {
  return {
    icon: css.css({
      marginRight: theme.spacing(1),
      verticalAlign: "middle"
    }),
    seriesTable: css.css({
      display: "table"
    }),
    seriesTableRow: css.css({
      display: "table-row",
      fontSize: theme.typography.bodySmall.fontSize
    }),
    seriesTableCell: css.css({
      display: "table-cell"
    }),
    label: css.css({
      wordBreak: "break-all"
    }),
    value: css.css({
      paddingLeft: theme.spacing(2),
      textAlign: "right"
    }),
    activeSeries: css.css({
      fontWeight: theme.typography.fontWeightBold,
      color: theme.colors.text.maxContrast
    }),
    timestamp: css.css({
      fontWeight: theme.typography.fontWeightBold,
      fontSize: theme.typography.bodySmall.fontSize
    })
  };
};
const SeriesTableRow = ({ color, label, value, isActive }) => {
  const styles = ThemeContext.useStyles2(getSeriesTableRowStyles);
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": "SeriesTableRow", className: css.cx(styles.seriesTableRow, isActive && styles.activeSeries), children: [
    color && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.seriesTableCell, children: /* @__PURE__ */ jsxRuntime.jsx(SeriesIcon.SeriesIcon, { color, className: styles.icon }) }),
    label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: css.cx(styles.seriesTableCell, styles.label), children: label }),
    value && /* @__PURE__ */ jsxRuntime.jsx("div", { className: css.cx(styles.seriesTableCell, styles.value), children: value })
  ] });
};
const SeriesTable = ({ timestamp, series }) => {
  const styles = ThemeContext.useStyles2(getSeriesTableRowStyles);
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
    timestamp && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.timestamp, "aria-label": i18n.t("grafana-ui.viz-tooltip.timestamp", "Timestamp"), children: timestamp }),
    series.map((s, i) => {
      return /* @__PURE__ */ jsxRuntime.jsx(
        SeriesTableRow,
        {
          isActive: s.isActive,
          label: s.label,
          color: s.color,
          value: s.value
        },
        `${s.label}-${i}`
      );
    })
  ] });
};

exports.SeriesTable = SeriesTable;
exports.SeriesTableRow = SeriesTableRow;
//# sourceMappingURL=SeriesTable.cjs.map