@grafana/ui/dist/cjs/components/VizTooltip/VizTooltipContent.cjs.map

Grafana Components Library

{"version":3,"file":"VizTooltipContent.cjs","sources":["../../../../src/components/VizTooltip/VizTooltipContent.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { type CSSProperties, type ReactNode } from 'react';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\nimport { VizTooltipRow } from './VizTooltipRow';\nimport { type VizTooltipItem } from './types';\n\ninterface VizTooltipContentProps {\n  /** The rows to render, one per series or field. */\n  items: VizTooltipItem[];\n  children?: ReactNode;\n  /** When true the content area becomes vertically scrollable, constrained by `maxHeight`. */\n  scrollable?: boolean;\n  /**\n   * Whether the tooltip is currently pinned (locked open by the user).\n   * When pinned, label and value cells become clickable to copy their text to the clipboard.\n   * Defaults to `false`.\n   */\n  isPinned?: boolean;\n  /** Maximum height in pixels of the scrollable content area. Only applied when `scrollable` is true. */\n  maxHeight?: number;\n}\n\n/** @alpha */\nexport const VizTooltipContent = ({\n  items,\n  children,\n  isPinned = false,\n  scrollable = false,\n  maxHeight,\n}: VizTooltipContentProps) => {\n  const styles = useStyles2(getStyles);\n\n  const scrollableStyle: CSSProperties = scrollable\n    ? {\n        maxHeight: maxHeight,\n        overflowY: 'auto',\n      }\n    : {};\n\n  return (\n    <div className={styles.wrapper} style={scrollableStyle}>\n      {items.map(({ label, value, color, colorIndicator, colorPlacement, isActive, lineStyle, isHiddenFromViz }, i) => (\n        <VizTooltipRow\n          key={i}\n          label={label}\n          value={value}\n          color={color}\n          colorIndicator={colorIndicator}\n          colorPlacement={colorPlacement}\n          isActive={isActive}\n          isPinned={isPinned}\n          lineStyle={lineStyle}\n          showValueScroll={!scrollable}\n          isHiddenFromViz={isHiddenFromViz}\n        />\n      ))}\n      {children}\n    </div>\n  );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  wrapper: css({\n    display: 'flex',\n    flexDirection: 'column',\n    flex: 1,\n    gap: 2,\n    borderTop: `1px solid ${theme.colors.border.weak}`,\n    padding: theme.spacing(1),\n  }),\n});\n"],"names":["useStyles2","jsx","VizTooltipRow","css"],"mappings":";;;;;;;;;;AA2BO,MAAM,oBAAoB,CAAC;AAAA,EAChC,KAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,UAAA,GAAa,KAAA;AAAA,EACb;AACF,CAAA,KAA8B;AAC5B,EAAA,MAAM,MAAA,GAASA,wBAAW,SAAS,CAAA;AAEnC,EAAA,MAAM,kBAAiC,UAAA,GACnC;AAAA,IACE,SAAA;AAAA,IACA,SAAA,EAAW;AAAA,MAEb,EAAC;AAEL,EAAA,uCACG,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EAAS,OAAO,eAAA,EACpC,QAAA,EAAA;AAAA,IAAA,KAAA,CAAM,GAAA,CAAI,CAAC,EAAE,KAAA,EAAO,KAAA,EAAO,KAAA,EAAO,cAAA,EAAgB,cAAA,EAAgB,QAAA,EAAU,SAAA,EAAW,eAAA,EAAgB,EAAG,CAAA,qBACzGC,cAAA;AAAA,MAACC,2BAAA;AAAA,MAAA;AAAA,QAEC,KAAA;AAAA,QACA,KAAA;AAAA,QACA,KAAA;AAAA,QACA,cAAA;AAAA,QACA,cAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA;AAAA,QACA,SAAA;AAAA,QACA,iBAAiB,CAAC,UAAA;AAAA,QAClB;AAAA,OAAA;AAAA,MAVK;AAAA,KAYR,CAAA;AAAA,IACA;AAAA,GAAA,EACH,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAA,MAA0B;AAAA,EAC3C,SAASC,OAAA,CAAI;AAAA,IACX,OAAA,EAAS,MAAA;AAAA,IACT,aAAA,EAAe,QAAA;AAAA,IACf,IAAA,EAAM,CAAA;AAAA,IACN,GAAA,EAAK,CAAA;AAAA,IACL,SAAA,EAAW,CAAA,UAAA,EAAa,KAAA,CAAM,MAAA,CAAO,OAAO,IAAI,CAAA,CAAA;AAAA,IAChD,OAAA,EAAS,KAAA,CAAM,OAAA,CAAQ,CAAC;AAAA,GACzB;AACH,CAAA,CAAA;;;;"}