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

Grafana Components Library

{"version":3,"file":"VizLegendTable.mjs","sources":["../../../../src/components/VizLegend/VizLegendTable.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Icon } from '../Icon/Icon';\n\nimport { LegendTableItem } from './VizLegendTableItem';\nimport { VizLegendItem, VizLegendTableProps } from './types';\n\nconst nameSortKey = 'Name';\nconst naturalCompare = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' }).compare;\n\n/**\n * @internal\n */\nexport const VizLegendTable = <T extends unknown>({\n  items,\n  sortBy: sortKey,\n  sortDesc,\n  itemRenderer,\n  className,\n  onToggleSort,\n  onLabelClick,\n  onLabelMouseOver,\n  onLabelMouseOut,\n  readonly,\n  isSortable,\n}: VizLegendTableProps<T>): JSX.Element => {\n  const styles = useStyles2(getStyles);\n  const header: Record<string, string> = {};\n\n  if (isSortable) {\n    header[nameSortKey] = '';\n  }\n\n  for (const item of items) {\n    if (item.getDisplayValues) {\n      for (const displayValue of item.getDisplayValues()) {\n        header[displayValue.title ?? '?'] = displayValue.description ?? '';\n      }\n    }\n  }\n\n  if (sortKey != null) {\n    let itemVals = new Map<VizLegendItem, number>();\n\n    items.forEach((item) => {\n      if (sortKey !== nameSortKey && item.getDisplayValues) {\n        const stat = item.getDisplayValues().find((stat) => stat.title === sortKey);\n        const val = stat == null || Number.isNaN(stat.numeric) ? -Infinity : stat.numeric;\n        itemVals.set(item, val);\n      }\n    });\n\n    let sortMult = sortDesc ? -1 : 1;\n\n    if (sortKey === nameSortKey) {\n      // string sort\n      items.sort((a, b) => {\n        return sortMult * naturalCompare(a.label, b.label);\n      });\n    } else {\n      // numeric sort\n      items.sort((a, b) => {\n        const aVal = itemVals.get(a) ?? 0;\n        const bVal = itemVals.get(b) ?? 0;\n\n        return sortMult * (aVal - bVal);\n      });\n    }\n  }\n\n  if (!itemRenderer) {\n    /* eslint-disable-next-line react/display-name */\n    itemRenderer = (item, index) => (\n      <LegendTableItem\n        key={`${item.label}-${index}`}\n        item={item}\n        onLabelClick={onLabelClick}\n        onLabelMouseOver={onLabelMouseOver}\n        onLabelMouseOut={onLabelMouseOut}\n        readonly={readonly}\n      />\n    );\n  }\n\n  return (\n    <table className={cx(styles.table, className)}>\n      <thead>\n        <tr>\n          {!isSortable && <th></th>}\n          {Object.keys(header).map((columnTitle) => (\n            <th\n              title={header[columnTitle]}\n              key={columnTitle}\n              className={cx(styles.header, onToggleSort && styles.headerSortable, isSortable && styles.nameHeader, {\n                [styles.withIcon]: sortKey === columnTitle,\n              })}\n              onClick={() => {\n                if (onToggleSort) {\n                  onToggleSort(columnTitle);\n                }\n              }}\n            >\n              {columnTitle}\n              {sortKey === columnTitle && <Icon size=\"xs\" name={sortDesc ? 'angle-down' : 'angle-up'} />}\n            </th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>{items.map(itemRenderer!)}</tbody>\n    </table>\n  );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  table: css({\n    width: '100%',\n    'th:first-child': {\n      width: '100%',\n      borderBottom: `1px solid ${theme.colors.border.weak}`,\n    },\n  }),\n  header: css({\n    color: theme.colors.primary.text,\n    fontWeight: theme.typography.fontWeightMedium,\n    borderBottom: `1px solid ${theme.colors.border.weak}`,\n    padding: theme.spacing(0.25, 1, 0.25, 1),\n    fontSize: theme.typography.bodySmall.fontSize,\n    textAlign: 'right',\n    whiteSpace: 'nowrap',\n  }),\n  nameHeader: css({\n    textAlign: 'left',\n    paddingLeft: '30px',\n  }),\n  // This needs to be padding-right - icon size(xs==12) to avoid jumping\n  withIcon: css({\n    paddingRight: '4px',\n  }),\n  headerSortable: css({\n    cursor: 'pointer',\n  }),\n});\n"],"names":["stat","_a","_b"],"mappings":"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"}