Scenario Simulator
Assumption sliders update the forecast, uncertainty band and KPIs. Pro · Charts and analytics › Analysis and scenarios
What-if forecasting: move the assumptions (or pick a named scenario) and the forecast, its uncertainty band and the KPIs update together, each compared with the base scenario. The model is yours and pure; the component shows its units, ranges and method so a result can be reproduced.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add scenario-simulatornpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { ScenarioSimulator } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
inputs * | ScenarioInput[] | Assumptions the reader can move: range, step, unit and the base value. | |
simulate * | (values: Record<string, number>) => ScenarioResult | The model: values in, forecast series and KPIs (with optional low / high bounds) out. Keep it pure and fast. | |
scenarios | ScenarioPreset[] | Named scenarios ("Pessimistic", "Base", "Optimistic") that set several inputs at once. | |
values | Record<string, number> | Current values by input id. | |
defaultValues | Record<string, number> | Initial values when uncontrolled. Default: every input's defaultValue. | |
onValuesChange | (values: Record<string, number>) => void | Called with all values when the reader moves an input or picks a scenario. | |
baseline | Record<string, number> | Values the forecast is compared with (dashed line, KPI deltas). Default: the inputs' defaults. | |
precision | number | Fraction digits of KPI values that set no digits. | |
seriesFormat | ValueFormat | How forecast values read on the axis and in the data table. Default: like the first KPI. | |
currency | string | ISO 4217 code for format: 'currency' values. | |
method | ReactNode | The model's method in words — formulas and sources, so results can be reproduced. | |
chartHeight | number | 220 | Chart height in px. Default 220. |
loading | boolean | false | The model is loading: skeleton. |
error | ReactNode | Loading failed: shown instead of the simulator. | |
title | ReactNode | Heading. Default: labels.title. | |
headingLevel | 2 | 3 | 4 | 5 | 3 | Level of the heading (default 3). |
locale | string | BCP 47 locale for numbers; defaults to the ThemeProvider's. | |
labels | Partial<ScenarioSimulatorLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Gauge Chart — Radial gauges
- Metric Comparison — Metric comparison
- Analytics Filter Bar — Dashboard filters
- 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
Previous: Analytics Filter Bar · Next: Variance Explainer · All Charts and analytics