@grafana/ui/dist/cjs/components/VizLegend/VizLegendTableItem.cjs

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var data = require('@grafana/data');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var mixins = require('../../themes/mixins.cjs');
var VizLegendSeriesIcon = require('./VizLegendSeriesIcon.cjs');

"use strict";
const LegendTableItem = ({
  item,
  onLabelClick,
  onLabelMouseOver,
  onLabelMouseOut,
  className,
  readonly,
  hasMixedAxes,
  overflow
}) => {
  var _a;
  const styles = ThemeContext.useStyles2(getStyles, overflow);
  const onMouseOver = React.useCallback(
    (event) => {
      if (onLabelMouseOver) {
        onLabelMouseOver(item, event);
      }
    },
    [item, onLabelMouseOver]
  );
  const onMouseOut = React.useCallback(
    (event) => {
      if (onLabelMouseOut) {
        onLabelMouseOut(item, event);
      }
    },
    [item, onLabelMouseOut]
  );
  const onClick = React.useCallback(
    (event) => {
      if (onLabelClick) {
        onLabelClick(item, event);
      }
    },
    [item, onLabelClick]
  );
  return /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: css.cx(styles.row, className), children: [
    /* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx(
      VizLegendSeriesIcon.VizLegendSeriesIcon,
      {
        color: item.color,
        seriesName: (_a = item.fieldName) != null ? _a : item.label,
        readonly,
        lineStyle: item.lineStyle
      }
    ) }),
    /* @__PURE__ */ jsxRuntime.jsx("td", { className: styles.name, children: /* @__PURE__ */ jsxRuntime.jsxs(
      "button",
      {
        disabled: readonly,
        type: "button",
        title: item.label,
        onBlur: onMouseOut,
        onFocus: onMouseOver,
        onMouseOver,
        onMouseOut,
        onClick: !readonly ? onClick : void 0,
        className: css.cx(styles.label, item.disabled && styles.labelDisabled),
        children: [
          item.label,
          " ",
          item.yAxis === 2 && hasMixedAxes && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.yAxisLabel, children: /* @__PURE__ */ jsxRuntime.jsx(i18n.Trans, { i18nKey: "grafana-ui.viz-legend.right-axis-indicator", children: "(right y-axis)" }) })
        ]
      }
    ) }),
    item.getDisplayValues && item.getDisplayValues().map((stat, index) => {
      return /* @__PURE__ */ jsxRuntime.jsx("td", { children: data.formattedValueToString(stat) }, `${stat.title}-${index}`);
    })
  ] });
};
LegendTableItem.displayName = "LegendTableItem";
const getStyles = (theme, overflow) => {
  const rowHoverBg = mixins.hoverColor(theme.colors.background.primary, theme);
  return {
    row: css.css({
      label: "LegendRow",
      "&:hover": {
        background: rowHoverBg
      }
    }),
    label: css.css({
      label: "LegendLabel",
      background: "none",
      border: "none",
      fontSize: "inherit",
      padding: 0,
      width: "100%",
      textOverflow: "ellipsis",
      whiteSpace: overflow === "wrap" ? "normal" : "nowrap",
      overflow: "hidden",
      userSelect: "text",
      textAlign: "left"
    }),
    labelDisabled: css.css({
      label: "LegendLabelDisabled",
      color: theme.colors.text.disabled
    }),
    name: css.css({
      textAlign: "left"
    }),
    yAxisLabel: css.css({
      color: theme.colors.text.secondary
    })
  };
};

exports.LegendTableItem = LegendTableItem;
//# sourceMappingURL=VizLegendTableItem.cjs.map