fix: adjust download menu and request (DHIS2-16595)

dhis2 · Feb 1, 2024 · 2505088 · 2505088
1 parent 5378e4d
commit 2505088
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 76 deletions.
diff --git a/src/api/analytics.js b/src/api/analytics.js
@@ -35,11 +35,12 @@ export const apiFetchAnalytics = async (dataEngine, visualization, options) => {
     return [new analyticsEngine.response(rawResponse)]
 }
 
-export const apiFetchAnalyticsForOutlierTable = async (
-    dataEngine,
+export const getAnalyticsRequestForOutlierTable = ({
+    analyticsEngine,
     visualization,
-    options
-) => {
+    options,
+    forDownload = false,
+}) => {
     const headersMap = getOutlierTableHeadersMap(options)
 
     const parameters = {
@@ -59,7 +60,7 @@ export const apiFetchAnalyticsForOutlierTable = async (
     columns.forEach(({ dimension, items }) => {
         parameters[dimension] = items.map(({ id }) => id).join(',')
 
-        headers.push(headersMap[dimension])
+        headers.push(forDownload ? dimension : headersMap[dimension])
     })
 
     headers.push('value')
@@ -84,9 +85,21 @@ export const apiFetchAnalyticsForOutlierTable = async (
         parameters.sortOrder = sorting.direction
     }
 
+    return new analyticsEngine.request().withParameters(parameters)
+}
+
+export const apiFetchAnalyticsForOutlierTable = async (
+    dataEngine,
+    visualization,
+    options
+) => {
     const analyticsEngine = Analytics.getAnalytics(dataEngine)
 
-    const req = new analyticsEngine.request().withParameters(parameters)
+    const req = getAnalyticsRequestForOutlierTable({
+        analyticsEngine,
+        visualization,
+        options,
+    })
 
     const rawResponse = await analyticsEngine.aggregate.getOutliersData(req)
 

diff --git a/src/components/DownloadMenu/AdvancedSubMenu.js b/src/components/DownloadMenu/AdvancedSubMenu.js
@@ -24,6 +24,7 @@ export const AdvancedSubMenu = ({
             <MenuSectionHeader
                 label={i18n.t('Data value set')}
                 dense={hoverable}
+                hideDivider
             />
             <MenuItemComponent
                 label={i18n.t('JSON')}

diff --git a/src/components/DownloadMenu/DownloadMenu.js b/src/components/DownloadMenu/DownloadMenu.js
@@ -1,4 +1,8 @@
-import { VIS_TYPE_PIVOT_TABLE, HoverMenuList } from '@dhis2/analytics'
+import {
+    VIS_TYPE_PIVOT_TABLE,
+    VIS_TYPE_OUTLIER_TABLE,
+    HoverMenuList,
+} from '@dhis2/analytics'
 import i18n from '@dhis2/d2-i18n'
 import { FlyoutMenu, MenuSectionHeader } from '@dhis2/ui'
 import PropTypes from 'prop-types'
@@ -26,28 +30,31 @@ const DownloadMenu = ({
         <MenuComponent>
             {visType === VIS_TYPE_PIVOT_TABLE ? (
                 <TableMenu hoverable={hoverable} onDownload={onDownloadData} />
-            ) : (
+            ) : visType !== VIS_TYPE_OUTLIER_TABLE ? (
                 <GraphicsMenu
                     hoverable={hoverable}
                     onDownload={onDownloadImage}
                 />
-            )}
+            ) : null}
             <MenuSectionHeader
                 label={i18n.t('Plain data source')}
                 dense={hoverable}
+                hideDivider={visType === VIS_TYPE_OUTLIER_TABLE}
             />
             <PlainDataSourceSubMenu
                 hoverable={hoverable}
                 onDownload={onDownloadData}
                 label={i18n.t('JSON')}
                 format={FILE_FORMAT_JSON}
             />
-            <PlainDataSourceSubMenu
-                hoverable={hoverable}
-                onDownload={onDownloadData}
-                label={i18n.t('XML')}
-                format={FILE_FORMAT_XML}
-            />
+            {visType !== VIS_TYPE_OUTLIER_TABLE && (
+                <PlainDataSourceSubMenu
+                    hoverable={hoverable}
+                    onDownload={onDownloadData}
+                    label={i18n.t('XML')}
+                    format={FILE_FORMAT_XML}
+                />
+            )}
             <PlainDataSourceSubMenu
                 hoverable={hoverable}
                 onDownload={onDownloadData}
@@ -60,11 +67,13 @@ const DownloadMenu = ({
                 label={i18n.t('CSV')}
                 format={FILE_FORMAT_CSV}
             />
-            <AdvancedSubMenu
-                hoverable={hoverable}
-                onDownload={onDownloadData}
-                label={i18n.t('Advanced')}
-            />
+            {visType !== VIS_TYPE_OUTLIER_TABLE && (
+                <AdvancedSubMenu
+                    hoverable={hoverable}
+                    onDownload={onDownloadData}
+                    label={i18n.t('Advanced')}
+                />
+            )}
         </MenuComponent>
     )
 }

diff --git a/src/components/DownloadMenu/useDownload.js b/src/components/DownloadMenu/useDownload.js
@@ -1,7 +1,8 @@
-import { Analytics } from '@dhis2/analytics'
+import { Analytics, VIS_TYPE_OUTLIER_TABLE } from '@dhis2/analytics'
 import { useConfig, useDataEngine, useDataMutation } from '@dhis2/app-runtime'
 import { useCallback } from 'react'
 import { useSelector } from 'react-redux'
+import { getAnalyticsRequestForOutlierTable } from '../../api/analytics.js'
 import { sGetChart } from '../../reducers/chart.js'
 import { sGetCurrent } from '../../reducers/current.js'
 import {
@@ -106,62 +107,87 @@ const useDownload = (relativePeriodDate) => {
             let req = new analyticsEngine.request()
             let target = '_top'
 
-            switch (type) {
-                case DOWNLOAD_TYPE_TABLE:
-                    req = req
-                        .fromVisualization(visualization)
-                        .withFormat(format)
-                        .withTableLayout()
-                        .withColumns(columns.join(';'))
-                        .withRows(rows.join(';'))
-
-                    req = addCommonParameters(req, visualization, {
-                        relativePeriodDate,
-                    })
-
-                    if (visualization.hideEmptyColumns) {
-                        req = req.withHideEmptyColumns()
-                    }
-
-                    if (visualization.hideEmptyRows) {
-                        req = req.withHideEmptyRows()
-                    }
-
-                    if (visualization.showHierarchy) {
-                        req = req.withShowHierarchy()
-                    }
-
-                    target = format === FILE_FORMAT_HTML_CSS ? '_blank' : '_top'
-
-                    break
-                case DOWNLOAD_TYPE_PLAIN:
-                    req = req
-                        .fromVisualization(
-                            visualization,
-                            path === 'dataValueSet'
+            if (visType === VIS_TYPE_OUTLIER_TABLE) {
+                // only DOWNLOAD_TYPE_PLAIN is enabled
+                // open JSON in new tab
+                target = [FILE_FORMAT_CSV, FILE_FORMAT_XLS].includes(format)
+                    ? '_top'
+                    : '_blank'
+
+                req = getAnalyticsRequestForOutlierTable({
+                    analyticsEngine,
+                    visualization,
+                    options: { showHierarchy: visualization.showHierarchy },
+                    forDownload: true,
+                })
+
+                // TODO withRelativePeriodDate
+
+                req = req
+                    .withFormat(format)
+                    .withOutputIdScheme(idScheme)
+                    .withPath('outlierDetection')
+            } else {
+                switch (type) {
+                    case DOWNLOAD_TYPE_TABLE:
+                        req = req
+                            .fromVisualization(visualization)
+                            .withFormat(format)
+                            .withTableLayout()
+                            .withColumns(columns.join(';'))
+                            .withRows(rows.join(';'))
+
+                        req = addCommonParameters(req, visualization, {
+                            relativePeriodDate,
+                        })
+
+                        if (visualization.hideEmptyColumns) {
+                            req = req.withHideEmptyColumns()
+                        }
+
+                        if (visualization.hideEmptyRows) {
+                            req = req.withHideEmptyRows()
+                        }
+
+                        if (visualization.showHierarchy) {
+                            req = req.withShowHierarchy()
+                        }
+
+                        target =
+                            format === FILE_FORMAT_HTML_CSS ? '_blank' : '_top'
+
+                        break
+                    case DOWNLOAD_TYPE_PLAIN:
+                        req = req
+                            .fromVisualization(
+                                visualization,
+                                path === 'dataValueSet'
+                            )
+                            .withFormat(format)
+                            .withShowHierarchy(visualization.showHierarchy)
+                            .withHierarchyMeta(visualization.showHierarchy)
+                            .withIncludeMetadataDetails(true)
+                            .withIncludeNumDen()
+
+                        req = addCommonParameters(req, visualization, {
+                            relativePeriodDate,
+                        })
+
+                        if (path) {
+                            req = req.withPath(path)
+                        }
+
+                        if (idScheme) {
+                            req = req.withOutputIdScheme(idScheme)
+                        }
+
+                        target = [FILE_FORMAT_CSV, FILE_FORMAT_XLS].includes(
+                            format
                         )
-                        .withFormat(format)
-                        .withShowHierarchy(visualization.showHierarchy)
-                        .withHierarchyMeta(visualization.showHierarchy)
-                        .withIncludeMetadataDetails(true)
-                        .withIncludeNumDen()
-
-                    req = addCommonParameters(req, visualization, {
-                        relativePeriodDate,
-                    })
-
-                    if (path) {
-                        req = req.withPath(path)
-                    }
-
-                    if (idScheme) {
-                        req = req.withOutputIdScheme(idScheme)
-                    }
-
-                    target = [FILE_FORMAT_CSV, FILE_FORMAT_XLS].includes(format)
-                        ? '_top'
-                        : '_blank'
-                    break
+                            ? '_top'
+                            : '_blank'
+                        break
+                }
             }
 
             const url = new URL(
@@ -182,6 +208,7 @@ const useDownload = (relativePeriodDate) => {
             relativePeriodDate,
             rows,
             visualization,
+            visType,
         ]
     )