exxonvaldez commented 4 years ago

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:

Screen Shot 2020-03-05 at 1 50 37 AM

Date range comparison:

Screen Shot 2020-03-05 at 1 49 47 AM

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:

hathix commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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.

Background colors preserved and a white chip around the percentage:

Screen Shot 2020-03-05 at 11 11 54 AM

Background colors removed, chip around the first metric:

Screen Shot 2020-03-05 at 11 28 42 AM

Card background colors removed, no chips:

Screen Shot 2020-03-05 at 11 03 19 AM

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 commented 4 years ago

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.

trynmaps / metrics-mvp

Date range comparisons UI in the style of Google Analytics #605

Proposed changes

Screenshot

Link to demo, if any