feat: new classifications and legend improvements

[BRaimbault]

Implements:

• DHIS2-21142
• DHIS2-20818
• DHIS2-18963
• DHIS2-12860
• DHIS2-10823
• DHIS2-8478
• DHIS2-237

Planned:

• DHIS2-20287
• DHIS2-15514
• DHIS2-3156

Description

DHIS2-21142: Add ckmeans classification methods - KKmdCyobwV8

Details

+ Changes:

• “ranges” ie legend without gaps
• “clusters” ie legend can have gaps, can be much easier to read with significant outliers or a small number of distinct values

+ Code:

• New translations: i18n/en.pot
• New legend types: src/constants/layers.js
• New classification utils: src/util/classify.js
• New dependency to simple-statistics: package.json and yarn.lock

DHIS2-20818: Thematic layer, bubble style - legends shows NaN when the all mapped values are equal - nxq2hIlZdAK

Details

+ Code:

• Add minValue === maxValue scenario in: src/util/bubbles.js

DHIS2-18963: Digit groups separator functionality in maps - gugP3BzGjK1 - thematic / UPtjWBCx4pJ - events / lL0i0WO23Gw - tracked entities / DpskVx1d2Jh - earth engine / gmSDDyzZHy2 - geojson / WR6S8roHTao - org unit / N3N3m9zyKy5 - facility

Details

+ Changes:
Values/counts appear in:

• Thematic layer: Legend (range - Choropleth and Bubble - + count), Tooltip, Pop-up, Data table, Organisation unit profile
• Event layer: Legend (value - when styling by data item - + count), Pop-up
• Tracked entities layer: Pop-up
• Earth engine layer: Legend (value), Pop-up, Data table, Organisation unit profile
• Geojson layer: Feature profile
• Org unit layer: Organisation unit profile
• Facility layer: Organisation unit profile

+ Code:

• Legend (range/value & count): src/components/legend/LegendItemRange.jsx and src/components/legend/Bubble.jsx
• ThematicLayer label, tooltip and popup, data table value and range: src/loaders/thematicLoader.js L309:329

DHIS2-12860: Equal counts distribution is not ideal when many values are the same - APqEkeE0Nr5

Details

+ Changes:

• removing duplicated classes (this might result in less classes than specified, but since there is not straightforward way to guarantee the number of classes, it is better to keep it simple)
• improve classes matching so the 100-100 class can actually be used
• also introducing “Natural breaks” classification with DHIS2-21142

+ Code:

• Removing duplicated classes in src/util/classify.js L86:91
• Allow matching value if item.startValue == item.endValue in src/util/classify.js L42:43

DHIS2-10823: Improve the predefined legend display - oXqCWc5JtS5

Details

+ Changes:
What was already implemented was de-duplication on item by item basis if the name was exactly “{startValue} - {endValue}”.
Implemented a more robust check that also caters for “100+”, “50 or below”.,"100 000" or "100,000"... scenarios,

+ Code:

• Add showRange flag in: src/components/legend/Legend.jsx
• Pass showRange flag in: src/components/legend/LegendItem.jsx
• Use showRange flag in: src/components/legend/LegendItemRange.jsx
• New legendNamesContainRange util in: src/util/legend.js L157-188

DHIS2-8478: Automatic legends with few data points - r56Jrw3ZOQs

Details

+ Changes:
When there are less distinct value than requested classes we will just create one class per distinct value. This might result in less classes than specified, but there is no point in creating unnecessary empty classes.

+ Code:

• Add hasInsufficientValues flag in: src/util/classify.js L67:72

DHIS2-237: Deal with events without coordinates - oYiqu1VidCh

Details

+ Changes:
xxx

+ Code:

• xxx

Others

Details

• Fix maxValue identification error in: src/loaders/thematicLoader.js L238
• More robust legend items sorting in: src/util/legend.js L46:56
• Use consistent formatting method to create classes and classify values:
  • Get getLegendItems to also return valueFormat in: src/util/classify.js
  • Get getAutomaticLegendItems to also return valueFormat in: src/util/legend.js L138:145
  • Pass valueFormat in: src/loaders/thematicLoader.js and in src/util/styleByDataItem.js
  • Use valueFormat in getLegendItemForValue in: src/util/classify.js
  • Tests updates: src/util/__tests__/classify.spec.js and src/util/__tests__/legend.spec.js

Quality checklist

Add N/A to items that are not applicable.

• Dashboard tested
• Cypress and/or Jest tests added/updated
• Docs added
• d2-ci dependencies replaced (analytics or maps-gl link https://github.com/dhis2/[lib]/pull/XXX)
• Tester approved (name)

[dhis2-bot]

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

[sonarqubecloud]

Quality Gate failed

Failed conditions
2 New issues
2 New Code Smells (required ≤ 0)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE