Metric Cards - Flexprice

Use Metric Cards to show a row of headline numbers: revenue, cost, margin, margin percent, and any custom metrics you define. Part of Usage Widgets.

Preview
Code

<MetricCards
  metrics={[
    { id: 'revenue', titleKey: 'revenue', value: 12500, currency: 'USD' },
    { id: 'cost', titleKey: 'cost', value: 4200, currency: 'USD' },
  ]}
/>

What MetricCards supports

Revenue, cost, margin, and margin percent cards
Custom metrics (any name and value you pass in)
Currency formatting per card
Percent formatting
Change indicators (up / down)
Loading skeleton state

Where to use MetricCards

Usage dashboards
Customer portal overview
Account summary pages

Importing MetricCards

import '@flexprice/ui/style.css';
import { MetricCards, type MetricCardItem } from '@flexprice/ui';

Rendering MetricCards

const metrics: MetricCardItem[] = [
  { id: 'revenue', titleKey: 'revenue', value: 12500, currency: 'USD' },
  { id: 'cost', titleKey: 'cost', value: 4200, currency: 'USD' },
  { id: 'margin', titleKey: 'margin', value: 8300, currency: 'USD', showChangeIndicator: true },
  { id: 'margin-percent', titleKey: 'marginPercent', value: 66.4, isPercent: true, showChangeIndicator: true },
];

<MetricCards metrics={metrics} />

titleKey is one of revenue, cost, margin, marginPercent, cpm, or custom. For custom, also pass customLabel with the display name. See Ways to provide data for SDK, API, backend, and static JSON options.

Mapping API data into MetricCards

import { adaptMetricCards } from '@flexprice/ui';

const metrics = adaptMetricCards(costAnalytics, customAnalytics, {
  show_revenue_metric: true,
  show_cost_metrics: true,
  show_custom_metrics: true,
});

Usage Widgets

Overview of all four usage components.

Usage Trend Chart

Line chart of usage over time, one series per feature.

Usage Breakdown

Grouped, sortable table of usage and cost by feature.