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.

GRIDMATE - RECORD KPI

{
   "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)