From fd2f1bb6111cc3677f4ef56d32ebc93545458e47 Mon Sep 17 00:00:00 2001
From: Jen Jones Arnesen <jennifer@dhis2.org>
Date: Fri, 20 Nov 2020 18:05:21 +0100
Subject: [PATCH] fix: force type COLUMN when viewing table as chart
 [DHIS2-9599] (#1317)

type "CHART" was being sent in as the visualization type, which doesn't match anything. The result was getting the default layout which works fine when there is only 1 row item, but not when more than 1 row item.

Also, instead of "REPORT_TABLE", we should be sending in "PIVOT_TABLE"
---
 .../__tests__/getVisualizationConfig.spec.js  | 45 +++++++++++++++++--
 .../getVisualizationConfig.js                 |  7 ++-
 2 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/src/components/Item/VisualizationItem/__tests__/getVisualizationConfig.spec.js b/src/components/Item/VisualizationItem/__tests__/getVisualizationConfig.spec.js
index b0079e38f..8e114fa31 100644
--- a/src/components/Item/VisualizationItem/__tests__/getVisualizationConfig.spec.js
+++ b/src/components/Item/VisualizationItem/__tests__/getVisualizationConfig.spec.js
@@ -54,7 +54,42 @@ describe('getVisualizationConfig', () => {
         expect(actualResult).toEqual(expectedResult)
     })
 
-    it('returns correct config when switching from REPORT_TABLE to CHART', () => {
+    it('returns correct config when switching from REPORT_TABLE to CHART one row item', () => {
+        const visConfig = {
+            id: 'vis1',
+            [AXIS_ID_COLUMNS]: [
+                { dimension: DIMENSION_ID_DATA },
+                { dimension: 'rainbow' },
+            ],
+            [AXIS_ID_ROWS]: [{ dimension: DIMENSION_ID_PERIOD }],
+            [AXIS_ID_FILTERS]: [
+                { dimension: DIMENSION_ID_ORGUNIT },
+                { dimension: 'twilight' },
+            ],
+        }
+
+        const expectedVisConfig = {
+            id: undefined,
+            type: 'COLUMN',
+            [AXIS_ID_COLUMNS]: [{ dimension: DIMENSION_ID_DATA }],
+            [AXIS_ID_ROWS]: [{ dimension: DIMENSION_ID_PERIOD }],
+            [AXIS_ID_FILTERS]: [
+                { dimension: DIMENSION_ID_ORGUNIT },
+                { dimension: 'twilight' },
+                { dimension: 'rainbow' },
+            ],
+        }
+
+        const actualResult = getVisualizationConfig(
+            visConfig,
+            REPORT_TABLE,
+            CHART
+        )
+
+        expect(actualResult).toEqual(expectedVisConfig)
+    })
+
+    it('returns correct config when switching from REPORT_TABLE to CHART >2 row items', () => {
         const visConfig = {
             id: 'vis1',
             [AXIS_ID_COLUMNS]: [
@@ -64,6 +99,7 @@ describe('getVisualizationConfig', () => {
             [AXIS_ID_ROWS]: [
                 { dimension: DIMENSION_ID_PERIOD },
                 { dimension: 'twilight' },
+                { dimension: 'pinkiepie' },
             ],
             [AXIS_ID_FILTERS]: [{ dimension: DIMENSION_ID_ORGUNIT }],
         }
@@ -72,11 +108,14 @@ describe('getVisualizationConfig', () => {
             id: undefined,
             type: 'COLUMN',
             [AXIS_ID_COLUMNS]: [{ dimension: DIMENSION_ID_DATA }],
-            [AXIS_ID_ROWS]: [{ dimension: DIMENSION_ID_PERIOD }],
+            [AXIS_ID_ROWS]: [
+                { dimension: DIMENSION_ID_PERIOD },
+                { dimension: 'twilight' },
+            ],
             [AXIS_ID_FILTERS]: [
                 { dimension: DIMENSION_ID_ORGUNIT },
                 { dimension: 'rainbow' },
-                { dimension: 'twilight' },
+                { dimension: 'pinkiepie' },
             ],
         }
 
diff --git a/src/components/Item/VisualizationItem/getVisualizationConfig.js b/src/components/Item/VisualizationItem/getVisualizationConfig.js
index 410ac5f22..3429e90e1 100644
--- a/src/components/Item/VisualizationItem/getVisualizationConfig.js
+++ b/src/components/Item/VisualizationItem/getVisualizationConfig.js
@@ -30,14 +30,17 @@ const getVisualizationConfig = (visualization, originalType, activeType) => {
             type: activeType === CHART ? VIS_TYPE_COLUMN : VIS_TYPE_PIVOT_TABLE,
         })
     } else if (originalType === REPORT_TABLE && activeType === CHART) {
-        const layout = getAdaptedUiLayoutByType(visualization, activeType)
+        const layout = getAdaptedUiLayoutByType(visualization, VIS_TYPE_COLUMN)
         return getWithoutId({
             ...visualization,
             ...layout,
             type: VIS_TYPE_COLUMN,
         })
     } else if (originalType === CHART && activeType === REPORT_TABLE) {
-        const layout = getAdaptedUiLayoutByType(visualization, activeType)
+        const layout = getAdaptedUiLayoutByType(
+            visualization,
+            VIS_TYPE_PIVOT_TABLE
+        )
         return getWithoutId({
             ...visualization,
             ...layout,