feat: configurable decimal precision for automatic legends [PR4] [DHIS2-18242]

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2026-04-26T11:10:26.962Z\n"
-"PO-Revision-Date: 2026-04-26T11:10:26.963Z\n"
+"POT-Creation-Date: 2026-04-27T11:12:19.709Z\n"
+"PO-Revision-Date: 2026-04-27T11:12:19.709Z\n"
 
 msgid "2020"
 msgstr "2020"
@@ -38,6 +38,12 @@ msgstr "Classification"
 msgid "Classes"
 msgstr "Classes"
 
+msgid "Auto"
+msgstr "Auto"
+
+msgid "Decimal places"
+msgstr "Decimal places"
+
 msgid "Legend set"
 msgstr "Legend set"
 
@@ -353,18 +359,15 @@ msgstr "Max value is required"
 msgid "Max should be greater than min"
 msgstr "Max should be greater than min"
 
-msgid "Valid steps are {{minSteps}} to {{maxSteps}}"
-msgstr "Valid steps are {{minSteps}} to {{maxSteps}}"
+msgid "Valid classes are {{minSteps}} to {{maxSteps}}"
+msgstr "Valid classes are {{minSteps}} to {{maxSteps}}"
 
 msgid "Min"
 msgstr "Min"
 
 msgid "Max"
 msgstr "Max"
 
-msgid "Steps"
-msgstr "Steps"
-
 msgid "Facility buffer"
 msgstr "Facility buffer"
 
@@ -1824,11 +1827,3 @@ msgstr "End date is invalid"
 
 msgid "End date cannot be earlier than start date"
 msgstr "End date cannot be earlier than start date"
-
-msgctxt "Application title"
-msgid "__MANIFEST_APP_TITLE"
-msgstr "Maps"
-
-msgctxt "Application description"
-msgid "__MANIFEST_APP_DESCRIPTION"
-msgstr "DHIS2 Maps"

src/actions/layerEdit.js

@@ -92,6 +92,11 @@ export const setColorScale = (colorScale) => ({
     colorScale,
 })
 
