feat: custom calculations (DHIS2-13871)

cypress/elements/calculationsModal.js

@@ -0,0 +1,13 @@
+const modalTitleEl = 'calculation-modal-title'
+
+export const clickNewCalculationButton = () =>
+    cy
+        .getBySel('data-dimension-transfer-leftfooter')
+        .containsExact('Calculation')
+        .click()
+
+export const expectCalculationsModalToBeVisible = () =>
+    cy.getBySel('calculation-modal').should('be.visible')
+
+export const expectCalculationsModalTitleToContain = (text) =>
+    cy.getBySel(modalTitleEl).should('contain', text)

cypress/integration/dimensions/calculations.cy.js

@@ -0,0 +1,102 @@
+import { DIMENSION_ID_DATA } from '@dhis2/analytics'
+import {
+    clickNewCalculationButton,
+    expectCalculationsModalTitleToContain,
+    expectCalculationsModalToBeVisible,
+} from '../../elements/calculationsModal.js'
+import { expectDataDimensionModalToBeVisible } from '../../elements/dimensionModal/index.js'
+import { openDimension } from '../../elements/dimensionsPanel.js'
+import { goToStartPage } from '../../elements/startScreen.js'
+
+const PAGE_SIZE = 50
+const DATA_ELEMENTS_URL = '**/dataElements?*'
+
+describe('Data dimension', () => {
+    describe('initial state', () => {
+        it('navigates to the start page', () => {
+            goToStartPage()
+        })
+        it('opens the data dimension modal', () => {
+            openDimension(DIMENSION_ID_DATA)
+            expectDataDimensionModalToBeVisible()
+        })
+        it('opens the calculations modal', () => {
+            cy.intercept('GET', DATA_ELEMENTS_URL).as('request')
+            clickNewCalculationButton()
+            cy.wait('@request').then(({ request, response }) => {
+                expect(request.url).to.contain('page=1')
+                expect(response.statusCode).to.eq(200)
+                expect(response.body.dataElements.length).to.eq(PAGE_SIZE)
+            })
+            expectCalculationsModalToBeVisible()
+        })
+        it('modal has a title', () => {
+            expectCalculationsModalTitleToContain('Data / New calculation')
+        })
+        it('"All groups" is selected', () => {
+            cy.getBySel('data-element-group-select').contains('All groups')
+        })
+        it('"Totals only" is selected', () => {
+            cy.getBySel('data-element-disaggregation-select').contains(
+                'Totals only'
+            )
+        })
+        it('items are loaded', () => {
+            cy.getBySelLike('dimension-list')
+                .findBySel('dimension-option')
+                .should('have.length', PAGE_SIZE)
+        })
+
+        /*
+
+        --search/filter
+        searching
+        filtering by group
+        changing disaggregation type
+        scrolling down and fetching the next page
+
+        --creating a formula
+        double-click to add
+        //dnd to add
+        add math operators
+        remove by selecting and "remove item" button
+        //remove by double click
+        reorder with DND
+        all math operators work and creates a valid formula when used
+        dataElements (Totals only) show correct name when added
+        dataElementOperands (Details only) show correct name when added
+
+        --frontend validation / "Check formula"
+        "Empty formula"
+        "Consecutive math operators"
+        "Consecutive data elements"
+        "Starts or ends with a math operator"
+        "Missing right parenthesis )"
+        "Missing left parenthesis ("
+        "Valid"
+        sample test formula from request to validation (note that detailed tests are already done in Jest)
+        changing the formula resets the status
+        EDI can't be saved without a valid formula (check with Joe if this is still valid)
+
+        --saving a formula
+        enter a label
+        create a valid formula
+        validate the formula
+        save
+        EDI displays correctly in the visualization
+
+        --opening a saved formula
+        unselected formula is listed under "Data Type: Calculations"
+            tooltip shows on hover
+            has label and formula when opened
+        selected formula is selected and not listed under "Data Type: Calculations"
+            tooltip shows on hover
+            has label and formula when opened
+        editing and saving works
+            edited formula shows in tooltip on hover
+            edited name shows in list of data items
+            edited EDI displays correctly in visualization
+
+        */
+    })
+})

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2023-02-08T10:41:55.462Z\n"
-"PO-Revision-Date: 2023-02-08T10:41:55.462Z\n"
+"POT-Creation-Date: 2023-03-07T12:07:38.393Z\n"
+"PO-Revision-Date: 2023-03-07T12:07:38.393Z\n"
 
 msgid "All items"
 msgstr "All items"
