@grafana/ui
Version:
Grafana Components Library
61 lines (58 loc) • 2.51 kB
JavaScript
import { jsxs, jsx } from 'react/jsx-runtime';
import { cx } from '@emotion/css';
import { memo } from 'react';
import { clearButtonStyles } from '../Button/Button.mjs';
import { FormattedValueDisplay } from '../FormattedValueDisplay/FormattedValueDisplay.mjs';
import { buildLayout } from './BigValueLayout.mjs';
import { BigValueJustifyMode } from './BigValueTypes.mjs';
import { PercentChange } from './PercentChange.mjs';
"use strict";
const BigValue = memo((props) => {
const { onClick, className, hasLinks, theme, justifyMode = BigValueJustifyMode.Auto } = props;
const layout = 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__ */ jsxs("div", { className, style: panelStyles, title: tooltip, children: [
/* @__PURE__ */ jsxs("div", { style: valueAndTitleContainerStyles, children: [
textValues.title && /* @__PURE__ */ jsx("div", { style: titleStyles, children: textValues.title }),
/* @__PURE__ */ jsx(FormattedValueDisplay, { value: textValues, style: valueStyles }),
showPercentChange && /* @__PURE__ */ jsx(
PercentChange,
{
percentChange,
styles: layout.getPercentChangeStyles(percentChange, percentChangeColorMode, valueStyles)
}
)
] }),
layout.renderChart()
] });
}
return /* @__PURE__ */ jsxs(
"button",
{
type: "button",
className: cx(clearButtonStyles(theme), className),
style: panelStyles,
onClick,
title: tooltip,
children: [
/* @__PURE__ */ jsxs("div", { style: valueAndTitleContainerStyles, children: [
textValues.title && /* @__PURE__ */ jsx("div", { style: titleStyles, children: textValues.title }),
/* @__PURE__ */ jsx(FormattedValueDisplay, { value: textValues, style: valueStyles })
] }),
layout.renderChart()
]
}
);
});
BigValue.displayName = "BigValue";
export { BigValue };
//# sourceMappingURL=BigValue.mjs.map