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

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

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