@grafana/ui/dist/esm/components/VizTooltip/VizTooltip.mjs.map

Grafana Components Library

{"version":3,"file":"VizTooltip.mjs","sources":["../../../../src/components/VizTooltip/VizTooltip.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport * as React from 'react';\n\nimport { Dimensions, TimeZone } from '@grafana/data';\nimport { TooltipDisplayMode } from '@grafana/schema';\n\nimport { useStyles2 } from '../../themes';\nimport { Portal } from '../Portal/Portal';\n\nimport { VizTooltipContainer } from './VizTooltipContainer';\n\nexport interface 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\nexport type ActiveDimensions<T extends Dimensions = any> = { [key in keyof T]: [number, number | undefined] | null };\n\nexport interface 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\nexport interface 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 * @public\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":[],"mappings":";;;;;;;;;;;AA6DO,MAAM,aAAa,CAAC,EAAE,OAAS,EAAA,QAAA,EAAU,QAA8B,KAAA;AAC5E,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AACnC,EAAA,IAAI,QAAU,EAAA;AACZ,IAAA,2BACG,MAAO,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,MAAA,EACxB,8BAAC,mBAAoB,EAAA,EAAA,QAAA,EAAoB,MAAQ,EAAA,MAAA,IAAU,EAAE,CAAG,EAAA,CAAA,EAAG,GAAG,CAAE,EAAA,EACrE,mBACH,CACF,EAAA,CAAA;AAAA;AAGJ,EAAO,OAAA,IAAA;AACT;AAEA,UAAA,CAAW,WAAc,GAAA,YAAA;AAEzB,MAAM,YAAY,MAAM;AACtB,EAAO,OAAA;AAAA,IACL,QAAQ,GAAI,CAAA;AAAA,MACV,QAAU,EAAA,UAAA;AAAA,MACV,GAAK,EAAA,CAAA;AAAA,MACL,IAAM,EAAA,CAAA;AAAA,MACN,aAAe,EAAA,MAAA;AAAA,MACf,KAAO,EAAA,MAAA;AAAA,MACP,MAAQ,EAAA;AAAA,KACT;AAAA,GACH;AACF,CAAA;;;;"}