Date range comparisons UI in the style of Google Analytics

[exxonvaldez]

Proposed changes

#321 #582 The idea is to change the "stop to stop" trip summary (and eventually route summary) to be like the Google Analytics UI. This UI is used for both date range comparisons and for single date ranges. It combines our summary page with the "by day" tab. Essentially a chart for one metric is shown with the cards for all the metrics below that.

The chart can be changed to show metrics corresponding to any card. The cards have been reformatted to be fixed width and fixed height.

To see Google Analytics, log into https://analytics.google.com/ then navigate to “Audience” then “Overview”.

• [ ] Chart tooltips only work on "Journey Times" by day chart, need to add tooltips to remaining charts. Chart tooltips only show values for the first (blue) series.
• [ ] Google Analytics puts miniature (spark-line) charts in the card for each metric (see screenshots in #461). Clicking the miniature chart switches the main chart to that metric. Would like to try this here.
• [ ] Google Analytics colors the percentage change green or red, to mean improved or worsened as is appropriate for each metric. To do this, we may have to put the change inside a chip (white oval) to make the colored text legible, or a different styling of the card backgrounds.
• [ ] Google Analytics, when comparing a single day, switches from a per day scale to a per hour scale. We could try do something similar with our intervals of the day, or switch to hours.
• [ ] Consider adding a radar chart.

Screenshot

Single date range:

Date range comparison:

Link to demo, if any

https://ot-terence-date-range-compare.herokuapp.com/

Deep link for singe date range:

https://ot-terence-date-range-compare.herokuapp.com/route/KT/1/14506/17344?firstDateRange%5BstartDate%5D=2020-02-26&firstDateRange%5BdaysOfTheWeek%5D%5B0%5D=false&firstDateRange%5BdaysOfTheWeek%5D%5B1%5D=true&firstDateRange%5BdaysOfTheWeek%5D%5B2%5D=true&firstDateRange%5BdaysOfTheWeek%5D%5B3%5D=true&firstDateRange%5BdaysOfTheWeek%5D%5B4%5D=true&firstDateRange%5BdaysOfTheWeek%5D%5B5%5D=true&firstDateRange%5BdaysOfTheWeek%5D%5B6%5D=false

Deep link for date range comparison:

https://ot-terence-date-range-compare.herokuapp.com/route/7/1/15652/15638?firstDateRange%5BstartDate%5D=2020-02-19&firstDateRange%5BstartTime%5D=07%3A00&firstDateRange%5BendTime%5D=10%3A00&firstDateRange%5BdaysOfTheWeek%5D%5B0%5D=false&firstDateRange%5BdaysOfTheWeek%5D%5B1%5D=true&firstDateRange%5BdaysOfTheWeek%5D%5B2%5D=true&firstDateRange%5BdaysOfTheWeek%5D%5B3%5D=true&firstDateRange%5BdaysOfTheWeek%5D%5B4%5D=true&firstDateRange%5BdaysOfTheWeek%5D%5B5%5D=true&firstDateRange%5BdaysOfTheWeek%5D%5B6%5D=false&secondDateRange%5BstartDate%5D=2020-01-14&secondDateRange%5Bdate%5D=2020-01-28&secondDateRange%5BstartTime%5D=07%3A00&secondDateRange%5BendTime%5D=10%3A00&secondDateRange%5BdaysOfTheWeek%5D%5B0%5D=false&secondDateRange%5BdaysOfTheWeek%5D%5B1%5D=true&secondDateRange%5BdaysOfTheWeek%5D%5B2%5D=true&secondDateRange%5BdaysOfTheWeek%5D%5B3%5D=true&secondDateRange%5BdaysOfTheWeek%5D%5B4%5D=true&secondDateRange%5BdaysOfTheWeek%5D%5B5%5D=true&secondDateRange%5BdaysOfTheWeek%5D%5B6%5D=false

[hathix]

Very cool!

Quick comment: when I saw these tiles, it took a bit to figure out which range (red or blue) was better. This is where a table of metrics and/or a radar chart could help make the information easier to digest.

[exxonvaldez]

Quick comment: when I saw these tiles, it took a bit to figure out which range (red or blue) was better. This is where a table of metrics and/or a radar chart could help make the information easier to digest.

Good point. We have two metrics where higher numbers are worse, wait and variability. A radar chart requires higher numbers to be better on all axes. A table, like the google analytics-style cards, should have green/red coloring on the percentage difference to aid interpretation of better/worse.

[exxonvaldez]

Here's three variations of percentage coloring. In this demo case (inbound 7 before and after private car ban on Market), speed and wait are down, score and OTP are up, and variability is unchanged.

1. Background colors preserved and a white chip around the percentage:

2. Background colors removed, chip around the first metric:

3. Card background colors removed, no chips:

I like number 3. In Google Analytics, it is easy to turn the comparison off and back on for the same second date range, using a checkbox in their date range dialog/panel. So if we had that, then it'd be easy to see what the high and low scoring metrics are for the first range.

[youngj]

These changes conflict with UI changes that I'm currently working on, for which I'll send a PR in a few days.

It doesn't seem important to have day-by-day comparisons of metrics over two date ranges (which don't necessarily have the same length or start on the same day of the week). I'd just hide the by-day charts when comparing date ranges.

Stacked by-day charts with wait times and travel times are hard enough to understand with a single date range. Two stacked charts on top of each other with 4 points per day are even harder to understand.

The Summary tab is quite cluttered with two rows of tabs and several different types of user interface elements.

When comparing date ranges, it's not clear what the various numbers or charts mean.

I'd recommend postponing additional work on this, and wait for the PR with the UI changes I've been working on.