Initialize chart data in same order as config

- Chart data loads faster and leads to charts render in wrong order
- Populate chart_data object keys before loading to ensure the order

ee/app/assets/javascripts/insights/components/insights_page.vue

@@ -49,7 +49,6 @@ export default {
   },
   watch: {
     pageConfig() {
-      this.setChartData({});
       this.setPageLoading(true);
       this.fetchCharts();
     },
@@ -58,7 +57,7 @@ export default {
     this.fetchCharts();
   },
   methods: {
-    ...mapActions('insights', ['fetchChartData', 'setChartData', 'setPageLoading']),
+    ...mapActions('insights', ['fetchChartData', 'initChartData', 'setPageLoading']),
     chartType(type) {
       switch (type) {
         case 'line':
@@ -70,6 +69,8 @@ export default {
     },
     fetchCharts() {
       if (this.hasChartsConfigured) {
+        this.initChartData(this.chartKeys);
+
         const insightsRequests = this.charts.map(chart =>
           this.fetchChartData({ endpoint: this.queryEndpoint, chart }),
         );

ee/app/assets/javascripts/insights/stores/modules/insights/actions.js

@@ -54,7 +54,7 @@ export const setActiveTab = ({ commit, state }, key) => {
   commit(types.SET_ACTIVE_PAGE, page);
 };
 
-export const setChartData = ({ commit }, store) => commit(types.SET_CHART_DATA, store);
+export const initChartData = ({ commit }, store) => commit(types.INIT_CHART_DATA, store);
 export const setPageLoading = ({ commit }, pageLoading) =>
   commit(types.SET_PAGE_LOADING, pageLoading);
 

ee/app/assets/javascripts/insights/stores/modules/insights/mutation_types.js

@@ -6,5 +6,5 @@ export const RECEIVE_CHART_SUCCESS = 'RECEIVE_CHART_SUCCESS';
 export const RECEIVE_CHART_ERROR = 'RECEIVE_CHART_ERROR';
 export const SET_ACTIVE_TAB = 'SET_ACTIVE_TAB';
 export const SET_ACTIVE_PAGE = 'SET_ACTIVE_PAGE';
-export const SET_CHART_DATA = 'SET_CHART_DATA';
 export const SET_PAGE_LOADING = 'SET_PAGE_LOADING';
+export const INIT_CHART_DATA = 'INIT_CHART_DATA';

ee/app/assets/javascripts/insights/stores/modules/insights/mutations.js

@@ -40,8 +40,11 @@ export default {
   [types.SET_ACTIVE_PAGE](state, pageData) {
     state.activePage = pageData;
   },
-  [types.SET_CHART_DATA](state, chartData) {
-    state.chartData = chartData;
+  [types.INIT_CHART_DATA](state, keys) {
+    state.chartData = keys.reduce((acc, key) => {
+      acc[key] = {};
+      return acc;
+    }, {});
   },
   [types.SET_PAGE_LOADING](state, pageLoading) {
     state.pageLoading = pageLoading;

ee/changelogs/unreleased/insights-maintain-config-order-upon-chart-display.yml

+---
+title: Initialize chart data in same order as config
+merge_request: 14283
+author:
+type: fixed

ee/spec/frontend/insights/stores/insights/mutations_spec.js

@@ -164,13 +164,13 @@ describe('Insights mutations', () => {
     });
   });
 
-  describe(types.SET_CHART_DATA, () => {
-    const chartData = { a: { data: 'data' } };
+  describe(types.INIT_CHART_DATA, () => {
+    const keys = ['a', 'b'];
 
     it('sets chartData state', () => {
-      mutations[types.SET_CHART_DATA](state, chartData);
+      mutations[types.INIT_CHART_DATA](state, keys);
 
-      expect(state.chartData).toBe(chartData);
+      expect(state.chartData).toEqual({ a: {}, b: {} });
     });
   });
 

ee/spec/javascripts/insights/stores/insights/actions_spec.js

@@ -244,15 +244,15 @@ describe('Insights store actions', () => {
     });
   });
 
-  describe('setChartData', () => {
-    it('commits SET_CHART_DATA', done => {
-      const chartData = { a: { data: 'data' } };
+  describe('initChartData', () => {
+    it('commits INIT_CHART_DATA', done => {
+      const keys = ['a', 'b'];
 
       testAction(
-        actions.setChartData,
-        chartData,
+        actions.initChartData,
+        keys,
         null,
-        [{ type: 'SET_CHART_DATA', payload: chartData }],
+        [{ type: 'INIT_CHART_DATA', payload: keys }],
         [],
         done,
       );