kpi from Forter Components
npm install @forter/kpiAn element that represents a KPI
``html
`
html
`
The aggregations object is an array of aggregations.Each item in the array represents a single cell.
Optional Fields are:
labelFontSize, labelColor, valueFontSize, valueColor, iconThis is an example of the most detailed object you can provide and its structure:
`js
const aggregations = [
{
items: [
{
label: 'a translated label already',
labelFontSize: 26,
labelColor: 'red',
value: 'any preformatted value',
valueFontSize: 12,
valueColor: 'var(--fc-red-500)'
},
{...}
],
icon: 'check',
layout: 'full'/'semi'
},
{...},
{...},
{...}
]
`Properties
| Property | Attribute | Type | Default | Description |
|--------------|------------|------------------|---------|-------------------|
|
fetching | fetching | boolean | false | Is fetching state |
| hoverColor | | any | | |
| loading | loading | boolean | false | Is loading state |
| results | results | KpiResult[] | | Array of cells |
| tooltip | | TemplateResult | | |CSS Custom Properties
| Property | Description |
|-------------------------------|--------------------------------------------------|
|
--fc-kpi-item-padding | item inner padding. default: 15px 25px, example: 20px 25px |
| --fc-kpi-label-0-font-size | first label font size. default: 13px, example: 15px |
| --fc-kpi-tooltip-y-position | tooltip y position. default: -75%, example: -50% |
| --fc-kpi-value-0-font-size | first value font size. default: 18px, example: 15px` |