Adding a Map KPI into dashboard ms

Last updated 1 year ago

Was this helpful?

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

src/app/shared/components/maps/leaflet-map

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:
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.

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:

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

Before Group By:

After Group By:

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

Last updated 1 year ago

Was this helpful?

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

src/app/shared/components/maps/leaflet-map

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:
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.

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:

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

Before Group By:

After Group By:

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