fix: use same labels as chips for fixed column headers

dhis2 · Jan 24, 2024 · c54d145 · c54d145
1 parent da77bf9
commit c54d145
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 36 deletions.
diff --git a/src/api/analytics.js b/src/api/analytics.js
@@ -16,7 +16,7 @@ import {
 import { OUTLIER_MAX_RESULTS_PROP } from '../components/VisualizationOptions/Options/OutliersMaxResults.js'
 import {
     getRelativePeriodTypeUsed,
-    getOutlierDetectionHeadersMap,
+    getOutlierTableHeadersMap,
 } from '../modules/analytics.js'
 import { getSortingFromVisualization } from '../modules/ui.js'
 
@@ -40,7 +40,7 @@ export const apiFetchAnalyticsForOutlierTable = async (
     visualization,
     options
 ) => {
-    const headersMap = getOutlierDetectionHeadersMap(options)
+    const headersMap = getOutlierTableHeadersMap(options)
 
     const parameters = {
         ...options,

diff --git a/src/components/VisualizationPlugin/OutlierTablePlugin.js b/src/components/VisualizationPlugin/OutlierTablePlugin.js
@@ -1,3 +1,4 @@
+import { getFixedDimensions } from '@dhis2/analytics'
 import i18n from '@dhis2/d2-i18n'
 import {
     DataTable,
@@ -10,6 +11,7 @@ import {
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { useCallback, useMemo, useReducer } from 'react'
+import { getOutlierTableHeadersMap } from '../../modules/analytics.js'
 import {
     DISPLAY_DENSITY_COMFORTABLE,
     DISPLAY_DENSITY_COMPACT,
@@ -51,6 +53,10 @@ const OutlierTablePlugin = ({
     onDataSorted,
 }) => {
     const data = responses[0]
+    const headersMap = getOutlierTableHeadersMap({
+        showHierarchy: visualization.showHierarchy,
+    })
+    const fixedDimensions = getFixedDimensions()
 
     //    const isInModal = false // TODO !!filters?.relativePeriodDate
 
@@ -97,7 +103,64 @@ const OutlierTablePlugin = ({
         })
     }
 
-    const renderCellContent = ({ columnIndex, value }) => (
+    const lookupColumnName = (name) => {
+        const dimensionId = Object.entries(headersMap).find(
+            (entry) => entry[1] === name
+        )?.[0]
+
+        if (dimensionId) {
+            return fixedDimensions[dimensionId]?.name
+        }
+
+        return undefined
+    }
+
+    const renderHeaderCell = ({ name, column, valueType }) => {
+        const columnName = lookupColumnName(name) || column
+
+        return (
+            <DataTableColumnHeader
+                fixed
+                top="0"
+                key={name}
+                name={name}
+                onSortIconClick={sortData}
+                sortDirection={
+                    valueType !== 'NUMBER'
+                        ? undefined
+                        : name === sortField
+                        ? sortDirection
+                        : 'default'
+                }
+                sortIconTitle={
+                    sortField === name && sortDirection === 'desc'
+                        ? i18n.t(
+                              'Sort ascending by {{columnName}} and update',
+                              {
+                                  columnName,
+                              }
+                          )
+                        : i18n.t(
+                              'Sort descending by {{columnName}} and update',
+                              {
+                                  columnName,
+                              }
+                          )
+                }
+                className={cx(
+                    styles.headerCell,
+                    fontSizeClass,
+                    sizeClass,
+                    'bordered'
+                )}
+                dataTest="table-header"
+            >
+                {columnName}
+            </DataTableColumnHeader>
+        )
+    }
+
+    const renderValueCell = ({ columnIndex, value }) => (
         <DataTableCell
             key={columnIndex}
             className={cx(styles.cell, fontSizeClass, sizeClass, 'bordered')}
@@ -117,42 +180,14 @@ const OutlierTablePlugin = ({
             >
                 <DataTableHead>
                     <DataTableRow>
-                        {data.headers.map(({ name, column, valueType }) => (
-                            <DataTableColumnHeader
-                                fixed
-                                top="0"
-                                key={name}
-                                name={name}
-                                onSortIconClick={sortData}
-                                sortDirection={
-                                    valueType !== 'NUMBER'
-                                        ? undefined
-                                        : name === sortField
-                                        ? sortDirection
-                                        : 'default'
-                                }
-                                sortIconTitle={i18n.t(
-                                    'Sort descending by {{column}} and update',
-                                    { column }
-                                )}
-                                className={cx(
-                                    styles.headerCell,
-                                    fontSizeClass,
-                                    sizeClass,
-                                    'bordered'
-                                )}
-                                dataTest="table-header"
-                            >
-                                {column}
-                            </DataTableColumnHeader>
-                        ))}
+                        {data.headers.map((header) => renderHeaderCell(header))}
                     </DataTableRow>
                 </DataTableHead>
                 <DataTableBody dataTest={'table-body'}>
                     {data.rows.map((row, rowIndex) => (
                         <DataTableRow key={rowIndex} dataTest={'table-row'}>
                             {row.map((value, columnIndex) =>
-                                renderCellContent({
+                                renderValueCell({
                                     columnIndex,
                                     value,
                                 })

diff --git a/src/modules/analytics.js b/src/modules/analytics.js
@@ -7,14 +7,14 @@ import {
     DAILY,
 } from '@dhis2/analytics'
 
-export const outlierDetectionHeadersMap = {
+export const outlierTableHeadersMap = {
     [DIMENSION_ID_DATA]: 'dxname',
     [DIMENSION_ID_ORGUNIT]: 'ouname',
     [DIMENSION_ID_PERIOD]: 'pename',
 }
 
-export const getOutlierDetectionHeadersMap = ({ showHierarchy }) => {
-    const map = Object.assign({}, outlierDetectionHeadersMap)
+export const getOutlierTableHeadersMap = ({ showHierarchy }) => {
+    const map = Object.assign({}, outlierTableHeadersMap)
 
     if (showHierarchy) {
         map[DIMENSION_ID_ORGUNIT] = 'ounamehierarchy'