@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
81 lines (80 loc) • 3.42 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const useLabels = require("../hooks/useLabels.cjs");
const Kpi_styles = require("./Kpi.styles.cjs");
const Typography = require("../Typography/Typography.cjs");
const DEFAULT_LABELS = {
/** The text at the top of the kpi. */
title: "",
/** The text in the middle of the kpi. */
indicator: void 0,
/** The text to the right of the indicator. */
unit: void 0,
/** The text to the right of the visual comparison. */
comparisonIndicatorInfo: void 0
};
const HvKpi = (props) => {
const {
trendIndicator = null,
visualIndicator = null,
visualComparison = null,
indicatorUnitTextVariant = "title2",
indicatorTextVariant = "title1",
labels: labelsProp,
classes: classesProp,
className,
...others
} = uikitReactUtils.useDefaultProps("HvKpi", props);
const { classes, cx } = Kpi_styles.useClasses(classesProp);
const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
const InternalVisualComparison = typeof visualComparison === "string" ? Typography.HvTypography : "div";
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(classes.root, className), ...others, children: [
/* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: "label", children: labels.title }) }),
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.indicatorsContainer, children: [
visualIndicator && /* @__PURE__ */ jsxRuntime.jsx(
"div",
{
className: cx(
classes.visualIndicatorContainer,
classes.spacingToTheRight
),
children: visualIndicator
}
),
labels.indicator && /* @__PURE__ */ jsxRuntime.jsx(
Typography.HvTypography,
{
className: cx(classes.spacingToTheRight, classes.indicatorText),
variant: indicatorTextVariant,
children: labels.indicator
}
),
labels.unit && /* @__PURE__ */ jsxRuntime.jsx(
Typography.HvTypography,
{
className: classes.indicatorUnit,
variant: indicatorUnitTextVariant,
children: labels.unit
}
)
] }),
visualComparison && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.comparisonComposition, children: [
trendIndicator && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.trendLine, classes.spacingToTheRight), children: trendIndicator }),
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.comparisonContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
InternalVisualComparison,
{
className: cx(classes.comparisons, classes.spacingToTheRight),
variant: "label",
children: visualComparison
}
) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.comparisonContainer, children: /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: classes.comparisons, variant: "caption2", children: labels.comparisonIndicatorInfo }) })
] })
] })
] });
};
exports.kpiClasses = Kpi_styles.staticClasses;
exports.HvKpi = HvKpi;