An element that represents a KPI
<script>
import '@forter/kpi';
</script>
<fc-kpi></fc-kpi>
<!-- complex -->
<fc-kpi .results="${[{'items':[{'value':'96.74M','label':'Total Approval Rate','valueFontSize':28}],'icon':'admin','layout':'full', 'hoverColor': 'green', 'tooltip': 'Total approve rate takes all approved transactions out of the entire transaction volume'},{'items':[{'value':'3.452%','label':'Normalized Declines'}],'layout':'semi'},{'items':[{'value':'97.45%', 'label':'Normalized Approves','intent':'success'}], 'hoverRGB': 'var(--fc-purple-200)', 'icon':'admin','layout':'semi'},{'items':[{'value':'2.5453%','label':'Chargeback Rate','valueFontSize':28},{'value':'$4839','label':'Chargeback Amount (USD)'}],'layout':'full', 'hoverColor': 'red', 'tooltip': 'Chargeback rate is teh rate of CBs out of all approved transactions'},{'items':[{'value':'2938','label':'Fraud Accounts','valueFontSize':28},{'value':'48389','label':'Out of','flip':true}],'layout':'full', 'hoverColor': 'blue', 'tooltip': 'the number of fraud accounts forter forter tagged as bla blab bla bla bla sdfsdf bla v'},{'items':[{'value':'38%','label':'Approves'},{'value':'52%','label':'Of Total'}],'layout':'semi'},{'items':[{'value':'4738','label':'Declines'},{'value':'48%','label':'Out of','flip':true}],'layout':'semi'}]}"></fc-kpi>
<!-- secondary -->
<fc-kpi .results="${[{'items':[{'value':'96.74M', 'label':'Total Approval Rate'}, {'value':'96.74M'}], 'layout': 'full'}]}"></fc-kpi>
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:
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'
},
{...},
{...},
{...}
]
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 |
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
|