Record KPI
GridMate provides a component to display number or percentage values in a graphical view.
In this tutorial, we will setup a Record KPI of the opportunity Amount and Opportunity. Below is a quick demo on how to configure the KPI components.
{
"sections": [
{
"name": "opportunityKPIList",
"label": "Opportunity KPI",
"active": true,
"cols": 3,
"rows": [
[
{
"apiName": "ExpectedRevenue",
"managedComponent": true,
"componentDef": {
"component": "gmpkg:kPICurrencyFieldLWC",
"attributes": {
"color": "red",
"radius": "15rem",
"thickness": "2rem"
}
}
},
{
"apiName": "Amount",
"managedComponent": true,
"componentDef": {
"component": "gmpkg:kPICurrencyFieldLWC",
"attributes": {
"color": "#78b0fd",
"radius": "10rem",
"thickness": "0.5rem"
}
}
},
{
"apiName": "Probability",
"managedComponent": true,
"componentDef": {
"component": "gmpkg:kPIPercentageFieldLWC",
"attributes": {
"color": "#45c65a",
"radius": "15rem",
"thickness": "2rem"
}
}
}
]
]
}
]
}
As you can see, KPI component is used with the GM - Record Layout component. We configured three Opportunity fields as KPI : Expected Revenue, Amount and Probability.
As of today we support tow KPI: Currency and Percentage.
Currency KPI
{
"apiName": "ExpectedRevenue",
"managedComponent": true,
"componentDef": {
"component": "gmpkg:kPICurrencyFieldLWC",
"attributes": {
"color": "red",
"radius": "15rem",
"thickness": "2rem"
}
}
}
component: gmpkg:kPICurrencyFieldLWC
color: Ring coloring (default value is #0176d3)
radius : Ring size (default value is 10rem)
thickness: Ring thickness (default value is 1.5rem)
Percentage KPI
{
"apiName": "Probability",
"managedComponent": true,
"componentDef": {
"component": "c:kPIPercentageFieldLWC",
"attributes": {
"color": "#45c65a",
"radius": "15rem",
"thickness": "2rem"
}
}
}
component: gmpkg:kPIPercentageFieldLWC
color: Ring coloring (default value is #0176d3)
radius : Ring size (default value is 10rem)
thickness: Ring thickness (default value is 1.5rem)
Last updated
Was this helpful?