@@ -780,11 +780,11 @@ msgid "There's a problem with the layout"
 msgstr "There's a problem with the layout"
 
 msgid ""
-"A single indicator must be the only data item when using indicators as Data "
-"in Filter."
+"A single indicator or calculation must be the only data item when using "
+"indicators or calculations as Data in Filter."
 msgstr ""
-"A single indicator must be the only data item when using indicators as Data "
-"in Filter."
+"A single indicator or calculation must be the only data item when using "
+"indicators or calculations as Data in Filter."
 
 msgid "Data Element Group Sets and Reporting Rates cannot be used together."
 msgstr "Data Element Group Sets and Reporting Rates cannot be used together."

package.json

@@ -1,6 +1,6 @@
 {
     "name": "data-visualizer-app",
-    "version": "100.0.0",
+    "version": "0.0.0-2023-04-17T15-27-05",
     "description": "DHIS2 Data Visualizer",
     "license": "BSD-3-Clause",
     "private": true,

src/actions/__tests__/index.spec.js

@@ -64,6 +64,7 @@ describe('index', () => {
                 {
                     type: SET_VISUALIZATION,
                     value: vis,
+                    metadata: [],
                 },
                 { type: SET_CURRENT, value: vis },
                 {
@@ -107,6 +108,7 @@ describe('index', () => {
                 {
                     type: SET_VISUALIZATION,
                     value: vis,
+                    metadata: [],
                 },
                 { type: SET_CURRENT, value: vis },
                 {
@@ -269,6 +271,7 @@ describe('index', () => {
                 {
                     type: SET_VISUALIZATION,
                     value: { ...visualization, ...extraParams },
+                    metadata: [],
                 },
                 {
                     type: SET_CURRENT,
@@ -299,6 +302,7 @@ describe('index', () => {
                 {
                     type: SET_VISUALIZATION,
                     value: { ...visualization, ...extraParams },
+                    metadata: [],
                 },
                 {
                     type: SET_CURRENT,

src/actions/current.js

@@ -3,6 +3,7 @@ import {
     SET_CURRENT_FROM_UI,
     CLEAR_CURRENT,
 } from '../reducers/current.js'
+import { sGetMetadata } from '../reducers/metadata.js'
 import { sGetUi } from '../reducers/ui.js'
 
 export const acSetCurrent = (value) => ({
@@ -20,5 +21,10 @@ export const acSetCurrentFromUi = (value) => ({
 })
 
 export const tSetCurrentFromUi = () => async (dispatch, getState) => {
-    dispatch(acSetCurrentFromUi(sGetUi(getState())))
+    dispatch(
+        acSetCurrentFromUi({
+            ui: sGetUi(getState()),
+            metadata: sGetMetadata(getState()),
+        })
+    )
 }

src/actions/visualization.js

@@ -1,12 +1,18 @@
+import { getDimensionMetadataFromVisualization } from '../modules/visualization.js'
 import {
     SET_VISUALIZATION,
     CLEAR_VISUALIZATION,
 } from '../reducers/visualization.js'
 
-export const acSetVisualization = (visualization) => ({
-    type: SET_VISUALIZATION,
-    value: visualization,
-})
+export const acSetVisualization = (visualization) => {
+    const metadata = getDimensionMetadataFromVisualization(visualization)
+
+    return {
+        type: SET_VISUALIZATION,
+        value: visualization,
+        metadata,
+    }
+}
 
 export const acClear = () => ({
     type: CLEAR_VISUALIZATION,

src/components/App.js

@@ -112,7 +112,7 @@ export class UnconnectedApp extends Component {
                 this.props.clearCurrent()
 
                 this.props.setUiFromVisualization(this.props.currentAO)
-                this.props.setCurrentFromUi(this.props.ui)
+                this.props.setCurrentFromUi()
             }
 
             if (!urlContainsCurrentAOKey && this.refetch(location)) {
@@ -198,7 +198,7 @@ export class UnconnectedApp extends Component {
             (e) =>
                 e.key === 'Enter' &&
                 e.ctrlKey === true &&
-                this.props.setCurrentFromUi(this.props.ui)
+                this.props.setCurrentFromUi()
         )
 
         window.addEventListener('beforeunload', (event) => {
@@ -346,7 +346,7 @@ const mapStateToProps = (state) => ({
 })
 
 const mapDispatchToProps = {
-    setCurrentFromUi: fromActions.fromCurrent.acSetCurrentFromUi,
+    setCurrentFromUi: fromActions.fromCurrent.tSetCurrentFromUi,
     clearVisualization: fromActions.fromVisualization.acClear,
     clearCurrent: fromActions.fromCurrent.acClear,
     setUiFromVisualization: fromActions.fromUi.acSetUiFromVisualization,

src/components/DimensionsPanel/Dialogs/DialogManager.js

@@ -175,7 +175,10 @@ export class DialogManager extends Component {
                             id: item.id,
                             name: item.name || item.displayName,
                             displayName: item.displayName,
-                            type: item.type,
+                            dimensionItemType: item.type,
+                            ...(item.expression
+                                ? { expression: item.expression }
+                                : {}),
                         }
 
                         return obj
@@ -203,6 +206,12 @@ export class DialogManager extends Component {
                 type:
                     this.props.metadata[id]?.type ||
                     this.props.metadata[id]?.dimensionItemType,
+                ...(this.props.metadata[id]?.expression
+                    ? {
+                          expression: this.props.metadata[id].expression,
+                      }
+                    : {}),
+                access: this.props.metadata[id]?.access,
             }))
     }
 
@@ -315,12 +324,23 @@ export class DialogManager extends Component {
                               itemAttribute: dialogId,
                           })
                     : dimensionProps.onSelect
+                const onCalculationSave = (calculation) => {
+                    this.props.addMetadata({
+                        [calculation.id]: {
+                            id: calculation.id,
+                            name: calculation.name,
+                            dimensionItemType: calculation.type,
+                            expression: calculation.expression,
+                        },
+                    })
+                }
                 const dimensionSelector = (
                     <DataDimension
                         displayNameProp={displayNameProperty}
                         selectedDimensions={selectedItems}
                         infoBoxMessage={infoBoxMessage}
                         onSelect={onSelect}
+                        onCalculationSave={onCalculationSave}
                     />
                 )
                 const dataTabs = isScatterAttribute(dialogId) ? (

src/components/DimensionsPanel/Dialogs/__tests__/__snapshots__/DialogManager.spec.js.snap

@@ -83,6 +83,7 @@ exports[`The DialogManager component renders OUDimension content with display:no
         />
       </div>
       <DataDimension
+        onCalculationSave={[Function]}
         onSelect={[Function]}
         selectedDimensions={Array []}
       />
@@ -125,6 +126,7 @@ exports[`The DialogManager component renders the DataDimension content in dialog
       dataTest="dialog-manager-modal-content"
     >
       <DataDimension
+        onCalculationSave={[Function]}
         onSelect={[Function]}
         selectedDimensions={Array []}
       />

src/middleware/metadata.js

@@ -3,9 +3,23 @@ import { acAddMetadata } from '../actions/metadata.js'
 export default ({ dispatch }) =>
     (next) =>
     (action) => {
-        typeof action.metadata === 'object' &&
-            !Array.isArray(action.metadata) &&
-            dispatch(acAddMetadata(action.metadata))
+        if (typeof action.metadata === 'object') {
+            if (Array.isArray(action.metadata)) {
+                dispatch(
+                    acAddMetadata(
+                        action.metadata.reduce(
+                            (meta, obj) => ({
+                                ...meta,
+                                ...obj,
+                            }),
+                            {}
+                        )
+                    )
+                )
+            } else {
+                dispatch(acAddMetadata(action.metadata))
+            }
+        }
 
         next(action)
     }

src/modules/__tests__/current.spec.js

@@ -86,9 +86,7 @@ describe('getSingleValueCurrentFromUi', () => {
 
         ui.type = 'SINGLEVALUE'
 
-        const actualState = getSingleValueCurrentFromUi(DEFAULT_CURRENT, {
-            value: ui,
-        })
+        const actualState = getSingleValueCurrentFromUi(DEFAULT_CURRENT, ui)
 
         expect(actualState).toEqual(expectedState)
     })