@forter/kpi

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