refactor: use visualization API endpoint (#527)

* refactor: define fields for visualization api endpoint I'm leaving the definitions for chart/reportTable ones for now. Eventually they can be removed in favour of visualization alone. * refactor: use visualization api endpoint * chore: update @dhi2/d2-ui-file-menu version Required for silencing console error about wrong prop type. * refactor: use generic visualization term instead of chart * refactor: update options list This actually needs to be shared between app and plugin * fix: fix default value for clear button * fix: naming of reportingParams and default for legendSet
dhis2 · Jan 3, 2020 · 14f6f70 · 14f6f70
1 parent 7466131
commit 14f6f70
Show file tree

Hide file tree

Showing 13 changed files with 132 additions and 84 deletions.
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -14,8 +14,8 @@
     "dependencies": {
         "@dhis2/analytics": "^2.7.1",
         "@dhis2/d2-ui-core": "^6.2.1",
-        "@dhis2/d2-ui-file-menu": "^6.2.1",
-        "@dhis2/d2-ui-interpretations": "^6.2.1",
+        "@dhis2/d2-ui-file-menu": "^6.3.3",
+        "@dhis2/d2-ui-interpretations": "^6.3.3",
         "@dhis2/data-visualizer-plugin": "^33.1.6",
         "@material-ui/core": "^3.1.2",
         "@material-ui/icons": "^3.0.1",

diff --git a/packages/app/src/AppWrapper.js b/packages/app/src/AppWrapper.js
@@ -13,7 +13,7 @@ if (window.Cypress) {
     window.store = store
 }
 
-const schemas = ['chart', 'reportTable', 'organisationUnit', 'userGroup']
+const schemas = ['visualization', 'organisationUnit', 'userGroup']
 
 const AppWrapper = () => (
     <Provider store={store}>

diff --git a/packages/app/src/actions/index.js b/packages/app/src/actions/index.js
@@ -1,7 +1,5 @@
 import i18n from '@dhis2/d2-i18n'
 
-import { VIS_TYPE_PIVOT_TABLE } from '@dhis2/analytics'
-
 import {
     apiFetchVisualization,
     apiSaveVisualization,
@@ -56,13 +54,6 @@ export const tDoLoadVisualization = ({
     const onSuccess = async model => {
         const visualization = convertOuLevelsToUids(ouLevels, model.toJSON())
 
-        // TODO remove this once the backend new api endpoint is ready
-        // the AO should have the type: PIVOT_TABLE
-        if (!visualization.type) {
-            console.log(`type not in AO, set to ${VIS_TYPE_PIVOT_TABLE}`)
-            visualization.type = VIS_TYPE_PIVOT_TABLE
-        }
-
         if (interpretationId) {
             const interpretation = visualization.interpretations.find(
                 i => i.id === interpretationId

diff --git a/packages/app/src/components/App.js b/packages/app/src/components/App.js
@@ -1,9 +1,7 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
-import { createSelector } from 'reselect'
 import PropTypes from 'prop-types'
 import i18n from '@dhis2/d2-i18n'
-import { VIS_TYPE_PIVOT_TABLE } from '@dhis2/analytics'
 
 import Snackbar from '../components/Snackbar/Snackbar'
 import MenuBar from './MenuBar/MenuBar'
@@ -14,7 +12,6 @@ import Interpretations from './Interpretations/Interpretations'
 import Visualization from './Visualization/Visualization'
 import Layout from './Layout/Layout'
 import * as fromReducers from '../reducers'
-import { sGetUiType } from '../reducers/ui'
 import * as fromActions from '../actions'
 import history from '../modules/history'
 import defaultMetadata from '../modules/metadata'
@@ -31,6 +28,8 @@ import AxisSetup from './AxisSetup/AxisSetup'
 export class App extends Component {
     unlisten = null
 
+    apiObjectName = 'visualization'
+
     state = {
         previousLocation: null,
     }
@@ -86,7 +85,7 @@ export class App extends Component {
             if (!urlContainsCurrentAOKey && this.refetch(location)) {
                 await store.dispatch(
                     fromActions.tDoLoadVisualization({
-                        type: this.props.apiObjectName,
+                        type: this.apiObjectName,
                         id,
                         interpretationId,
                         ouLevels: this.props.ouLevels,
@@ -166,7 +165,7 @@ export class App extends Component {
                             <VisualizationTypeSelector />
                         </div>
                         <div className="toolbar-menubar flex-grow-1">
-                            <MenuBar apiObjectName={this.props.apiObjectName} />
+                            <MenuBar apiObjectName={this.apiObjectName} />
                         </div>
                     </div>
                     <div className="section-main flex-grow-1 flex-ct">
@@ -187,7 +186,7 @@ export class App extends Component {
                         {this.props.ui.rightSidebarOpen && this.props.current && (
                             <div className="main-right">
                                 <Interpretations
-                                    type={this.props.apiObjectName}
+                                    type={this.apiObjectName}
                                     id={this.props.current.id}
                                 />
                             </div>
@@ -200,16 +199,11 @@ export class App extends Component {
     }
 }
 
-const apiObjectSelector = createSelector([sGetUiType], type =>
-    type === VIS_TYPE_PIVOT_TABLE ? 'reportTable' : 'chart'
-)
-
 const mapStateToProps = state => ({
     settings: fromReducers.fromSettings.sGetSettings(state),
     current: fromReducers.fromCurrent.sGetCurrent(state),
     interpretations: fromReducers.fromVisualization.sGetInterpretations(state),
     ui: fromReducers.fromUi.sGetUi(state),
-    apiObjectName: apiObjectSelector(state),
 })
 
 const mapDispatchToProps = dispatch => ({
@@ -237,7 +231,6 @@ App.childContextTypes = {
 
 App.propTypes = {
     addParentGraphMap: PropTypes.func,
-    apiObjectName: PropTypes.string,
     baseUrl: PropTypes.string,
     current: PropTypes.object,
     d2: PropTypes.object,

diff --git a/packages/app/src/components/TitleBar/TitleBar.js b/packages/app/src/components/TitleBar/TitleBar.js
@@ -14,7 +14,7 @@ import formatDate from '../../modules/formatDate'
 import InterpretationIcon from '../../assets/InterpretationIcon'
 import styles from './styles/TitleBar.style'
 
-export const TITLE_UNSAVED = i18n.t('Unsaved chart')
+export const TITLE_UNSAVED = i18n.t('Unsaved visualization')
 export const TITLE_DIRTY = i18n.t('Edited')
 
 export const STATE_EMPTY = 'EMPTY'

diff --git a/packages/app/src/components/VisualizationOptions/Options/MeasureCriteria.js b/packages/app/src/components/VisualizationOptions/Options/MeasureCriteria.js
@@ -86,9 +86,11 @@ class MeasureCriteria extends Component {
     constructor(props) {
         super(props)
 
+        this.defaultState = { op1: '', v1: '', op2: '', v2: '' }
+
         const [op1 = '', v1 = '', op2 = '', v2 = ''] = props.value.split(/[;:]/)
 
-        this.state = this.defaultState = { op1, v1, op2, v2 }
+        this.state = { op1, v1, op2, v2 }
     }
 
     onClear = () => this.setState(this.defaultState, this.props.onChange(''))

diff --git a/packages/app/src/components/VisualizationOptions/Options/ParamOrganisationUnit.js b/packages/app/src/components/VisualizationOptions/Options/ParamOrganisationUnit.js
@@ -8,7 +8,7 @@ const ParamOrganisationUnit = () => (
     <CheckboxBaseOption
         label={i18n.t('Organisation unit')}
         option={{
-            name: 'paramOrganisationUnit',
+            name: 'organisationUnit',
         }}
     />
 )

diff --git a/packages/app/src/components/VisualizationOptions/Options/ParamParentOrganisationUnit.js b/packages/app/src/components/VisualizationOptions/Options/ParamParentOrganisationUnit.js
@@ -8,7 +8,7 @@ const ParamParentOrganisationUnit = () => (
     <CheckboxBaseOption
         label={i18n.t('Parent organisation unit')}
         option={{
-            name: 'paramParentOrganisationUnit',
+            name: 'parentOrganisationUnit',
         }}
     />
 )

diff --git a/packages/app/src/components/VisualizationOptions/Options/ParamReportingPeriod.js b/packages/app/src/components/VisualizationOptions/Options/ParamReportingPeriod.js
@@ -8,7 +8,7 @@ const ParamReportingPeriod = () => (
     <CheckboxBaseOption
         label={i18n.t('Reporting period')}
         option={{
-            name: 'paramReportingPeriod',
+            name: 'reportingPeriod',
         }}
     />
 )

diff --git a/packages/app/src/modules/fields/baseFields.js b/packages/app/src/modules/fields/baseFields.js
@@ -143,6 +143,16 @@ export const fieldsByType = {
     ],
 }
 
+fieldsByType.visualization = [
+    ...fieldsByType.reportTable,
+    ...fieldsByType.chart,
+    ...fieldsByType.reportTable_eventReport,
+    ...fieldsByType.chart_eventChart,
+    ...fieldsByType.reportTable_chart_eventReport,
+    ...fieldsByType.reportTable_eventReport_eventChart,
+    ...fieldsByType.reportTable_chart_eventReport_eventChart,
+]
+
 // actions
 
 export const extractName = propObj => propObj[BASE_FIELD_NAME]

diff --git a/packages/app/src/modules/options.js b/packages/app/src/modules/options.js
@@ -20,7 +20,6 @@ export const options = {
     targetLineLabel: { defaultValue: undefined, requestable: false },
     targetLineValue: { defaultValue: undefined, requestable: false },
     // legendDisplayStrategy
-    // legendSet
     aggregationType: { defaultValue: 'DEFAULT', requestable: true },
     completedOnly: { defaultValue: false, requestable: true },
     hideSubtitle: { defaultValue: false, requestable: false },
@@ -40,18 +39,18 @@ export const options = {
     skipRounding: { defaultValue: false, requestable: true },
     numberType: { defaultValue: 'VALUE', requestable: false },
     showHierarchy: { defaultValue: false, requestable: true },
-    legendSet: { defaultValue: 'NONE', requestable: false }, // XXX can be 'BY_DATA_ITEM'
+    legendSet: { defaultValue: undefined, requestable: false },
     legendDisplayStyle: { defaultValue: 'FILL', requestable: false },
     displayDensity: { defaultValue: 'NORMAL', requestable: false },
     fontSize: { defaultValue: 'NORMAL', requestable: false },
     digitGroupSeparator: { defaultValue: 'SPACE', requestable: false },
 
     // XXX these are stored in the AO under reportParams
-    paramReportingPeriod: { defaultValue: false, requestable: false },
-    paramOrganisationUnit: { defaultValue: false, requestable: false },
-    paramParentOrganisationUnit: { defaultValue: false, requestable: false },
+    reportingPeriod: { defaultValue: false, requestable: false },
+    organisationUnit: { defaultValue: false, requestable: false },
+    parentOrganisationUnit: { defaultValue: false, requestable: false },
     // XXX not in UI
-    paramGrandParentOrganisationUnit: {
+    grandParentOrganisationUnit: {
         defaultValue: false,
         requestable: false,
     },
@@ -109,14 +108,14 @@ export const getOptionsFromVisualization = visualization => {
 
     // nested options under reportParams
     if (visualization.reportParams) {
-        optionsFromVisualization.paramOrganisationUnit =
-            visualization.reportParams.paramOrganisationUnit
-        optionsFromVisualization.paramReportingPeriod =
-            visualization.reportParams.paramReportingPeriod
-        optionsFromVisualization.paramParentOrganisationUnit =
-            visualization.reportParams.paramParentOrganisationUnit
-        optionsFromVisualization.paramGrandParentOrganisationUnit =
-            visualization.reportParams.paramGrandParentOrganisationUnit
+        optionsFromVisualization.organisationUnit =
+            visualization.reportParams.organisationUnit
+        optionsFromVisualization.reportingPeriod =
+            visualization.reportParams.reportingPeriod
+        optionsFromVisualization.parentOrganisationUnit =
+            visualization.reportParams.parentOrganisationUnit
+        optionsFromVisualization.grandParentOrganisationUnit =
+            visualization.reportParams.grandParentOrganisationUnit
     }
 
     return optionsFromVisualization

diff --git a/packages/plugin/src/modules/options.js b/packages/plugin/src/modules/options.js
@@ -25,15 +25,46 @@ export const options = {
     completedOnly: { defaultValue: false, requestable: true },
     hideSubtitle: { defaultValue: false, requestable: false },
     hideTitle: { defaultValue: false, requestable: false },
-    sortOrder: { defaultValue: 0, requestable: false },
+    sortOrder: { defaultValue: '0', requestable: false },
     subtitle: { defaultValue: undefined, requestable: false },
     title: { defaultValue: undefined, requestable: false },
-    // topLimit
+
+    // only for PT XXX
+    colTotals: { defaultValue: false, requestable: false },
+    colSubTotals: { defaultValue: false, requestable: false },
+    rowTotals: { defaultValue: false, requestable: false },
+    rowSubTotals: { defaultValue: false, requestable: false },
+    showDimensionLabels: { defaultValue: false, requestable: false },
+    hideEmptyColumns: { defaultValue: false, requestable: true },
+    hideEmptyRows: { defaultValue: false, requestable: true },
+    skipRounding: { defaultValue: false, requestable: true },
+    numberType: { defaultValue: 'VALUE', requestable: false },
+    showHierarchy: { defaultValue: false, requestable: true },
+    legendSet: { defaultValue: 'NONE', requestable: false }, // XXX can be 'BY_DATA_ITEM'
+    legendDisplayStyle: { defaultValue: 'FILL', requestable: false },
+    displayDensity: { defaultValue: 'NORMAL', requestable: false },
+    fontSize: { defaultValue: 'NORMAL', requestable: false },
+    digitGroupSeparator: { defaultValue: 'SPACE', requestable: false },
+
+    // XXX these are stored in the AO under reportParams
+    paramReportingPeriod: { defaultValue: false, requestable: false },
+    paramOrganisationUnit: { defaultValue: false, requestable: false },
+    paramParentOrganisationUnit: { defaultValue: false, requestable: false },
+    // XXX not in UI
+    paramGrandParentOrganisationUnit: {
+        defaultValue: false,
+        requestable: false,
+    },
+    regression: { defaultValue: false, requestable: false },
+    cumulative: { defaultValue: false, requestable: false },
+    measureCriteria: { defaultValue: undefined, requestable: true },
+    topLimit: { defaultValue: '0', requestable: false },
 }
 
 export const computedOptions = {
     baseLine: { defaultValue: false, requestable: false },
     targetLine: { defaultValue: false, requestable: false },
+    axisRange: { defaultValue: undefined, requestable: false },
 }
 
 export default options
@@ -76,5 +107,17 @@ export const getOptionsFromVisualization = visualization => {
         isNotDefault(optionsFromVisualization, 'targetLineLabel') ||
         isNotDefault(optionsFromVisualization, 'targetLineValue')
 
+    // nested options under reportParams
+    if (visualization.reportParams) {
+        optionsFromVisualization.paramOrganisationUnit =
+            visualization.reportParams.paramOrganisationUnit
+        optionsFromVisualization.paramReportingPeriod =
+            visualization.reportParams.paramReportingPeriod
+        optionsFromVisualization.paramParentOrganisationUnit =
+            visualization.reportParams.paramParentOrganisationUnit
+        optionsFromVisualization.paramGrandParentOrganisationUnit =
+            visualization.reportParams.paramGrandParentOrganisationUnit
+    }
+
     return optionsFromVisualization
 }