From d774e7a2a849cf40bca3d039aca2d1c6ce1f5331 Mon Sep 17 00:00:00 2001 From: Bruno Raimbault Date: Fri, 29 Nov 2024 16:05:13 +0100 Subject: [PATCH] fix: update 'No data' handling (#3408) Fix: https://dhis2.atlassian.net/browse/DHIS2-18427 Update maps-gl dependency. Update getLabelStyle to return labelNoData for labelSource in maps-gl. Update ThematicLayer pop-up 'No data' logic. --- cypress/elements/thematic_layer.js | 13 ++++ .../integration/layers/thematiclayer.cy.js | 73 ++++++++++++++++++- package.json | 2 +- src/components/map/layers/ThematicLayer.js | 2 +- src/util/labels.js | 2 + yarn.lock | 8 +- 6 files changed, 93 insertions(+), 7 deletions(-) diff --git a/cypress/elements/thematic_layer.js b/cypress/elements/thematic_layer.js index 432792c4b..4aed7bb38 100644 --- a/cypress/elements/thematic_layer.js +++ b/cypress/elements/thematic_layer.js @@ -48,10 +48,23 @@ export class ThematicLayer extends Layer { return this } + selectRelativePeriod(period) { + cy.get('[data-test="relative-period-select"]').click() + cy.contains(period).click() + + return this + } + selectPeriodType(periodType) { cy.get('[data-test="periodtypeselect"]').click() cy.contains(periodType).click() return this } + + selectIncludeNoDataOU() { + cy.contains('Include org units with no data').click() + + return this + } } diff --git a/cypress/integration/layers/thematiclayer.cy.js b/cypress/integration/layers/thematiclayer.cy.js index c4dc455fc..37028a313 100644 --- a/cypress/integration/layers/thematiclayer.cy.js +++ b/cypress/integration/layers/thematiclayer.cy.js @@ -6,7 +6,11 @@ import { expectContextMenuOptions, } from '../../elements/map_context_menu.js' import { ThematicLayer } from '../../elements/thematic_layer.js' -import { CURRENT_YEAR, getApiBaseUrl } from '../../support/util.js' +import { + CURRENT_YEAR, + getApiBaseUrl, + EXTENDED_TIMEOUT, +} from '../../support/util.js' const INDICATOR_NAME = 'VCCT post-test counselling rate' @@ -95,6 +99,73 @@ context('Thematic Layers', () => { getMaps().should('have.length', 1) }) + it('opens a thematic layer popup with data and nodata', () => { + Layer.openDialog('Thematic') + .selectIndicatorGroup('Stock') + .selectIndicator('BCG Stock PHU') + .selectTab('Period') + .selectRelativePeriod('This month') + .selectTab('Style') + .selectIncludeNoDataOU() + .selectTab('Org Units') + .unselectOuLevel('District') + .selectOuLevel('Facility') + + cy.getByDataTest('org-unit-tree-node') + .contains('Western Area') + .parents('[data-test="org-unit-tree-node"]') + .first() + .within(() => { + cy.getByDataTest('org-unit-tree-node-toggle').click() + }) + + cy.getByDataTest('org-unit-tree-node') + .contains('Rural Western Area') + .parents('[data-test="org-unit-tree-node"]') + .first() + .within(() => { + cy.getByDataTest('org-unit-tree-node-toggle').click() + }) + + // Value: 0 + cy.getByDataTest('org-unit-tree-node').contains('Tokeh MCHP').click() + + cy.getByDataTest('layeredit-addbtn').click() + + Layer.validateDialogClosed(true) + + cy.wait(5000) // eslint-disable-line cypress/no-unnecessary-waiting + cy.get('#dhis2-map-container') + .findByDataTest('dhis2-uicore-componentcover', EXTENDED_TIMEOUT) + .should('not.exist') + cy.get('.dhis2-map').click('center') //Click somewhere on the map + + cy.get('.maplibregl-popup').contains('Value: 0').should('be.visible') + + // Value: No data + cy.getByDataTest('layer-edit-button').click() + Layer.selectTab('Org Units') + + cy.getByDataTest('org-unit-tree-node').contains('Tokeh MCHP').click() + cy.getByDataTest('org-unit-tree-node') + .contains('Lakka Hospital') + .click() + + cy.getByDataTest('layeredit-addbtn').click() + + Layer.validateDialogClosed(true) + + cy.wait(5000) // eslint-disable-line cypress/no-unnecessary-waiting + cy.get('#dhis2-map-container') + .findByDataTest('dhis2-uicore-componentcover', EXTENDED_TIMEOUT) + .should('not.exist') + cy.get('.dhis2-map').click('center') //Click somewhere on the map + + cy.get('.maplibregl-popup') + .contains('Value: No data') + .should('be.visible') + }) + it('adds a thematic layer with split view period', () => { Layer.openDialog('Thematic') .selectIndicatorGroup('ANC') diff --git a/package.json b/package.json index 4d07bd50b..0b1b8ee60 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ "@dhis2/app-runtime": "^3.11.2", "@dhis2/app-runtime-adapter-d2": "^1.1.0", "@dhis2/app-service-datastore": "^1.0.0-beta.3", - "@dhis2/maps-gl": "^4.0.0", + "@dhis2/maps-gl": "^4.0.1", "@dhis2/ui": "^9.13.0", "@krakenjs/post-robot": "^11.0.0", "@testing-library/react-hooks": "^8.0.1", diff --git a/src/components/map/layers/ThematicLayer.js b/src/components/map/layers/ThematicLayer.js index 176f9028a..5d61c2122 100644 --- a/src/components/map/layers/ThematicLayer.js +++ b/src/components/map/layers/ThematicLayer.js @@ -179,7 +179,7 @@ class ThematicLayer extends Layer {
{indicator}
{periodName}
- {i18n.t('Value')}: {value ? value : i18n.t('No data')} + {i18n.t('Value')}: {value ?? i18n.t('No data')}
{aggregationType && aggregationType !== 'DEFAULT' && (
{aggregationType}
diff --git a/src/util/labels.js b/src/util/labels.js index 78be8dee7..c82e50db3 100644 --- a/src/util/labels.js +++ b/src/util/labels.js @@ -1,3 +1,4 @@ +import i18n from '@dhis2/d2-i18n' import { LABEL_FONT_SIZE, LABEL_FONT_STYLE, @@ -20,5 +21,6 @@ export const getLabelStyle = ({ lineHeight: parseInt(fontSize, 10) * 1.2 + 'px', color: cssColor(labelFontColor) || LABEL_FONT_COLOR, paddingTop: '10px', + labelNoData: i18n.t('No data'), } } diff --git a/yarn.lock b/yarn.lock index c617fd3b6..ee5aa6897 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2246,10 +2246,10 @@ i18next "^10.3" moment "^2.24.0" -"@dhis2/maps-gl@^4.0.0": - version "4.0.0" - resolved "https://registry.yarnpkg.com/@dhis2/maps-gl/-/maps-gl-4.0.0.tgz#e97df2fbc78f787a0916224d7d54fb96b9c376db" - integrity sha512-TDEIBT6rFuEZGXnBxAqKhSmCXk3wtuCf/OrVZBKxT1qk0kHau71f3lzAXbWhYAuop8t6/DyJaIcQrUYMi1Xy3w== +"@dhis2/maps-gl@^4.0.1": + version "4.0.1" + resolved "https://registry.yarnpkg.com/@dhis2/maps-gl/-/maps-gl-4.0.1.tgz#227a856c9a5dd0a38a8a3ea0ebd6327872850f3e" + integrity sha512-4Q9zxzPhV81zSZyWYyX7iOufUvSfqHWjXkpYUqgPq8uxhpCNj9vVwb6l5FaU/0ZbWC+wusiYeMAkLvsUpoR51g== dependencies: "@mapbox/sphericalmercator" "^1.2.0" "@turf/area" "^6.5.0"