opensrp-client-reporting

OpenSRP Client Reporting Library

Introduction

The Reporting library allows creating of visualizations for display in an application for instance on a dashboard.
The library provides a custom numeric value display to show a label and a numeric value and extends HelloCharts Android library to show Charts e.g. PieCharts

Supported visualizations

The current supported visualizations are

1. Numeric display

   • This is used to display a label and a value (count)

2. PieChart

   • This is used to display ratios with different colors for the different ratios being displayed

Displaying visualizations

To display the currently supported visualization, you will need to implement the Reporting.View contract Then create your views in the overridden method called void buildVisualization(ViewGroup mainLayout) The mainLayout is the root view you want the visualizations to be shown.

Numeric indicator display

To display a numeric value use the code snippet below.

  NumericDisplayModel indicator1 = getIndicatorDisplayModel(TOTAL_COUNT, ChartUtil.numericIndicatorKey, R.string.total_under_5_count, indicatorTallies);
  mainLayout.addView(new NumericIndicatorView(getContext(), indicator1).createView());

TOTAL_COUNT is an enumeration type used to denote the type of aggregation you want to use on the passed indicatorTallies . You can also use LATEST_COUNT if you need to get the latest count based on date and time.

PieChart

For pie charts display. You can use the following code snippet.

   PieChartSlice indicator2_1 = getPieChartSlice(LATEST_COUNT, ChartUtil.pieChartYesIndicatorKey, getResources().getString(R.string.yes_slice_label), getResources().getColor(R.color.colorPieChartGreen), indicatorTallies);
   PieChartSlice indicator2_2 = getPieChartSlice(LATEST_COUNT, ChartUtil.pieChartNoIndicatorKey, getResources().getString(R.string.no_button_label), getResources().getColor(R.color.colorPieChartRed), indicatorTallies);
   mainLayout.addView(new PieChartIndicatorView(getContext(), getPieChartDisplayModel(addPieChartSlices(indicator2_1, indicator2_2), R.string.num_of_lieterate_children_0_60_label, R.string.sample_note)).createView());

Progress indicator

This indicator widget basically has a progressbar, main title(Label) and a sub title.

The following are the configurable properties

Property	Type	Usage
progressBarForegroundColor	int	This is a color Resource ID that sets the progress bar foreground color (API 23 and above)
progressBarBackgroundColor	int	This is a color Resource ID that sets the progress bar background color (API 23 and above)
title	String	This is a label for the indicator (appears at top)
subTitle	String	This is a sub title (label appears at bottom)
progress	int	This the progress of the indicator out of 100 (Percentage %)
isTitleHidden	int	This hides or shows the title (default false)
isSubTitleHidden	int	This hides or shows the sub title (default false)
progressDrawable	int	This is the Resource ID of your custom progressbar drawable Template Here

NB: For more flexibility and configurations, it is also possible to style the widget by overriding the widgets drawable. You can do this by cloning the file here and making the necessary changes. Then place the files in your app's drawables folder. This is especially needed to configure the progress bar colors and styling for API < 23

using the property progressDrawable listed above, you can set the progressDrawable for individual instances of the ProgressIndicatorViews both programmatically or via xml styling.

Programmatically:

        ProgressIndicatorView progressWidget = getActivity().findViewById(R.id.progressIndicatorView);
        progressWidget.setProgress(42);
        progressWidget.setTitle("Users registered - 42%");
        progressWidget.setProgressDrawable(R.drawable.progress_indicator_bg);
        progressWidget.setProgressBarForegroundColor(ContextCompat.getColor(getContext(), R.color.pnc_circle_red));
        progressWidget.setProgressBarBackgroundColor(ContextCompat.getColor(getContext(), R.color.pnc_circle_yellow));

Via XML:

 <org.smartregister.reporting.view.ProgressIndicatorView
            android:id="@+id/progressIndicatorView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:progressBarBackgroundColor="@color/text_black"
            app:progressBarForegroundColor="@color/colorPastelGreen"
            app:subTitle="Coverage"
            app:progressDrawable="@drawable/custom_progress_indicator_bg"

Table View

This table widget basically has a header with column head values and rows to display data in a tabular format.

The following are the configurable properties

Property	Type	Usage
headerTextColor	int	This is a color Resource ID that sets the header text color
headerTextStyleColor	Enum	This is a string enum which can have any of the values normal, italic or bold for xml , Programmatically one should use the Typeface class enum
headerBackgroundColor	int	This is a color Resource ID that sets the header background color
rowTextColor	String	This is a color Resource ID that sets the data rows text color
borderColor	int	This is a color Resource ID that sets the table border color. By default, it inherits from the header background color
rowBorderHidden	boolean	This is a boolean value that sets the visibility of the individual table rows border

Programmatically:

   TableView tableView = getActi4vity().findViewById(R.id.tableView);
   tableView.setTableData(Arrays.asList(new String[]{"Vaccine Name", "Gender", "Value"}), getDummyData());
   tableView.setHeaderTextColor(ContextCompat.getColor(getContext(), R.color.colorPieChartRed));
   tableView.setHeaderBackgroundColor(ContextCompat.getColor(getContext(), R.color.light_blue));
   tableView.setRowTextColor(ContextCompat.getColor(getContext(), R.color.alert_complete_green));
   tableView.setBorderColor(ContextCompat.getColor(getContext(), R.color.pnc_circle_yellow));    
   tableView.setHeaderTextStyle(Typeface.ITALIC);  
   tableView.setRowBorderHidden(true);
        

The setTableData

Via XML:

 <org.smartregister.reporting.view.TableView
        android:id="@+id/tableView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        app:borderColor="@color/colorPieChartRed"
        app:headerBackgroundColor="@color/colorSecondaryGreen"
        app:headerTextColor="@color/white"
        app:headerTextStyle="italic"
        app:rowTextColor="@color/text_black"
        app:rowBorderHidden="true" />

How to use:

The setTableData method is used to populate the header columns and row values. The first parameter is a list of header columns whereas the second column is a list of values (rows data).

The number of columns for the table view widget is derived from the count of values in the header parameter list.

The rows data is populated by creating a list of all the data to be rendered in order. Thus if the header column list has 3 values and the data row list has 6 values, the table view will render the first 3 data items on the list in the first row (thereby matching them with the corresponding column header values) and the last 3 items as the 2nd row on the table

        TableView tableView = getActivity().findViewById(R.id.tableView);
        tableView.setTableData(Arrays.asList(new String[]{"Vaccine Name", "Gender", "Value"}), getDummyData());
        

The setTableData method is also overloaded to take the extra parameters of Row IDs and a click listener in order to add row click listeners on individually clicked items.

 TableView tableView = getActivity().findViewById(R.id.tableView);
 tableView.setTableData(Arrays.asList(new String[]{"Vaccine Name", "Gender", "Value"}), getDummyData(), getDummyDataIds(), viewClickListener);

One can use the view tag R.id.table_row_id to get the corresponding row id in the onclick handler, e.g.

     @Override
     public void onClick(View view) {

       //Do something with row id
        view.getTag(R.id.table_row_id)

     }

Checkout the sample app for more examples..

Optional Configurable Properties

Property	Type	Usage
SHOULD_ALLOW_ZERO_TALLIES	boolean	This allows zero tallies to be displayed, otherwise they will be skipped