# Problem - As a software leader, I need to understand where stage time is being spent so I can identify outlier items and unblock them to improve performance. - Currently the scatterplot for stage time doesn't show any individual data points - This means you don't get a good idea of the spread of each issue's time in stage - Users of VSA are [frequently confused about what VSA stage time chart is displaying](https://gitlab.com/gitlab-org/ux-research/-/issues/2079). ### Several problems with the line chart: - Line charts are used to show trends over continuous data, and not individual data points and their distribution. - Connecting points with line chart can create a false sense of trends, while scatter plots can show variations and individual outliers clearly. - Line charts might misleadingly gaps in the data (no-data gaps). #### Validation: <details><summary>Click to expand</summary> * Based on https://gitlab.com/gitlab-org/ux-research/-/issues/2079+ * ~"Customer feedback" - https://gitlab.com/groups/gitlab-org/-/epics/372#note_1315203473 * And these ~Dogfooding feedbacks: * ~"group::development analytics" - https://gitlab.com/gitlab-org/gitlab/-/issues/515880+ * Gabe - https://gitlab.slack.com/archives/CJZR6KPB4/p1657305523346849 * Sam - https://gitlab.slack.com/archives/CJZR6KPB4/p1654183503405929 </details> ## user experience goals for the **Stage view**: 1. Display in one view what has happened in the specific stage. 1. Display where stage time is being spent. 1. Display the stage time with the context of the work item (issues or MRs) breakdown. 1. Ability to drill down into the work item for deeper investigations. # Solution - Help the user quickly understand what has happened in the specific stage by visualizing the performance of the stage with the context of the work item (issues or MRs) breakdown. - Scatter plot - Blue dots = individual issue time in stage (= from start event to end event) - Red line = average stage time (= sum(issue time in stage on a day) / (n)issues ) - Gray bounds = standard deviation (this helps to see outlier dots)  ## 👣 Iteration path Based on conversations in this thread, and some further exploration, here's how we could choose to break it down. _Note: This breakdown lacks engineering input, probably gets it wrong, and ignores solving where the data comes from._ 1. Convert line chart to scatter plot and add average line 1. Plot multiple items per day 1. Update popover to link to individual issue 1. Show confidence interval 1. Improve clarity of close together points ### Convert line chart to scatter plot and add average line As @ekigbo points out in [this comment](https://gitlab.com/gitlab-org/gitlab/-/issues/322136#note_515780395) the scatter plot already can take multiple points. The work in this step is the recreate the existing functionality by building the average line into the scatter plot. <details><summary>Steps to recreate an example in story book</summary> ### Plot multiple items per day Extend our new scatter chart to display all plottable points per day. If it was technically simpler, perhaps for this iteration we'd have no change to the popover content. Otherwise combine with 'Extend popover information'. 1. https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/charts-discrete-scatter-chart--default 2. Replace **Controls** > **Props** > **data** with: ```json [ { "type": "scatter", "data": [ [ "Mon", "11" ],[ "Mon", "10" ],[ "Mon", "10.5" ],[ "Mon", "14" ], [ "Tue", "10" ], [ "Tue", "13" ], [ "Tue", "13.5" ], [ "Wed", "10.1" ], [ "Wed", "10.2" ], [ "Wed", "10.3" ], [ "Wed", "15" ], [ "Thu", "12" ], [ "Thu", "11" ], [ "Fri", "14" ], [ "Fri", "11" ], [ "Fri", "14.5" ], [ "Fri", "15" ], [ "Fri", "15" ], [ "Sat", "10" ], [ "Sun", "12" ] ] }, { "name": "Average", "type": "line", "data": [ [ "Mon", "11.2" ], [ "Tue", "12" ], [ "Wed", "11" ], [ "Thu", "11.75" ], [ "Fri", "13" ], [ "Sat", "10" ], [ "Sun", "12" ] ] } ] ``` Would need engineering advice for sensible constraints around popover content here. </details> <details><summary>Related info</summary> - Inspired by: https://docs.microsoft.com/en-us/azure/devops/report/dashboards/cycle-time-and-lead-time?view=azure-devops#interpret-the-scatter-plot-control-charts - [Meeting notes about VSA "Total time" & "Stage time" charts](https://docs.google.com/document/d/1XtW8TIOmZYCDNXKv5Ajg-L6hgWX2qu07b59ZbTdlLsg/edit#) ### Extend popover information Make the popovers more useful. This could include: - make each blue point link to the individual issue - make each blue point show details about the issue (name, time) ### Show confidence interval [Understanding Confidence Intervals](https://www.scribbr.com/statistics/confidence-interval/) I think this is the first big unknown. Questions include, how we get the data and how we display the data. I cant find anything native in echarts and we don't have anything defined in Pajamas. ### Improve clarity of close together points It is possible (maybe even likely) that there will be overlapping values. Problem(s) to solve: - Give a sense of frequency when values overlap or are close together. - Allow interaction with an individual issue despite points overlapping/being close together. </details>