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

Grafana Components Library

{"version":3,"file":"VizLayout.mjs","sources":["../../../../src/components/VizLayout/VizLayout.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { FC, CSSProperties, ComponentType } from 'react';\nimport * as React from 'react';\nimport { useMeasure } from 'react-use';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { LegendPlacement } from '@grafana/schema';\n\nimport { useStyles2, useTheme2 } from '../../themes/ThemeContext';\nimport { getFocusStyles } from '../../themes/mixins';\nimport { ScrollContainer } from '../ScrollContainer/ScrollContainer';\n\n/**\n * @beta\n */\nexport interface VizLayoutProps {\n  width: number;\n  height: number;\n  legend?: React.ReactElement<VizLayoutLegendProps> | null;\n  children: (width: number, height: number) => React.ReactNode;\n}\n\n/**\n * @beta\n */\nexport interface VizLayoutComponentType extends FC<VizLayoutProps> {\n  Legend: ComponentType<VizLayoutLegendProps>;\n}\n\n/**\n * @beta\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/plugins-vizlayout--docs\n */\nexport const VizLayout: VizLayoutComponentType = ({ width, height, legend, children }) => {\n  const theme = useTheme2();\n  const styles = useStyles2(getVizStyles);\n  const containerStyle: CSSProperties = {\n    display: 'flex',\n    width: `${width}px`,\n    height: `${height}px`,\n  };\n  const [legendRef, legendMeasure] = useMeasure<HTMLDivElement>();\n\n  if (!legend) {\n    return (\n      <>\n        <div style={containerStyle} className={styles.viz}>\n          {children(width, height)}\n        </div>\n      </>\n    );\n  }\n\n  let { placement, maxHeight = '35%', maxWidth = '60%' } = legend.props;\n\n  if (document.body.clientWidth < theme.breakpoints.values.lg) {\n    placement = 'bottom';\n  }\n\n  let size: VizSize | null = null;\n\n  const legendStyle: CSSProperties = {};\n\n  switch (placement) {\n    case 'bottom':\n      containerStyle.flexDirection = 'column';\n      legendStyle.maxHeight = maxHeight;\n\n      if (legendMeasure.height) {\n        size = { width, height: height - legendMeasure.height };\n      }\n      break;\n    case 'right':\n      containerStyle.flexDirection = 'row';\n      legendStyle.maxWidth = maxWidth;\n\n      if (legendMeasure.width) {\n        size = { width: width - legendMeasure.width, height };\n      }\n\n      if (legend.props.width) {\n        legendStyle.width = legend.props.width;\n        size = { width: width - legend.props.width, height };\n      }\n      break;\n  }\n\n  // This happens when position is switched from bottom to right\n  // Then we preserve old with for one render cycle until legend is measured in it's new position\n  if (size?.width === 0) {\n    size.width = width;\n  }\n\n  if (size?.height === 0) {\n    size.height = height;\n  }\n\n  return (\n    <div style={containerStyle}>\n      <div className={styles.viz}>{size && children(size.width, size.height)}</div>\n      <div style={legendStyle} ref={legendRef}>\n        <ScrollContainer>{legend}</ScrollContainer>\n      </div>\n    </div>\n  );\n};\n\nexport const getVizStyles = (theme: GrafanaTheme2) => {\n  return {\n    viz: css({\n      flexGrow: 2,\n      borderRadius: theme.shape.radius.default,\n      '&:focus-visible': getFocusStyles(theme),\n    }),\n  };\n};\ninterface VizSize {\n  width: number;\n  height: number;\n}\n\n/**\n * @beta\n */\nexport interface VizLayoutLegendProps {\n  placement: LegendPlacement;\n  children: React.ReactNode;\n  maxHeight?: string;\n  maxWidth?: string;\n  width?: number;\n}\n\n/**\n * @beta\n */\nexport const VizLayoutLegend: FC<VizLayoutLegendProps> = ({ children }) => {\n  return <>{children}</>;\n};\n\nVizLayout.Legend = VizLayoutLegend;\n"],"names":[],"mappings":"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"}