VSA "Stage time" - Convert line chart to scatter plot

Why (Problem & Context)

Users of VSA are frequently confused about what VSA stage time chart is displaying:

image

Today, using the VSA Stage time chart it is difficult to correlate slow performance days with the work items (issues/MRs) that cause the delay. There is lack of clarity in the visualization of VSA "Stage time" metrics.

Sub-problems with the VSA line chart:

  1. Line charts are used to show trends over continuous data, and not individual data points and their distribution.
  2. Connecting points with line chart can create a false sense of trends, while scatter plots can show variations and individual outliers clearly.

User experience goals for the Stage time chart:

  • One View Summary: Display a comprehensive visualization of what has happened in a specific stage.
  • Time Distribution Clarity: Show where time is being spent within the stage.
  • Work Item Context: Present stage time with a breakdown of work items (issues or MRs).
  • Drill-down Capability: Allow users to click and investigate specific work items for deeper insights. (Out of scope for this issue)

What (Proposed Solution)

  1. Convert the line chart into a scatter plot to display all plottable points per day.
  2. Plot multiple work items per day where each work item (issue or MR) is represented as a blue dot.
  3. Each dot's position on the Y-axis represents the duration from the start event to the end event within the stage. This should be the same value as we have in the stage table for Duration.
  4. Y-axis should be convert to Days (Duration) with units of days. Values < 1 day should be displayed as decimal fractions of a day (e.g., 12 hours → 0.5 days, 6 hours → 0.25 days).
  5. Enable users to interact with individual issues, even when points are overlapping or close together.
  6. Dots with 0 as value should be display with 0 as value.
  7. Add Tooltip/Popovers (Out of scope for this issue)
  8. Add drill-down link from the daily blue dots tooltips to the stage table (Out of scope for this issue)
  9. Add P50, Mean, and P90 (Out of scope for this issue)
  10. Toggle this functionality with a feature flag

Screenshot_2021-02-19_at_13.18._2x

Old Requirements
  • Each point (dot) on the scatter plot represents the duration time of an item in the stage.
  • Red line = average stage time (= sum(issue time in stage on a day) / (n)issues )
  • The chart should also display a scatter plot with a duration of less than 1 day.
  • Gray bounds = standard deviation (this helps to see outlier dots)

👣 Iteration path

  1. Convert line chart to scatter plot
  2. Plot multiple items per day
  3. Add average line
  4. Add gray bounds
Edited by Haim Snir