VSA "Total time chart" - add dynamic "Date Bucketing" (aka date grouping intervals)

Problem

1. Following the new VSA Overview "total time" Stacked Area Chart, we need to consider reducing the amount of data on the chart, to minimize the "noise" on a chart and to help user detect valuable insights from the data.
2. Daily data can be subject to hiccups and instability that may hide meaningful patterns or trends. Analyzing daily data might be too detailed with irrelevant noise caused by daily operational issues, random events, or outliers.
3. Today, the data points density is too high, and there is no limitations on the number of data series displayed on the chart:

4. As a result, it is difficult to understand and compare the data effectively. This can lead to confusion, and make it harder to identify important trends or patterns in the data.

Personas & JTBD

Proposal

• We have made the decision to moved forward with Proposal B,
• Add a Select dropdown with options for smoothing:
  • Apply 7 day smoothing default when Last 30 days is selected
  • Apply 14 day smoothing when Last 60 days or Last 90 days is selected
  • Apply 90 day smoothing when the date range is > Last 90 days
  • Apply No smoothing when the date range is Last week or less
  • Add an option to disable smoothing No smoothing
• When smoothing is disabled, we should update the y axis label to read: Time to completion (days)

See Design management for latest designs.

Design source

❖ Figma project →

Archive

See archived proposals:

Proposal A

1. Add bucketing to the VSA total time chart to provide users with the ability to visualize data using different date grouping intervals in the chart. (Aka dynamic data aggregation)
2. Implement dynamic data aggregation based on the selected bucketing interval. The number of data points and the number of days each data point represents should dynamically change according to the date range selected by the user.
3. When users switch between different date range, the chart should automatically aggregate data points accordingly.
4. The value of number of days each data point represents will be data aggregation of the average of all days in the bucket.
5. The chart should appropriately adjust the X-axis labels, gridlines, and data point density to provide a clear and intuitive visualization.

Pre-defined date bucketing intervals:

Chart date range - number of days	Date bucketing - number of days each data point represents
30	TBD
60	TBD
90	TBD
180	44

Last 180 days (current)	Last 180 days - bucketed into 44 data points (proposal)

Proposal B

Use data smoothing (7 day moving average) to reduce the noise.

Last 7 days (current)	Last 7 days (data smoothing 7d)

Last 30 days (current)	Last 30 days (data smoothing 7d)

Last 90 days (current)	Last 90 days (data smoothing 7d)

Last 180 days (current)	Last 180 days (data smoothing 7d)

Last 180 days (current)	Last 180 days (data smoothing 30d)

Testing locally

To test each variation locally, use storybook (See storybook help)and replace the contents of stories_constants.js with one of the following variations:

Proposal A:

• stories_constants_180d_bucketed.js

Proposal B:

• stories_constants_7d_using-7-day-moving-avg.js
• stories_constants_30d_using-7-day-moving-avg.js
• stories_constants_90d_using-7-day-moving-avg.js
• stories_constants_180d_using-7-day-moving-avg.js
• stories_constants_180d_using-30-day-moving-avg.js

Raw data

• Data was taken from https://gitlab.com/gitlab-org/gitlab/-/value_stream_analytics?created_after=2023-07-22&created_before=2024-01-17&value_stream_id=3160
• Then the following Google spreadsheet was used to generate all the averages