+export const setLegendDecimalPlaces = (legendDecimalPlaces) => ({
+    type: types.LAYER_EDIT_LEGEND_DECIMAL_PLACES_SET,
+    legendDecimalPlaces,
+})
+
 // Set event status
 export const setEventStatus = (status) => ({
     type: types.LAYER_EDIT_EVENT_STATUS_SET,

src/components/classification/Classification.jsx

@@ -3,7 +3,11 @@ import { range } from 'lodash/fp'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { connect } from 'react-redux'
-import { setClassification, setColorScale } from '../../actions/layerEdit.js'
+import {
+    setClassification,
+    setColorScale,
+    setLegendDecimalPlaces,
+} from '../../actions/layerEdit.js'
 import {
     getClassificationTypes,
     CLASSIFICATION_EQUAL_INTERVALS,
@@ -16,6 +20,7 @@ import {
     getColorScale,
 } from '../../util/colors.js'
 import { SelectField, ColorScaleSelect } from '../core/index.js'
+import DecimalPlacesSelect from './DecimalPlacesSelect.jsx'
 import styles from './styles/Classification.module.css'
 
 const classRange = range(3, 10).map((num) => ({
@@ -27,8 +32,10 @@ const Classification = ({
     method,
     classes,
     colorScale,
+    legendDecimalPlaces,
     setClassification,
     setColorScale,
+    setLegendDecimalPlaces,
 }) => {
     const colorScaleName = colorScale
         ? getColorScale(colorScale)
@@ -44,31 +51,39 @@ const Classification = ({
             className={styles.select}
         />,
         <div key="scale">
-            <SelectField
-                label={i18n.t('Classes')}
-                value={classes !== undefined ? classes : defaultClasses}
-                items={classRange}
-                onChange={(item) =>
-                    setColorScale(getColorPalette(colorScaleName, item.id))
-                }
-                className={styles.classes}
-            />
+            <div className={styles.classesRow}>
+                <SelectField
+                    label={i18n.t('Classes')}
+                    value={classes !== undefined ? classes : defaultClasses}
+                    items={classRange}
+                    onChange={(item) =>
+                        setColorScale(getColorPalette(colorScaleName, item.id))
+                    }
+                    className={styles.classes}
+                />
+                <DecimalPlacesSelect
+                    value={legendDecimalPlaces}
+                    onChange={setLegendDecimalPlaces}
+                    className={styles.decimalPlaces}
+                />
+            </div>
             <ColorScaleSelect
                 palette={colorScale ? colorScale : defaultColorScale}
                 onChange={setColorScale}
                 width={190}
                 className={styles.scale}
             />
-            <div className={styles.clear} />
         </div>,
     ]
 }
 
 Classification.propTypes = {
     setClassification: PropTypes.func.isRequired,
     setColorScale: PropTypes.func.isRequired,
+    setLegendDecimalPlaces: PropTypes.func.isRequired,
     classes: PropTypes.number,
     colorScale: PropTypes.array,
+    legendDecimalPlaces: PropTypes.number,
     method: PropTypes.number,
 }
 
@@ -77,6 +92,7 @@ export default connect(
         method: layerEdit.method,
         classes: layerEdit.classes,
         colorScale: layerEdit.colorScale,
+        legendDecimalPlaces: layerEdit.legendDecimalPlaces,
     }),
-    { setClassification, setColorScale }
+    { setClassification, setColorScale, setLegendDecimalPlaces }
 )(Classification)

src/components/classification/DecimalPlacesSelect.jsx

@@ -0,0 +1,32 @@
+import i18n from '@dhis2/d2-i18n'
+import { range } from 'lodash/fp'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { SelectField } from '../core/index.js'
+
+const DECIMAL_PLACES_AUTO = 'auto'
+
+const decimalPlacesItems = [
+    { id: DECIMAL_PLACES_AUTO, name: i18n.t('Auto') },
+    ...range(0, 7).map((num) => ({ id: num, name: num.toString() })),
+]
+
+const DecimalPlacesSelect = ({ value, onChange, className }) => (
+    <SelectField
+        label={i18n.t('Decimal places')}
+        value={value ?? DECIMAL_PLACES_AUTO}
+        items={decimalPlacesItems}
+        onChange={(item) =>
+            onChange(item.id === DECIMAL_PLACES_AUTO ? undefined : item.id)
+        }
+        className={className}
+    />
+)
+
+DecimalPlacesSelect.propTypes = {
+    onChange: PropTypes.func.isRequired,
+    className: PropTypes.string,
+    value: PropTypes.number,
+}
+
+export default DecimalPlacesSelect

src/components/classification/SingleColor.jsx

@@ -1,41 +1,58 @@
 import i18n from '@dhis2/d2-i18n'
+import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { useEffect } from 'react'
 import { connect } from 'react-redux'
-import { setColorScale } from '../../actions/layerEdit.js'
+import {
+    setColorScale,
+    setLegendDecimalPlaces,
+} from '../../actions/layerEdit.js'
 import { THEMATIC_COLOR } from '../../constants/layers.js'
 import { ColorPicker } from '../core/index.js'
+import DecimalPlacesSelect from './DecimalPlacesSelect.jsx'
+import styles from './styles/Classification.module.css'
 
-// Displays a color picker for single color layer
-const SingleColor = ({ color, setColorScale }) => {
-    // Set default color
+const SingleColor = ({
+    color,
+    legendDecimalPlaces,
+    setColorScale,
+    setLegendDecimalPlaces,
+}) => {
     useEffect(() => {
         if (!color || color.length !== 7) {
             setColorScale(THEMATIC_COLOR)
         }
     }, [color, setColorScale])
 
     return color ? (
-        <ColorPicker
-            label={i18n.t('Color')}
-            color={color}
-            onChange={setColorScale}
-            width={100}
-            style={{
-                marginTop: -5,
-            }}
-        />
+        <div className={styles.singleColorRow}>
+            <ColorPicker
+                label={i18n.t('Color')}
+                color={color}
+                onChange={setColorScale}
+                width={100}
+                className={styles.singleColorField}
+            />
+            <DecimalPlacesSelect
+                value={legendDecimalPlaces}
+                onChange={setLegendDecimalPlaces}
+                className={cx(styles.decimalPlaces, styles.singleColorField)}
+            />
+        </div>
     ) : null
 }
 
 SingleColor.propTypes = {
     setColorScale: PropTypes.func.isRequired,
+    setLegendDecimalPlaces: PropTypes.func.isRequired,
     color: PropTypes.string,
+    legendDecimalPlaces: PropTypes.number,
 }
 
 export default connect(
     ({ layerEdit }) => ({
         color: layerEdit.colorScale,
+        legendDecimalPlaces: layerEdit.legendDecimalPlaces,
     }),
-    { setColorScale }
+    { setColorScale, setLegendDecimalPlaces }
 )(SingleColor)

src/components/classification/styles/Classification.module.css

@@ -2,19 +2,32 @@
     width: 100%;
 }
 
+.classesRow {
+    display: flex;
+    gap: var(--spacers-dp16);
+}
+
 .classes {
-    width: 50px;
-    margin-right: var(--spacers-dp16);
-    top: -8px;
-    float: left;
+    flex: 0 0 auto;
 }
 
 .scale {
     display: block;
     padding-top: var(--spacers-dp8);
-    clear: both;
 }
 
-.clear {
-    clear: both;
+.decimalPlaces {
+    flex: 0 0 auto;
+}
+
+.singleColorRow {
+    display: flex;
+    gap: var(--spacers-dp16);
+    align-items: flex-end;
+    margin-bottom: var(--spacers-dp12);
+}
+
+.singleColorField {
+    flex-shrink: 0;
+    margin-bottom: 0;
 }

src/components/core/styles/ColorScale.module.css

@@ -1,5 +1,5 @@
 .colorScale {
-    margin: var(--spacers-dp8) 0 0 0;
+    margin: 0 0 var(--spacers-dp8) 0;
     padding-left: 0;
     height: 36px;
     cursor: pointer;