From 5096daf0ab90eea5a1dd51360ed4e1b7aa99a902 Mon Sep 17 00:00:00 2001 From: Edoardo Sabadelli Date: Wed, 20 Dec 2023 12:20:04 +0100 Subject: [PATCH] feat: configure options for Outlier table vis type (DHIS2-16347) --- .../Options/MaxResults.js | 18 ++++ .../Options/OutliersForOutliersTable.js | 90 +++++++++++++++++++ src/modules/options/config.js | 4 + src/modules/options/outliersTableConfig.js | 36 ++++++++ 4 files changed, 148 insertions(+) create mode 100644 src/components/VisualizationOptions/Options/MaxResults.js create mode 100644 src/components/VisualizationOptions/Options/OutliersForOutliersTable.js create mode 100644 src/modules/options/outliersTableConfig.js 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..d26e76c5e4 --- /dev/null +++ b/src/components/VisualizationOptions/Options/OutliersForOutliersTable.js @@ -0,0 +1,90 @@ +import i18n from '@dhis2/d2-i18n' +import { FieldSet, 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 { + 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 = 'Z_SCORE' +const METHOD_MODIFIED_Z_SCORE = 'MOD_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 Outliers = ({ outlierAnalysis, onChange }) => { + const storeProp = (prop, value) => + onChange({ ...outlierAnalysis, [prop]: value }) + + return ( +
+
+ + + {i18n.t('Outlier detection method')} + + +
+ + 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]} + /> +
+
+
+ ) +} + +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..f2beb7558a 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, @@ -13,6 +14,7 @@ import { } from '@dhis2/analytics' import defaultConfig from './defaultConfig.js' import gaugeConfig from './gaugeConfig.js' +import outliersTableConfig from './outliersTableConfig.js' import pieConfig from './pieConfig.js' import pivotTableConfig from './pivotTableConfig.js' import scatterConfig from './scatterConfig.js' @@ -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([]), + }, + ]), +]