fix: disable lines and vertical axis options for multi axes (DHIS2-90…

…10, DHIS2-9013, DHIS2-9014) (#1171) Disables Lines (DHIS2-9010) and Vertical Axis options (title: DHIS2-9013, options: DHIS2-9014) by checking the new Analytics prop hasCustomAxes Lines and Vertical Axis config sections extracted to own modules for reduced duplication Adds a disabled prop to various options Wraps configs in functions and adds prop hasCustomAxes where applicable Refactors getLabel() to label, since config is now wrapped in a function (no need for individual fn wrapping) Additionally, adds the correct margin between some options that were missing it Changes incorrectly named selector getAxisIdByDimensionId to sGetAxisIdByDimensionId
dhis2 · Aug 7, 2020 · 7062fc5 · 7062fc5
1 parent 85b71f5
commit 7062fc5
Show file tree

Hide file tree

Showing 35 changed files with 361 additions and 360 deletions.
diff --git a/packages/app/i18n/en.pot b/packages/app/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: 2020-07-28T10:55:58.947Z\n"
-"PO-Revision-Date: 2020-07-28T10:55:58.947Z\n"
+"POT-Creation-Date: 2020-08-03T14:19:51.289Z\n"
+"PO-Revision-Date: 2020-08-03T14:19:51.289Z\n"
 
 msgid "Rename successful"
 msgstr ""
@@ -746,15 +746,9 @@ msgstr ""
 msgid "Display"
 msgstr ""
 
-msgid "Lines"
-msgstr ""
-
 msgid "Axes"
 msgstr ""
 
-msgid "Vertical (y) axis"
-msgstr ""
-
 msgid "Horizontal (x) axis"
 msgstr ""
 
@@ -770,6 +764,12 @@ msgstr ""
 msgid "Titles"
 msgstr ""
 
+msgid "Lines"
+msgstr ""
+
+msgid "Vertical (y) axis"
+msgstr ""
+
 msgid "Display totals"
 msgstr ""
 
@@ -791,6 +791,12 @@ msgstr ""
 msgid "Parameters"
 msgstr ""
 
+msgid "Lines are not supported yet when using multiple axes"
+msgstr ""
+
+msgid "Vertical axis options are not supported yet when using multiple axes"
+msgstr ""
+
 msgid "Weeks per year"
 msgstr ""
 

diff --git a/packages/app/package.json b/packages/app/package.json
@@ -12,7 +12,7 @@
         "redux-mock-store": "^1.5.4"
     },
     "dependencies": {
-        "@dhis2/analytics": "^8.0.0",
+        "@dhis2/analytics": "^8.1.0",
         "@dhis2/app-runtime": "*",
         "@dhis2/d2-i18n": "*",
         "@dhis2/d2-ui-file-menu": "^7.0.4",

diff --git a/packages/app/src/components/DimensionsPanel/Dialogs/DialogManager.js b/packages/app/src/components/DimensionsPanel/Dialogs/DialogManager.js
@@ -44,7 +44,7 @@ import {
     sGetUiActiveModalDialog,
     sGetUiParentGraphMap,
     sGetUiType,
-    getAxisIdByDimensionId,
+    sGetAxisIdByDimensionId,
     sGetDimensionIdsFromLayout,
 } from '../../../reducers/ui'
 import { sGetDimensions } from '../../../reducers/dimensions'
@@ -388,7 +388,7 @@ const mapStateToProps = state => ({
     selectedItems: sGetUiItems(state),
     type: sGetUiType(state),
     getAxisIdByDimensionId: dimensionId =>
-        getAxisIdByDimensionId(state, dimensionId),
+        sGetAxisIdByDimensionId(state, dimensionId),
     dimensionIdsInLayout: sGetDimensionIdsFromLayout(state),
 })
 

diff --git a/packages/app/src/components/DimensionsPanel/DimensionsPanel.js b/packages/app/src/components/DimensionsPanel/DimensionsPanel.js
@@ -93,7 +93,7 @@ const mapStateToProps = state => ({
         state
     ),
     getCurrentAxisId: dimensionId =>
-        fromReducers.fromUi.getAxisIdByDimensionId(state, dimensionId),
+        fromReducers.fromUi.sGetAxisIdByDimensionId(state, dimensionId),
 })
 
 const mapDispatchToProps = dispatch => ({

diff --git a/packages/app/src/components/VisualizationOptions/Options/AxisRange.js b/packages/app/src/components/VisualizationOptions/Options/AxisRange.js
@@ -1,6 +1,6 @@
 import React from 'react'
-
 import i18n from '@dhis2/d2-i18n'
+import PropTypes from 'prop-types'
 import { Label, Help } from '@dhis2/ui'
 
 import RangeAxisMinValue from './RangeAxisMinValue'
@@ -11,18 +11,24 @@ import {
     tabSectionOptionComplexInline,
 } from '../styles/VisualizationOptions.style.js'
 
-const AxisRange = () => (
+const AxisRange = ({ disabled }) => (
     <div className={tabSectionOption.className}>
         <Label>{i18n.t('Axis range')}</Label>
         <div className={tabSectionOptionComplexInline.className}>
-            <RangeAxisMinValue />
+            <RangeAxisMinValue disabled={disabled} />
             {'\u00A0\u2013\u00A0'}
-            <RangeAxisMaxValue />
+            <RangeAxisMaxValue disabled={disabled} />
         </div>
-        <Help>
-            {i18n.t('Values outside of the range will not be displayed')}
-        </Help>
+        {!disabled ? (
+            <Help>
+                {i18n.t('Values outside of the range will not be displayed')}
+            </Help>
+        ) : null}
     </div>
 )
 
+AxisRange.propTypes = {
+    disabled: PropTypes.bool,
+}
+
 export default AxisRange
diff --git a/packages/app/src/components/VisualizationOptions/Options/BaseLine.js b/packages/app/src/components/VisualizationOptions/Options/BaseLine.js
@@ -16,16 +16,17 @@ import {
     tabSectionOptionComplexInline,
 } from '../styles/VisualizationOptions.style.js'
 
-export const BaseLine = ({ enabled, onChange }) => (
+export const BaseLine = ({ checked, onChange, disabled }) => (
     <div className={tabSectionOption.className}>
         <Checkbox
-            checked={enabled}
+            checked={checked}
             label={i18n.t('Base line')}
             name="baseLine-toggle"
             onChange={({ checked }) => onChange(checked)}
             dense
+            disabled={disabled}
         />
-        {enabled ? (
+        {checked && !disabled ? (
             <div
                 className={`${tabSectionOptionToggleable.className} ${tabSectionOptionComplexInline.className}`}
             >
@@ -43,16 +44,17 @@ export const BaseLine = ({ enabled, onChange }) => (
 )
 
 BaseLine.propTypes = {
-    enabled: PropTypes.bool.isRequired,
+    checked: PropTypes.bool.isRequired,
     onChange: PropTypes.func.isRequired,
+    disabled: PropTypes.bool,
 }
 
 const mapStateToProps = state => ({
-    enabled: sGetUiOptions(state).baseLine,
+    checked: sGetUiOptions(state).baseLine,
 })
 
 const mapDispatchToProps = dispatch => ({
-    onChange: enabled => dispatch(acSetUiOptions({ baseLine: enabled })),
+    onChange: checked => dispatch(acSetUiOptions({ baseLine: checked })),
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(BaseLine)
diff --git a/packages/app/src/components/VisualizationOptions/Options/Legend.js b/packages/app/src/components/VisualizationOptions/Options/Legend.js
@@ -62,30 +62,34 @@ const Legend = ({
             {legendEnabled ? (
                 <div className={tabSectionOptionToggleable.className}>
                     {!hideStyleOptions ? (
+                        <div className={tabSectionOption.className}>
+                            <FieldSet>
+                                <UiCoreLegend>
+                                    <span
+                                        className={tabSectionTitle.className}
+                                        style={{ marginTop: 8 }}
+                                    >
+                                        {i18n.t('Legend style')}
+                                    </span>
+                                </UiCoreLegend>
+                                <div className={tabSectionOption.className}>
+                                    <LegendDisplayStyle />
+                                </div>
+                            </FieldSet>
+                        </div>
+                    ) : null}
+                    <div>
                         <FieldSet>
                             <UiCoreLegend>
-                                <span
-                                    className={tabSectionTitle.className}
-                                    style={{ marginTop: 8 }}
-                                >
-                                    {i18n.t('Legend style')}
+                                <span className={tabSectionTitle.className}>
+                                    {i18n.t('Legend type')}
                                 </span>
                             </UiCoreLegend>
                             <div className={tabSectionOption.className}>
-                                <LegendDisplayStyle />
+                                <LegendDisplayStrategy />
                             </div>
                         </FieldSet>
-                    ) : null}
-                    <FieldSet>
-                        <UiCoreLegend>
-                            <span className={tabSectionTitle.className}>
-                                {i18n.t('Legend type')}
-                            </span>
-                        </UiCoreLegend>
-                        <div className={tabSectionOption.className}>
-                            <LegendDisplayStrategy />
-                        </div>
-                    </FieldSet>
+                    </div>
                 </div>
             ) : null}
         </div>

diff --git a/packages/app/src/components/VisualizationOptions/Options/RangeAxisDecimals.js b/packages/app/src/components/VisualizationOptions/Options/RangeAxisDecimals.js
@@ -1,19 +1,24 @@
 import React from 'react'
-
 import i18n from '@dhis2/d2-i18n'
+import PropTypes from 'prop-types'
 
 import TextBaseOption from './TextBaseOption'
 
-const RangeAxisDecimals = () => (
+const RangeAxisDecimals = ({ disabled }) => (
     <TextBaseOption
         type="number"
         width="96px"
         label={i18n.t('Decimals')}
+        disabled={disabled}
         placeholder={i18n.t('Auto')}
         option={{
             name: 'rangeAxisDecimals',
         }}
     />
 )
 
+RangeAxisDecimals.propTypes = {
+    disabled: PropTypes.bool,
+}
+
 export default RangeAxisDecimals
diff --git a/packages/app/src/components/VisualizationOptions/Options/RangeAxisLabel.js b/packages/app/src/components/VisualizationOptions/Options/RangeAxisLabel.js
@@ -1,18 +1,19 @@
 import React from 'react'
-
 import i18n from '@dhis2/d2-i18n'
+import PropTypes from 'prop-types'
 
 import TextBaseOption from './TextBaseOption'
 import { options } from '../../../modules/options'
 
 const optionName = 'rangeAxisLabel'
 const defaultValue = options[optionName].defaultValue
 
-const RangeAxisLabel = () => (
+const RangeAxisLabel = ({ disabled }) => (
     <TextBaseOption
         type="text"
         width="280px"
         label={i18n.t('Axis title')}
+        disabled={disabled}
         placeholder={i18n.t('Add a title')}
         option={{
             name: optionName,
@@ -22,4 +23,8 @@ const RangeAxisLabel = () => (
     />
 )
 
+RangeAxisLabel.propTypes = {
+    disabled: PropTypes.bool,
+}
+
 export default RangeAxisLabel
diff --git a/packages/app/src/components/VisualizationOptions/Options/RangeAxisMaxValue.js b/packages/app/src/components/VisualizationOptions/Options/RangeAxisMaxValue.js
@@ -1,19 +1,24 @@
 import React from 'react'
-
 import i18n from '@dhis2/d2-i18n'
+import PropTypes from 'prop-types'
 
 import TextBaseOption from './TextBaseOption'
 
-const RangeAxisMaxValue = () => (
+const RangeAxisMaxValue = ({ disabled }) => (
     <TextBaseOption
         type="number"
         width="100px"
         placeholder={i18n.t('Max')}
+        disabled={disabled}
         option={{
             name: 'rangeAxisMaxValue',
         }}
         inline
     />
 )
 
+RangeAxisMaxValue.propTypes = {
+    disabled: PropTypes.bool,
+}
+
 export default RangeAxisMaxValue
diff --git a/packages/app/src/components/VisualizationOptions/Options/RangeAxisMinValue.js b/packages/app/src/components/VisualizationOptions/Options/RangeAxisMinValue.js
@@ -1,19 +1,24 @@
 import React from 'react'
-
 import i18n from '@dhis2/d2-i18n'
+import PropTypes from 'prop-types'
 
 import TextBaseOption from './TextBaseOption'
 
-const RangeAxisMinValue = () => (
+const RangeAxisMinValue = ({ disabled }) => (
     <TextBaseOption
         type="number"
         width="100px"
         placeholder={i18n.t('Min')}
+        disabled={disabled}
         option={{
             name: 'rangeAxisMinValue',
         }}
         inline
     />
 )
 
+RangeAxisMinValue.propTypes = {
+    disabled: PropTypes.bool,
+}
+
 export default RangeAxisMinValue
diff --git a/packages/app/src/components/VisualizationOptions/Options/RangeAxisSteps.js b/packages/app/src/components/VisualizationOptions/Options/RangeAxisSteps.js
@@ -1,22 +1,27 @@
 import React from 'react'
-
 import i18n from '@dhis2/d2-i18n'
+import PropTypes from 'prop-types'
 
 import TextBaseOption from './TextBaseOption'
 
-export const RangeAxisSteps = () => (
+export const RangeAxisSteps = ({ disabled }) => (
     <TextBaseOption
         type="number"
         width="96px"
         helpText={i18n.t(
             'The number of axis steps between the min and max values'
         )}
         label={i18n.t('Steps')}
+        disabled={disabled}
         placeholder={i18n.t('Auto')}
         option={{
             name: 'rangeAxisSteps',
         }}
     />
 )
 
+RangeAxisSteps.propTypes = {
+    disabled: PropTypes.bool,
+}
+
 export default RangeAxisSteps
diff --git a/packages/app/src/components/VisualizationOptions/Options/RegressionType.js b/packages/app/src/components/VisualizationOptions/Options/RegressionType.js
@@ -1,17 +1,18 @@
 import React from 'react'
-
 import i18n from '@dhis2/d2-i18n'
+import PropTypes from 'prop-types'
 
 import SelectBaseOption from './SelectBaseOption'
 import { options } from '../../../modules/options'
 
 const optionName = 'regressionType'
 const defaultValue = options[optionName].defaultValue
 
-const RegressionType = () => (
+const RegressionType = ({ disabled }) => (
     <SelectBaseOption
         toggleable={true}
         label={i18n.t('Trend line')}
+        disabled={disabled}
         option={{
             name: optionName,
             defaultValue: defaultValue,
@@ -24,4 +25,8 @@ const RegressionType = () => (
     />
 )
 
+RegressionType.propTypes = {
+    disabled: PropTypes.bool,
+}
+
 export default RegressionType