Variance Explainer

Водопад: из чего сложилось изменение KPI, с раскрытием факторов. Pro · Графики и аналитика › Аналитика и сценарии

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add variance-explainer

npm install valyro-ui-pro

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

Prop	Type	Default
`start` *	`{ label: string; value: number }`		The KPI before: label ("Сентябрь") and value.
`end`	`{ label: string; value: number }`		The KPI after. Default: start plus every factor; a difference shows as an "unexplained" step.
`factors` *	`VarianceFactor[]`		Contributions to the change; factors with `children` can be broken down.
`path`	`string[]`		Drill-down path of factor ids.
`defaultPath`	`string[]`	`EMPTY`	Initial path when uncontrolled.
`onPathChange`	`(path: string[]) => void`		Called when the reader drills into a factor or goes back up.
`sort`	`'given' \| 'impact'`	`'given'`	`impact` orders factors by absolute contribution; `given` keeps your order. Default `given`.
`format`	`ValueFormat`	`{}`	How values read.
`currency`	`string`		ISO 4217 code for `format: 'currency'`.
`height`	`number`	`220`	Height of the bars area in px. Default 220.
`loading`	`boolean`	`false`	Data is loading: skeleton.
`error`	`ReactNode`		Loading failed: shown instead of the chart.
`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<VarianceExplainerLabels>`		Overrides for the built-in English text; keys left out keep their defaults.