Trends graph aspect ratio should match bar/pie graph

[jhtep]

The Trends graph should be shorter in height to match bar/pie graph aspect ratio to make switch between the two less jarring.

See code at:

https://github.com/EP-Visual-Design/COVID-19-Impact-Project/blob/master/dashboard/src/graph/GraphPieBar.js

https://github.com/EP-Visual-Design/COVID-19-Impact-Project/blob/master/dashboard/src/graph/GraphTrend.js

Consult Victory docs:

https://formidable.com/open-source/victory/docs/

[jervo]

"Regions" Pie/Bar graphic max dimensions = 1127 width, 610.266 height.

[philsinatra]

I'm taking a look at this issue this morning and I have a couple questions/comments about the UI that may be relevant.

1. TrendTab.js lint error

Fixing the linting error by adding the dependencies list that is suggested breaks the functionality of the trends graph as I'm sure you already know. You can disable the linting error with a comment:

  useEffect(() => {
    setPropFocus(props.propFocus);
    setSumFocus(props.sumFocus);
    const title1 = props.selected_items[0].c_ref;
    const title2 = props.selected_items[1].c_ref;
    props.all_items.forEach((item, index) => {
      if (item.c_ref === title1 && compareIndex1 !== index)
        setCompareIndex1(index);
      if (item.c_ref === title2 && compareIndex2 !== index)
        setCompareIndex2(index);
    });
+  // eslint-disable-next-line
  }, []);

However I recommend fixing the problem. Usually when I run into this type of issue, it's because I'm trying to do to many things in a single hook. Breaking the hook contents up into separate functions or additional hooks can usually solve the problem.

2. The Trends Tab

The tabs intended behavior is to change the content under. The switch of the pie chart to the line chart is very jarring, and the tab content area is empty. There needs to be a heading, and the select element need to be labeled to indicate what they correspond to on the chart (a color indicator would be ideal, providing a visual clue that select element one is represented by blue on the chart). The colors and fonts of the chart also don't match and should be optimized to fit within the rest of the UI.

I don't think the trigger to show trends data should be a tab. It feels like there is a lot of data being shoehorned into a UI that is not user friendly. There are buttons everywhere and most items are not clearly labeled. For a new user, it's overwhelming and often you're guessing at what you're looking at.

Have a look at the Mapping COVID-19 spotlight that's included in the Apple News app on your system or iDevice.

The data is clearly organized and labelled. The EPV UI needs this type of attention or it risks being to confusing to be useful.

3. Other Notes

The colors on the bar legend seem to be broken.

The buttons for First Death and Latest need consistent spacing and sizing.

It's also not clear what these buttons do, especially because they are next to the play/rewind/forward controls. The forward/rewind icons typically indicate moving the to beginning/end of a timeline, not incrementation. The labels on those buttons should probably be next/previous. All of the buttons in this row should be consistent in size and style as well.

[jervo]

FYI. To update aspect ratio on "Trends" chart to match "Regions" Pie/Bars, will require CSS/Flex code similar to..

<div style={{ display: "flex", flexWrap: "wrap" }}>
    <VictoryChart style={{ parent: { maxWidth: "100%" } }} width={1127} height={610}>
      
    </VictoryChart>
</div>

Ref: https://formidable.com/open-source/victory/docs/faq/#how-can-i-change-the-size-of-my-chart

[jervo]

"The colors on the bar legend seem to be broken."

• Could not dupe this error on live site in Chrome or Safari browsers.

[philsinatra]

I experience the color issue when running the local build, not on the live site currently.

[jhtep]

Run yarn (no args) in dashboard directory. A more recent version of Victory library is use.

…

-john-henry

On Dec 28, 2020, at 12:05 PM, Jervis Thompson ***@***.***> wrote:  "The colors on the bar legend seem to be broken." Could not dupe this error on live site in Chrome and Safari browsers. — You are receiving this because you were assigned. Reply to this email directly, view it on GitHub, or unsubscribe.