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

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var Button = require('../Button/Button.cjs');
var FormattedValueDisplay = require('../FormattedValueDisplay/FormattedValueDisplay.cjs');
var BigValueLayout = require('./BigValueLayout.cjs');
var BigValueTypes = require('./BigValueTypes.cjs');
var PercentChange = require('./PercentChange.cjs');

"use strict";
const BigValue = React.memo((props) => {
  const { onClick, className, hasLinks, theme, justifyMode = BigValueTypes.BigValueJustifyMode.Auto } = props;
  const layout = BigValueLayout.buildLayout({ ...props, justifyMode });
  const panelStyles = layout.getPanelStyles();
  const valueAndTitleContainerStyles = layout.getValueAndTitleContainerStyles();
  const valueStyles = layout.getValueStyles();
  const titleStyles = layout.getTitleStyles();
  const textValues = layout.textValues;
  const percentChange = props.value.percentChange;
  const percentChangeColorMode = props.percentChangeColorMode;
  const showPercentChange = percentChange != null && !Number.isNaN(percentChange);
  const tooltip = hasLinks ? void 0 : textValues.tooltip;
  if (!onClick) {
    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: panelStyles, title: tooltip, children: [
      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: valueAndTitleContainerStyles, children: [
        textValues.title && /* @__PURE__ */ jsxRuntime.jsx("div", { style: titleStyles, children: textValues.title }),
        /* @__PURE__ */ jsxRuntime.jsx(FormattedValueDisplay.FormattedValueDisplay, { value: textValues, style: valueStyles }),
        showPercentChange && /* @__PURE__ */ jsxRuntime.jsx(
          PercentChange.PercentChange,
          {
            percentChange,
            styles: layout.getPercentChangeStyles(percentChange, percentChangeColorMode, valueStyles)
          }
        )
      ] }),
      layout.renderChart()
    ] });
  }
  return /* @__PURE__ */ jsxRuntime.jsxs(
    "button",
    {
      type: "button",
      className: css.cx(Button.clearButtonStyles(theme), className),
      style: panelStyles,
      onClick,
      title: tooltip,
      children: [
        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: valueAndTitleContainerStyles, children: [
          textValues.title && /* @__PURE__ */ jsxRuntime.jsx("div", { style: titleStyles, children: textValues.title }),
          /* @__PURE__ */ jsxRuntime.jsx(FormattedValueDisplay.FormattedValueDisplay, { value: textValues, style: valueStyles })
        ] }),
        layout.renderChart()
      ]
    }
  );
});
BigValue.displayName = "BigValue";

exports.BigValue = BigValue;
//# sourceMappingURL=BigValue.cjs.map