Refetch chart data when select value stream

ee/app/assets/javascripts/analytics/cycle_analytics/components/duration_chart.vue

@@ -25,11 +25,8 @@ export default {
       return Boolean(this.durationChartPlottableData.length);
     },
   },
-  mounted() {
-    this.fetchDurationData();
-  },
   methods: {
-    ...mapActions('durationChart', ['fetchDurationData', 'updateSelectedDurationChartStages']),
+    ...mapActions('durationChart', ['updateSelectedDurationChartStages']),
     onDurationStageSelect(stages) {
       this.updateSelectedDurationChartStages(stages);
     },

ee/app/assets/javascripts/analytics/cycle_analytics/store/actions.js

@@ -125,7 +125,6 @@ export const fetchCycleAnalyticsData = ({ dispatch }) => {
 
   return Promise.resolve()
     .then(() => dispatch('fetchValueStreams'))
-    .then(() => dispatch('fetchStageMedianValues'))
     .then(() => dispatch('receiveCycleAnalyticsDataSuccess'))
     .catch(error => dispatch('receiveCycleAnalyticsDataError', error));
 };
@@ -314,7 +313,10 @@ export const createValueStream = ({ commit, dispatch, getters }, data) => {
 
 export const setSelectedValueStream = ({ commit, dispatch }, streamId) => {
   commit(types.SET_SELECTED_VALUE_STREAM, streamId);
-  return dispatch('fetchGroupStagesAndEvents');
+  return Promise.resolve()
+    .then(() => dispatch('fetchGroupStagesAndEvents'))
+    .then(() => dispatch('fetchStageMedianValues'))
+    .then(() => dispatch('durationChart/fetchDurationData'));
 };
 
 export const receiveValueStreamsSuccess = ({ commit, dispatch }, data = []) => {

ee/spec/frontend/analytics/cycle_analytics/components/base_spec.js

@@ -453,6 +453,7 @@ describe('Cycle Analytics component', () => {
                   StageNavItem,
                 },
               },
+              withValueStreamSelected: false,
               withStageSelected: true,
             });
           });

ee/spec/frontend/analytics/cycle_analytics/store/actions_spec.js

@@ -91,13 +91,17 @@ describe('Cycle analytics actions', () => {
   describe('setSelectedValueStream', () => {
     const vs = { id: 'vs-1', name: 'Value stream 1' };
 
-    it('dispatches the fetchCycleAnalyticsData action', () => {
+    it('refetches the cycle analytics data', () => {
       return testAction(
         actions.setSelectedValueStream,
         vs,
         { ...state, selectedValueStream: {} },
         [{ type: types.SET_SELECTED_VALUE_STREAM, payload: vs }],
-        [{ type: 'fetchGroupStagesAndEvents' }],
+        [
+          { type: 'fetchGroupStagesAndEvents' },
+          { type: 'fetchStageMedianValues' },
+          { type: 'durationChart/fetchDurationData' },
+        ],
       );
     });
   });
@@ -276,7 +280,6 @@ describe('Cycle analytics actions', () => {
         [
           { type: 'requestCycleAnalyticsData' },
           { type: 'fetchValueStreams' },
-          { type: 'fetchStageMedianValues' },
           { type: 'receiveCycleAnalyticsDataSuccess' },
         ],
       );