diff --git a/src/components/VisualizationOptions/Options/MaxResults.js b/src/components/VisualizationOptions/Options/MaxResults.js
new file mode 100644
index 0000000000..8a06748eee
--- /dev/null
+++ b/src/components/VisualizationOptions/Options/MaxResults.js
@@ -0,0 +1,18 @@
+import i18n from '@dhis2/d2-i18n'
+import React from 'react'
+import NumberBaseType from './NumberBaseType.js'
+
+const MaxResults = () => (
+
+)
+
+export default MaxResults
diff --git a/src/components/VisualizationOptions/Options/OutliersForOutliersTable.js b/src/components/VisualizationOptions/Options/OutliersForOutliersTable.js
new file mode 100644
index 0000000000..6fa8564b6e
--- /dev/null
+++ b/src/components/VisualizationOptions/Options/OutliersForOutliersTable.js
@@ -0,0 +1,93 @@
+import i18n from '@dhis2/d2-i18n'
+import { Checkbox, FieldSet, Help, Legend } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { connect } from 'react-redux'
+import { acSetUiOptions } from '../../../actions/ui.js'
+import { sGetUiOptions } from '../../../reducers/ui.js'
+import styles from '../styles/Outliers.module.css'
+import {
+ tabSectionOption,
+ tabSectionTitle,
+} from '../styles/VisualizationOptions.style.js'
+import OutlierDetectionMethod from './OutlierDetectionMethod.js'
+
+const METHOD_PROP = 'outlierMethod'
+const THRESHOLD_PROP = 'thresholdFactor'
+
+const OUTLIER_ANALYSIS_OPTION_NAME = 'outlierAnalysis'
+
+const METHOD_STANDARD_Z_SCORE = 'STANDARD_Z_SCORE'
+const METHOD_MODIFIED_Z_SCORE = 'MODIFIED_Z_SCORE'
+const methods = [
+ {
+ id: METHOD_STANDARD_Z_SCORE,
+ label: i18n.t('Z-score / Standard score'),
+ defaultThreshold: 3,
+ },
+ {
+ id: METHOD_MODIFIED_Z_SCORE,
+ label: i18n.t('Modified Z-score'),
+ defaultThreshold: 3,
+ },
+]
+
+const DEFAULT_STATE = {
+ [METHOD_PROP]: METHOD_MODIFIED_Z_SCORE,
+ [THRESHOLD_PROP]: 3,
+}
+
+const dataTest = 'option-outliers'
+
+const Outliers = ({ outlierAnalysis, onChange }) => {
+ const storeProp = (prop, value) =>
+ onChange({ ...outlierAnalysis, [prop]: value })
+
+ return (
+
+
+
+ )
+}
+
+Outliers.propTypes = {
+ outlierAnalysis: PropTypes.object.isRequired,
+ onChange: PropTypes.func.isRequired,
+}
+
+const mapStateToProps = (state) => ({
+ outlierAnalysis:
+ sGetUiOptions(state)[OUTLIER_ANALYSIS_OPTION_NAME] || DEFAULT_STATE,
+})
+
+const mapDispatchToProps = (dispatch) => ({
+ onChange: (value) =>
+ dispatch(acSetUiOptions({ [OUTLIER_ANALYSIS_OPTION_NAME]: value })),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Outliers)
diff --git a/src/modules/options/config.js b/src/modules/options/config.js
index b55b1c9d23..f95681b505 100644
--- a/src/modules/options/config.js
+++ b/src/modules/options/config.js
@@ -4,6 +4,7 @@ import {
VIS_TYPE_GAUGE,
VIS_TYPE_SINGLE_VALUE,
VIS_TYPE_SCATTER,
+ VIS_TYPE_OUTLIERS_TABLE,
isStacked as isStackedType,
isLegendSetType,
isMultiType,
@@ -17,6 +18,7 @@ import pieConfig from './pieConfig.js'
import pivotTableConfig from './pivotTableConfig.js'
import scatterConfig from './scatterConfig.js'
import singleValueConfig from './singleValueConfig.js'
+import outliersTableConfig from './outliersTableConfig.js'
export const getOptionsByType = ({
type,
@@ -60,6 +62,8 @@ export const getOptionsByType = ({
})
case VIS_TYPE_SCATTER:
return scatterConfig()
+ case VIS_TYPE_OUTLIERS_TABLE:
+ return outliersTableConfig(defaultProps)
default:
return defaultConfig(defaultProps)
}
diff --git a/src/modules/options/outliersTableConfig.js b/src/modules/options/outliersTableConfig.js
new file mode 100644
index 0000000000..75ea8d3e92
--- /dev/null
+++ b/src/modules/options/outliersTableConfig.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import DigitGroupSeparator from '../../components/VisualizationOptions/Options/DigitGroupSeparator.js'
+import DisplayDensity from '../../components/VisualizationOptions/Options/DisplayDensity.js'
+import FontSize from '../../components/VisualizationOptions/Options/FontSize.js'
+import MaxResults from '../../components/VisualizationOptions/Options/MaxResults.js'
+import Outliers from '../../components/VisualizationOptions/Options/OutliersForOutliersTable.js'
+import ShowHierarchy from '../../components/VisualizationOptions/Options/ShowHierarchy.js'
+import getDataTab from './tabs/data.js'
+import getOutliersTab from './tabs/outliers.js'
+import getStyleTab from './tabs/style.js'
+
+export default () => [
+ getDataTab([
+ {
+ key: 'data-section-1',
+ content: React.Children.toArray([]),
+ },
+ ]),
+ getStyleTab([
+ {
+ key: 'style-section-1',
+ content: React.Children.toArray([
+ ,
+ ,
+ ,
+ ,
+ ]),
+ },
+ ]),
+ getOutliersTab([
+ {
+ key: 'outliers-section-1',
+ content: React.Children.toArray([]),
+ },
+ ]),
+]