@forter/kpi v1.10.4
fc-kpi
An element that represents a KPI
Usage
<script>
import '@forter/kpi';
</script>
<fc-kpi></fc-kpi>
Examples
<!-- 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'
},
{...},
{...},
{...}
]
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 |
1 month ago
1 month ago
2 months ago
11 months ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago