Skip to content

Commit

Permalink
fix: disable lines and vertical axis options for multi axes (DHIS2-90…
Browse files Browse the repository at this point in the history
…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
  • Loading branch information
martinkrulltott authored Aug 7, 2020
1 parent 85b71f5 commit 7062fc5
Show file tree
Hide file tree
Showing 35 changed files with 361 additions and 360 deletions.
22 changes: 14 additions & 8 deletions packages/app/i18n/en.pot
Original file line number Diff line number Diff line change
Expand Up @@ -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 ""
Expand Down Expand Up @@ -746,15 +746,9 @@ msgstr ""
msgid "Display"
msgstr ""

msgid "Lines"
msgstr ""

msgid "Axes"
msgstr ""

msgid "Vertical (y) axis"
msgstr ""

msgid "Horizontal (x) axis"
msgstr ""

Expand All @@ -770,6 +764,12 @@ msgstr ""
msgid "Titles"
msgstr ""

msgid "Lines"
msgstr ""

msgid "Vertical (y) axis"
msgstr ""

msgid "Display totals"
msgstr ""

Expand All @@ -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 ""

Expand Down
2 changes: 1 addition & 1 deletion packages/app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ import {
sGetUiActiveModalDialog,
sGetUiParentGraphMap,
sGetUiType,
getAxisIdByDimensionId,
sGetAxisIdByDimensionId,
sGetDimensionIdsFromLayout,
} from '../../../reducers/ui'
import { sGetDimensions } from '../../../reducers/dimensions'
Expand Down Expand Up @@ -388,7 +388,7 @@ const mapStateToProps = state => ({
selectedItems: sGetUiItems(state),
type: sGetUiType(state),
getAxisIdByDimensionId: dimensionId =>
getAxisIdByDimensionId(state, dimensionId),
sGetAxisIdByDimensionId(state, dimensionId),
dimensionIdsInLayout: sGetDimensionIdsFromLayout(state),
})

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ const mapStateToProps = state => ({
state
),
getCurrentAxisId: dimensionId =>
fromReducers.fromUi.getAxisIdByDimensionId(state, dimensionId),
fromReducers.fromUi.sGetAxisIdByDimensionId(state, dimensionId),
})

const mapDispatchToProps = dispatch => ({
Expand Down
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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
Original file line number Diff line number Diff line change
Expand Up @@ -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}`}
>
Expand All @@ -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)
38 changes: 21 additions & 17 deletions packages/app/src/components/VisualizationOptions/Options/Legend.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -22,4 +23,8 @@ const RangeAxisLabel = () => (
/>
)

RangeAxisLabel.propTypes = {
disabled: PropTypes.bool,
}

export default RangeAxisLabel
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -24,4 +25,8 @@ const RegressionType = () => (
/>
)

RegressionType.propTypes = {
disabled: PropTypes.bool,
}

export default RegressionType
Loading

0 comments on commit 7062fc5

Please sign in to comment.