# Adding a Map KPI into dashboard ms

A shared map component using leaflet is available in the below path

`src/app/shared/components/maps/leaflet-map`<br>

* Create a new report component and add the above shared component in the html files with any additional elements if needed

\
For reference follow the below file:

src/app/views/teacher-attendance/pages/teacher-attendance-summary/reports/teacher-attendance-map/teacher-attendance-map.component.html

* In the component ts file add the required functions (ex: get reportData, apply criteria, drilldown) respective to each feature.

**For reference follow the below file:**

src/app/views/teacher-attendance/pages/teacher-attendance-summary/reports/teacher-attendance-map/teacher-attendance-map.component.ts

* Options available in the configuration:&#x20;
* indicatorType specifies whether the kpi is of type percent or any general value type.
* indicator represents the property name of the kpi on which map has to be based on. (property name is nothing but alias name in the query)
* title specifies the title to be displayed in the legend
* tooltipMetrics  is an array of objects which is used to construct tooltip.It contains a property name/value which if present in the data will be added along with its prefix and suffixes to the tooltip element.&#x20;

&#x20;

<figure><img src="https://lh5.googleusercontent.com/1LbZAtbo9SZXvTZtAKNCSMTmPrW1ra3oKQQnB89ZX5ZyaPDbR1TW3b2Dxt8x9MWs-kayg6Cez6-hdmAuBZSJG8Zj__oq1k1KmhehU-_RJfUTP9hyVXP--Z4qu3Hb9oILcRLCZ1W8fWWOWPI7HzmTmV0" alt=""><figcaption></figcaption></figure>

Above options are applicable for certain scenarios where metric filter is not needed.

In a case where a metric filter is needed few extra options are available in the configuration.

* metricFilterNeeded is a flag which can be set true if a metric filter is involved in the map report.
* groupByColumn is a property by which the data from the queries can be grouped on a given level.
* metricValueProp specifies the value property to identify the value of a given metric option.
* metricLabelProp specifies the label of the metric option.

Example for the above scenario can be found below:

<figure><img src="https://lh4.googleusercontent.com/bNBtB-x9HiHy_8TUfQdy8Azq_13KNRWFg42hgqIYsWPfObJpHue7wGRpXYCvILPD9i3P5_vN2KaONA1tzZZxdMLW3lURdYpVC9-vw7XfNlsnX_W4x0ZZ9c9qSFC2EaQSxohIwa70HlxI_NPwBOkV8Gc" alt=""><figcaption></figcaption></figure>

Group by is used to group all metrics for a given district/block/cluster into a single row.<br>

**Before Group By:**

<figure><img src="https://lh5.googleusercontent.com/GCZoJzfw_WOdnu2XbYzZ890X4pusvwl62zgsP4O7EtSMIY6er5ziVt2feyxRZsGNSyFZnxjewVvkuKGw0YCoPDP7c_kkawg7s9fqO6pUuyg7C2ZNjuHLwMip7GgLFOr4Zch33u39Y5nx8ap4wij5j1k" alt=""><figcaption></figcaption></figure>

\
**After Group By:**&#x20;

<figure><img src="https://lh5.googleusercontent.com/BAf9YYYfdr8n86sMGcVt-PXlshBbvBrK3GgWu3TBp2-yNb0Ms3Ihd_4IuvPqRpmvlEN3NCof4uuBFFk9GoHiZup4n3_Sw5uX7hY9ypmG1kEiwS6bfEoY3Y4UeYZEBvMSVyU5oBnizhB48Ig7VV0f6wU" alt=""><figcaption></figcaption></figure>

To add drill down features just follow the steps in the table i.e to subscribe to the drilldown service in the map report component .

For reference follow below report:

src/app/views/teacher-attendance/pages/teacher-attendance-summary/reports/teacher-attendance-map/teacher-attendance-map.component.ts

\ <br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://cqube.sunbird.org/use-cqube/visualizing-the-data/enhance-customize-cqube/manual-and-automated-testing/adding-a-map-kpi-into-dashboard-ms.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.