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

[BRaimbault]

Parent

• DHIS2-18242

Implements

• DHIS2-3156: Decimal places option for automatic legend classification
• DHIS2-19984: Values not displayed for NUMBER data items with option sets in data table
• DHIS2-19983: Range column not sorted numerically in data table
• DHIS2-19982: Color picker button too narrow in option set and boolean styles
• DHIS2-19203: Earth Engine style select uses "Steps" instead of "Classes"

Overview

Fourth PR in the series extracted from the parent epic. Adds a legendDecimalPlaces setting that controls how many decimal places are shown in automatic legend range labels, and fixes four smaller issues surfaced during the same work.

Changes

Configurable decimal precision for automatic legends DHIS2-3156

A new DecimalPlacesSelect component (0–6 places) is added to the Classification and Single Color panels for automatic and single-color legends. The selected value is stored in Redux via a new SET_LEGEND_DECIMAL_PLACES action and persisted into layer.config JSON on save (via favorites.js) and parsed back on load (via parseJsonConfig).

getLegendItems accepts a precision option that rounds bin boundaries via getRoundToPrecisionFn. getAutomaticLegendItems accepts legendDecimalPlaces and stamps decimalPlaces onto each item. Both LegendItemRange and Bubbles.jsx read per-item decimalPlaces and pass it as precision to formatWithSeparator, so legend range labels and bubble text labels render with the configured precision. styleByDataItem.js propagates legendDecimalPlaces for event layer style-by-data-item.

legendDecimalPlaces is added to validLayerProperties so it survives the pick in cleanMapConfig.

Note that values are displayed using their stored precision; this setting only affects legend formatting. Also, range is only passed to the data table for Thematic Automatic and Prefefined legends, this behavior is not modified.

Files: src/util/classify.js, src/util/legend.js, src/util/config.js, src/util/favorites.js, src/util/styleByDataItem.js, src/components/classification/Classification.jsx, src/components/classification/DecimalPlacesSelect.jsx, src/components/classification/SingleColor.jsx, src/components/legend/Bubbles.jsx, src/components/legend/LegendItem.jsx, src/components/legend/LegendItemRange.jsx, src/loaders/thematicLoader.js, src/loaders/eventLoader.js, src/actions/layerEdit.js, src/reducers/layerEdit.js, src/constants/actionTypes.js

NUMBER data items with option sets show empty cells in the data table DHIS2-19984

When a program stage data element has valueType = NUMBER and an associated option set, the values stored in event data are option codes (strings such as "high" or "low"). eventLoader was running parseFloat() on all numeric-typed headers unconditionally — parseFloat("high") = NaN. useTableData then typed those headers as TYPE_NUMBER, and the isNaN guard rendered the cell empty.

Fixed by excluding option-set-backed headers from the parseFloat conversion in eventLoader, and by typing them as TYPE_STRING in useTableData regardless of their valueType.

Files: src/loaders/eventLoader.js, src/components/datatable/useTableData.js

Range column sorts lexicographically instead of numerically DHIS2-19983

The range column in the data table was typed as TYPE_STRING, so "10 - 20" sorted before "9 - 15". Fixed by typing it as TYPE_NUMBER and providing a custom sort key that parses the range string via parseRange and compares by startValue (with endValue as a tiebreaker).

Files: src/components/datatable/useTableData.js

Color picker button too narrow in option set and boolean styles DHIS2-19982

The color picker trigger button was clipped at small widths. Widened via CSS.

Files: src/components/optionSet/OptionStyle.jsx, src/components/optionSet/styles/OptionStyle.module.css

Earth Engine style select labels the bin count field "Steps" instead of "Classes" DHIS2-19203

Renamed to "Classes" to match the label used elsewhere in the classification UI.

Files: src/components/edit/earthEngine/StyleSelect.jsx

Tests update

• src/util/__tests__/classify.spec.js
• src/util/__tests__/legend.spec.js
• src/util/__tests__/favorites.spec.js
• src/components/datatable/__tests__/useTableData.spec.jsx

Manual testing

Netlify: https://pr-3648.maps.netlify.dhis2.org/ + Instance: https://dev.im.dhis2.org/maps-app-42-3

• DHIS2-3156: Decimal places option for automatic legend classification

  • Test maps

    • Thematic: Legend (Cloropleth & Bubble), Data table: ApwEyGVBs1Y - main + ApwEyGVBs1Y?interpretationId=qyaNbLi4Wi6 - plugin
    
    • Events: Legend: gUH3RYsbJNs - main + gUH3RYsbJNs?interpretationId=D5cwxPZvI15 - plugin
    

     

• DHIS2-19984: Values not displayed for NUMBER data items with option sets in data table

  • Test map: wDv1BBwTCyQ

    

     

• DHIS2-19983: Range column not sorted numerically in data table

  • Test map: ak918KjTtpU

    

     

• DHIS2-19982: Color picker button too narrow in option set and boolean styles

  • Test map: YS94jSwZruA

    

     

• DHIS2-19203: Earth Engine style select uses "Steps" instead of "Classes"

  • Test map: WO3QtOL3wL4

    

     

Quality checklist

Add N/A to items that are not applicable.

• Jest tests added/updated
• Docs added N/A
• d2-ci dependencies replaced N/A
• Include plugin in testing N/A
• Tester approved (@edoardo)

[dhis2-bot]

🚀 Deployed on https://pr-3648.maps.netlify.dhis2.org

[BRaimbault]

Ready for review.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud