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

Grafana Components Library

{"version":3,"file":"VizTooltip.cjs","sources":["../../../../src/components/VizTooltip/VizTooltip.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport * as React from 'react';\n\nimport { type Dimensions, type TimeZone } from '@grafana/data';\nimport { type TooltipDisplayMode } from '@grafana/schema';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Portal } from '../Portal/Portal';\n\nimport { VizTooltipContainer } from './VizTooltipContainer';\n\ninterface FlotPosition {\n  pageX: number;\n  pageY: number;\n  x: number;\n  x1: number;\n  y: number;\n  y1: number;\n}\n\n// Describes active dimensions user interacts with\n// It's a key-value pair where:\n// - key is the name of the dimension\n// - value is a tuple addressing which column and row from given dimension is active.\n//   If row is undefined, it means that we are not hovering over a datapoint\ntype ActiveDimensions<T extends Dimensions = any> = { [key in keyof T]: [number, number | undefined] | null };\n\ninterface VizTooltipContentProps<T extends Dimensions = any> {\n  // Each dimension is described by array of fields representing it\n  // I.e. for graph there are two dimensions: x and y axis:\n  // { xAxis: [<array of time fields>], yAxis: [<array of value fields>]}\n  // TODO: type this better, no good idea how yet\n  dimensions: T; // Dimension[]\n  activeDimensions?: ActiveDimensions<T>;\n  timeZone?: TimeZone;\n  pos: FlotPosition;\n  mode: TooltipDisplayMode;\n}\n\ninterface VizTooltipProps {\n  /** Element used as tooltips content */\n  content?: React.ReactElement;\n\n  /** Optional component to be used as a tooltip content */\n  tooltipComponent?: React.ComponentType<React.PropsWithChildren<VizTooltipContentProps>>;\n\n  /** x/y position relative to the window */\n  position?: { x: number; y: number };\n\n  /** x/y offset relative to tooltip origin element, i.e. graph's datapoint */\n  offset?: { x: number; y: number };\n\n  // Mode in which tooltip works\n  // - single - display single series info\n  // - multi - display all series info\n  mode?: TooltipDisplayMode;\n}\n\n/**\n * @alpha\n */\nexport const VizTooltip = ({ content, position, offset }: VizTooltipProps) => {\n  const styles = useStyles2(getStyles);\n  if (position) {\n    return (\n      <Portal className={styles.portal}>\n        <VizTooltipContainer position={position} offset={offset || { x: 0, y: 0 }}>\n          {content}\n        </VizTooltipContainer>\n      </Portal>\n    );\n  }\n  return null;\n};\n\nVizTooltip.displayName = 'VizTooltip';\n\nconst getStyles = () => {\n  return {\n    portal: css({\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      pointerEvents: 'none',\n      width: '100%',\n      height: '100%',\n    }),\n  };\n};\n"],"names":["useStyles2","Portal","VizTooltipContainer","css"],"mappings":";;;;;;;;;;;AA6DO,MAAM,aAAa,CAAC,EAAE,OAAA,EAAS,QAAA,EAAU,QAAO,KAAuB;AAC5E,EAAA,MAAM,MAAA,GAASA,wBAAW,SAAS,CAAA;AACnC,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,sCACGC,aAAA,EAAA,EAAO,SAAA,EAAW,MAAA,CAAO,MAAA,EACxB,yCAACC,uCAAA,EAAA,EAAoB,QAAA,EAAoB,MAAA,EAAQ,MAAA,IAAU,EAAE,CAAA,EAAG,CAAA,EAAG,GAAG,CAAA,EAAE,EACrE,mBACH,CAAA,EACF,CAAA;AAAA,EAEJ;AACA,EAAA,OAAO,IAAA;AACT;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;AAEzB,MAAM,YAAY,MAAM;AACtB,EAAA,OAAO;AAAA,IACL,QAAQC,OAAA,CAAI;AAAA,MACV,QAAA,EAAU,UAAA;AAAA,MACV,GAAA,EAAK,CAAA;AAAA,MACL,IAAA,EAAM,CAAA;AAAA,MACN,aAAA,EAAe,MAAA;AAAA,MACf,KAAA,EAAO,MAAA;AAAA,MACP,MAAA,EAAQ;AAAA,KACT;AAAA,GACH;AACF,CAAA;;;;"}