ComparisonMetric

ComparisonMetric pairs a primary value with optional previous-period, target, delta, and progress context.

#Default usage

<ComparisonMetric
  format="currency"
  label="Revenue"
  previousValue={38100}
  targetValue={50000}
  value={42800}
/>

#Import

import { ComparisonMetric } from "@froggdesign/enter-ui-react";

#Patterns

#Accessibility

When targetValue is present, ComparisonMetric renders a native meter with an accessible target percentage. The visible value remains the primary reading.

#API

• 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.
• Legacy comparisonLabel, comparisonValue, and trend remain supported.

#Styling

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.