Add support for box-and-whisker plots

[bgsandan]

User story

As a nutritionist, I want to explore MN data in a box-and-whisker plot, so I can get a broader understanding of it.

Summary

A box-and-whisker plot on the biomarker data page showing MN concentration in different regions.

Figma prototype

Wireframe

Location

Biomarker data page

Related issue

The box-and-whisker plot is part of:

420

Resources

Sample data available in MS Teams (WP4)

Acceptance Criteria

• [ ] Box-and-whisker plot is visible on the biomarker data page
• [ ] Plot shows the region data
• [ ] (Bonus points) Plot shows deficiency threshold and threshold for abnormal values
• [ ] (Bonus points) Plot can be maximised for a closer view
• [ ] (Bonus points) You can toggle Outliers on/off

[jyou-bgs]

The data for the ChartJS boxplot plugin can be provided as an array of 5 values in the following format: [Min, Lower quartile(Q1), Median, Upper quartile(Q3), Max]

So, for the following values it will construct this plot: [10, 20, 30, 40, 50]

It's also possible to provide multiple data values for the same plot and the plugin will calculate the statistical values on-the-fly. So, for [10, 20, 30, 40, 50, 15, 25, 35, 45, 55] the following plot is generated:

And these are the values calculated by the plugin:

It would be good if the API can provide an array of these value for each of the regions so for our chart example the Regions, Central, North, South, South East and West the data could have the following format (array of arrays): [[10, 20, 30, 40, 50],[10, 20, 30, 40, 50],[10, 20, 30, 40, 50],[10, 20, 30, 40, 50],[10, 20, 30, 40, 50]]

We also need to return the Deficiency Threshold and Threshold for abnormal values.

[bgsandan]

Hi @jyou-bgs this looks great thanks.  One question, how does the plugin deal with plotting/displaying outlier values?

[jyou-bgs]

I haven't got the displaying of outliers working yet although it does do it - the online examples and documentation is a bit sketchy. The outliers will look something like this and it's possible to control the colour and radius for styling: I've implemented the toggle switch for the outliers so just need to get them to show.

[jyou-bgs]

To display outliers we have to use the correct constructor/interface for the ChartJS boxplot plugin as follows:

plotData =  
  { 
      min: 10, 
      q1: 20,
      median: 30, 
      q3: values: 40,
      max: values: 50,
      outliers: [2,5,7,9,55,74,97,...]  // supply an array of numbers
  }

See line 644 in biomarkerStatus.component.ts https://github.com/micronutrientsupport/micronutrient-support-tool/blob/develop/src/app/pages/quickMaps/pages/biomarkers/biomarkerStatus/biomarkerStatus.component.ts which currently generates random values to populate the plots.