Skip to content

Add throughput chart, stats and table stories

  • Please check this box if this contribution uses AI-generated content (including content generated by GitLab Duo features) as outlined in the GitLab DCO & CLA

What does this MR do and why?

Closes #428283 (closed)

  1. Adds a new story file named throughput_chart.stories.js for the throughput_chart.vue component

    • The default story renders the chart with data
    • A story for the chart without any data available
    • A story for the chart in the loading state
  2. Adds a new story file named throughput_table.stories.js for the throughput_table.vue component

    • The default story renders the table with data
    • A story for the table without any data available
    • A story for the chart in the loading state
  3. Adds a new story file named throughput_stats.stories.js for the throughput_stats.vue component

    • The default story renders the table with data
    • A story for the stats in the loading state

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Throughput Chart

Default No Data Loading
Screenshot_2024-05-29_at_4.48.54_AM Screenshot_2024-05-29_at_4.50.29_AM Screenshot_2024-05-29_at_4.50.39_AM

Throughput Table

Default No Data Loading
Screenshot_2024-06-09_at_11.00.57_PM Screenshot_2024-06-09_at_11.01.03_PM Screenshot_2024-06-09_at_11.01.14_PM

Throughput Stats

Default Loading
Screenshot_2024-05-31_at_9.38.15_AM Screenshot_2024-05-31_at_9.38.23_AM

How to set up and validate locally

  1. Install storybook - in the terminal run:
yarn storybook:install
  1. Start storybook - in the terminal run:
yarn storybook:start
  1. Checkout the stories under ee / analytics / merge_request_analytics / components
Edited by Grace Chung

Merge request reports