Metric Comparison

Сравнение показателей. Pro · Графики и аналитика › Аналитика и сценарии

Установка

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 — Круговые индикаторы
Analytics Filter Bar — Фильтры дашборда
Scenario Simulator — Ползунки допущений меняют прогноз, коридор неопределённости и KPI
Variance Explainer — Водопад: из чего сложилось изменение KPI, с раскрытием факторов
Map Layer Story — История по карте: шаги включают слои данных и кадрируют регион, без WebGL
Line Chart — Линейные графики
Bar Chart — Столбчатые диаграммы
Area Chart — Графики с заливкой
Scatter Chart — Точечные и пузырьковые диаграммы с линией тренда
Sparkline — Мини-графики
Confidence Band Chart — Прогноз с доверительными интервалами и выбросами, точки читаются с клавиатуры
Candlestick Chart — Биржевые свечи с объёмами и скользящими средними