feat: support outlier table plugin (DHIS2-16751) (#2912)

dhis2 · Mar 5, 2024 · 0ee6322 · 0ee6322
1 parent 3550cfa
commit 0ee6322
Show file tree

Hide file tree

Showing 10 changed files with 599 additions and 569 deletions.
diff --git a/i18n/en.pot b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2023-06-22T08:57:46.931Z\n"
-"PO-Revision-Date: 2023-06-22T08:57:46.931Z\n"
+"POT-Creation-Date: 2024-02-26T14:42:02.563Z\n"
+"PO-Revision-Date: 2024-02-26T14:42:02.563Z\n"
 
 msgid "Untitled dashboard"
 msgstr "Untitled dashboard"
@@ -89,14 +89,20 @@ msgstr "View fullscreen"
 msgid "This map can't be displayed as a chart"
 msgstr "This map can't be displayed as a chart"
 
+msgid "This map can't be displayed as a pivot table"
+msgstr "This map can't be displayed as a pivot table"
+
+msgid "This visualization can't be displayed as a pivot table"
+msgstr "This visualization can't be displayed as a pivot table"
+
+msgid "This visualization can't be displayed as a map"
+msgstr "This visualization can't be displayed as a map"
+
 msgid "View as Chart"
 msgstr "View as Chart"
 
-msgid "This map can't be displayed as a table"
-msgstr "This map can't be displayed as a table"
-
-msgid "View as Table"
-msgstr "View as Table"
+msgid "View as Pivot table"
+msgstr "View as Pivot table"
 
 msgid "View as Map"
 msgstr "View as Map"

diff --git a/package.json b/package.json
@@ -5,12 +5,12 @@
     "private": true,
     "license": "BSD-3-Clause",
     "dependencies": {
-        "@dhis2/analytics": "^26.4.0",
+        "@dhis2/analytics": "999.9.9-outlier-table.alpha.4",
         "@dhis2/app-runtime": "^3.10.2",
         "@dhis2/app-runtime-adapter-d2": "^1.1.0",
         "@dhis2/d2-i18n": "^1.1.3",
         "@dhis2/d2-ui-rich-text": "^7.4.3",
-        "@dhis2/ui": "^8.14.0",
+        "@dhis2/ui": "^9.2.0",
         "@krakenjs/post-robot": "^11.0.0",
         "classnames": "^2.3.2",
         "d2": "^31.10.0",
@@ -61,5 +61,8 @@
         "moduleNameMapper": {
             "^.+\\.(css|sass|scss)$": "identity-obj-proxy"
         }
+    },
+    "resolutions": {
+        "@dhis2/ui": "^9.2.0"
     }
 }
diff --git a/src/components/Item/VisualizationItem/ItemContextMenu/ViewAsMenuItems.js b/src/components/Item/VisualizationItem/ItemContextMenu/ViewAsMenuItems.js
@@ -1,3 +1,4 @@
+import { VIS_TYPE_OUTLIER_TABLE } from '@dhis2/analytics'
 import i18n from '@dhis2/d2-i18n'
 import { IconVisualizationColumn16, IconTable16, IconWorld16 } from '@dhis2/ui'
 import PropTypes from 'prop-types'
