From ac87347a0bdb94255a616370796bbf07d0391402 Mon Sep 17 00:00:00 2001 From: Ezekiel Kigbo Date: Fri, 6 Oct 2023 00:31:01 +1100 Subject: [PATCH 1/2] Add DurationChart and DurationOverviewChart stories Adds the cycle analytics duration chart and duration overview charts to storybook. Adds some mock data for use rendering --- .../components/duration_chart.stories.js | 35 ++++ .../duration_overview_chart.stories.js | 33 ++++ .../components/stories_constants.js | 183 ++++++++++++++++++ 3 files changed, 251 insertions(+) create mode 100644 ee/app/assets/javascripts/analytics/cycle_analytics/components/duration_chart.stories.js create mode 100644 ee/app/assets/javascripts/analytics/cycle_analytics/components/duration_overview_chart.stories.js create mode 100644 ee/app/assets/javascripts/analytics/cycle_analytics/components/stories_constants.js diff --git a/ee/app/assets/javascripts/analytics/cycle_analytics/components/duration_chart.stories.js b/ee/app/assets/javascripts/analytics/cycle_analytics/components/duration_chart.stories.js new file mode 100644 index 00000000000000..8291ce4adc1df4 --- /dev/null +++ b/ee/app/assets/javascripts/analytics/cycle_analytics/components/duration_chart.stories.js @@ -0,0 +1,35 @@ +import { withVuexStore } from 'storybook_addons/vuex_store'; +import DurationChart from './duration_chart.vue'; +import { selectedStageData, selectedStage } from './stories_constants'; + +export default { + component: DurationChart, + title: 'ee/analytics/cycle_analytics/components/duration_chart', + decorators: [withVuexStore], +}; + +const Template = (args, { argTypes, createVuexStore }) => ({ + components: { DurationChart }, + props: Object.keys(argTypes), + template: '', + store: createVuexStore({ + state: { + selectedStage, + }, + getters: {}, + modules: { + durationChart: { + namespaced: true, + getters: { + durationChartPlottableData: () => selectedStageData, + }, + state: { + isLoading: false, + }, + }, + }, + }), +}); + +export const Default = Template.bind({}); +Default.args = {}; diff --git a/ee/app/assets/javascripts/analytics/cycle_analytics/components/duration_overview_chart.stories.js b/ee/app/assets/javascripts/analytics/cycle_analytics/components/duration_overview_chart.stories.js new file mode 100644 index 00000000000000..9a6302eeacf48f --- /dev/null +++ b/ee/app/assets/javascripts/analytics/cycle_analytics/components/duration_overview_chart.stories.js @@ -0,0 +1,33 @@ +import { withVuexStore } from 'storybook_addons/vuex_store'; +import DurationOverviewChart from './duration_overview_chart.vue'; +import { durationChartData } from './stories_constants'; + +export default { + component: DurationOverviewChart, + title: 'ee/analytics/cycle_analytics/components/duration_overview_chart', + decorators: [withVuexStore], +}; + +const Template = (args, { argTypes, createVuexStore }) => ({ + components: { DurationOverviewChart }, + props: Object.keys(argTypes), + template: '', + store: createVuexStore({ + state: {}, + getters: {}, + modules: { + durationChart: { + namespaced: true, + getters: { + durationOverviewChartPlottableData: () => durationChartData, + }, + state: { + isLoading: false, + }, + }, + }, + }), +}); + +export const Default = Template.bind({}); +Default.args = {}; diff --git a/ee/app/assets/javascripts/analytics/cycle_analytics/components/stories_constants.js b/ee/app/assets/javascripts/analytics/cycle_analytics/components/stories_constants.js new file mode 100644 index 00000000000000..1123cf0184b1aa --- /dev/null +++ b/ee/app/assets/javascripts/analytics/cycle_analytics/components/stories_constants.js @@ -0,0 +1,183 @@ +export const selectedStage = { + title: 'Stage 1', // eslint-disable-line @gitlab/require-i18n-strings +}; + +export const selectedStageData = [ + ['2023-09-06', null], + ['2023-09-07', null], + ['2023-09-08', null], + ['2023-09-09', null], + ['2023-09-10', null], + ['2023-09-11', null], + ['2023-09-12', null], + ['2023-09-13', null], + ['2023-09-14', null], + ['2023-09-15', null], + ['2023-09-16', null], + ['2023-09-17', null], + ['2023-09-18', null], + ['2023-09-19', null], + ['2023-09-20', null], + ['2023-09-21', 0], + ['2023-09-22', null], + ['2023-09-23', null], + ['2023-09-24', 0], + ['2023-09-25', 4], + ['2023-09-26', 4], + ['2023-09-27', 0], + ['2023-09-28', 0], + ['2023-09-29', null], + ['2023-09-30', 0], + ['2023-10-01', 0], + ['2023-10-02', 0], + ['2023-10-03', 11], + ['2023-10-04', 9], + ['2023-10-05', 7], +]; + +export const durationChartData = [ + { + name: 'Stage 1', // eslint-disable-line @gitlab/require-i18n-strings + data: selectedStageData, + }, + { + name: 'Stage 2', // eslint-disable-line @gitlab/require-i18n-strings + data: [ + ['2023-09-06', null], + ['2023-09-07', null], + ['2023-09-08', null], + ['2023-09-09', null], + ['2023-09-10', null], + ['2023-09-11', null], + ['2023-09-12', null], + ['2023-09-13', null], + ['2023-09-14', null], + ['2023-09-15', null], + ['2023-09-16', null], + ['2023-09-17', null], + ['2023-09-18', null], + ['2023-09-19', null], + ['2023-09-20', null], + ['2023-09-21', 0], + ['2023-09-22', null], + ['2023-09-23', null], + ['2023-09-24', 3], + ['2023-09-25', 0], + ['2023-09-26', 0], + ['2023-09-27', 0], + ['2023-09-28', 6], + ['2023-09-29', null], + ['2023-09-30', 14], + ['2023-10-01', 0], + ['2023-10-02', 0], + ['2023-10-03', 0], + ['2023-10-04', 9], + ['2023-10-05', 3], + ], + }, + { + name: 'Stage 3', // eslint-disable-line @gitlab/require-i18n-strings + data: [ + ['2023-09-06', null], + ['2023-09-07', null], + ['2023-09-08', null], + ['2023-09-09', null], + ['2023-09-10', null], + ['2023-09-11', null], + ['2023-09-12', null], + ['2023-09-13', null], + ['2023-09-14', null], + ['2023-09-15', null], + ['2023-09-16', null], + ['2023-09-17', null], + ['2023-09-18', null], + ['2023-09-19', null], + ['2023-09-20', null], + ['2023-09-21', 0], + ['2023-09-22', null], + ['2023-09-23', null], + ['2023-09-24', 0], + ['2023-09-25', 0], + ['2023-09-26', 7], + ['2023-09-27', 2], + ['2023-09-28', 0], + ['2023-09-29', null], + ['2023-09-30', 9], + ['2023-10-01', 0], + ['2023-10-02', 0], + ['2023-10-03', 2], + ['2023-10-04', 17], + ['2023-10-05', 0], + ], + }, + { + name: 'Stage 4', // eslint-disable-line @gitlab/require-i18n-strings + data: [ + ['2023-09-06', null], + ['2023-09-07', null], + ['2023-09-08', null], + ['2023-09-09', null], + ['2023-09-10', null], + ['2023-09-11', null], + ['2023-09-12', null], + ['2023-09-13', null], + ['2023-09-14', null], + ['2023-09-15', null], + ['2023-09-16', null], + ['2023-09-17', null], + ['2023-09-18', null], + ['2023-09-19', null], + ['2023-09-20', null], + ['2023-09-21', 0], + ['2023-09-22', null], + ['2023-09-23', null], + ['2023-09-24', 0], + ['2023-09-25', 0], + ['2023-09-26', 0], + ['2023-09-27', 0], + ['2023-09-28', 0], + ['2023-09-29', null], + ['2023-09-30', 6], + ['2023-10-01', 4], + ['2023-10-02', 0], + ['2023-10-03', 1], + ['2023-10-04', 4], + ['2023-10-05', 3], + ], + }, + { + name: 'Stage 5', // eslint-disable-line @gitlab/require-i18n-strings + data: [ + ['2023-09-06', null], + ['2023-09-07', null], + ['2023-09-08', null], + ['2023-09-09', null], + ['2023-09-10', null], + ['2023-09-11', null], + ['2023-09-12', null], + ['2023-09-13', null], + ['2023-09-14', null], + ['2023-09-15', null], + ['2023-09-16', null], + ['2023-09-17', null], + ['2023-09-18', null], + ['2023-09-19', null], + ['2023-09-20', null], + ['2023-09-21', 5], + ['2023-09-22', null], + ['2023-09-23', null], + ['2023-09-24', 0], + ['2023-09-25', 0], + ['2023-09-26', 1], + ['2023-09-27', 0], + ['2023-09-28', 0], + ['2023-09-29', null], + ['2023-09-30', 0], + ['2023-10-01', 0], + ['2023-10-02', 7], + ['2023-10-03', 0], + ['2023-10-04', 0], + ['2023-10-05', 0], + ], + }, +]; -- GitLab From a520fe1d426e6d3747af4ef047cb3eeddf96c077 Mon Sep 17 00:00:00 2001 From: Ezekiel Kigbo Date: Wed, 25 Oct 2023 10:54:59 +1100 Subject: [PATCH 2/2] Address minor review comments --- .../cycle_analytics/components/duration_chart.stories.js | 2 -- .../components/duration_overview_chart.stories.js | 3 --- 2 files changed, 5 deletions(-) diff --git a/ee/app/assets/javascripts/analytics/cycle_analytics/components/duration_chart.stories.js b/ee/app/assets/javascripts/analytics/cycle_analytics/components/duration_chart.stories.js index 8291ce4adc1df4..b8227d4de69470 100644 --- a/ee/app/assets/javascripts/analytics/cycle_analytics/components/duration_chart.stories.js +++ b/ee/app/assets/javascripts/analytics/cycle_analytics/components/duration_chart.stories.js @@ -16,7 +16,6 @@ const Template = (args, { argTypes, createVuexStore }) => ({ state: { selectedStage, }, - getters: {}, modules: { durationChart: { namespaced: true, @@ -32,4 +31,3 @@ const Template = (args, { argTypes, createVuexStore }) => ({ }); export const Default = Template.bind({}); -Default.args = {}; diff --git a/ee/app/assets/javascripts/analytics/cycle_analytics/components/duration_overview_chart.stories.js b/ee/app/assets/javascripts/analytics/cycle_analytics/components/duration_overview_chart.stories.js index 9a6302eeacf48f..834fbc9a1b7729 100644 --- a/ee/app/assets/javascripts/analytics/cycle_analytics/components/duration_overview_chart.stories.js +++ b/ee/app/assets/javascripts/analytics/cycle_analytics/components/duration_overview_chart.stories.js @@ -13,8 +13,6 @@ const Template = (args, { argTypes, createVuexStore }) => ({ props: Object.keys(argTypes), template: '', store: createVuexStore({ - state: {}, - getters: {}, modules: { durationChart: { namespaced: true, @@ -30,4 +28,3 @@ const Template = (args, { argTypes, createVuexStore }) => ({ }); export const Default = Template.bind({}); -Default.args = {}; -- GitLab