@grafana/ui/dist/cjs/components/VizLayout/VizLayout.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var reactUse = require('react-use');
var e2eSelectors = require('@grafana/e2e-selectors');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var mixins = require('../../themes/mixins.cjs');
var ScrollContainer = require('../ScrollContainer/ScrollContainer.cjs');

"use strict";
const VizLayout = ({ width, height, legend, children }) => {
  const theme = ThemeContext.useTheme2();
  const styles = ThemeContext.useStyles2(getVizStyles);
  const containerStyle = {
    display: "flex",
    width: `${width}px`,
    height: `${height}px`
  };
  const [legendRef, legendMeasure] = reactUse.useMeasure();
  if (!legend) {
    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: containerStyle, className: styles.viz, "data-testid": e2eSelectors.selectors.components.VizLayout.container, children: children(width, height) }) });
  }
  let { placement, maxHeight = "35%", maxWidth = "60%" } = legend.props;
  if (document.body.clientWidth < theme.breakpoints.values.lg) {
    placement = "bottom";
  }
  let size = null;
  const legendStyle = {};
  switch (placement) {
    case "bottom":
      containerStyle.flexDirection = "column";
      legendStyle.maxHeight = maxHeight;
      if (legendMeasure.height) {
        size = { width, height: height - legendMeasure.height };
      }
      break;
    case "right":
      containerStyle.flexDirection = "row";
      if (legendMeasure.width) {
        size = { width: width - legendMeasure.width, height };
      }
      if (typeof legend.props.width === "string") {
        legendStyle.width = legend.props.width;
        break;
      }
      legendStyle.maxWidth = maxWidth;
      if (legend.props.width != null) {
        legendStyle.width = legend.props.width;
        size = { width: width - legend.props.width, height };
      }
      break;
  }
  if ((size == null ? void 0 : size.width) === 0) {
    size.width = width;
  }
  if ((size == null ? void 0 : size.height) === 0) {
    size.height = height;
  }
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle, "data-testid": e2eSelectors.selectors.components.VizLayout.container, children: [
    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.viz, children: size && children(size.width, size.height) }),
    /* @__PURE__ */ jsxRuntime.jsx("div", { style: legendStyle, ref: legendRef, "data-testid": e2eSelectors.selectors.components.VizLayout.legend, children: /* @__PURE__ */ jsxRuntime.jsx(ScrollContainer.ScrollContainer, { children: legend }) })
  ] });
};
const getVizStyles = (theme) => {
  return {
    viz: css.css({
      flexGrow: 2,
      // without this, minWidth becomes `min-content`, which means the canvas will
      // never collapse down below its initial size. this means that the legend can never scale up in size
      minWidth: 0,
      borderRadius: theme.shape.radius.default,
      "&:focus-visible": mixins.getFocusStyles(theme)
    })
  };
};
const VizLayoutLegend = ({ children }) => {
  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
};
VizLayout.Legend = VizLayoutLegend;

exports.VizLayout = VizLayout;
exports.VizLayoutLegend = VizLayoutLegend;
//# sourceMappingURL=VizLayout.cjs.map