@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 */\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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"}