fc-kpi

An element that represents a KPI

Usage

``html



`

Examples


`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, icon

This 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` |