Metric Comparison

Metric comparison. Pro · Charts and analytics › Analysis and scenarios

Current vs previous period for several metrics: values, delta with trend color and paired bars.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add metric-comparison

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { MetricComparison } from 'valyro-ui-pro';

Prop	Type	Default
`metrics` *	`ComparisonMetric[]`		One row per metric.
`bars`	`'delta' \| 'paired'`	`'delta'`	`delta`: one bar per row from a centre line, its length the change on a scale shared by all rows, green or red by whether the change is good. `paired`: current and previous bars, each row scaled to its own larger value. Default `delta`.
`currentLabel`	`string`	`'Current'`	Column title for the current period. Default "Current".
`previousLabel`	`string`	`'Previous'`	Column title for the previous period. Default "Previous".
`valueFormatter`	`ValueFormatter`		Formats current and previous values of metrics without their own `format`.
`locale`	`string`		BCP 47 locale for the default number and percentage formatting. Default: the `ThemeProvider` locale, then the browser's.
`labels`	`Partial<MetricComparisonLabels>`		Overrides for the built-in strings.
`ariaLabel`	`string`		Accessible name of the table.

Gauge Chart — Radial gauges
Analytics Filter Bar — Dashboard filters
Scenario Simulator — Assumption sliders update the forecast, uncertainty band and KPIs
Variance Explainer — Waterfall: what drove a KPI change, with drill-down into factors
Map Layer Story — Map story: each step toggles data layers and frames a region, no WebGL
Line Chart — Line charts
Bar Chart — Bar charts
Area Chart — Filled area charts
Scatter Chart — Scatter and bubble charts with a trend line
Sparkline — Tiny inline charts
Confidence Band Chart — Forecast with confidence intervals and outliers, keyboard-readable points
Candlestick Chart — Stock candlesticks with volume and moving averages