feat: format numeric values with digit group separator [PR3] [DHIS2-18242]

[BRaimbault]

Parent

• DHIS2-18242

Implements

• DHIS2-18963: Digit groups separator functionality in maps

Overview

Third PR in the series extracted from the parent epic. Threads the system-configured digit group separator (keyAnalysisDigitGroupSeparator: NONE / SPACE / COMMA) through the maps app so all numeric output is formatted consistently with the rest of DHIS2.

No new behavior except formatting — every place a number renders to the user now respects the system setting.

Changes

Utility and plumbing

formatWithSeparator and parseWithSeparator helpers in src/util/numbers.js, plus DIGIT_GROUP_SEPARATOR_{SPACE,COMMA,NONE} constants in src/constants/settings.js.

keyAnalysisDigitGroupSeparator added to SYSTEM_SETTINGS so it's fetched by both the main app (useLayersLoader) and the plugin (LayerLoader). Both orchestrators thread it as a named parameter to every loader.

The separator is exposed as a Redux-free dependency via the existing useCachedData() provider, so the plugin (which doesn't have Redux) can read it the same way as the main app.

formatWithSeparator accepts an optional precision parameter for forward compatibility with DHIS2-3156, but no consumer wires it through yet.

Files: src/util/numbers.js, src/constants/settings.js, src/hooks/useLayersLoader.js, src/components/plugin/LayerLoader.jsx

Loaders

Each loader accepts keyAnalysisDigitGroupSeparator and attaches it to the loaded layer config. Two loaders also bake formatted strings into feature properties at load time:

• thematicLoader: properties.value is set to the formatted display string (consumed by tooltip, label, popup); properties.rawValue preserves the numeric value for sort and computation. properties.range is formatted with the separator.
• earthEngineLoader: createLegend constructs item names ("< min", "from - to", "> max") with the separator applied.
• eventLoader, trackedEntityLoader, geoJsonUrlLoader: thread the separator on config; raw per-feature values are preserved unchanged. These layer types use dynamic column names for data items, making parallel "raw" fields impractical, so formatting happens at the consumption site.

The properties.value flip in thematicLoader is a breaking change for anyone reading feature.properties.value expecting a Number. All internal consumers are updated.

A side refactor extracts parseJsonConfig, fetchRelationshipData, and buildQueryVariables from trackedEntityLoader to keep the main loader function under SonarQube's complexity threshold. No behavior change.

Files: src/loaders/thematicLoader.js, src/loaders/earthEngineLoader.js, src/loaders/eventLoader.js, src/loaders/trackedEntityLoader.js, src/loaders/geoJsonUrlLoader.js

Display components

Components format at the render site, reading the separator either from layer config (popups, GeoJSON profile) or from cached system settings directly (legend, data table, org unit info, EE preview):

• formatValueForDisplay in helpers.js learns to format numeric value types using formatWithSeparator with force: true. Popup data values arrive as strings from the API.
• Data table reads rawValue as the value column's dataKey so sort and display both come from a single source. Cell rendering formats non-color cells with the separator.
• Legend item ranges format startValue/endValue/count. Refactored into nameLabel/rangeLabel/countLabel for readability and to fix a leading-space artifact when name is empty.
• Bubble legend: Bubbles.jsx formats bubble text values with the separator before passing them to computeLayout, so the layout offset correctly accounts for separator characters in text width. Bubble.jsx now renders the pre-formatted text prop directly.
• EventPopup, TrackedEntityPopup, and Earth Engine popup data values, GeoJsonLayer feature profile, OrgUnitInfo attributes (note: the backend returns numeric attribute values as strings), OrgUnitData data items, LegendPreview (Earth Engine edit dialog) — all format their displayed numbers. The Earth Engine popup reads the separator from the layer config via EarthEngineLayer rather than useCachedData(), since its parent is a class component.

Files: src/components/legend/LegendItemRange.jsx, src/components/legend/Bubbles.jsx, src/components/map/layers/EventLayer.jsx, src/components/map/layers/EventPopup.jsx, src/components/map/layers/TrackedEntityLayer.jsx, src/components/map/layers/TrackedEntityPopup.jsx, src/components/map/layers/GeoJsonLayer.js, src/components/datatable/DataTable.jsx, src/components/datatable/useTableData.js, src/components/orgunits/OrgUnitInfo.jsx, src/components/orgunits/OrgUnitData.jsx, src/components/edit/earthEngine/LegendPreview.jsx, src/components/map/layers/earthEngine/EarthEnginePopup.jsx, src/components/map/layers/earthEngine/EarthEngineLayer.jsx, src/util/helpers.js

Tests update

• src/util/__tests__/numbers.spec.js
• src/util/__tests__/helpers.spec.js
• src/util/__tests__/bubbles.spec.js
• src/loaders/__tests__/earthEngineLoader.spec.js

Manual testing

Netlify: https://pr-3647.maps.netlify.dhis2.org/ + Instance: https://dev.im.dhis2.org/maps-app-42-3 (keyAnalysisDigitGroupSeparator === SPACE)

• DHIS2-18963: Digit groups separator functionality in maps

  • Test maps

    • Thematic: Labels, Tooltips, Legend (Cloropleth & Bubble), Popup, Data table: gugP3BzGjK1 - main + gugP3BzGjK1?interpretationId=u8oNynUvJMm - plugin
    

     

    • Events: Legend, Popup, Data table: UPtjWBCx4pJ - main + UPtjWBCx4pJ?interpretationId=TeoPqwMvTjJ - plugin
    

     

    • Tracked entities: Popup: lL0i0WO23Gw - main + lL0i0WO23Gw?interpretationId=Z1SspFwvWck - plugin
    

     

    • Facilities & Organisation units: Facility / Org Unit profile: N3N3m9zyKy5 & WR6S8roHTao
    

     

    • Earth engine: Legend preview, Legend, Popup, Data table: DpskVx1d2Jh - main + DpskVx1d2Jh?interpretationId=lDWkXPuW5kt - plugin
    

     

    • GeoJSON: Feature profile: gmSDDyzZHy2
    

     

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
• Tester approved (@edoardo)

[dhis2-bot]

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

[BRaimbault]

Ready for review.

[edoardo]

Some test examples don't have data, but I could verify on the netlify instance that changes in the DGS setting are reflected in the app.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud