feat: add plugin component for outliers table (DHIS2-16356)

dhis2 · Dec 20, 2023 · ffa8919 · ffa8919
1 parent 5096daf
commit ffa8919
Show file tree

Hide file tree

Showing 2 changed files with 149 additions and 34 deletions.
diff --git a/src/components/VisualizationPlugin/OutliersTablePlugin.js b/src/components/VisualizationPlugin/OutliersTablePlugin.js
@@ -0,0 +1,92 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import {
+    DataTable,
+    DataTableBody,
+    DataTableCell,
+    DataTableColumnHeader,
+    DataTableHead,
+    DataTableRow,
+} from '@dhis2/ui'
+
+const OutliersTablePlugin = ({
+    responses,
+    // XXX needed?
+    legendSets,
+    visualization,
+    style,
+    id: renderCounter,
+    onToggleContextualMenu,
+}) => {
+    const data = responses[0]
+
+    const renderCellContent = ({ columnIndex, value }) => (
+        <DataTableCell key={columnIndex}>{value}</DataTableCell>
+    )
+
+    return (
+        //            <OutliersTableTable
+        //                visualization={visualization}
+        //                data={responses[0].response}
+        //                legendSets={legendSets}
+        //                renderCounter={renderCounter}
+        //                onToggleContextualMenu={onToggleContextualMenu}
+        //            />
+        //        </div>
+        <div style={style}>
+            <DataTable>
+                <DataTableHead>
+                    <DataTableRow>
+                        {data.headers.map((header, index) =>
+                            header ? (
+                                <DataTableColumnHeader
+                                    fixed
+                                    top="0"
+                                    key={header.name}
+                                    name={header.name}
+                                    //className={cx(
+                                    //    styles.headerCell,
+                                    //    fontSizeClass,
+                                    //    sizeClass,
+                                    //    'bordered'
+                                    //)}
+                                    dataTest={'table-header'}
+                                >
+                                    {header.name}
+                                </DataTableColumnHeader>
+                            )
+                        )}
+                    </DataTableRow>
+                </DataTableHead>
+                {/* https://jira.dhis2.org/browse/LIBS-278 */}
+                <DataTableBody dataTest={'table-body'}>
+                    {data.rows.map((row, rowIndex) => (
+                        <DataTableRow key={rowIndex} dataTest={'table-row'}>
+                            {row.map((value, columnIndex) =>
+                                renderCellContent({
+                                    columnIndex,
+                                    value,
+                                })
+                            )}
+                        </DataTableRow>
+                    ))}
+                </DataTableBody>
+            </DataTable>
+        </div>
+    )
+}
+
+OutliersTablePlugin.defaultProps = {
+    style: {},
+}
+
+OutliersTablePlugin.propTypes = {
+    legendSets: PropTypes.arrayOf(PropTypes.object).isRequired,
+    responses: PropTypes.arrayOf(PropTypes.object).isRequired,
+    visualization: PropTypes.object.isRequired,
+    id: PropTypes.number,
+    style: PropTypes.object,
+    onToggleContextualMenu: PropTypes.func,
+}
+
+export default OutliersTablePlugin
diff --git a/src/components/VisualizationPlugin/VisualizationPlugin.js b/src/components/VisualizationPlugin/VisualizationPlugin.js
@@ -1,4 +1,5 @@
 import {
+    VIS_TYPE_OUTLIERS_TABLE,
     VIS_TYPE_PIVOT_TABLE,
     apiFetchOrganisationUnitLevels,
     convertOuLevelsToUids,
@@ -22,6 +23,7 @@ import { fetchData } from '../../modules/fetchData.js'
 import { getOptionsFromVisualization } from '../../modules/options.js'
 import ChartPlugin from './ChartPlugin.js'
 import ContextualMenu from './ContextualMenu.js'
+import OutliersTablePlugin from './OutliersTablePlugin.js'
 import PivotPlugin from './PivotPlugin.js'
 import styles from './styles/VisualizationPlugin.module.css'
 
@@ -384,42 +386,63 @@ export const VisualizationPlugin = ({
         }
     }
 
+    const renderPlugin = () => {
+        if (
+            !fetchResult.visualization.type ||
+            fetchResult.visualization.type === VIS_TYPE_PIVOT_TABLE
+        ) {
+            return (
+                <PivotPlugin
+                    visualization={convertOuLevelsToUids(
+                        ouLevels,
+                        fetchResult.visualization
+                    )}
+                    responses={fetchResult.responses}
+                    legendSets={legendSets}
+                    onToggleContextualMenu={
+                        onDrill ? onToggleContextualMenu : undefined
+                    }
+                    id={id}
+                    style={transformedStyle}
+                />
+            )
+        } else if (fetchResult.visualization.type === VIS_TYPE_OUTLIERS_TABLE) {
+            return (
+                <OutliersTablePlugin
+                    visualization={convertOuLevelsToUids(
+                        ouLevels,
+                        fetchResult.visualization
+                    )}
+                    responses={fetchResult.responses}
+                    legendSets={legendSets}
+                    id={id}
+                    style={transformedStyle}
+                />
+            )
+        } else {
+            return (
+                <ChartPlugin
+                    visualization={convertOuLevelsToUids(
+                        ouLevels,
+                        fetchResult.visualization
+                    )}
+                    responses={fetchResult.responses}
+                    extraOptions={fetchResult.extraOptions}
+                    legendSets={legendSets}
+                    onToggleContextualMenu={
+                        onDrill ? onToggleContextualMenu : undefined
+                    }
+                    id={forDashboard ? renderId : id}
+                    onChartGenerated={onChartGenerated}
+                    style={transformedStyle}
+                />
+            )
+        }
+    }
+
     return (
         <div className={styles.container} ref={containerCallbackRef}>
-            <div className={styles.chartWrapper}>
-                {!fetchResult.visualization.type ||
-                fetchResult.visualization.type === VIS_TYPE_PIVOT_TABLE ? (
-                    <PivotPlugin
-                        visualization={convertOuLevelsToUids(
-                            ouLevels,
-                            fetchResult.visualization
-                        )}
-                        responses={fetchResult.responses}
-                        legendSets={legendSets}
-                        onToggleContextualMenu={
-                            onDrill ? onToggleContextualMenu : undefined
-                        }
-                        id={id}
-                        style={transformedStyle}
-                    />
-                ) : (
-                    <ChartPlugin
-                        visualization={convertOuLevelsToUids(
-                            ouLevels,
-                            fetchResult.visualization
-                        )}
-                        responses={fetchResult.responses}
-                        extraOptions={fetchResult.extraOptions}
-                        legendSets={legendSets}
-                        onToggleContextualMenu={
-                            onDrill ? onToggleContextualMenu : undefined
-                        }
-                        id={forDashboard ? renderId : id}
-                        onChartGenerated={onChartGenerated}
-                        style={transformedStyle}
-                    />
-                )}
-            </div>
+            <div className={styles.chartWrapper}>{renderPlugin()}</div>
             {getLegendKey()}
             {contextualMenuRect && (
                 <Layer