fix(@cubejs-client/vue): Pivot config can use null from heuristics (#7167)

* fix(@cubejs-client/vue): Pivot config can use null from heuristics

* test(@cubejs-client/vue): Unit test for builder computed validatedQuery - Correctly updates pivot config after chart type change

* fix(@cubejs-client/vue3): Pivot config can use null from heuristics

* test(@cubejs-client/vue3): Unit test for builder computed validatedQuery - Correctly updates pivot config after chart type change

Author: DPHonys

packages/cubejs-client-vue/src/QueryBuilder.js

@@ -393,7 +393,7 @@ export default {
         this.chartType = chartType || this.chartType;
         this.pivotConfig = ResultSet.getNormalizedPivotConfig(
           validatedQuery,
-          pivotConfig || this.pivotConfig
+          pivotConfig !== undefined ? pivotConfig : this.pivotConfig
         );
         this.copyQueryFromProps(validatedQuery);
       }

packages/cubejs-client-vue/tests/unit/QueryBuilder.spec.js

@@ -919,4 +919,60 @@ describe('QueryBuilder.vue', () => {
       expect(wrapper.vm.pivotConfig).toMatchObject(pivotConfig);
     });
   });
+
+  describe('builder computed', () => {
+    describe('validatedQuery', () => {
+      it('correctly updates pivot config after chart type change', async () => {
+        const expectedPivotForTable = {
+          x: ['Orders.status'],
+          y: ['measures'],
+          fillMissingDates: true,
+          joinDateRange: false,
+        };
+
+        const expectedPivotForLine = {
+          x: ['Orders.createdAt.day'],
+          y: ['Orders.status', 'measures'],
+          fillMissingDates: true,
+          joinDateRange: false,
+        };
+
+        const cube = createCubejsApi();
+        jest
+          .spyOn(cube, 'request')
+          .mockImplementation(fetchMock(load))
+          .mockImplementationOnce(fetchMock(meta));
+
+        const wrapper = mount(QueryBuilder, {
+          propsData: {
+            cubejsApi: cube,
+            query: {
+              measures: ['Orders.count'],
+              timeDimensions: [{
+                dimension: 'Orders.createdAt',
+              }],
+            },
+          },
+          scopedSlots: {
+            builder: function ({ updateChartType }) {
+              return this.$createElement('input', {
+                on: { change: () => updateChartType('line')}
+              });
+            },
+          },
+        });
+
+        await flushPromises();
+
+        wrapper.vm.addMember('dimensions', 'Orders.status'); // to trigger first heuristics
+        await wrapper.vm.$nextTick();
+        expect(wrapper.vm.pivotConfig).toEqual(expectedPivotForTable);
+        expect(wrapper.vm.chartType).toBe('table');
+        wrapper.find('input').trigger('change');
+        await wrapper.vm.$nextTick();
+        expect(wrapper.vm.pivotConfig).toEqual(expectedPivotForLine);
+        expect(wrapper.vm.chartType).toBe('line');
+      });
+    });
+  });
 });

packages/cubejs-client-vue3/src/QueryBuilder.js

@@ -378,7 +378,7 @@ export default {
         this.chartType = chartType || this.chartType;
         this.pivotConfig = ResultSet.getNormalizedPivotConfig(
           validatedQuery,
-          pivotConfig || this.pivotConfig
+          pivotConfig !== undefined ? pivotConfig : this.pivotConfig
         );
         this.copyQueryFromProps(validatedQuery);
       }

packages/cubejs-client-vue3/tests/unit/QueryBuilder.spec.js

@@ -881,4 +881,53 @@ describe('QueryBuilder.vue', () => {
     //   expect(wrapper.vm.filters[0].values).toContain('1');
     // });
   });
+
+  describe('builder computed', () => {
+    describe('validatedQuery', () => {
+      it('correctly updates pivot config after chart type change', async () => {
+        const expectedPivotForTable = {
+          x: ['Orders.status'],
+          y: ['measures'],
+          fillMissingDates: true,
+          joinDateRange: false,
+        };
+
+        const expectedPivotForLine = {
+          x: ['Orders.createdAt.day'],
+          y: ['Orders.status', 'measures'],
+          fillMissingDates: true,
+          joinDateRange: false,
+        };
+
+        const cube = createCubejsApi();
+        jest
+            .spyOn(cube, 'request')
+            .mockImplementation(fetchMock(load))
+            .mockImplementationOnce(fetchMock(meta));
+
+        const wrapper = shallowMount(QueryBuilder, {
+          propsData: {
+            cubejsApi: cube,
+            query: {
+              measures: ['Orders.count'],
+              timeDimensions: [{
+                dimension: 'Orders.createdAt',
+              }],
+            },
+          },
+        });
+
+        await flushPromises();
+
+        wrapper.vm.addMember('dimensions', 'Orders.status'); // to trigger first heuristics
+        await wrapper.vm.$nextTick();
+        expect(wrapper.vm.pivotConfig).toEqual(expectedPivotForTable);
+        expect(wrapper.vm.chartType).toBe('table');
+        wrapper.vm.updateChart('line');
+        await wrapper.vm.$nextTick();
+        expect(wrapper.vm.pivotConfig).toEqual(expectedPivotForLine);
+        expect(wrapper.vm.chartType).toBe('line');
+      });
+    });
+  });
 });