@grafana/ui
Version:
Grafana Components Library
119 lines (116 loc) • 3.33 kB
JavaScript
import { jsxs, jsx } from 'react/jsx-runtime';
import { cx, css } from '@emotion/css';
import { useCallback } from 'react';
import { formattedValueToString } from '@grafana/data';
import { Trans } from '@grafana/i18n';
import { useStyles2 } from '../../themes/ThemeContext.mjs';
import { hoverColor } from '../../themes/mixins.mjs';
import { VizLegendSeriesIcon } from './VizLegendSeriesIcon.mjs';
"use strict";
const LegendTableItem = ({
item,
onLabelClick,
onLabelMouseOver,
onLabelMouseOut,
className,
readonly,
hasMixedAxes,
overflow
}) => {
var _a;
const styles = useStyles2(getStyles, overflow);
const onMouseOver = useCallback(
(event) => {
if (onLabelMouseOver) {
onLabelMouseOver(item, event);
}
},
[item, onLabelMouseOver]
);
const onMouseOut = useCallback(
(event) => {
if (onLabelMouseOut) {
onLabelMouseOut(item, event);
}
},
[item, onLabelMouseOut]
);
const onClick = useCallback(
(event) => {
if (onLabelClick) {
onLabelClick(item, event);
}
},
[item, onLabelClick]
);
return /* @__PURE__ */ jsxs("tr", { className: cx(styles.row, className), children: [
/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
VizLegendSeriesIcon,
{
color: item.color,
seriesName: (_a = item.fieldName) != null ? _a : item.label,
readonly,
lineStyle: item.lineStyle
}
) }),
/* @__PURE__ */ jsx("td", { className: styles.name, children: /* @__PURE__ */ jsxs(
"button",
{
disabled: readonly,
type: "button",
title: item.label,
onBlur: onMouseOut,
onFocus: onMouseOver,
onMouseOver,
onMouseOut,
onClick: !readonly ? onClick : void 0,
className: cx(styles.label, item.disabled && styles.labelDisabled),
children: [
item.label,
" ",
item.yAxis === 2 && hasMixedAxes && /* @__PURE__ */ jsx("span", { className: styles.yAxisLabel, children: /* @__PURE__ */ jsx(Trans, { i18nKey: "grafana-ui.viz-legend.right-axis-indicator", children: "(right y-axis)" }) })
]
}
) }),
item.getDisplayValues && item.getDisplayValues().map((stat, index) => {
return /* @__PURE__ */ jsx("td", { children: formattedValueToString(stat) }, `${stat.title}-${index}`);
})
] });
};
LegendTableItem.displayName = "LegendTableItem";
const getStyles = (theme, overflow) => {
const rowHoverBg = hoverColor(theme.colors.background.primary, theme);
return {
row: css({
label: "LegendRow",
"&:hover": {
background: rowHoverBg
}
}),
label: 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({
label: "LegendLabelDisabled",
color: theme.colors.text.disabled
}),
name: css({
textAlign: "left"
}),
yAxisLabel: css({
color: theme.colors.text.secondary
})
};
};
export { LegendTableItem };
//# sourceMappingURL=VizLegendTableItem.mjs.map