@grafana/ui/dist/esm/components/VizLegend/VizLegendTableItem.mjs.map

Grafana Components Library

{"version":3,"file":"VizLegendTableItem.mjs","sources":["../../../../src/components/VizLegend/VizLegendTableItem.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { useCallback } from 'react';\nimport * as React from 'react';\n\nimport { formattedValueToString, GrafanaTheme2 } from '@grafana/data';\n\nimport { styleMixins } from '../../themes';\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Trans } from '../../utils/i18n';\n\nimport { VizLegendSeriesIcon } from './VizLegendSeriesIcon';\nimport { VizLegendItem } from './types';\n\nexport interface Props {\n  key?: React.Key;\n  item: VizLegendItem;\n  className?: string;\n  onLabelClick?: (item: VizLegendItem, event: React.MouseEvent<HTMLButtonElement>) => void;\n  onLabelMouseOver?: (\n    item: VizLegendItem,\n    event: React.MouseEvent<HTMLButtonElement> | React.FocusEvent<HTMLButtonElement>\n  ) => void;\n  onLabelMouseOut?: (\n    item: VizLegendItem,\n    event: React.MouseEvent<HTMLButtonElement> | React.FocusEvent<HTMLButtonElement>\n  ) => void;\n  readonly?: boolean;\n}\n\n/**\n * @internal\n */\nexport const LegendTableItem = ({\n  item,\n  onLabelClick,\n  onLabelMouseOver,\n  onLabelMouseOut,\n  className,\n  readonly,\n}: Props) => {\n  const styles = useStyles2(getStyles);\n\n  const onMouseOver = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.FocusEvent<HTMLButtonElement>) => {\n      if (onLabelMouseOver) {\n        onLabelMouseOver(item, event);\n      }\n    },\n    [item, onLabelMouseOver]\n  );\n\n  const onMouseOut = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.FocusEvent<HTMLButtonElement>) => {\n      if (onLabelMouseOut) {\n        onLabelMouseOut(item, event);\n      }\n    },\n    [item, onLabelMouseOut]\n  );\n\n  const onClick = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      if (onLabelClick) {\n        onLabelClick(item, event);\n      }\n    },\n    [item, onLabelClick]\n  );\n\n  return (\n    <tr className={cx(styles.row, className)}>\n      <td>\n        <span className={styles.itemWrapper}>\n          <VizLegendSeriesIcon\n            color={item.color}\n            seriesName={item.fieldName ?? item.label}\n            readonly={readonly}\n            lineStyle={item.lineStyle}\n          />\n          <button\n            disabled={readonly}\n            type=\"button\"\n            title={item.label}\n            onBlur={onMouseOut}\n            onFocus={onMouseOver}\n            onMouseOver={onMouseOver}\n            onMouseOut={onMouseOut}\n            onClick={!readonly ? onClick : undefined}\n            className={cx(styles.label, item.disabled && styles.labelDisabled)}\n          >\n            {item.label}{' '}\n            {item.yAxis === 2 && (\n              <span className={styles.yAxisLabel}>\n                <Trans i18nKey=\"grafana-ui.viz-legend.right-axis-indicator\">(right y-axis)</Trans>\n              </span>\n            )}\n          </button>\n        </span>\n      </td>\n      {item.getDisplayValues &&\n        item.getDisplayValues().map((stat, index) => {\n          return (\n            <td className={styles.value} key={`${stat.title}-${index}`}>\n              {formattedValueToString(stat)}\n            </td>\n          );\n        })}\n    </tr>\n  );\n};\n\nLegendTableItem.displayName = 'LegendTableItem';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  const rowHoverBg = styleMixins.hoverColor(theme.colors.background.primary, theme);\n\n  return {\n    row: css({\n      label: 'LegendRow',\n      fontSize: theme.v1.typography.size.sm,\n      borderBottom: `1px solid ${theme.colors.border.weak}`,\n      td: {\n        padding: theme.spacing(0.25, 1),\n        whiteSpace: 'nowrap',\n      },\n\n      '&:hover': {\n        background: rowHoverBg,\n      },\n    }),\n    label: css({\n      label: 'LegendLabel',\n      whiteSpace: 'nowrap',\n      background: 'none',\n      border: 'none',\n      fontSize: 'inherit',\n      padding: 0,\n      maxWidth: '600px',\n      textOverflow: 'ellipsis',\n      overflow: 'hidden',\n      userSelect: 'text',\n    }),\n    labelDisabled: css({\n      label: 'LegendLabelDisabled',\n      color: theme.colors.text.disabled,\n    }),\n    itemWrapper: css({\n      display: 'flex',\n      whiteSpace: 'nowrap',\n      alignItems: 'center',\n    }),\n    value: css({\n      textAlign: 'right',\n    }),\n    yAxisLabel: css({\n      color: theme.colors.text.secondary,\n    }),\n  };\n};\n"],"names":["styleMixins.hoverColor"],"mappings":"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"}