fix: Decimals and Steps options only allow positive values (DHIS2-9002, DHIS2-9194) (#1161) v32

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-05-18T23:27:07.844Z\n"
-"PO-Revision-Date: 2020-05-18T23:27:07.844Z\n"
+"POT-Creation-Date: 2020-09-09T08:33:44.489Z\n"
+"PO-Revision-Date: 2020-09-09T08:33:44.489Z\n"
 
 msgid "Rename successful"
 msgstr ""
@@ -235,6 +235,9 @@ msgstr ""
 msgid "Use 100% stacked values"
 msgstr ""
 
+msgid "Auto"
+msgstr ""
+
 msgid "Range axis decimals"
 msgstr ""
 
@@ -250,7 +253,9 @@ msgstr ""
 msgid "Range axis tick steps"
 msgstr ""
 
-msgid "Tick steps may extend the chart beyond 'Range axis max'"
+msgid ""
+"Number of axis tick steps, including the min and max. A value of 2 or lower "
+"will be ignored."
 msgstr ""
 
 msgid "Trend line"
@@ -385,9 +390,6 @@ msgstr ""
 msgid "Please add at least one period as {{series}}, {{category}} or {{filter}}"
 msgstr ""
 
-msgid "Please add {{data}} as {{category}} or {{filter}}"
-msgstr ""
-
 msgid "Please add at least one period as {{series}} or {{filter}}"
 msgstr ""
 
@@ -397,9 +399,6 @@ msgstr ""
 msgid "Please add at least one period as a {{series}} dimension"
 msgstr ""
 
-msgid "Please add at least one period as a {{category}} dimension"
-msgstr ""
-
 msgid "Please add {{data}} as a filter dimension"
 msgstr ""
 

packages/app/src/components/VisualizationOptions/Options/PositiveNumberBaseType.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import TextField from '@material-ui/core/TextField';
+
+import { sGetUiOptions } from '../../../reducers/ui';
+import { acSetUiOptions } from '../../../actions/ui';
+
+export const PositiveNumberBaseType = ({
+    label,
+    placeholder,
+    helpText,
+    width,
+    option,
+    value,
+    onChange,
+    disabled,
+}) => (
+    <TextField
+        type="number"
+        label={option.label}
+        onChange={event => {
+            const value = event.target.value;
+            const parsedValue = parseInt(value, 10);
+            parsedValue >= 0
+                ? onChange(Math.round(value))
+                : onChange(parsedValue ? 0 : null);
+        }}
+        name={option.name}
+        value={value || value === 0 ? value.toString() : ''}
+        placeholder={placeholder}
+        disabled={disabled}
+        helperText={option.helperText}
+    />
+);
+
+PositiveNumberBaseType.propTypes = {
+    disabled: PropTypes.bool,
+    helpText: PropTypes.string,
+    label: PropTypes.string,
+    option: PropTypes.object,
+    placeholder: PropTypes.string,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    width: PropTypes.string,
+    onChange: PropTypes.func,
+};
+
+const mapStateToProps = (state, ownProps) => ({
+    value: sGetUiOptions(state)[ownProps.option.name],
+    enabled: sGetUiOptions(state)[ownProps.option.name] !== undefined,
+});
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+    onChange: value =>
+        dispatch(acSetUiOptions({ [ownProps.option.name]: value })),
+});
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(PositiveNumberBaseType);

packages/app/src/components/VisualizationOptions/Options/RangeAxisDecimals.js

@@ -1,10 +1,12 @@
 import React from 'react';
-import TextBaseOption from './TextBaseOption';
 import i18n from '@dhis2/d2-i18n';
 
+import PositiveNumberBaseType from './PositiveNumberBaseType';
+
 const RangeAxisDecimals = () => (
-    <TextBaseOption
-        type="number"
+    <PositiveNumberBaseType
+        width="96px"
+        placeholder={i18n.t('Auto')}
         option={{
             name: 'rangeAxisDecimals',
             label: i18n.t('Range axis decimals'),

packages/app/src/components/VisualizationOptions/Options/RangeAxisSteps.js

@@ -1,19 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import TextBaseOption from './TextBaseOption';
 import i18n from '@dhis2/d2-i18n';
 import { sGetUiOptions } from '../../../reducers/ui';
 
+import PositiveNumberBaseType from './PositiveNumberBaseType';
+
 export const RangeAxisSteps = ({ showHelperText }) => (
-    <TextBaseOption
-        type="number"
+    <PositiveNumberBaseType
+        width="96px"
+        placeholder={i18n.t('Auto')}
         option={{
             name: 'rangeAxisSteps',
             label: i18n.t('Range axis tick steps'),
             helperText: showHelperText
                 ? i18n.t(
-                      `Tick steps may extend the chart beyond 'Range axis max'`
+                      'Number of axis tick steps, including the min and max. A value of 2 or lower will be ignored.'
                   )
                 : null,
         }}

packages/app/src/components/VisualizationOptions/__tests__/RangeAxisSteps.spec.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import TextBaseOption from '../Options/TextBaseOption';
+import PositiveNumberBaseType from '../Options/PositiveNumberBaseType';
 import { RangeAxisSteps } from '../Options/RangeAxisSteps';
 
 describe('DV > Options > RangeAxisSteps', () => {
@@ -22,22 +22,24 @@ describe('DV > Options > RangeAxisSteps', () => {
         shallowRangeAxisSteps = undefined;
     });
 
-    it('renders a <TextBaseOption />', () => {
-        expect(rangeAxisSteps(props).find(TextBaseOption)).toHaveLength(1);
+    it('renders a <PositiveNumberBaseType />', () => {
+        expect(rangeAxisSteps(props).find(PositiveNumberBaseType)).toHaveLength(
+            1
+        );
     });
 
     it('sets the label prop to what passed in the option prop', () => {
         expect(
             rangeAxisSteps(props)
-                .find(TextBaseOption)
+                .find(PositiveNumberBaseType)
                 .props().option.label
         ).toEqual('Range axis tick steps');
     });
 
     it('does not show the helper text when showHelperText is false', () => {
         expect(
             rangeAxisSteps(props)
-                .find(TextBaseOption)
+                .find(PositiveNumberBaseType)
                 .props().option.helperText
         ).toBe(null);
     });
@@ -47,8 +49,10 @@ describe('DV > Options > RangeAxisSteps', () => {
 
         expect(
             rangeAxisSteps(props)
-                .find(TextBaseOption)
+                .find(PositiveNumberBaseType)
                 .props().option.helperText
-        ).toEqual(`Tick steps may extend the chart beyond 'Range axis max'`);
+        ).toEqual(
+            'Number of axis tick steps, including the min and max. A value of 2 or lower will be ignored.'
+        );
     });
 });