diff --git a/src/components/VisualizationPlugin/OutliersTablePlugin.js b/src/components/VisualizationPlugin/OutliersTablePlugin.js new file mode 100644 index 0000000000..9ecb867067 --- /dev/null +++ b/src/components/VisualizationPlugin/OutliersTablePlugin.js @@ -0,0 +1,90 @@ +import { + DataTable, + DataTableBody, + DataTableCell, + DataTableColumnHeader, + DataTableHead, + DataTableRow, +} from '@dhis2/ui' +import PropTypes from 'prop-types' +import React from 'react' + +const OutliersTablePlugin = ({ + responses, + // XXX needed? + //legendSets, + //visualization, + style, + //id: renderCounter, + //onToggleContextualMenu, +}) => { + const data = responses[0] + + const renderCellContent = ({ columnIndex, value }) => ( + {value} + ) + + return ( + // + // +
+ + + + {data.headers.map((header) => ( + + {header.name} + + ))} + + + {/* https://jira.dhis2.org/browse/LIBS-278 */} + + {data.rows.map((row, rowIndex) => ( + + {row.map((value, columnIndex) => + renderCellContent({ + columnIndex, + value, + }) + )} + + ))} + + +
+ ) +} + +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 index 5875e674ae..101c9bd02b 100644 --- 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 ( + + ) + } else if (fetchResult.visualization.type === VIS_TYPE_OUTLIERS_TABLE) { + return ( + + ) + } else { + return ( + + ) + } + } + return (
-
- {!fetchResult.visualization.type || - fetchResult.visualization.type === VIS_TYPE_PIVOT_TABLE ? ( - - ) : ( - - )} -
+
{renderPlugin()}
{getLegendKey()} {contextualMenuRect && (