Analytics Filter Bar

Dashboard filters. Pro · Charts and analytics › Analysis and scenarios

Dashboard toolbar: date range, removable filter chips, compare toggle, granularity and actions.

Installation

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 — Radial gauges
Metric Comparison — Metric comparison
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