HeroMetric

Guidelines#

Use it for the single metric a page is about (pipeline created, revenue booked) at the top of an analytics view.

What you provide: label, value and previousValue (numbers), valueText/previousText for formatted display ("€482k"), hint, icon and isLoading. The figure is 36px semibold tabular-nums; the 8px pacing bar is emerald when ahead of the previous period and amber when behind.

Facts#

API#

TypeScript declarations emitted from src/features/analytics/ui/hero-metric.tsx.

/**
 * Headline metric band: the period's bottom-line number at hero size, paced
 * against the previous period of equal length with a progress bar. Falls back
 * to the plain number when no comparison period exists (open-ended range).
 *
 * `valueText` / `previousText` let a caller render the figure in its own units
 * — money, most of the time — while `value` / `previousValue` stay numeric for
 * the delta and the pacing bar. A money hero whose currencies cannot be
 * reduced to one number passes `previousValue: null`: the formatted total
 * still shows, the comparison simply doesn't.
 */
export declare function HeroMetric({ label, value, previousValue, valueText, previousText, hint, icon, isLoading, }: {
    label: string;
    value: number;
    /** Same metric for the preceding period of equal length (null hides pacing) */
    previousValue: number | null;
    /** Overrides how `value` is rendered (the number is still used for math) */
    valueText?: string;
    /** Overrides how `previousValue` is rendered */
    previousText?: string;
    /** Secondary line under the figure — context the number alone doesn't carry */
    hint?: string;
    icon?: React.ReactNode;
    isLoading: boolean;
}): JSX.Element;

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
  return h(DC.HeroMetric, { label: "Pipeline created", value: 482000, previousValue: 391000, valueText: "€482k", previousText: "€391k", hint: "Ahead of the €450k target", icon: h(I.TrendingUp, { className: "size-4" }), isLoading: false });
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Data display#