Compact current-vs-previous or actual-vs-target metric.
ComparisonMetric pairs a primary value with optional previous-period, target, delta, and progress context.
Use for KPI tiles that need current and previous context.
<ComparisonMetric
format="currency"
label="Revenue"
previousValue={438000}
targetValue={520000}
value={482000}
/>import { ComparisonMetric } from "@froggdesign/enter-ui-react";Target values render a compact meter that works inside any dashboard surface.
The current value and rounded trend lead the tile. Previous and Target values use separate labelled columns, followed by a meter and a visible achievement percentage. Content wraps within narrow cards without a fixed minimum width.
Numeric deltas display at most one decimal place (for example, +10% or +7.7%). Derived deltas describe relative change, including when format="percent"; they are not percentage-point changes. No automatic delta is shown when the previous value is zero.
Use targetValue for a goal. The legacy comparison fields are optional additional context; do not repeat the same target in comparisonValue. Zero-valued previous and target values remain visible.
When targetValue is present, ComparisonMetric renders a native meter with an accessible target percentage. The visible value remains the primary reading.
label: metric label.value: primary numeric or rendered value.previousValue: previous period value.targetValue: target or limit value.delta: optional explicit delta; otherwise numeric previous/current values derive a percent delta.format: number, percent, or currency.currency: ISO currency code for currency formatting.locale: locale passed to Intl.NumberFormat.className: style hook for layout.comparisonLabel, comparisonValue, and trend remain supported.ComparisonMetric uses .eui-comparison-metric, .eui-comparison-metric__label, .eui-comparison-metric__value, .eui-comparison-metric__meta, and .eui-comparison-metric__progress. Use className for card placement and let the component keep its neutral metric rhythm.