[VSA] Stage time scatterplot - add average time, standard deviation and individual time

Problem

• Currently the scatterplot for "Days to completion" 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
• Now that we are implementing charts at the stage level - there should be a small enough amount of data to display in a scatter
• 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

Solution

• 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
2. Plot multiple items per day
3. Update popover to link to individual issue
4. Show confidence interval
5. Improve clarity of close together points

Convert line chart to scatter plot and add average line

As @ekigbo points out in this comment 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.

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'.

Steps to recreate an example in story book

1. https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/charts-discrete-scatter-chart--default
2. Replace Controls > Props > data with:

[
    {
        "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.

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

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.