@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';\nimport { Trans } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { hoverColor } from '../../themes/mixins';\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 = 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":[],"mappings":"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"}