rill icon indicating copy to clipboard operation
rill copied to clipboard

Feat: Time comparison for dimensions charts

Open djbarnwal opened this issue 1 year ago • 8 comments

Closes #5433

  1. Adds time comparison lines for dimension line charts
  2. Adds time comparison bars for stacked and grouped bar chart.

djbarnwal avatar Aug 09 '24 07:08 djbarnwal

UXQA:

  1. Am I supposed to see the comparison lines at all times? I see them when I hover over the row of a specific dimension, but I don't see them otherwise, e.g.: image
  2. When hovering over different dimension rows, the tooltip from the prior row hangs. See the dot for "14" in this JAM.
  3. In the bar graph, I'd expect the comparison time range (typically earlier-in-time) would be to the left of the primary time range (typically later-in-time).
  4. On the bar graph, I find myself looking for a legend to understand what the different bars represent (CC @jkhwu)
  5. Because the Area chart does not represent the time comparison, I think I'd expect the time comparison to get toggled off.

ericpgreen2 avatar Aug 29 '24 22:08 ericpgreen2

Replying to @ericpgreen2's notes above

  1. This is per design. In an earlier iteration we showed comparison lines for all the colorful lines by default, but it got pretty messy looking and got quite hard to match comparison lines to their corresponding colored lines. Our ideal solution would be in addition to single compare lines appearing on table hover, to show a compare line when you're mousing over one line in the chart, however, @djbarnwal explained that it's quite difficult to detect which line the mouse is closest to in our current hand-rolled format (perhaps once we switch to Vega Lite this will be easier?) Right now the implementation is still missing the additional columns that will also appear when you turn on comparisons, so it's dissatisfying to flip the compare toggle and not see any changes to the page content. I think once the comparison columns show up, the table mouseover will be more discoverable and intuitive.

jkhwu avatar Sep 05 '24 06:09 jkhwu

@ericpgreen2 cc @djbarnwal 3. I'm fine with switching the order of the bars for comparison vs current 4. The color coding is supposed to be contained within the checked rows of the table below, but I think better than a static legend would be to enhance the content of the hover tooltips to list multiple values at once. This has been requested by @ericokuma but I haven't followed up with a design proposal yet: https://www.notion.so/rilldata/Improving-Chart-Hover-Tooltips-45583322f8434cb98b1b05519dcd97a7?pvs=4 5. Once unblocked by platform adjustments, the table will still show comparison columns even if the selected viz type is area charts. I don't think we should auto-toggle comparisons off because of that.

jkhwu avatar Sep 05 '24 06:09 jkhwu

  1. This is per design.

@jkhwu, @djbarnwal what about showing the comparison lines when at most X specific dimension values are selected? Say X = 1, 2, or 3?

ericpgreen2 avatar Sep 07 '24 22:09 ericpgreen2

@ericpgreen2 , @djbarnwal will post a screenshot of what you're proposing and we'll assess the readability here.

jkhwu avatar Sep 18 '24 18:09 jkhwu

Example 1 3 dimensions selected with lines close to each other

image

Example2 3 dimensions selected with well spaced lines image

Personally I don't think it's adding much value here. To get a better look into the lines even in the spread out case, I have to hover over a row and inspect it.

djbarnwal avatar Sep 23 '24 23:09 djbarnwal

@ericpgreen2 I agree with @djbarnwal's assessment. Based on the screenshots I think it's hard to tell which lines are current and which are comparison.

jkhwu avatar Sep 24 '24 16:09 jkhwu

@djbarnwal @ericpgreen2 : Whats the status here ? Are we able to merge this one ?

nishantmonu51 avatar Oct 15 '24 07:10 nishantmonu51