Analytics Filter Bar

Фильтры дашборда. Pro · Графики и аналитика › Аналитика и сценарии

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add analytics-filter-bar

npm install valyro-ui-pro

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

Prop	Type	Default
`value`	`AnalyticsFilterBarValue`		Controlled `value`; use with `onValueChange`.
`defaultValue`	`AnalyticsFilterBarValue`	`DEFAULT_VALUE`	Initial `value` when uncontrolled.
`onValueChange`	`(value: AnalyticsFilterBarValue) => void`		Called with the new `value` when it changes.
`ranges`	`AnalyticsFilterOption[]`	`DEFAULT_RANGES`	Date-range presets. Default 24h / 7d / 30d / 90d.
`customRangeLabel`	`string`		Adds a "custom" segment; selecting it sets range to "custom". It reads `labels.customRange` ("Custom…") until then and shows these dates (e.g. "Mar 1 – Mar 14") while selected.
`fields`	`AnalyticsFilterField[]`	`[]`	Fields offered by "Add filter".
`granularities`	`AnalyticsFilterOption[]`	`DEFAULT_GRANULARITIES`	Default Hourly / Daily / Weekly / Monthly.
`actions`	`ReactNode`		Right-aligned slot, e.g. an export button.
`labels`	`Partial<AnalyticsFilterBarLabels>`		Overrides for the built-in strings.

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