From b313a39b08b2fb80e0d436761d47e470b9f7b0d3 Mon Sep 17 00:00:00 2001 From: Martin Date: Tue, 31 Aug 2021 16:29:51 +0200 Subject: [PATCH] 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". --- src/AppWrapper.js | 3 +-- src/api/metadata.js | 6 ++--- src/components/Item/VisualizationItem/Item.js | 9 +++++--- .../ItemContextMenu/ItemContextMenu.js | 8 +++++-- .../Visualization/Visualization.js | 3 ++- .../__tests__/Visualization.spec.js | 22 +++++++++++-------- .../VisualizationItem/Visualization/plugin.js | 4 +++- .../VisualizationItem/__tests__/Item.spec.js | 9 ++++---- src/modules/__tests__/item.spec.js | 16 +++++--------- src/modules/item.js | 3 +-- src/modules/itemTypes.js | 14 ++++++++++++ 11 files changed, 58 insertions(+), 39 deletions(-) diff --git a/src/AppWrapper.js b/src/AppWrapper.js index d428d3d7a..74d22a1d4 100644 --- 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 index 67f1113d0..920fb4fd8 100644 --- 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 index cdbb426cb..580e096aa 100644 --- 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 index 003542ff9..d0e3b6600 100644 --- 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 && ( <> { { { { 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( [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 index eb86ac234..5946805c9 100644 --- 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 index c724ce1f3..f2fe14380 100644 --- 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 index 6824add88..e5efd3b7f 100644 --- 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 index b52665936..00c20cad0 100644 --- 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',