fix: migrate from chart/pt to visualizations (#1916)

Updates needed to migrate from chart and pivot tables to visualizations, as the deprecated endpoints will be dropped for 2.37. This implementation relies on continuing to use the REPORT_TABLE and CHART nomenclature internally for the visualization "view".
dhis2 · Aug 31, 2021 · b313a39 · b313a39
1 parent b15e2d5
commit b313a39
Show file tree

Hide file tree

Showing 11 changed files with 58 additions and 39 deletions.
diff --git a/src/AppWrapper.js b/src/AppWrapper.js
@@ -12,10 +12,9 @@ import './locales'
 
 const d2Config = {
     schemas: [
-        'chart',
+        'visualization',
         'map',
         'report',
-        'reportTable',
         'eventChart',
         'eventReport',
         'dashboard',

diff --git a/src/api/metadata.js b/src/api/metadata.js
@@ -34,6 +34,7 @@ export const getAxesFields = ({ withItems }) => [
 export const getFavoriteFields = ({ withDimensions, withOptions }) => {
     return arrayClean([
         `${getIdNameFields({ rename: true }).join(',')}`,
+        'type',
         'displayDescription~rename(description)',
         withDimensions ? `${getAxesFields({ withItems: true }).join(',')}` : ``,
         withOptions
@@ -68,10 +69,7 @@ export const getFavoriteFields = ({ withDimensions, withOptions }) => {
 }
 
 export const getFavoritesFields = () => [
-    `reportTable[${getFavoriteFields({ withDimensions: false }).join(',')}]`,
-    `chart[${['type', ...getFavoriteFields({ withDimensions: false })].join(
-        ','
-    )}]`,
+    `visualization[${getFavoriteFields({ withDimensions: false }).join(',')}]`,
     `map[${getFavoriteFields({ withDimensions: false }).join(',')}]`,
     `eventReport[${getFavoriteFields({ withDimensions: false }).join(',')}]`,
     `eventChart[${getFavoriteFields({ withDimensions: false }).join(',')}]`,

diff --git a/src/components/Item/VisualizationItem/Item.js b/src/components/Item/VisualizationItem/Item.js
@@ -14,7 +14,10 @@ import {
 } from '../../../modules/dashboardModes'
 import { getItemHeightPx } from '../../../modules/gridUtil'
 import { getVisualizationId, getVisualizationName } from '../../../modules/item'
-import { getDataStatisticsName } from '../../../modules/itemTypes'
+import {
+    getDataStatisticsName,
+    getItemTypeForVis,
+} from '../../../modules/itemTypes'
 import { sGetIsEditing } from '../../../reducers/editDashboard'
 import { sGetItemActiveType } from '../../../reducers/itemActiveTypes'
 import {
@@ -131,9 +134,9 @@ class Item extends Component {
 
     getActiveType = () => {
         if (this.props.isEditing) {
-            return this.props.item.type
+            return getItemTypeForVis(this.props.item)
         }
-        return this.props.activeType || this.props.item.type
+        return this.props.activeType || getItemTypeForVis(this.props.item)
     }
 
     getAvailableHeight = ({ width, height }) => {

diff --git a/src/components/Item/VisualizationItem/ItemContextMenu/ItemContextMenu.js b/src/components/Item/VisualizationItem/ItemContextMenu/ItemContextMenu.js
@@ -22,7 +22,11 @@ import {
 import PropTypes from 'prop-types'
 import React, { useState, createRef } from 'react'
 import { getVisualizationId } from '../../../../modules/item'
-import { getAppName, itemTypeMap } from '../../../../modules/itemTypes'
+import {
+    getAppName,
+    itemTypeMap,
+    getItemTypeForVis,
+} from '../../../../modules/itemTypes'
 import { isSmallScreen } from '../../../../modules/smallScreen'
 import { useSystemSettings } from '../../../SystemSettingsProvider'
 import { useWindowDimensions } from '../../../WindowDimensionsProvider'
@@ -122,7 +126,7 @@ const ItemContextMenu = props => {
                         {canViewAs && !loadItemFailed && (
                             <>
                                 <ViewAsMenuItems
-                                    type={item.type}
+                                    type={getItemTypeForVis(item)}
                                     activeType={activeType}
                                     onActiveTypeChanged={onActiveTypeChanged}
                                     visualization={visualization}

diff --git a/src/components/Item/VisualizationItem/Visualization/Visualization.js b/src/components/Item/VisualizationItem/Visualization/Visualization.js
@@ -10,6 +10,7 @@ import {
     MAP,
     CHART,
     REPORT_TABLE,
+    getItemTypeForVis,
 } from '../../../../modules/itemTypes'
 import {
     sGetItemFiltersRoot,
@@ -56,7 +57,7 @@ class Visualization extends React.Component {
 
         const visualizationConfig = this.memoizedGetVisualizationConfig(
             visualization,
-            item.type,
+            getItemTypeForVis(item),
             activeType
         )
 

diff --git a/src/components/Item/VisualizationItem/Visualization/__tests__/Visualization.spec.js b/src/components/Item/VisualizationItem/Visualization/__tests__/Visualization.spec.js
@@ -57,8 +57,8 @@ test('renders a VisualizationPlugin for CHART', () => {
             <Visualization
                 item={{
                     id: 'rainbow',
-                    type: 'CHART',
-                    chart: { id: 'rainbowVis' },
+                    type: 'VISUALIZATION',
+                    visualization: { id: 'rainbowVis', type: 'BAR' },
                 }}
                 activeType="CHART"
                 itemFilters={{}}
@@ -75,8 +75,8 @@ test('renders a VisualizationPlugin for REPORT_TABLE', () => {
             <Visualization
                 item={{
                     id: 'rainbow',
-                    type: 'REPORT_TABLE',
-                    reportTable: { id: 'rainbowVis' },
+                    type: 'VISUALIZATION',
+                    visualization: { id: 'rainbowVis', type: 'PIVOT_TABLE' },
                 }}
                 activeType="REPORT_TABLE"
                 itemFilters={{}}
@@ -93,8 +93,8 @@ test('renders active type MAP rather than original type REPORT_TABLE', () => {
             <Visualization
                 item={{
                     id: 'rainbow',
-                    type: 'REPORT_TABLE',
-                    reportTable: { id: 'rainbowVis' },
+                    type: 'VISUALIZATION',
+                    visualization: { id: 'rainbowVis', type: 'PIVOT_TABLE' },
                 }}
                 activeType="MAP"
                 itemFilters={{}}
@@ -130,7 +130,7 @@ test('renders a DefaultPlugin when activeType is EVENT_CHART', () => {
                 item={{
                     id: 'rainbow',
                     type: 'EVENT_CHART',
-                    chart: { id: 'rainbowVis' },
+                    eventChart: { id: 'rainbowVis' },
                 }}
                 activeType="EVENT_CHART"
                 itemFilters={{}}
@@ -148,7 +148,7 @@ test('renders a DefaultPlugin when activeType is EVENT_REPORT', () => {
                 item={{
                     id: 'rainbow',
                     type: 'EVENT_REPORT',
-                    chart: { id: 'rainbowVis' },
+                    eventReport: { id: 'rainbowVis' },
                 }}
                 activeType="EVENT_REPORT"
                 itemFilters={{}}
@@ -166,7 +166,11 @@ test('renders NoVisMessage when no visualization', () => {
     const { container } = render(
         <Provider store={mockStore(store)}>
             <Visualization
-                item={{ id: 'rainbow' }}
+                item={{
+                    id: 'rainbow',
+                    type: 'VISUALIZATION',
+                    visualization: { type: 'BAR' },
+                }}
                 activeType="CHART"
                 itemFilters={{}}
                 availableHeight={500}

diff --git a/src/components/Item/VisualizationItem/Visualization/plugin.js b/src/components/Item/VisualizationItem/Visualization/plugin.js
@@ -1,6 +1,7 @@
 import {
     REPORT_TABLE,
     CHART,
+    VISUALIZATION,
     MAP,
     EVENT_REPORT,
     EVENT_CHART,
@@ -21,7 +22,8 @@ const itemTypeToScriptPath = {
     [EVENT_CHART]: '/dhis-web-event-visualizer/eventchart.js',
 }
 
-const hasIntegratedPlugin = type => [CHART, REPORT_TABLE].includes(type)
+const hasIntegratedPlugin = type =>
+    [CHART, REPORT_TABLE, VISUALIZATION].includes(type)
 
 export const getPlugin = async type => {
     if (hasIntegratedPlugin(type)) {

diff --git a/src/components/Item/VisualizationItem/__tests__/Item.spec.js b/src/components/Item/VisualizationItem/__tests__/Item.spec.js
@@ -47,10 +47,11 @@ test('Visualization/Item renders view mode', async () => {
     }
 
     const item = {
-        type: 'CHART',
-        chart: {
+        type: 'VISUALIZATION',
+        visualization: {
             id: 'fancychart',
             name: 'Fancy Chart',
+            type: 'COLUMN',
         },
     }
 
@@ -86,8 +87,8 @@ test('Visualization/Item renders edit mode', async () => {
     }
 
     const item = {
-        type: 'CHART',
-        chart: {
+        type: 'VISUALIZATION',
+        visualization: {
             id: 'fancychart',
             name: 'Fancy Chart',
         },

diff --git a/src/modules/__tests__/item.spec.js b/src/modules/__tests__/item.spec.js
@@ -1,17 +1,11 @@
 import { getVisualizationFromItem } from '../item'
-import {
-    REPORT_TABLE,
-    CHART,
-    MAP,
-    EVENT_REPORT,
-    EVENT_CHART,
-} from '../itemTypes'
+import { VISUALIZATION, MAP, EVENT_REPORT, EVENT_CHART } from '../itemTypes'
 
 test('getVisualizationFromItem for chart', () => {
     const vis = 'chart visualization'
     const item = {
-        type: CHART,
-        chart: vis,
+        type: VISUALIZATION,
+        visualization: vis,
     }
 
     expect(getVisualizationFromItem(item)).toEqual(vis)
@@ -20,8 +14,8 @@ test('getVisualizationFromItem for chart', () => {
 test('getVisualizationFromItem for table', () => {
     const vis = 'table visualization'
     const item = {
-        type: REPORT_TABLE,
-        reportTable: vis,
+        type: VISUALIZATION,
+        visualization: vis,
     }
 
     expect(getVisualizationFromItem(item)).toEqual(vis)

diff --git a/src/modules/item.js b/src/modules/item.js
@@ -10,8 +10,7 @@ export const getVisualizationFromItem = item => {
 
     return (
         item[propName] ||
-        item.reportTable ||
-        item.chart ||
+        item.visualization ||
         item.map ||
         item.eventReport ||
         item.eventChart ||

diff --git a/src/modules/itemTypes.js b/src/modules/itemTypes.js
@@ -1,3 +1,4 @@
+import { VIS_TYPE_PIVOT_TABLE } from '@dhis2/analytics'
 import i18n from '@dhis2/d2-i18n'
 import {
     IconApps24,
@@ -44,13 +45,26 @@ export const getDefaultItemCount = itemType =>
     itemTypeMap[itemType].defaultItemCount || 5
 export const getAppName = itemType => itemTypeMap[itemType].appName || ''
 
+export const getItemTypeForVis = item => {
+    if (item.type === VISUALIZATION) {
+        if (item.visualization.type === VIS_TYPE_PIVOT_TABLE) {
+            return REPORT_TABLE
+        } else {
+            return CHART
+        }
+    }
+    return item.type
+}
+
 // Item type map
 export const itemTypeMap = {
     [VISUALIZATION]: {
         id: VISUALIZATION,
         endPointName: 'visualizations',
+        dataStatisticsName: 'VISUALIZATION_VIEW',
         propName: 'visualization',
         pluralTitle: i18n.t('Visualizations'),
+        domainType: DOMAIN_TYPE_AGGREGATE,
         isVisualizationType: true,
         appUrl: id => `dhis-web-data-visualizer/#/${id}`,
         appName: 'Data Visualizer',