A shared BigNumber component is available in the below path
src/app/shared/components/big-number
- Create a new angular Component inside a Program following the below folder structure.
- Add the common component in the html file.
- In the component typescript file add the getReportData Function which fetches the queries according to the configurations. For reference follow this file
src/app/views/teacher-attendance/pages/teacher-attendance-summary/reports/tas-average-attendance-bignumber/tas-average-attendance-bignumber.component.ts
- Add the configuration to the program config files found in the config folder.
\
- label is the tab/report name the current kpi belongs to
- filter is an array of objects, where each object corresponds to the rbac level containing specific details for each levels
- hierarchyLevel is the mapping of the current level to the logged in Level.
- timeSeriesQueries hold key/object pairs where key is the chart type and value is the query for fetching the data for that chart. They are fetched when date time filter is involved
- Similar to timeSeriesQueries queries hold the queries for non-date time filter scenarios
- level inside the actions just specifies the name of next level in the given hierarchy.
- The bigNumber object inside options contains extra options to be sent to that specific chart type.
- title is the bigNumber titles to be displayed
- valueSuffix is the suffix to the bigNumber Value to be displayed
property is the column name/ property name in the output of the query to be displayed as the BigNumber.