Gauge Chart

Круговые индикаторы. Pro · Графики и аналитика › Аналитика и сценарии

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add gauge-chart

npm install valyro-ui-pro

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

Prop	Type	Default
`value` *	`number`		Current reading; the indicator is clamped to `min`–`max`, a non-finite value shows as `min`.
`min`	`number`	`0`	Default 0.
`max`	`number`	`100`	Default 100.
`bands`	`GaugeBand[]`		Threshold bands in ascending order; the value takes the tone of its band.
`sweep`	`180 \| 270`	`180`	Semicircle (180) or open ring (270). Default 180.
`indicator`	`'arc' \| 'needle'`	`'arc'`	`arc`: progress arc. `needle`: colored bands with a needle. Default `arc`.
`label`	`string`		Caption under the value.
`valueFormatter`	`ValueFormatter`		Formats the center value and the `min`/`max` end labels (one decimal by default).
`locale`	`string`		BCP 47 locale for the default number formatting. Default: the `ThemeProvider` locale, then the browser's.
`size`	`number`	`240`	Max width in px; the gauge scales down in narrow containers. Default 240.
`ariaLabel` *	`string`		Accessible name of the gauge; the formatted value is appended to it.

Metric Comparison — Сравнение показателей
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 — Биржевые свечи с объёмами и скользящими средними