{"version":3,"file":"VizLayout.cjs","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 | null;\n children: (width: number, height: number) => React.ReactNode;\n}\n\n/**\n * @beta\n */\nexport interface VizLayoutComponentType extends FC {\n Legend: ComponentType;\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();\n\n if (!legend) {\n return (\n <>\n
\n {children(width, height)}\n
\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
\n
{size && children(size.width, size.height)}
\n
\n {legend}\n
\n
\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 = ({ children }) => {\n return <>{children};\n};\n\nVizLayout.Legend = VizLayoutLegend;\n"],"names":["useTheme2","useStyles2","useMeasure","jsx","Fragment","jsxs","ScrollContainer","css","getFocusStyles"],"mappings":"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"}