VSA Overview "Total time" - add flow diagram with stages breakdown of the summation of all stages

Release notes

New visualization into value stream performance to simplify the Top-down optimization flow from the new Value Streams Dashboard to Value Stream Analytics. Gitlab rejuvenated the VSA Overview "Total time" and added stages breakdown as a stacked area chart with summation time of all stages.

Problem to solve

As a software leader, I want to quickly understand if my team performance improves over time. I need immediate insights about the time spent in each stage over time to determine if we are making progress or not.

Today, Gitlab users unable to understand the VSA stages trends.

Dogfooding feedback from sectionops.

JTBD & Target Persona

Click to expand

Optimize - When I am optimizing my value stream, I want to identify opportunities for improvement, or detect risks in the delivery of value to customers.

1. Dakota (Application Development Director)
2. Erin (Application Development Executive)
3. Parker (Product Manager)

Proposal

1. Change VSA Overview "Total time" chart to 'flow diagram'(stacked area chart) with breakdown of the summation of all stages:

2. For this MVC, we can start with avg time same as today.
3. The chart will shows the stages bottom up.
4. Add a tooltip with the stages breakdown details - date, total_time (Median_days_in_stage) (average time for MvC)., chart legend.
5. The stages on the tooltip are top to bottom.
6. When hovering over a data series the corresponding label in the tooltip is in bold.
7. The chart title "Total time".
8. The vertical axis title is "Days". No need for horizontal axis title, as we have there dates values.
9. The chart stages legend is left to right.
10. Group VAS only.
11. GitLab Premium and GitLab Ultimate only.

Designs in Figma

Open question:

• What should be the chart name - "Total time" or "Flow of work".
• Stacked area chart assumes that you have linear stages without overlapping which is not always true in VSA.
  • We will start with MVC with without the overlapping.

Tooltip values behavior:

1. If Median_days_in_stage Average_days_in_stage is more than 1.0 day, show 1 digits after the decimal point.
2. If Median_days_in_stage Average_days_in_stage is less than 1.0 day, show 2 digits after the decimal point.
3. If Median_days_in_stage Average_days_in_stage is less than 0.1 day, show 3 digits after the decimal point.
4. If Median_days_in_stage Average_days_in_stage is less than 0.01 day, show 4 digits after the decimal point.
5. Remove insignificant trailing zeros (e.g. 0.30 will be displayed as 0.3).

First design

Click to expand

4. When the VSA date range is >= 30 days, change the chart to weekly aggregation. (Today, it's a daily aggregation.)

Inspiring example - https://demo.backstage.io/cost-insights?group=group-a