mockup: chart map (donut/bar) for thematic layers [DHIS2-21461] - #3768
Draft
BRaimbault wants to merge 6 commits into
Draft
BRaimbault wants to merge 6 commits into
BRaimbault wants to merge 6 commits into
Conversation
Mockup for DHIS2-21461. Adds a third thematic rendering type — Chart — alongside Choropleth and Bubble: each org unit renders a small donut or bar chart marker sized by total value and broken into one segment per selected data item, instead of being classified into a single threshold bucket. Multi-item selection reuses DHIS2 analytics' existing multi-id dx dimension support (columns already stored dx as an items array; only the single-item default was hardcoded), so the loader change is a parallel loadChartMapLayer path rather than a rewrite of the classification pipeline. Rendering adds maplibre-gl as a direct dependency and places plain maplibre-gl Markers with inline SVG chart content — no maps-gl changes needed, since donut/bar markers are just DOM elements positioned on the underlying map, not a new maps-gl layer type. Chart type (donut/bar) persists through the layer's config JSON blob, and the selected series persist natively through columns, so a saved map round-trips the full chart setup for sharing. DO NOT MERGE Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Contributor
|
🚀 Deployed on https://pr-3768.maps.netlify.dhis2.org |
Saving a chart map crashed the server with a 500: the mapView schema's ThematicMapType enum only accepts BUBBLE/CHOROPLETH, so our new "CHART" value failed Jackson deserialization on save. Chart mode is now flagged via config.isChartMap in the layer's config JSON blob (the same mechanism already used for chartType), while the persisted thematicMapType itself stays a valid CHOROPLETH. The loader restores thematicMapType to CHART from config.isChartMap on load, so rendering and re-editing still see chart mode correctly. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Iterates on the chart map mockup's marker rendering for legibility and consistency, in place of a rewrite: - Donut markers gain per-wedge percentage labels and an always-visible center total, a translucent background, and separators between wedges. Donut area is now exactly proportional to value (the size scale previously started its range at a non-zero floor, which broke that proportionality). - Bar markers get a fixed-width layout so bar width no longer varies with an org unit's total, a shared global height scale so a given value is the same bar height everywhere on the map, and a minimal y-axis (0 plus this chart's own peak value). - Hover interactions: zoom in on a marker (more for small donuts, whose labels benefit most), highlight the org unit's boundary the same way bubble maps do, and show a tooltip via the same showLabel/hideLabel mechanism choropleth/bubble layers use, instead of unreliable native SVG tooltips. Boundary stroke width is pre-compensated so it doesn't visually thicken along with the hover zoom. - Series colors reuse the Data Visualizer's default color set from @dhis2/analytics instead of a one-off ColorBrewer palette. Still a mockup for DHIS2-21461, not intended to merge as-is. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
MARKER_BG now uses the same rgba(255, 255, 255, 0.9) the tooltip's .dhis2-map-label .maplibregl-popup-content already uses in @dhis2/maps-gl's Label.css, instead of a separately chosen value. The tooltip is the reference here, so a chart marker and the tooltip it opens on hover read as the same translucent surface. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
filter: drop-shadow() paints its shadow directly behind the marker's own content in the same pass. On a marker this small, that shadow showed through the translucent MARKER_BG fill across nearly the whole shape rather than just its edges, visibly darkening chart backgrounds below the hover tooltip's own reference shade even after several rounds of softening the shadow. Drops the filter entirely and relies on a thin outline instead (MARKER_OUTLINE, rgba(0,0,0,0.22)) for edge definition: the donut's outer ring in all three render paths, and the bar chart's card border (previously removed in favor of the shadow, now brought back as the primary definition mechanism since there is no shadow left to rely on). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Test maps:
https://pr-3768.maps.netlify.dhis2.org/#/JCogfltyhCW
https://pr-3768.maps.netlify.dhis2.org/#/OVtCoVWlqST
→ https://dev.im.dhis2.org/maps-app-43-1
Mockup for DHIS2-21461
DO NOT MERGE
Description
Adds a third thematic rendering type — Chart — alongside Choropleth and Bubble: each org unit renders a small donut or bar chart marker sized by total value and broken into one segment per selected data item, instead of being classified into a single threshold bucket.
Multi-item selection reuses DHIS2 analytics' existing multi-id dx dimension support (columns already stored dx as an items array; only the single-item default was hardcoded), so the loader change is a parallel loadChartMapLayer path rather than a rewrite of the classification pipeline. Rendering adds maplibre-gl as a direct dependency and places plain maplibre-gl Markers with inline SVG chart content — no maps-gl changes needed, since donut/bar markers are just DOM elements positioned on the underlying map, not a new maps-gl layer type.
Chart type (donut/bar) persists through the layer's config JSON blob, and the selected series persist natively through columns, so a saved map round-trips the full chart setup for sharing.
ToDos
Known issues
Screenshots