feat: configure options for Outlier table vis type (DHIS2-16347)

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 = () => (
+    <NumberBaseType
+        width="70px"
+        label={i18n.t('Max results')}
+        option={{
+            name: 'maxResults',
+        }}
+        min={1}
+        max={500}
+        dataTest={'max-results'}
+    />
+)
+
+export default MaxResults

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 (
+        <div className={tabSectionOption.className}>
+            <FieldSet>
+                <Legend>
+                    <span className={tabSectionTitle.className}>
+                        {i18n.t('Outlier detection method')}
+                    </span>
+                </Legend>
+                <div className={tabSectionOption.className}>
+                    <OutlierDetectionMethod
+                        methods={methods}
+                        onMethodChange={(value) =>
+                            onChange({
+                                ...outlierAnalysis,
+                                [METHOD_PROP]: value,
+                                [THRESHOLD_PROP]: methods.find(
+                                    (item) => item.id === value
+                                ).defaultThreshold,
+                            })
+                        }
+                        onThresholdChange={(value) =>
+                            storeProp(THRESHOLD_PROP, value)
+                        }
+                        currentMethodId={outlierAnalysis[METHOD_PROP]}
+                        currentThreshold={outlierAnalysis[THRESHOLD_PROP]}
+                    />
+                </div>
+            </FieldSet>
+        </div>
+    )
+}
+
+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)

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)
     }

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([<MaxResults />]),
+        },
+    ]),
+    getStyleTab([
+        {
+            key: 'style-section-1',
+            content: React.Children.toArray([
+                <DisplayDensity />,
+                <FontSize />,
+                <DigitGroupSeparator />,
+                <ShowHierarchy />,
+            ]),
+        },
+    ]),
+    getOutliersTab([
+        {
+            key: 'outliers-section-1',
+            content: React.Children.toArray([<Outliers />]),
+        },
+    ]),
+]