diff --git a/cypress/elements/dimensionModal/dataDimension.js b/cypress/elements/dimensionModal/dataDimension.js index 0c30472b6e..4535736488 100644 --- a/cypress/elements/dimensionModal/dataDimension.js +++ b/cypress/elements/dimensionModal/dataDimension.js @@ -7,6 +7,8 @@ import { } from './index.js' const optionContentEl = 'data-dimension-transfer-option-content' +const optionInfoButtonEl = 'data-dimension-transfer-option-info-button' +const optionInfoTableEl = 'data-dimension-info-table' const selectableItemsEl = 'data-dimension-transfer-sourceoptions' const selectedItemsEl = 'data-dimension-transfer-pickedoptions' const dataTypesSelectButtonEl = @@ -46,6 +48,19 @@ export const expectNoDataItemsToBeSelected = () => export const expectDataDimensionModalWarningToContain = (text) => cy.getBySel(rightHeaderEl).should('contain', text) +export const expectDataItemToShowDataType = (id, type) => + cy + .get(`[data-value="${id}"]`) + .findBySel(optionContentEl) + .find('.type') + .should('contain', type) + +export const expectDataItemToShowInfoTable = (id) => { + cy.get(`[data-value="${id}"]`).findBySel(optionInfoButtonEl).click() + cy.getBySel(optionInfoTableEl).contains('Name') + cy.getBySel(optionInfoTableEl).closePopper() +} + export const expectDataItemToBeInactive = (id) => cy .get(`[data-value="${id}"]`) diff --git a/cypress/elements/dimensionModal/index.js b/cypress/elements/dimensionModal/index.js index 42a8d2d064..8451975670 100644 --- a/cypress/elements/dimensionModal/index.js +++ b/cypress/elements/dimensionModal/index.js @@ -112,6 +112,8 @@ export { switchDataTab, expectDataDimensionModalWarningToContain, expectDataItemToBeInactive, + expectDataItemToShowDataType, + expectDataItemToShowInfoTable, expectDataDimensionModalToBeVisible, expectDataTypeToBe, expectDataTypeSelectHelpToContain, diff --git a/cypress/integration/dimensions/data.cy.js b/cypress/integration/dimensions/data.cy.js index 9f70996f7c..98f5aca4cc 100644 --- a/cypress/integration/dimensions/data.cy.js +++ b/cypress/integration/dimensions/data.cy.js @@ -35,6 +35,8 @@ import { unselectAllItemsByButton, selectAllItemsByButton, expectDataItemsToBeInSource, + expectDataItemToShowDataType, + expectDataItemToShowInfoTable, } from '../../elements/dimensionModal/index.js' import { openDimension } from '../../elements/dimensionsPanel.js' import { goToStartPage } from '../../elements/startScreen.js' @@ -209,7 +211,7 @@ describe('Data dimension', () => { { name: 'Indicators', testGroup: { name: 'Facility infrastructure', itemAmount: 3 }, - testItem: { name: TEST_INDICATORS[2].name }, + testItem: { ...TEST_INDICATORS[2], type: 'Indicator' }, defaultGroup: { name: 'All groups' }, endpoint: { hasMultiplePages: true, @@ -229,7 +231,10 @@ describe('Data dimension', () => { responseBody: 'dataElementOperands', }, }, - testItem: { name: TEST_DATA_ELEMENTS[2].name }, + testItem: { + ...TEST_DATA_ELEMENTS[2], + type: 'Data element', + }, defaultGroup: { name: 'All groups' }, defaultSubGroup: { name: 'Totals only' }, endpoint: { @@ -242,7 +247,7 @@ describe('Data dimension', () => { name: 'Data sets', testGroup: { name: 'Child Health', itemAmount: 5 }, testSubGroup: { name: 'Actual reports', itemAmount: 1 }, - testItem: { name: TEST_DATA_SETS[2].name }, + testItem: { ...TEST_DATA_SETS[2], type: 'Data set' }, defaultGroup: { name: 'All data sets' }, defaultSubGroup: { name: 'All metrics' }, endpoint: { @@ -254,7 +259,11 @@ describe('Data dimension', () => { { name: 'Event data items', testGroup: { name: 'Information Campaign', itemAmount: 6 }, - testItem: { name: 'E2E TE program 1 First name' }, + testItem: { + id: 'V4xUtHrsVaK.w75KJ2mc4zz', + name: 'E2E TE program 1 First name', + type: 'Event data item', + }, defaultGroup: { name: 'All programs' }, endpoint: { hasMultiplePages: true, @@ -265,7 +274,11 @@ describe('Data dimension', () => { { name: 'Program indicators', testGroup: { name: 'Malaria focus investigation', itemAmount: 6 }, - testItem: { name: 'BMI male' }, + testItem: { + id: 'Thkx2BnO5Kq', + name: 'BMI male', + type: 'Program indicator', + }, defaultGroup: { name: 'All programs' }, endpoint: { hasMultiplePages: true, @@ -314,6 +327,15 @@ describe('Data dimension', () => { expectSourceToNotBeLoading() expectSelectableDataItemsAmountToBeLeast(PAGE_SIZE + 1) } + + // data type is shown + expectDataItemToShowDataType( + testDataType.testItem.id, + testDataType.testItem.type + ) + + expectDataItemToShowInfoTable(testDataType.testItem.id) + // an item can be selected expectDataItemsToBeInSource([testDataType.testItem.name]) selectItemByDoubleClick(testDataType.testItem.name) diff --git a/cypress/support/commands.js b/cypress/support/commands.js index 4a295910a3..b9ff067636 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -43,3 +43,15 @@ Cypress.Commands.add( ) ) ) + +Cypress.Commands.add( + 'closePopper', + { + prevSubject: true, + }, + (subject) => + cy + .wrap(subject) + .closest('[data-test=dhis2-uicore-layer]') + .click('topLeft') +) diff --git a/docs/data-visualizer.md b/docs/data-visualizer.md index 9599e6af79..da85837a8c 100644 --- a/docs/data-visualizer.md +++ b/docs/data-visualizer.md @@ -81,10 +81,16 @@ To select items for a dimension, open the dimension modal window by clicking on #### Select data items -When selecting data items, there are different ways to filter the displayed items. By using the search field at the top, a global search by item name is performed across the currently selected **Data Type**. By selecting a **Data Type** from the dropdown, items can be filtered by type and subtype, where the subtype available depends on the selected data type. The name search and the type/subtype filtering can be combined as well for a more detailed filter. The type of each displayed item is indicated by a corresponding icon on the item. By hovering over an item, the name of the type can be viewed as well. +When selecting data items, there are different ways to filter the displayed items. By using the search field at the top, a global search by item name is performed across the currently selected **Data Type**. By selecting a **Data Type** from the dropdown, items can be filtered by type and subtype, where the subtype available depends on the selected data type. The name search and the type/subtype filtering can be combined as well for a more detailed filter. The type of each displayed item is indicated on the right and a corresponding icon is shown on the left of the item. ![](resources/images/data-visualizer-cc-data-modal.png) +#### Display information about a data item + +On the right of each data item there is an information icon that can be clicked and a table with relevant information is shown. The information displayed depends on the item's data type. + +![](resources/images/data-visualizer-cc-data-modal-info.png) + #### Using custom calculations { #data-visualizer-custom-calculations } A new personal indicator, also known as a custom calculation, can be created by clicking the **+ Calculation** button at the bottom-left of the Data modal. This will open the Calculation modal. @@ -149,13 +155,13 @@ The resulting visualization is composed of separate charts, one for each item in The display of a visualization can be changed by enabling/disabling and configuring several options. Each visualization type can have a different set of available options. The options are organised in tabs in the **Options dialog** and in sections within each tab. -1. Click **Options** to open the **Options dialog**. +1. Click **Options** to open the **Options dialog**. -2. Navigate the tabs in the dialog to see the available options. +2. Navigate the tabs in the dialog to see the available options. -3. Configure the desired options as required. +3. Configure the desired options as required. -4. Click **Update** to apply the changes to the visualization. +4. Click **Update** to apply the changes to the visualization. ### List of available options @@ -276,11 +282,11 @@ Saving your visualizations makes it easy to find them later. You can also choose ### Open a visualization -1. Click **File** \> **Open**. +1. Click **File** \> **Open**. -2. Enter the name of a visualization in the search field, or click the **<** and **>** arrows to navigate between different pages. The result can also be filtered by type and owner by using the corresponding menus in the top right corner. +2. Enter the name of a visualization in the search field, or click the **<** and **>** arrows to navigate between different pages. The result can also be filtered by type and owner by using the corresponding menus in the top right corner. -3. Click the name of the one you want to open. +3. Click the name of the one you want to open. ![](resources/images/data-visualizer-open-dialog.png) @@ -296,19 +302,19 @@ Saving your visualizations makes it easy to find them later. You can also choose ### Rename a visualization -1. Click **File** \> **Rename**. +1. Click **File** \> **Rename**. -2. Enter the new name and/or description. +2. Enter the new name and/or description. -3. Click **Rename**. +3. Click **Rename**. ![](resources/images/data-visualizer-rename-dialog.png) ### Delete a visualization -1. Click **File** \> **Delete**. +1. Click **File** \> **Delete**. -2. Click **Delete**. +2. Click **Delete**. ![](resources/images/data-visualizer-delete-dialog.png) diff --git a/docs/resources/images/data-visualizer-cc-data-modal-info.png b/docs/resources/images/data-visualizer-cc-data-modal-info.png new file mode 100644 index 0000000000..65e30e3375 Binary files /dev/null and b/docs/resources/images/data-visualizer-cc-data-modal-info.png differ diff --git a/docs/resources/images/data-visualizer-cc-data-modal.png b/docs/resources/images/data-visualizer-cc-data-modal.png index 8c34732c7f..f0199f48d1 100644 Binary files a/docs/resources/images/data-visualizer-cc-data-modal.png and b/docs/resources/images/data-visualizer-cc-data-modal.png differ diff --git a/package.json b/package.json index 662d43a8e4..6afc71f5ee 100644 --- a/package.json +++ b/package.json @@ -41,12 +41,12 @@ "typescript": "^4.8.4" }, "dependencies": { - "@dhis2/analytics": "^26.9.3", - "@dhis2/app-runtime": "^3.10.4", + "@dhis2/analytics": "^26.10.0", + "@dhis2/app-runtime": "^3.11.3", "@dhis2/app-runtime-adapter-d2": "^1.1.0", "@dhis2/app-service-datastore": "^1.0.0-beta.3", "@dhis2/d2-i18n": "^1.1.0", - "@dhis2/ui": "^9.4.4", + "@dhis2/ui": "^10.1.10", "@krakenjs/post-robot": "^11.0.0", "d2": "^31.9.1", "decode-uri-component": "^0.2.2", @@ -68,6 +68,6 @@ "whatwg-fetch": "^3.6.2" }, "resolutions": { - "@dhis2/ui": "^9.4.4" + "@dhis2/ui": "^10.1.10" } } diff --git a/src/components/DimensionsPanel/Dialogs/DialogManager.js b/src/components/DimensionsPanel/Dialogs/DialogManager.js index a7f59bbea4..e447b96d70 100644 --- a/src/components/DimensionsPanel/Dialogs/DialogManager.js +++ b/src/components/DimensionsPanel/Dialogs/DialogManager.js @@ -483,7 +483,7 @@ export class DialogManager extends Component { onClose={this.closeDialog} dataTest={`dialog-manager-${dimension.id}`} position="top" - large + fluid > {dimension.name} diff --git a/src/components/DimensionsPanel/Dialogs/__tests__/__snapshots__/DialogManager.spec.js.snap b/src/components/DimensionsPanel/Dialogs/__tests__/__snapshots__/DialogManager.spec.js.snap index bfba0f2f6c..08e09f437f 100644 --- a/src/components/DimensionsPanel/Dialogs/__tests__/__snapshots__/DialogManager.spec.js.snap +++ b/src/components/DimensionsPanel/Dialogs/__tests__/__snapshots__/DialogManager.spec.js.snap @@ -4,7 +4,7 @@ exports[`The DialogManager component renders OUDimension content with display:no @@ -34,9 +34,7 @@ exports[`The DialogManager component renders OUDimension content with display:no - + @@ -92,9 +90,7 @@ exports[`The DialogManager component renders OUDimension content with display:no - + @@ -136,9 +132,7 @@ exports[`The DialogManager component renders the DataDimension content in dialog - + @@ -186,9 +180,7 @@ exports[`The DialogManager component renders the OrgUnitDimension content in dia - + @@ -227,9 +219,7 @@ exports[`The DialogManager component renders the PeriodDimension content in dial - +