Charts Upgrade

[tony-shannon]

We are revisiting the Charts for the Showcase and @simongamester is working on UX improvements

for now we will work on basis of DataSet with 4 key elements

Age Location (PostCode) Gender Diagnosis (Measles/Asthma/Diabetes/Dementia) Healthscore (1-100)

Will need a dataset with 100-1000 records of this sort to enable chart manipulation at the BI level Will be deidentified data

Will click through to dummy deidentified MPV view with 3/5/7 patients, perhaps randomly

With toggle to identified MPV view of chosen 3/5/7 good test patients

[tony-shannon]

Related wireframes in progress https://invis.io/WYSC631V6XA#

[BogdanScherban]

@tony-shannon @PhilBarrett

I investigated this issue and have a lot of questions about it. Besides this, I prepared my estimation of this task.

STEP 1 (2-3 h)

At this step we should create new page (Business Intelligence) with two main elements:

• search parameters block (without form!);
• main block with right sidebar, which will change main block content (Bar Chart, Pie Chart, Heat Map);
• button Patients which redirect to Patient list;

Questions: 1) Should Business Intelligence page be a Homepage in Showcase-devra? 2) Should I change Showcase main color to orange like invisio? 3) As you can see, topbar lower block (which includes menu button and patient banner) is absent in invisio. I mean green block with Menu button. Should we removed it on this page generally? 4) I need in this three icons in both modes (checked and inversed). Until I don't have them I can use only labels "Bar Chart", "Pie Chart", "Heat Map" 5) Which behavior should be by click on these icons: If nothing, should we add them generally?

STEP 2 (3-4 h)

1) Create searching form in Business Intelligence block. Form data should saved in Store; 2) Create Grids in the main block with labels "Place for map", "Place for N-chart" etc.

Questions: 1) As I understand correctly, "Health Score" is a numberic value from 0 till 100. Am I right?

In this case, can we use following ranges: 0-33: poor 34-66: good 67-100: very good

STEP 3 (5-6 h)

1) Create dummy data; 2) Create functionality to calculate data for Bar Charts; 3) Build Bar Charts

Questions: 1) Which actions should be provide by clicking on chart legend or clicking/hovering on chart bar?

STEP 4 (6-8 h):

1) Create functionality to calculate data for Diagnosis by Gender Charts; 2) Build these charts

Questions: Let's look at this diagrams:

1) Male/Female - depends on, which gender more for this diagnosis? 2) "130", "98", "130", "39": total number of patients for this diagnosis? 3) 62%, 41%, 76%, 23% - ratio (number of patients with this diagnosis) / (total number of patients)? 4) Which actions should be provide by clicking on chart legend or clicking/hovering on diagrams?

STEP 5 (6-8 h):

1) Create chart "Average health Score" 2) Create population chart; 3) Calculate data for chart Average health Score vs Age 4) Create this chart

Questions: 1) Is "Average health Score" a average value for all patients, which was found by the search parameters? 2) Where can I found data for Population chart? It isn't dummy patients, we should create separate request for it. Can we use data from invisio example? 3) Is localization like "Yorkshire, UK" - constant? User can't search other localization? 4) As I understand correctly each bar in "Average health Score vs Age" is calculated as average value for current age group (0-10, 11-20 etc.)? 5) Color of Bar depends on average value (green - very good, yellow - good etc.)?

STEP 6 (6-8 h):

Create map. I estimated this step so much because we didn't work with this tool earlier and I don't know, how to do this.

[simongamester]

@BogdanScherban A few answers to some of your questions.

Step 1

4. Here are the icons: https://drive.google.com/file/d/1fsgcUBkMA4bdZHtKRAAd6VgqbzOffBmm/view?usp=sharing

5. This icon at the top (Orange on white background) shows that the the filter form is in an expanded state. When the user clicks this icon, the filter form (By Age, Health Score, Diagnosis etc) will collapse and the icon will revert to white on black. this is a similar behaviour to expanding / collapsing the search for a table listing.

Step 3

1. When the user hovers over a bar on the chart, display values for all diagnostics within the selected bar. I don't think there would be any click behaviour but will defer to @tony-shannon on this.

Step 4

1. I'm going to update this one shortly and use a new pie chart. Will respond once this has been updated.

Step 5

1. This is due to change to a line chart similar to the one above. Data will be slightly different so please ignore for now.
2. Same as above.
3. Same as above.

[PhilBarrett]

https://projects.invisionapp.com/d/main#/console/17676051/366936553/ Estimation on this screen only required at this stage, using mock data

[PhilBarrett]

Linked with #56

[BogdanScherban]

@tony-shannon @PhilBarrett

Today I created all charts, except map. Unfortunately, I can't prepare the video (because free videos per month are finished), but you can see results on the screenshots:

All charts use dummy data.

The next stages are form and Map adding.

@simongamester Simon, could you please give me icon for Pie Charts in non-selected mode. This icon is absent in this storage: https://drive.google.com/file/d/1fsgcUBkMA4bdZHtKRAAd6VgqbzOffBmm/view?usp=sharing

On Monday I'm going to continue this issue.

[PhilBarrett]

Closing this as connected to #56