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 |