@@ -31,17 +32,33 @@ const ViewAsMenuItems = ({
 
     const onViewMap = () => onActiveTypeChanged(MAP)
 
-    const notSupported = type === MAP && !getThematicMapViews(visualization)
+    const notSupported =
+        (type === MAP && !getThematicMapViews(visualization)) ||
+        (type === CHART && visualization.type === VIS_TYPE_OUTLIER_TABLE)
+
+    const getNotSupportedMessage = (viewAs) => {
+        if (type === MAP && !getThematicMapViews(visualization)) {
+            return viewAs === 'chart'
+                ? i18n.t("This map can't be displayed as a chart")
+                : i18n.t("This map can't be displayed as a pivot table")
+        }
+
+        if (type === CHART && visualization.type === VIS_TYPE_OUTLIER_TABLE) {
+            return viewAs === 'table'
+                ? i18n.t(
+                      "This visualization can't be displayed as a pivot table"
+                  )
+                : i18n.t("This visualization can't be displayed as a map")
+        }
+
+        return null
+    }
 
     return (
         <>
             {![CHART, EVENT_CHART].includes(activeType) && (
                 <MenuItem
-                    tooltip={
-                        notSupported
-                            ? i18n.t("This map can't be displayed as a chart")
-                            : null
-                    }
+                    tooltip={getNotSupportedMessage('chart')}
                     label={i18n.t('View as Chart')}
                     onClick={onViewChart}
                     disabled={notSupported}
@@ -52,21 +69,19 @@ const ViewAsMenuItems = ({
                 activeType
             ) && (
                 <MenuItem
-                    tooltip={
-                        notSupported
-                            ? i18n.t("This map can't be displayed as a table")
-                            : null
-                    }
-                    label={i18n.t('View as Table')}
+                    tooltip={getNotSupportedMessage('table')}
+                    label={i18n.t('View as Pivot table')}
                     onClick={onViewTable}
                     disabled={notSupported}
                     icon={<IconTable16 />}
                 />
             )}
             {hasMapView(type) && activeType !== MAP && (
                 <MenuItem
+                    tooltip={getNotSupportedMessage('map')}
                     label={i18n.t('View as Map')}
                     onClick={onViewMap}
+                    disabled={notSupported}
                     icon={<IconWorld16 />}
                 />
             )}

diff --git a/...mponents/Item/VisualizationItem/ItemContextMenu/__tests__/ItemContextMenu.offline.spec.js b/...mponents/Item/VisualizationItem/ItemContextMenu/__tests__/ItemContextMenu.offline.spec.js
@@ -59,7 +59,7 @@ test('renders just the button when menu closed', () => {
     expect(getByRole('button')).toBeTruthy()
     expect(queryByText('View as Map')).toBeNull()
     expect(queryByText('View as Chart')).toBeNull()
-    expect(queryByText('View as Table')).toBeNull()
+    expect(queryByText('View as Pivot table')).toBeNull()
     expect(queryByTestId('divider')).toBeNull()
     expect(queryByText('Open in Data Visualizer app')).toBeNull()
     expect(queryByText('Show details and interpretations')).toBeNull()
@@ -113,7 +113,7 @@ test('renders popover menu for BAR chart', async () => {
     await waitFor(() => {
         expect(queryByText('View as Map')).toBeTruthy()
         expect(queryByText('View as Chart')).toBeNull()
-        expect(queryByText('View as Table')).toBeTruthy()
+        expect(queryByText('View as Pivot table')).toBeTruthy()
         expect(queryByTestId('divider')).toBeTruthy()
         expect(queryByText('Open in Data Visualizer app')).toBeTruthy()
         expect(queryByText('Show details and interpretations')).toBeTruthy()
@@ -140,7 +140,7 @@ test('renders popover menu for SINGLE_VALUE chart', async () => {
     await waitFor(() => {
         expect(queryByText('View as Map')).toBeNull()
         expect(queryByText('View as Chart')).toBeNull()
-        expect(queryByText('View as Table')).toBeNull()
+        expect(queryByText('View as Pivot table')).toBeNull()
         expect(queryByTestId('divider')).toBeNull()
         expect(queryByText('Open in Data Visualizer app')).toBeTruthy()
         expect(queryByText('Show details and interpretations')).toBeTruthy()
@@ -167,7 +167,7 @@ test('renders popover menu for YEAR_OVER_YEAR_LINE chart', async () => {
     await waitFor(() => {
         expect(queryByText('View as Map')).toBeNull()
         expect(queryByText('View as Chart')).toBeNull()
-        expect(queryByText('View as Table')).toBeNull()
+        expect(queryByText('View as Pivot table')).toBeNull()
         expect(queryByTestId('divider')).toBeNull()
         expect(queryByText('Open in Data Visualizer app')).toBeTruthy()
         expect(queryByText('Show details and interpretations')).toBeTruthy()
@@ -194,7 +194,7 @@ test('renders popover menu for GAUGE chart', async () => {
     await waitFor(() => {
         expect(queryByText('View as Map')).toBeNull()
         expect(queryByText('View as Chart')).toBeNull()
-        expect(queryByText('View as Table')).toBeNull()
+        expect(queryByText('View as Pivot table')).toBeNull()
         expect(queryByTestId('divider')).toBeNull()
         expect(queryByText('Open in Data Visualizer app')).toBeTruthy()
         expect(queryByText('Show details and interpretations')).toBeTruthy()
@@ -221,7 +221,7 @@ test('renders popover menu for PIE chart', async () => {
     await waitFor(() => {
         expect(queryByText('View as Map')).toBeNull()
         expect(queryByText('View as Chart')).toBeNull()
-        expect(queryByText('View as Table')).toBeNull()
+        expect(queryByText('View as Pivot table')).toBeNull()
         expect(queryByTestId('divider')).toBeNull()
         expect(queryByText('Open in Data Visualizer app')).toBeTruthy()
         expect(queryByText('Show details and interpretations')).toBeTruthy()
@@ -252,7 +252,7 @@ test('renders popover menu for PIVOT_TABLE', async () => {
     await waitFor(() => {
         expect(queryByText('View as Map')).toBeTruthy()
         expect(queryByText('View as Chart')).toBeTruthy()
-        expect(queryByText('View as Table')).toBeNull()
+        expect(queryByText('View as Pivot table')).toBeNull()
         expect(queryByTestId('divider')).toBeTruthy()
         expect(queryByText('Open in Data Visualizer app')).toBeTruthy()
         expect(queryByText('Show details and interpretations')).toBeTruthy()
@@ -281,7 +281,7 @@ test('renders popover menu for MAP', async () => {
     await waitFor(() => {
         expect(queryByText('View as Map')).toBeNull()
         expect(queryByText('View as Chart')).toBeTruthy()
-        expect(queryByText('View as Table')).toBeTruthy()
+        expect(queryByText('View as Pivot table')).toBeTruthy()
         expect(queryByTestId('divider')).toBeTruthy()
         expect(queryByText('Open in Maps app')).toBeTruthy()
         expect(queryByText('Show details and interpretations')).toBeTruthy()
@@ -379,7 +379,7 @@ test('renders only View in App when item load failed', async () => {
     await waitFor(() => {
         expect(queryByText('View as Map')).toBeNull()
         expect(queryByText('View as Chart')).toBeNull()
-        expect(queryByText('View as Table')).toBeNull()
+        expect(queryByText('View as Pivot table')).toBeNull()
         expect(queryByTestId('divider')).toBeNull()
         expect(queryByText('Open in Maps app')).toBeTruthy()
         expect(queryByText('Show details and interpretations')).toBeNull()
@@ -467,7 +467,7 @@ test('renders correct options for BAR in small screen', async () => {
     await waitFor(() => {
         expect(queryByText('View as Map')).toBeTruthy()
         expect(queryByText('View as Chart')).toBeNull()
-        expect(queryByText('View as Table')).toBeTruthy()
+        expect(queryByText('View as Pivot table')).toBeTruthy()
         expect(queryByTestId('divider')).toBeTruthy()
         expect(queryByText('Open in Data Visualizer app')).toBeNull()
         expect(queryByText('Show details and interpretations')).toBeTruthy()
@@ -498,7 +498,7 @@ test('renders correct options for PIE in small screen', async () => {
     await waitFor(() => {
         expect(queryByText('View as Map')).toBeNull()
         expect(queryByText('View as Chart')).toBeNull()
-        expect(queryByText('View as Table')).toBeNull()
+        expect(queryByText('View as Pivot table')).toBeNull()
         expect(queryByTestId('divider')).toBeNull()
         expect(queryByText('Open in Data Visualizer app')).toBeNull()
         expect(queryByText('Show details and interpretations')).toBeTruthy()

diff --git a/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ItemContextMenu.spec.js b/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ItemContextMenu.spec.js
@@ -59,7 +59,7 @@ test('renders just the button when menu closed', () => {
     expect(getByRole('button')).toBeTruthy()
     expect(queryByText('View as Map')).toBeNull()
     expect(queryByText('View as Chart')).toBeNull()
-    expect(queryByText('View as Table')).toBeNull()
+    expect(queryByText('View as Pivot table')).toBeNull()
     expect(queryByTestId('divider')).toBeNull()
     expect(queryByText('Open in Data Visualizer app')).toBeNull()
     expect(queryByText('Show details and interpretations')).toBeNull()
@@ -113,7 +113,7 @@ test('renders popover menu for BAR chart', async () => {
     await waitFor(() => {
         expect(queryByText('View as Map')).toBeTruthy()
         expect(queryByText('View as Chart')).toBeNull()
-        expect(queryByText('View as Table')).toBeTruthy()
+        expect(queryByText('View as Pivot table')).toBeTruthy()
         expect(queryByTestId('divider')).toBeTruthy()
         expect(queryByText('Open in Data Visualizer app')).toBeTruthy()
         expect(queryByText('Show details and interpretations')).toBeTruthy()
@@ -140,7 +140,7 @@ test('renders popover menu for SINGLE_VALUE chart', async () => {
     await waitFor(() => {
         expect(queryByText('View as Map')).toBeNull()
         expect(queryByText('View as Chart')).toBeNull()
-        expect(queryByText('View as Table')).toBeNull()
+        expect(queryByText('View as Pivot table')).toBeNull()
         expect(queryByTestId('divider')).toBeNull()
         expect(queryByText('Open in Data Visualizer app')).toBeTruthy()
         expect(queryByText('Show details and interpretations')).toBeTruthy()
@@ -167,7 +167,7 @@ test('renders popover menu for YEAR_OVER_YEAR_LINE chart', async () => {
     await waitFor(() => {
         expect(queryByText('View as Map')).toBeNull()
         expect(queryByText('View as Chart')).toBeNull()
-        expect(queryByText('View as Table')).toBeNull()
+        expect(queryByText('View as Pivot table')).toBeNull()
         expect(queryByTestId('divider')).toBeNull()
         expect(queryByText('Open in Data Visualizer app')).toBeTruthy()
         expect(queryByText('Show details and interpretations')).toBeTruthy()
@@ -194,7 +194,7 @@ test('renders popover menu for GAUGE chart', async () => {
     await waitFor(() => {
         expect(queryByText('View as Map')).toBeNull()
         expect(queryByText('View as Chart')).toBeNull()
-        expect(queryByText('View as Table')).toBeNull()
+        expect(queryByText('View as Pivot table')).toBeNull()
         expect(queryByTestId('divider')).toBeNull()
         expect(queryByText('Open in Data Visualizer app')).toBeTruthy()
         expect(queryByText('Show details and interpretations')).toBeTruthy()
@@ -221,7 +221,7 @@ test('renders popover menu for PIE chart', async () => {
     await waitFor(() => {
         expect(queryByText('View as Map')).toBeNull()
         expect(queryByText('View as Chart')).toBeNull()
-        expect(queryByText('View as Table')).toBeNull()
+        expect(queryByText('View as Pivot table')).toBeNull()
         expect(queryByTestId('divider')).toBeNull()
         expect(queryByText('Open in Data Visualizer app')).toBeTruthy()
         expect(queryByText('Show details and interpretations')).toBeTruthy()
@@ -252,7 +252,7 @@ test('renders popover menu for PIVOT_TABLE', async () => {
     await waitFor(() => {
         expect(queryByText('View as Map')).toBeTruthy()
         expect(queryByText('View as Chart')).toBeTruthy()
-        expect(queryByText('View as Table')).toBeNull()
+        expect(queryByText('View as Pivot table')).toBeNull()
         expect(queryByTestId('divider')).toBeTruthy()
         expect(queryByText('Open in Data Visualizer app')).toBeTruthy()
         expect(queryByText('Show details and interpretations')).toBeTruthy()
@@ -281,7 +281,7 @@ test('renders popover menu for MAP', async () => {
     await waitFor(() => {
         expect(queryByText('View as Map')).toBeNull()
         expect(queryByText('View as Chart')).toBeTruthy()
-        expect(queryByText('View as Table')).toBeTruthy()
+        expect(queryByText('View as Pivot table')).toBeTruthy()
         expect(queryByTestId('divider')).toBeTruthy()
         expect(queryByText('Open in Maps app')).toBeTruthy()
         expect(queryByText('Show details and interpretations')).toBeTruthy()
@@ -379,7 +379,7 @@ test('renders only View in App when item load failed', async () => {
     await waitFor(() => {
         expect(queryByText('View as Map')).toBeNull()
         expect(queryByText('View as Chart')).toBeNull()
-        expect(queryByText('View as Table')).toBeNull()
+        expect(queryByText('View as Pivot table')).toBeNull()
         expect(queryByTestId('divider')).toBeNull()
         expect(queryByText('Open in Maps app')).toBeTruthy()
         expect(queryByText('Show details and interpretations')).toBeNull()
@@ -467,7 +467,7 @@ test('renders correct options for BAR in small screen', async () => {
     await waitFor(() => {
         expect(queryByText('View as Map')).toBeTruthy()
         expect(queryByText('View as Chart')).toBeNull()
-        expect(queryByText('View as Table')).toBeTruthy()
+        expect(queryByText('View as Pivot table')).toBeTruthy()
         expect(queryByTestId('divider')).toBeTruthy()
         expect(queryByText('Open in Data Visualizer app')).toBeNull()
         expect(queryByText('Show details and interpretations')).toBeTruthy()
@@ -498,7 +498,7 @@ test('renders correct options for PIE in small screen', async () => {
     await waitFor(() => {
         expect(queryByText('View as Map')).toBeNull()
         expect(queryByText('View as Chart')).toBeNull()
-        expect(queryByText('View as Table')).toBeNull()
+        expect(queryByText('View as Pivot table')).toBeNull()
         expect(queryByTestId('divider')).toBeNull()
         expect(queryByText('Open in Data Visualizer app')).toBeNull()
         expect(queryByText('Show details and interpretations')).toBeTruthy()

diff --git a/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ViewAsMenuItems.spec.js b/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ViewAsMenuItems.spec.js
@@ -36,6 +36,9 @@ test('renders menu for active type MAP and type CHART', async () => {
     const props = Object.assign({}, defaultProps, {
         type: CHART,
         activeType: MAP,
+        visualization: {
+            type: 'COLUMN',
+        },
     })
 
     const { container } = render(<ViewAsMenuItems {...props} />)
@@ -49,6 +52,9 @@ test('renders disabled menu items when offline', () => {
     const props = Object.assign({}, defaultProps, {
         type: CHART,
         activeType: MAP,
+        visualization: {
+            type: 'COLUMN',
+        },
     })
 
     const { container } = render(<ViewAsMenuItems {...props} />)
@@ -105,7 +111,7 @@ test('renders menu for active type REPORT_TABLE and type CHART', async () => {
     const props = Object.assign({}, defaultProps, {
         type: CHART,
         activeType: REPORT_TABLE,
-        visualization: {},
+        visualization: { type: 'COLUMN' },
     })
 
     const { container } = render(<ViewAsMenuItems {...props} />)
@@ -118,7 +124,7 @@ test('renders menu for active type CHART and type REPORT_TABLE', async () => {
     const props = Object.assign({}, defaultProps, {
         type: REPORT_TABLE,
         activeType: CHART,
-        visualization: {},
+        visualization: { type: 'PIVOT_TABLE' },
     })
 
     const { container } = render(<ViewAsMenuItems {...props} />)