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 && (