Top Allegations chart is grouped by the allegation rule's paragraph and hard to read in Data Dashboard

christina-luong commented 5 months ago

In the Data Dashboard page, "Top Allegations" chart has multiple entries displayed within one bar and labels that are cut off, making it hard to read and understand the data. Seems like the chart is grouped together based on the paragraphs of the rule used for each allegation.

Steps to reproduce

List any steps to reproduce behavior

Navigate to Data Dashboard by clicking on top right profile icon.
Scroll to the "Top Allegations" chart

Expected behavior

Chart should be pushed to the right so that the text labels are clear and legible 1a. Use abbreviations: R. for rule, P. for paragraph
Charts should not be stacked, should have individual bars for each label (rule and paragraph should be unique)

Open Questions

Is there a way that users could configure what they want to see (grouped by rule, paragraph or just individual)?

Checklist

[x] Indicate bug severity on the right

rowsnr commented 5 months ago

https://hcsoc-data.hawaii.gov/public-data <---

@rd-huerta @heliofreitastw

rd-huerta commented 5 months ago

Findings

We were able to fix the display so that now the "Rule" is showing on the y-axis instead of the "Paragraph" and we were able to fix the labels so that you can read them fully:

Other Findings

This is another option that we prototyped. It shows an example of the graph with the bars not stacked, but still grouped by the Rule. It would require more time to implement:

Questions:

Which graph is preferred?
Should we invest time in implementing this change? 2a. To separate the data, we would need to write a loop and create new traces. RIght now, we are only plotting 1 trace as seen in the code here

rowsnr commented 5 months ago

Good work so far! I think the bottom is preferred! It's still showing as stacked, though, I think. But I like the different colors...Let's chat more. @rd-huerta

rnair-tw commented 5 months ago

Would like to ensure rule and paragraph are their own line items, does the bottom allow for this? E.g. the following are all unique lines:

Rule 1, Para 2
Rule 1, Para 3
Rule 3, Para 2

Personally may prefer the top graph for legibility if we do have a lot of rules, paras and they need to reduce the screen size

heliofreitastw commented 5 months ago

The implementation of the second graph would be more difficult. Also, we could have a really big graph horizontally given that there are several paragraphs in the system.

rowsnr commented 5 months ago

would it make sense to make the graph "stack" vertically then similar to how it is now? while obviously "unstacking" each rule/paragraph appropriately, on their own line. and have users scroll within the box to view? i mean, that's awful but it would work for now. lmk if i'm describing that in a way that makes sense

rd-huerta commented 5 months ago

From our perspective, there are a couple options:

Solution 1(shown in the image below): We have a solution that can be implemented right now. We would need to spend a little more time refactoring the code and writing tests.

Solution 2: Unstacking/ungrouping the bars. This is a heavier lift that would require more time investment. We could use the same bar chart shown in the image above, but reduce the size of the bars to accommodate the 10 data points. We aren't sure this is the best approach, however.

rnair-tw commented 5 months ago

Yes, as part of this card, would need to ungroup the bars. The users currently need each bar to be displayed separately such as this:

rd-huerta commented 5 months ago

Met with @rnair-tw, @rowsnr , and @christina-luong to discuss which graph to use. Waiting on feedback from NOIPM.

rnair-tw commented 4 months ago

Clarified with NOIPM, they like to screengrab the chart for reports etc, so does not work for them to have anything stacked (i.e. need to hover over it to see details). Instead, need the following:

All bars are separate (Rule 1, Para 2; Rule 1, Para 3; Rule 3, Para 2 are all their own line)
Only display the top 10 bars

rd-huerta commented 4 months ago

Still needs some work, but here are the changes we have made so far:

rowsnr commented 4 months ago

I think this is looking good. Any chance we could push the y-axis title further to the left? Also the x-axis title is vague. Is that the number of allegations received? @rd-huerta @rnair-tw

rd-huerta commented 4 months ago

What's been done:

adjusted the y-axis title
changed the x-axis title to "Number of Allegations"

What still needs to be done:

modify tests to account for the new structure of the graph

Questions

What is directive? Is it needed, or can we use just the rule & paragraph?
- In the code, we are seeing some examples of directive || rule

rd-huerta commented 4 months ago

Tests are passing. Tomorrow we will do a bit of refactoring and then a code review & desk check.

rd-huerta commented 4 months ago

We are blocked from doing a desk check by tests that are not related to our work failing in the pipeline. Once the pipeline is fixed, our changes can be pushed to the CI environment.

heliofreitastw commented 4 months ago

I talked with @rowsnr we decided to limit the paragraph text on the left size of the graph to 40 characters and include the ellipsis (...) at the end when this happens. If the paragraph is smaller than 40 characters there is not problem. Also, she suggested abbreviating paragraph to par. Finally, the hover text will be added back with the full paragraph text.

rowsnr commented 4 months ago

@devonivory @etessema1

heliofreitastw commented 4 months ago

The allegations chart in the [data page] (https://noipm-production.herokuapp.com/data) is cutting the name of the rule + paragraph displayed on the left side of the chart.

christina-luong commented 4 months ago

@heliofreitastw Received some feedback on the Top Allegations chart in prod. The bars appear to be merging likely due to lack of space. Currently exploring the possibility of limiting Top Allegation to Top 5 or Top 8, but pending feedback from Christian.