From 7062fc5a3d15175386158cd07ca799cbb9732a3f Mon Sep 17 00:00:00 2001 From: Martin Date: Fri, 7 Aug 2020 16:24:42 +0200 Subject: [PATCH] fix: disable lines and vertical axis options for multi axes (DHIS2-9010, 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 --- packages/app/i18n/en.pot | 22 +++++--- packages/app/package.json | 2 +- .../DimensionsPanel/Dialogs/DialogManager.js | 4 +- .../DimensionsPanel/DimensionsPanel.js | 2 +- .../VisualizationOptions/Options/AxisRange.js | 20 +++++--- .../VisualizationOptions/Options/BaseLine.js | 14 +++--- .../VisualizationOptions/Options/Legend.js | 38 +++++++------- .../Options/RangeAxisDecimals.js | 9 +++- .../Options/RangeAxisLabel.js | 9 +++- .../Options/RangeAxisMaxValue.js | 9 +++- .../Options/RangeAxisMinValue.js | 9 +++- .../Options/RangeAxisSteps.js | 9 +++- .../Options/RegressionType.js | 9 +++- .../Options/SelectBaseOption.js | 15 +++--- .../Options/TargetLine.js | 14 +++--- .../Options/TextBaseOption.js | 23 +++++---- .../VisualizationOptions.js | 47 +++++++++++++---- .../__tests__/TextBaseOption.spec.js | 4 +- .../__tests__/VisualizationOptions.spec.js | 7 +++ .../app/src/modules/options/areaConfig.js | 50 ++++++------------- packages/app/src/modules/options/barConfig.js | 50 ++++++------------- .../app/src/modules/options/columnConfig.js | 50 ++++++------------- packages/app/src/modules/options/config.js | 24 ++++----- .../app/src/modules/options/gaugeConfig.js | 20 ++++---- .../app/src/modules/options/lineConfig.js | 50 ++++++------------- packages/app/src/modules/options/pieConfig.js | 12 ++--- .../src/modules/options/pivotTableConfig.js | 26 +++++----- .../app/src/modules/options/sections/lines.js | 20 ++++++++ .../modules/options/sections/verticalAxis.js | 24 +++++++++ .../src/modules/options/singleValueConfig.js | 14 +++--- .../modules/options/stackedColumnConfig.js | 50 ++++++------------- .../src/modules/options/yearOverYearConfig.js | 50 ++++++------------- packages/app/src/reducers/ui.js | 5 +- packages/plugin/package.json | 2 +- yarn.lock | 8 +-- 35 files changed, 361 insertions(+), 360 deletions(-) create mode 100644 packages/app/src/modules/options/sections/lines.js create mode 100644 packages/app/src/modules/options/sections/verticalAxis.js diff --git a/packages/app/i18n/en.pot b/packages/app/i18n/en.pot index a4aedec998..7e5865aec0 100644 --- 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 index 6ca93a285e..f18158ead8 100644 --- 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 index 8ffac2741a..a6c6217d54 100644 --- 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 index b14fe5de9f..37b29058b1 100644 --- 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 index 1dd2a71be1..029732fcd0 100644 --- 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 }) => (
- + {'\u00A0\u2013\u00A0'} - +
- - {i18n.t('Values outside of the range will not be displayed')} - + {!disabled ? ( + + {i18n.t('Values outside of the range will not be displayed')} + + ) : null}
) +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 index 73994be18d..c5965a9eda 100644 --- 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 }) => (
onChange(checked)} dense + disabled={disabled} /> - {enabled ? ( + {checked && !disabled ? (
@@ -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 index ff732983ce..9e6ad79159 100644 --- 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 ? (
{!hideStyleOptions ? ( +
+
+ + + {i18n.t('Legend style')} + + +
+ +
+
+
+ ) : null} +
- - {i18n.t('Legend style')} + + {i18n.t('Legend type')}
- +
- ) : null} -
- - - {i18n.t('Legend type')} - - -
- -
-
+
) : null}
diff --git a/packages/app/src/components/VisualizationOptions/Options/RangeAxisDecimals.js b/packages/app/src/components/VisualizationOptions/Options/RangeAxisDecimals.js index 852d16548a..4b5f49b594 100644 --- a/packages/app/src/components/VisualizationOptions/Options/RangeAxisDecimals.js +++ b/packages/app/src/components/VisualizationOptions/Options/RangeAxisDecimals.js @@ -1,14 +1,15 @@ import React from 'react' - import i18n from '@dhis2/d2-i18n' +import PropTypes from 'prop-types' import TextBaseOption from './TextBaseOption' -const RangeAxisDecimals = () => ( +const RangeAxisDecimals = ({ disabled }) => ( ( /> ) +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 index a57a1817d2..74f05f23c0 100644 --- a/packages/app/src/components/VisualizationOptions/Options/RangeAxisLabel.js +++ b/packages/app/src/components/VisualizationOptions/Options/RangeAxisLabel.js @@ -1,6 +1,6 @@ import React from 'react' - import i18n from '@dhis2/d2-i18n' +import PropTypes from 'prop-types' import TextBaseOption from './TextBaseOption' import { options } from '../../../modules/options' @@ -8,11 +8,12 @@ import { options } from '../../../modules/options' const optionName = 'rangeAxisLabel' const defaultValue = options[optionName].defaultValue -const RangeAxisLabel = () => ( +const RangeAxisLabel = ({ disabled }) => ( ( /> ) +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 index 39ae073ed6..08eec0aa81 100644 --- a/packages/app/src/components/VisualizationOptions/Options/RangeAxisMaxValue.js +++ b/packages/app/src/components/VisualizationOptions/Options/RangeAxisMaxValue.js @@ -1,14 +1,15 @@ import React from 'react' - import i18n from '@dhis2/d2-i18n' +import PropTypes from 'prop-types' import TextBaseOption from './TextBaseOption' -const RangeAxisMaxValue = () => ( +const RangeAxisMaxValue = ({ disabled }) => ( ( /> ) +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 index 1d43ad22e8..d2ac196739 100644 --- a/packages/app/src/components/VisualizationOptions/Options/RangeAxisMinValue.js +++ b/packages/app/src/components/VisualizationOptions/Options/RangeAxisMinValue.js @@ -1,14 +1,15 @@ import React from 'react' - import i18n from '@dhis2/d2-i18n' +import PropTypes from 'prop-types' import TextBaseOption from './TextBaseOption' -const RangeAxisMinValue = () => ( +const RangeAxisMinValue = ({ disabled }) => ( ( /> ) +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 index 11f5e670d5..7bd038dcfa 100644 --- a/packages/app/src/components/VisualizationOptions/Options/RangeAxisSteps.js +++ b/packages/app/src/components/VisualizationOptions/Options/RangeAxisSteps.js @@ -1,10 +1,10 @@ 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 }) => ( ( 'The number of axis steps between the min and max values' )} label={i18n.t('Steps')} + disabled={disabled} placeholder={i18n.t('Auto')} option={{ name: 'rangeAxisSteps', @@ -19,4 +20,8 @@ export const 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 index bea270a0c0..c9e63aa8e2 100644 --- a/packages/app/src/components/VisualizationOptions/Options/RegressionType.js +++ b/packages/app/src/components/VisualizationOptions/Options/RegressionType.js @@ -1,6 +1,6 @@ import React from 'react' - import i18n from '@dhis2/d2-i18n' +import PropTypes from 'prop-types' import SelectBaseOption from './SelectBaseOption' import { options } from '../../../modules/options' @@ -8,10 +8,11 @@ import { options } from '../../../modules/options' const optionName = 'regressionType' const defaultValue = options[optionName].defaultValue -const RegressionType = () => ( +const RegressionType = ({ disabled }) => ( ( /> ) +RegressionType.propTypes = { + disabled: PropTypes.bool, +} + export default RegressionType diff --git a/packages/app/src/components/VisualizationOptions/Options/SelectBaseOption.js b/packages/app/src/components/VisualizationOptions/Options/SelectBaseOption.js index ed775feb3a..49ff11a49f 100644 --- a/packages/app/src/components/VisualizationOptions/Options/SelectBaseOption.js +++ b/packages/app/src/components/VisualizationOptions/Options/SelectBaseOption.js @@ -19,30 +19,30 @@ export const SelectBaseOption = ({ toggleable, value, onChange, + disabled, }) => { const defaultValue = option.defaultValue - const [enabled, setEnabled] = useState(value !== defaultValue) + const [checked, setChecked] = useState(value !== defaultValue) const selected = option.items.find(item => item.value === value)?.value const onToggle = checked => { - setEnabled(checked) + setChecked(checked) onChange(checked ? option.items[0].value : defaultValue) } return ( -
+
{toggleable ? ( onToggle(checked)} dense + disabled={disabled} /> ) : null} - {!toggleable || enabled ? ( + {(!toggleable || checked) && !disabled ? (
( +export const TargetLine = ({ checked, onChange, disabled }) => (
onChange(checked)} dense + disabled={disabled} /> - {enabled ? ( + {checked && !disabled ? (
@@ -42,16 +43,17 @@ export const TargetLine = ({ enabled, onChange }) => ( ) TargetLine.propTypes = { - enabled: PropTypes.bool.isRequired, + checked: PropTypes.bool.isRequired, onChange: PropTypes.func.isRequired, + disabled: PropTypes.bool, } const mapStateToProps = state => ({ - enabled: sGetUiOptions(state).targetLine, + checked: sGetUiOptions(state).targetLine, }) const mapDispatchToProps = dispatch => ({ - onChange: enabled => dispatch(acSetUiOptions({ targetLine: enabled })), + onChange: checked => dispatch(acSetUiOptions({ targetLine: checked })), }) export default connect(mapStateToProps, mapDispatchToProps)(TargetLine) diff --git a/packages/app/src/components/VisualizationOptions/Options/TextBaseOption.js b/packages/app/src/components/VisualizationOptions/Options/TextBaseOption.js index 83134d3e67..ae2cc89023 100644 --- a/packages/app/src/components/VisualizationOptions/Options/TextBaseOption.js +++ b/packages/app/src/components/VisualizationOptions/Options/TextBaseOption.js @@ -23,24 +23,22 @@ export const TextBaseOption = ({ onChange, onToggle, toggleable, - enabled, + checked, inline, + disabled, }) => ( -
+
{toggleable ? ( onToggle(checked)} dense + disabled={disabled} /> ) : null} - {!toggleable || enabled ? ( + {!toggleable || checked ? (
) : ( @@ -64,10 +63,11 @@ export const TextBaseOption = ({ onChange={({ value }) => onChange(value)} name={option.name} value={value} - helpText={helpText} + helpText={disabled ? '' : helpText} placeholder={placeholder} inputWidth={width} dense + disabled={disabled} /> )}
@@ -76,7 +76,8 @@ export const TextBaseOption = ({ ) TextBaseOption.propTypes = { - enabled: PropTypes.bool, + checked: PropTypes.bool, + disabled: PropTypes.bool, helpText: PropTypes.string, inline: PropTypes.bool, label: PropTypes.string, @@ -92,7 +93,7 @@ TextBaseOption.propTypes = { const mapStateToProps = (state, ownProps) => ({ value: sGetUiOptions(state)[ownProps.option.name] || '', - enabled: sGetUiOptions(state)[ownProps.option.name] !== undefined, + checked: sGetUiOptions(state)[ownProps.option.name] !== undefined, }) const mapDispatchToProps = (dispatch, ownProps) => ({ diff --git a/packages/app/src/components/VisualizationOptions/VisualizationOptions.js b/packages/app/src/components/VisualizationOptions/VisualizationOptions.js index 81ddbf5163..9a56430ab3 100755 --- a/packages/app/src/components/VisualizationOptions/VisualizationOptions.js +++ b/packages/app/src/components/VisualizationOptions/VisualizationOptions.js @@ -2,7 +2,7 @@ import React, { Component, Fragment } from 'react' import PropTypes from 'prop-types' import { connect } from 'react-redux' -import { FieldSet, Legend, TabBar, Tab } from '@dhis2/ui' +import { FieldSet, Legend, TabBar, Tab, Help } from '@dhis2/ui' import { tabSection, @@ -15,8 +15,17 @@ import { tabBar, } from './styles/VisualizationOptions.style.js' -import { sGetUiType } from '../../reducers/ui' +import { + sGetUiType, + sGetUiOptions, + sGetDimensionItemsByAxis, +} from '../../reducers/ui' import { getOptionsByType } from '../../modules/options/config' +import { + isDualAxisType, + hasCustomAxes, + AXIS_ID_COLUMNS, +} from '@dhis2/analytics' export class VisualizationOptions extends Component { state = { activeTabKey: undefined } @@ -26,32 +35,46 @@ export class VisualizationOptions extends Component { } generateTabContent = sections => - sections.map(({ key, getLabel, content }) => ( + sections.map(({ key, label, content, helpText }) => (
- {getLabel ? ( + {label ? ( - {getLabel()} + {label} ) : null} {content} + {helpText ? ( + + + {helpText} + + + ) : null}
)) generateTabs = tabs => - tabs.map(({ key, getLabel, content }) => ({ + tabs.map(({ key, label, content }) => ({ key, - label: getLabel(), + label, content: this.generateTabContent(content), })) render() { - const { visualizationType } = this.props - - const optionsConfig = getOptionsByType(visualizationType) + const { visualizationType, columnDimensionItems, series } = this.props + const filteredSeries = series.filter(seriesItem => + columnDimensionItems.some( + layoutItem => layoutItem === seriesItem.dimensionItem + ) + ) + const optionsConfig = getOptionsByType( + visualizationType, + isDualAxisType(visualizationType) && hasCustomAxes(filteredSeries) + ) const tabs = this.generateTabs(optionsConfig) @@ -94,10 +117,14 @@ export class VisualizationOptions extends Component { VisualizationOptions.propTypes = { visualizationType: PropTypes.string.isRequired, + columnDimensionItems: PropTypes.array, + series: PropTypes.array, } const mapStateToProps = state => ({ visualizationType: sGetUiType(state), + columnDimensionItems: sGetDimensionItemsByAxis(state, AXIS_ID_COLUMNS), + series: sGetUiOptions(state).series, }) export default connect(mapStateToProps)(VisualizationOptions) diff --git a/packages/app/src/components/VisualizationOptions/__tests__/TextBaseOption.spec.js b/packages/app/src/components/VisualizationOptions/__tests__/TextBaseOption.spec.js index 387ad7cac2..0c8445653c 100644 --- a/packages/app/src/components/VisualizationOptions/__tests__/TextBaseOption.spec.js +++ b/packages/app/src/components/VisualizationOptions/__tests__/TextBaseOption.spec.js @@ -134,8 +134,8 @@ describe('DV > Options > TextBaseOption', () => { expect(textBaseOption(props).find(InputField)).toHaveLength(0) }) - it('does render a when the checkbox is enabled', () => { - props.enabled = true + it('does render a when the checkbox is checked', () => { + props.checked = true const text = textBaseOption(props) expect(text.find(InputField)).toHaveLength(1) diff --git a/packages/app/src/components/VisualizationOptions/__tests__/VisualizationOptions.spec.js b/packages/app/src/components/VisualizationOptions/__tests__/VisualizationOptions.spec.js index 2a579ce22d..d685367044 100644 --- a/packages/app/src/components/VisualizationOptions/__tests__/VisualizationOptions.spec.js +++ b/packages/app/src/components/VisualizationOptions/__tests__/VisualizationOptions.spec.js @@ -23,6 +23,13 @@ describe('VisualizationOptions', () => { beforeEach(() => { props = { visualizationType: 'COLUMN', + columnDimensionItems: ['aaa', 'bbb'], + series: [ + { + dimensionItem: 'aaa', + axis: 0, + }, + ], } shallowVisualizationOptions = undefined diff --git a/packages/app/src/modules/options/areaConfig.js b/packages/app/src/modules/options/areaConfig.js index bfdc8edbcb..d163a04ad9 100644 --- a/packages/app/src/modules/options/areaConfig.js +++ b/packages/app/src/modules/options/areaConfig.js @@ -6,30 +6,25 @@ import CumulativeValues from '../../components/VisualizationOptions/Options/Cumu import PercentStackedValues from '../../components/VisualizationOptions/Options/PercentStackedValues' import ShowData from '../../components/VisualizationOptions/Options/ShowData' import HideEmptyRowItems from '../../components/VisualizationOptions/Options/HideEmptyRowItems' -import RegressionType from '../../components/VisualizationOptions/Options/RegressionType' -import TargetLine from '../../components/VisualizationOptions/Options/TargetLine' -import BaseLine from '../../components/VisualizationOptions/Options/BaseLine' import SortOrder from '../../components/VisualizationOptions/Options/SortOrder' import AggregationType from '../../components/VisualizationOptions/Options/AggregationType' -import AxisRange from '../../components/VisualizationOptions/Options/AxisRange' -import RangeAxisSteps from '../../components/VisualizationOptions/Options/RangeAxisSteps' -import RangeAxisDecimals from '../../components/VisualizationOptions/Options/RangeAxisDecimals' -import RangeAxisLabel from '../../components/VisualizationOptions/Options/RangeAxisLabel' import DomainAxisLabel from '../../components/VisualizationOptions/Options/DomainAxisLabel' import HideLegend from '../../components/VisualizationOptions/Options/HideLegend' import HideTitle from '../../components/VisualizationOptions/Options/HideTitle' import HideSubtitle from '../../components/VisualizationOptions/Options/HideSubtitle' import CompletedOnly from '../../components/VisualizationOptions/Options/CompletedOnly' import SeriesTable from '../../components/VisualizationOptions/Options/SeriesTable' +import getLinesSection from './sections/lines' +import getVerticalAxisSection from './sections/verticalAxis' -export default [ +export default hasCustomAxes => [ { key: 'data-tab', - getLabel: () => i18n.t('Data'), + label: i18n.t('Data'), content: [ { key: 'data-display', - getLabel: () => i18n.t('Display'), + label: i18n.t('Display'), content: React.Children.toArray([ , , @@ -37,18 +32,10 @@ export default [ , ]), }, - { - key: 'data-lines', - getLabel: () => i18n.t('Lines'), - content: React.Children.toArray([ - , - , - , - ]), - }, + getLinesSection(hasCustomAxes), { key: 'data-advanced', - getLabel: () => i18n.t('Advanced'), + label: i18n.t('Advanced'), content: React.Children.toArray([ , , @@ -58,28 +45,19 @@ export default [ }, { key: 'axes-tab', - getLabel: () => i18n.t('Axes'), + label: i18n.t('Axes'), content: [ - { - key: 'axes-vertical-axis', - getLabel: () => i18n.t('Vertical (y) axis'), - content: React.Children.toArray([ - , - , - , - , - ]), - }, + getVerticalAxisSection(hasCustomAxes), { key: 'axes-horizontal-axis', - getLabel: () => i18n.t('Horizontal (x) axis'), + label: i18n.t('Horizontal (x) axis'), content: React.Children.toArray([]), }, ], }, { key: 'series-tab', - getLabel: () => i18n.t('Series'), + label: i18n.t('Series'), content: [ { key: 'series-table', @@ -89,16 +67,16 @@ export default [ }, { key: 'style-tab', - getLabel: () => i18n.t('Style'), + label: i18n.t('Style'), content: [ { key: 'style-chart-style', - getLabel: () => i18n.t('Chart style'), + label: i18n.t('Chart style'), content: React.Children.toArray([, ]), }, { key: 'style-titles', - getLabel: () => i18n.t('Titles'), + label: i18n.t('Titles'), content: React.Children.toArray([ , , diff --git a/packages/app/src/modules/options/barConfig.js b/packages/app/src/modules/options/barConfig.js index 0202264c22..0466c3f543 100644 --- a/packages/app/src/modules/options/barConfig.js +++ b/packages/app/src/modules/options/barConfig.js @@ -5,15 +5,8 @@ import i18n from '@dhis2/d2-i18n' import CumulativeValues from '../../components/VisualizationOptions/Options/CumulativeValues' import ShowData from '../../components/VisualizationOptions/Options/ShowData' import HideEmptyRowItems from '../../components/VisualizationOptions/Options/HideEmptyRowItems' -import RegressionType from '../../components/VisualizationOptions/Options/RegressionType' -import TargetLine from '../../components/VisualizationOptions/Options/TargetLine' -import BaseLine from '../../components/VisualizationOptions/Options/BaseLine' import SortOrder from '../../components/VisualizationOptions/Options/SortOrder' import AggregationType from '../../components/VisualizationOptions/Options/AggregationType' -import AxisRange from '../../components/VisualizationOptions/Options/AxisRange' -import RangeAxisSteps from '../../components/VisualizationOptions/Options/RangeAxisSteps' -import RangeAxisDecimals from '../../components/VisualizationOptions/Options/RangeAxisDecimals' -import RangeAxisLabel from '../../components/VisualizationOptions/Options/RangeAxisLabel' import DomainAxisLabel from '../../components/VisualizationOptions/Options/DomainAxisLabel' import NoSpaceBetweenColumns from '../../components/VisualizationOptions/Options/NoSpaceBetweenColumns' import HideLegend from '../../components/VisualizationOptions/Options/HideLegend' @@ -21,33 +14,27 @@ import HideTitle from '../../components/VisualizationOptions/Options/HideTitle' import HideSubtitle from '../../components/VisualizationOptions/Options/HideSubtitle' import CompletedOnly from '../../components/VisualizationOptions/Options/CompletedOnly' import SeriesTable from '../../components/VisualizationOptions/Options/SeriesTable' +import getLinesSection from './sections/lines' +import getVerticalAxisSection from './sections/verticalAxis' -export default [ +export default hasCustomAxes => [ { key: 'data-tab', - getLabel: () => i18n.t('Data'), + label: i18n.t('Data'), content: [ { key: 'data-display', - getLabel: () => i18n.t('Display'), + label: i18n.t('Display'), content: React.Children.toArray([ , , , ]), }, - { - key: 'data-lines', - getLabel: () => i18n.t('Lines'), - content: React.Children.toArray([ - , - , - , - ]), - }, + getLinesSection(hasCustomAxes), { key: 'data-advanced', - getLabel: () => i18n.t('Advanced'), + label: i18n.t('Advanced'), content: React.Children.toArray([ , , @@ -57,28 +44,19 @@ export default [ }, { key: 'axes-tab', - getLabel: () => i18n.t('Axes'), + label: i18n.t('Axes'), content: [ - { - key: 'axes-vertical-axis', - getLabel: () => i18n.t('Vertical (y) axis'), - content: React.Children.toArray([ - , - , - , - , - ]), - }, + getVerticalAxisSection(hasCustomAxes), { key: 'axes-horizontal-axis', - getLabel: () => i18n.t('Horizontal (x) axis'), + label: i18n.t('Horizontal (x) axis'), content: React.Children.toArray([]), }, ], }, { key: 'series-tab', - getLabel: () => i18n.t('Series'), + label: i18n.t('Series'), content: [ { key: 'series-table', @@ -90,11 +68,11 @@ export default [ }, { key: 'style-tab', - getLabel: () => i18n.t('Style'), + label: i18n.t('Style'), content: [ { key: 'style-chart-style', - getLabel: () => i18n.t('Chart style'), + label: i18n.t('Chart style'), content: React.Children.toArray([ , , @@ -104,7 +82,7 @@ export default [ }, { key: 'style-titles', - getLabel: () => i18n.t('Titles'), + label: i18n.t('Titles'), content: React.Children.toArray([ , , diff --git a/packages/app/src/modules/options/columnConfig.js b/packages/app/src/modules/options/columnConfig.js index adc2c8b92c..bd6b2ce7bb 100644 --- a/packages/app/src/modules/options/columnConfig.js +++ b/packages/app/src/modules/options/columnConfig.js @@ -5,15 +5,8 @@ import i18n from '@dhis2/d2-i18n' import CumulativeValues from '../../components/VisualizationOptions/Options/CumulativeValues' import ShowData from '../../components/VisualizationOptions/Options/ShowData' import HideEmptyRowItems from '../../components/VisualizationOptions/Options/HideEmptyRowItems' -import RegressionType from '../../components/VisualizationOptions/Options/RegressionType' -import TargetLine from '../../components/VisualizationOptions/Options/TargetLine' -import BaseLine from '../../components/VisualizationOptions/Options/BaseLine' import SortOrder from '../../components/VisualizationOptions/Options/SortOrder' import AggregationType from '../../components/VisualizationOptions/Options/AggregationType' -import AxisRange from '../../components/VisualizationOptions/Options/AxisRange' -import RangeAxisSteps from '../../components/VisualizationOptions/Options/RangeAxisSteps' -import RangeAxisDecimals from '../../components/VisualizationOptions/Options/RangeAxisDecimals' -import RangeAxisLabel from '../../components/VisualizationOptions/Options/RangeAxisLabel' import DomainAxisLabel from '../../components/VisualizationOptions/Options/DomainAxisLabel' import NoSpaceBetweenColumns from '../../components/VisualizationOptions/Options/NoSpaceBetweenColumns' import HideLegend from '../../components/VisualizationOptions/Options/HideLegend' @@ -21,33 +14,27 @@ import HideTitle from '../../components/VisualizationOptions/Options/HideTitle' import HideSubtitle from '../../components/VisualizationOptions/Options/HideSubtitle' import CompletedOnly from '../../components/VisualizationOptions/Options/CompletedOnly' import SeriesTable from '../../components/VisualizationOptions/Options/SeriesTable' +import getLinesSection from './sections/lines' +import getVerticalAxisSection from './sections/verticalAxis' -export default [ +export default hasCustomAxes => [ { key: 'data-tab', - getLabel: () => i18n.t('Data'), + label: i18n.t('Data'), content: [ { key: 'data-display', - getLabel: () => i18n.t('Display'), + label: i18n.t('Display'), content: React.Children.toArray([ , , , ]), }, - { - key: 'data-lines', - getLabel: () => i18n.t('Lines'), - content: React.Children.toArray([ - , - , - , - ]), - }, + getLinesSection(hasCustomAxes), { key: 'data-advanced', - getLabel: () => i18n.t('Advanced'), + label: i18n.t('Advanced'), content: React.Children.toArray([ , , @@ -57,28 +44,19 @@ export default [ }, { key: 'axes-tab', - getLabel: () => i18n.t('Axes'), + label: i18n.t('Axes'), content: [ - { - key: 'axes-vertical-axis', - getLabel: () => i18n.t('Vertical (y) axis'), - content: React.Children.toArray([ - , - , - , - , - ]), - }, + getVerticalAxisSection(hasCustomAxes), { key: 'axes-horizontal-axis', - getLabel: () => i18n.t('Horizontal (x) axis'), + label: i18n.t('Horizontal (x) axis'), content: React.Children.toArray([]), }, ], }, { key: 'series-tab', - getLabel: () => i18n.t('Series'), + label: i18n.t('Series'), content: [ { key: 'series-table', @@ -93,11 +71,11 @@ export default [ }, { key: 'style-tab', - getLabel: () => i18n.t('Style'), + label: i18n.t('Style'), content: [ { key: 'style-chart-style', - getLabel: () => i18n.t('Chart style'), + label: i18n.t('Chart style'), content: React.Children.toArray([ , , @@ -107,7 +85,7 @@ export default [ }, { key: 'style-titles', - getLabel: () => i18n.t('Titles'), + label: i18n.t('Titles'), content: React.Children.toArray([ , , diff --git a/packages/app/src/modules/options/config.js b/packages/app/src/modules/options/config.js index e9c66ea105..447071ffae 100644 --- a/packages/app/src/modules/options/config.js +++ b/packages/app/src/modules/options/config.js @@ -25,33 +25,33 @@ import singleValueConfig from './singleValueConfig' import barConfig from './barConfig' import yearOverYearConfig from './yearOverYearConfig' -export const getOptionsByType = type => { +export const getOptionsByType = (type, hasCustomAxes) => { switch (type) { case VIS_TYPE_COLUMN: - return columnConfig + return columnConfig(hasCustomAxes) case VIS_TYPE_BAR: - return barConfig + return barConfig(hasCustomAxes) case VIS_TYPE_YEAR_OVER_YEAR_LINE: case VIS_TYPE_YEAR_OVER_YEAR_COLUMN: - return yearOverYearConfig + return yearOverYearConfig(hasCustomAxes) case VIS_TYPE_STACKED_COLUMN: case VIS_TYPE_STACKED_BAR: - return stackedColumnConfig + return stackedColumnConfig(hasCustomAxes) case VIS_TYPE_LINE: case VIS_TYPE_RADAR: - return lineConfig + return lineConfig(hasCustomAxes) case VIS_TYPE_AREA: - return areaConfig + return areaConfig(hasCustomAxes) case VIS_TYPE_GAUGE: - return gaugeConfig + return gaugeConfig(hasCustomAxes) case VIS_TYPE_PIE: - return pieConfig + return pieConfig(hasCustomAxes) case VIS_TYPE_SINGLE_VALUE: - return singleValueConfig + return singleValueConfig(hasCustomAxes) case VIS_TYPE_PIVOT_TABLE: - return pivotTableConfig + return pivotTableConfig(hasCustomAxes) default: // return all the options - return stackedColumnConfig + return stackedColumnConfig(hasCustomAxes) } } diff --git a/packages/app/src/modules/options/gaugeConfig.js b/packages/app/src/modules/options/gaugeConfig.js index 8917356486..6901c45b7b 100644 --- a/packages/app/src/modules/options/gaugeConfig.js +++ b/packages/app/src/modules/options/gaugeConfig.js @@ -12,19 +12,19 @@ import Legend from '../../components/VisualizationOptions/Options/Legend' import CompletedOnly from '../../components/VisualizationOptions/Options/CompletedOnly' import SeriesTable from '../../components/VisualizationOptions/Options/SeriesTable' -export default [ +export default () => [ { key: 'data-tab', - getLabel: () => i18n.t('Data'), + label: i18n.t('Data'), content: [ { key: 'data-lines', - getLabel: () => i18n.t('Lines'), + label: i18n.t('Lines'), content: React.Children.toArray([, ]), }, { key: 'data-advanced', - getLabel: () => i18n.t('Advanced'), + label: i18n.t('Advanced'), content: React.Children.toArray([ , , @@ -34,7 +34,7 @@ export default [ }, { key: 'legend-tab', - getLabel: () => i18n.t('Legend'), + label: i18n.t('Legend'), content: [ { key: 'legend-section-1', @@ -44,18 +44,18 @@ export default [ }, { key: 'axes-tab', - getLabel: () => i18n.t('Axes'), + label: i18n.t('Axes'), content: [ { key: 'axes-vertical-axis', - getLabel: () => i18n.t('Vertical (y) axis'), + label: i18n.t('Vertical (y) axis'), content: React.Children.toArray([]), }, ], }, { key: 'series-tab', - getLabel: () => i18n.t('Series'), + label: i18n.t('Series'), content: [ { key: 'series-table', @@ -65,11 +65,11 @@ export default [ }, { key: 'style-tab', - getLabel: () => i18n.t('Style'), + label: i18n.t('Style'), content: [ { key: 'style-titles', - getLabel: () => i18n.t('Titles'), + label: i18n.t('Titles'), content: React.Children.toArray([ , , diff --git a/packages/app/src/modules/options/lineConfig.js b/packages/app/src/modules/options/lineConfig.js index 2f3cb91850..88782cd76f 100644 --- a/packages/app/src/modules/options/lineConfig.js +++ b/packages/app/src/modules/options/lineConfig.js @@ -5,48 +5,35 @@ import i18n from '@dhis2/d2-i18n' import CumulativeValues from '../../components/VisualizationOptions/Options/CumulativeValues' import ShowData from '../../components/VisualizationOptions/Options/ShowData' import HideEmptyRowItems from '../../components/VisualizationOptions/Options/HideEmptyRowItems' -import RegressionType from '../../components/VisualizationOptions/Options/RegressionType' -import TargetLine from '../../components/VisualizationOptions/Options/TargetLine' -import BaseLine from '../../components/VisualizationOptions/Options/BaseLine' import SortOrder from '../../components/VisualizationOptions/Options/SortOrder' import AggregationType from '../../components/VisualizationOptions/Options/AggregationType' -import AxisRange from '../../components/VisualizationOptions/Options/AxisRange' -import RangeAxisSteps from '../../components/VisualizationOptions/Options/RangeAxisSteps' -import RangeAxisDecimals from '../../components/VisualizationOptions/Options/RangeAxisDecimals' -import RangeAxisLabel from '../../components/VisualizationOptions/Options/RangeAxisLabel' import DomainAxisLabel from '../../components/VisualizationOptions/Options/DomainAxisLabel' import HideLegend from '../../components/VisualizationOptions/Options/HideLegend' import HideTitle from '../../components/VisualizationOptions/Options/HideTitle' import HideSubtitle from '../../components/VisualizationOptions/Options/HideSubtitle' import CompletedOnly from '../../components/VisualizationOptions/Options/CompletedOnly' import SeriesTable from '../../components/VisualizationOptions/Options/SeriesTable' +import getLinesSection from './sections/lines' +import getVerticalAxisSection from './sections/verticalAxis' -export default [ +export default hasCustomAxes => [ { key: 'data-tab', - getLabel: () => i18n.t('Data'), + label: i18n.t('Data'), content: [ { key: 'data-display', - getLabel: () => i18n.t('Display'), + label: i18n.t('Display'), content: React.Children.toArray([ , , , ]), }, - { - key: 'data-lines', - getLabel: () => i18n.t('Lines'), - content: React.Children.toArray([ - , - , - , - ]), - }, + getLinesSection(hasCustomAxes), { key: 'data-advanced', - getLabel: () => i18n.t('Advanced'), + label: i18n.t('Advanced'), content: React.Children.toArray([ , , @@ -56,28 +43,19 @@ export default [ }, { key: 'axes-tab', - getLabel: () => i18n.t('Axes'), + label: i18n.t('Axes'), content: [ - { - key: 'axes-vertical-axis', - getLabel: () => i18n.t('Vertical (y) axis'), - content: React.Children.toArray([ - , - , - , - , - ]), - }, + getVerticalAxisSection(hasCustomAxes), { key: 'axes-horizontal-axis', - getLabel: () => i18n.t('Horizontal (x) axis'), + label: i18n.t('Horizontal (x) axis'), content: React.Children.toArray([]), }, ], }, { key: 'series-tab', - getLabel: () => i18n.t('Series'), + label: i18n.t('Series'), content: [ { key: 'series-table', @@ -92,16 +70,16 @@ export default [ }, { key: 'style-tab', - getLabel: () => i18n.t('Style'), + label: i18n.t('Style'), content: [ { key: 'style-chart-style', - getLabel: () => i18n.t('Chart style'), + label: i18n.t('Chart style'), content: React.Children.toArray([, ]), }, { key: 'style-titles', - getLabel: () => i18n.t('Titles'), + label: i18n.t('Titles'), content: React.Children.toArray([ , , diff --git a/packages/app/src/modules/options/pieConfig.js b/packages/app/src/modules/options/pieConfig.js index dcbf0aa4c3..807c0822cb 100644 --- a/packages/app/src/modules/options/pieConfig.js +++ b/packages/app/src/modules/options/pieConfig.js @@ -8,14 +8,14 @@ import HideSubtitle from '../../components/VisualizationOptions/Options/HideSubt import CompletedOnly from '../../components/VisualizationOptions/Options/CompletedOnly' import SeriesTable from '../../components/VisualizationOptions/Options/SeriesTable' -export default [ +export default () => [ { key: 'data-tab', - getLabel: () => i18n.t('Data'), + label: i18n.t('Data'), content: [ { key: 'data-advanced', - getLabel: () => i18n.t('Advanced'), + label: i18n.t('Advanced'), content: React.Children.toArray([ , , @@ -25,7 +25,7 @@ export default [ }, { key: 'series-tab', - getLabel: () => i18n.t('Series'), + label: i18n.t('Series'), content: [ { key: 'series-table', @@ -35,11 +35,11 @@ export default [ }, { key: 'style-tab', - getLabel: () => i18n.t('Style'), + label: i18n.t('Style'), content: [ { key: 'style-titles', - getLabel: () => i18n.t('Titles'), + label: i18n.t('Titles'), content: React.Children.toArray([ , , diff --git a/packages/app/src/modules/options/pivotTableConfig.js b/packages/app/src/modules/options/pivotTableConfig.js index 5e96d7f8d7..b823a14ef3 100644 --- a/packages/app/src/modules/options/pivotTableConfig.js +++ b/packages/app/src/modules/options/pivotTableConfig.js @@ -30,10 +30,10 @@ import ShowHierarchy from '../../components/VisualizationOptions/Options/ShowHie import CompletedOnly from '../../components/VisualizationOptions/Options/CompletedOnly' import SeriesTable from '../../components/VisualizationOptions/Options/SeriesTable' -export default [ +export default () => [ { key: 'data-tab', - getLabel: () => i18n.t('Data'), + label: i18n.t('Data'), content: [ { key: 'data-section-1', @@ -44,7 +44,7 @@ export default [ }, { key: 'data-display-totals', - getLabel: () => i18n.t('Display totals'), + label: i18n.t('Display totals'), content: React.Children.toArray([ , , @@ -54,7 +54,7 @@ export default [ }, { key: 'data-display-empty-data', - getLabel: () => i18n.t('Display empty data'), + label: i18n.t('Display empty data'), content: React.Children.toArray([ , , @@ -62,7 +62,7 @@ export default [ }, { key: 'data-advanced', - getLabel: () => i18n.t('Advanced'), + label: i18n.t('Advanced'), content: React.Children.toArray([ , , @@ -74,7 +74,7 @@ export default [ }, { key: 'legend-tab', - getLabel: () => i18n.t('Legend'), + label: i18n.t('Legend'), content: [ { key: 'legend-section-1', @@ -84,7 +84,7 @@ export default [ }, { key: 'series-tab', - getLabel: () => i18n.t('Series'), + label: i18n.t('Series'), content: [ { key: 'series-table', @@ -94,7 +94,7 @@ export default [ }, { key: 'style-tab', - getLabel: () => i18n.t('Style'), + label: i18n.t('Style'), content: [ { key: 'style-section-1', @@ -107,31 +107,31 @@ export default [ }, { key: 'style-section-2', - getLabel: () => i18n.t('Labels'), + label: i18n.t('Labels'), content: React.Children.toArray([]), }, ], }, { key: 'limitValues-tab', - getLabel: () => i18n.t('Limit values'), + label: i18n.t('Limit values'), content: [ /* { key: 'limitValues-limit-numbers', - getLabel: () => i18n.t('Limit number of values'), + label: i18n.t('Limit number of values'), content: [], },*/ { key: 'limitValues-limit-min-max', - getLabel: () => i18n.t('Limit minimum/maximum values'), + label: i18n.t('Limit minimum/maximum values'), content: React.Children.toArray([]), }, ], }, { key: 'parameters-tab', - getLabel: () => i18n.t('Parameters'), + label: i18n.t('Parameters'), content: [ { key: 'parameters-section-1', diff --git a/packages/app/src/modules/options/sections/lines.js b/packages/app/src/modules/options/sections/lines.js new file mode 100644 index 0000000000..f79aee97da --- /dev/null +++ b/packages/app/src/modules/options/sections/lines.js @@ -0,0 +1,20 @@ +/* eslint-disable react/jsx-key */ +import React from 'react' +import i18n from '@dhis2/d2-i18n' + +import RegressionType from '../../../components/VisualizationOptions/Options/RegressionType' +import TargetLine from '../../../components/VisualizationOptions/Options/TargetLine' +import BaseLine from '../../../components/VisualizationOptions/Options/BaseLine' + +export default hasCustomAxes => ({ + key: 'data-lines', + label: i18n.t('Lines'), + helpText: hasCustomAxes + ? i18n.t('Lines are not supported yet when using multiple axes') + : null, + content: React.Children.toArray([ + , + , + , + ]), +}) diff --git a/packages/app/src/modules/options/sections/verticalAxis.js b/packages/app/src/modules/options/sections/verticalAxis.js new file mode 100644 index 0000000000..66d0fdccaa --- /dev/null +++ b/packages/app/src/modules/options/sections/verticalAxis.js @@ -0,0 +1,24 @@ +/* eslint-disable react/jsx-key */ +import React from 'react' +import i18n from '@dhis2/d2-i18n' + +import RangeAxisLabel from '../../../components/VisualizationOptions/Options/RangeAxisLabel' +import AxisRange from '../../../components/VisualizationOptions/Options/AxisRange' +import RangeAxisSteps from '../../../components/VisualizationOptions/Options/RangeAxisSteps' +import RangeAxisDecimals from '../../../components/VisualizationOptions/Options/RangeAxisDecimals' + +export default hasCustomAxes => ({ + key: 'axes-vertical-axis', + label: i18n.t('Vertical (y) axis'), + helpText: hasCustomAxes + ? i18n.t( + 'Vertical axis options are not supported yet when using multiple axes' + ) + : null, + content: React.Children.toArray([ + , + , + , + , + ]), +}) diff --git a/packages/app/src/modules/options/singleValueConfig.js b/packages/app/src/modules/options/singleValueConfig.js index 466f67dacd..ebde8222b5 100644 --- a/packages/app/src/modules/options/singleValueConfig.js +++ b/packages/app/src/modules/options/singleValueConfig.js @@ -9,14 +9,14 @@ import Legend from '../../components/VisualizationOptions/Options/Legend' import CompletedOnly from '../../components/VisualizationOptions/Options/CompletedOnly' import SeriesTable from '../../components/VisualizationOptions/Options/SeriesTable' -export default [ +export default () => [ { key: 'data-tab', - getLabel: () => i18n.t('Data'), + label: i18n.t('Data'), content: [ { key: 'data-advanced', - getLabel: () => i18n.t('Advanced'), + label: i18n.t('Advanced'), content: React.Children.toArray([ , , @@ -26,7 +26,7 @@ export default [ }, { key: 'legend-tab', - getLabel: () => i18n.t('Legend'), + label: i18n.t('Legend'), content: [ { key: 'legend-section-1', @@ -38,7 +38,7 @@ export default [ }, { key: 'series-tab', - getLabel: () => i18n.t('Series'), + label: i18n.t('Series'), content: [ { key: 'series-table', @@ -48,11 +48,11 @@ export default [ }, { key: 'style-tab', - getLabel: () => i18n.t('Style'), + label: i18n.t('Style'), content: [ { key: 'style-titles', - getLabel: () => i18n.t('Titles'), + label: i18n.t('Titles'), content: React.Children.toArray([ , , diff --git a/packages/app/src/modules/options/stackedColumnConfig.js b/packages/app/src/modules/options/stackedColumnConfig.js index 5d9e0b7295..be76e5611e 100644 --- a/packages/app/src/modules/options/stackedColumnConfig.js +++ b/packages/app/src/modules/options/stackedColumnConfig.js @@ -6,15 +6,8 @@ import CumulativeValues from '../../components/VisualizationOptions/Options/Cumu import PercentStackedValues from '../../components/VisualizationOptions/Options/PercentStackedValues' import ShowData from '../../components/VisualizationOptions/Options/ShowData' import HideEmptyRowItems from '../../components/VisualizationOptions/Options/HideEmptyRowItems' -import RegressionType from '../../components/VisualizationOptions/Options/RegressionType' -import TargetLine from '../../components/VisualizationOptions/Options/TargetLine' -import BaseLine from '../../components/VisualizationOptions/Options/BaseLine' import SortOrder from '../../components/VisualizationOptions/Options/SortOrder' import AggregationType from '../../components/VisualizationOptions/Options/AggregationType' -import AxisRange from '../../components/VisualizationOptions/Options/AxisRange' -import RangeAxisSteps from '../../components/VisualizationOptions/Options/RangeAxisSteps' -import RangeAxisDecimals from '../../components/VisualizationOptions/Options/RangeAxisDecimals' -import RangeAxisLabel from '../../components/VisualizationOptions/Options/RangeAxisLabel' import DomainAxisLabel from '../../components/VisualizationOptions/Options/DomainAxisLabel' import NoSpaceBetweenColumns from '../../components/VisualizationOptions/Options/NoSpaceBetweenColumns' import HideLegend from '../../components/VisualizationOptions/Options/HideLegend' @@ -22,15 +15,17 @@ import HideTitle from '../../components/VisualizationOptions/Options/HideTitle' import HideSubtitle from '../../components/VisualizationOptions/Options/HideSubtitle' import CompletedOnly from '../../components/VisualizationOptions/Options/CompletedOnly' import SeriesTable from '../../components/VisualizationOptions/Options/SeriesTable' +import getLinesSection from './sections/lines' +import getVerticalAxisSection from './sections/verticalAxis' -export default [ +export default hasCustomAxes => [ { key: 'data-tab', - getLabel: () => i18n.t('Data'), + label: i18n.t('Data'), content: [ { key: 'data-display', - getLabel: () => i18n.t('Display'), + label: i18n.t('Display'), content: React.Children.toArray([ , , @@ -38,18 +33,10 @@ export default [ , ]), }, - { - key: 'data-lines', - getLabel: () => i18n.t('Lines'), - content: React.Children.toArray([ - , - , - , - ]), - }, + getLinesSection(hasCustomAxes), { key: 'data-advanced', - getLabel: () => i18n.t('Advanced'), + label: i18n.t('Advanced'), content: React.Children.toArray([ , , @@ -59,28 +46,19 @@ export default [ }, { key: 'axes-tab', - getLabel: () => i18n.t('Axes'), + label: i18n.t('Axes'), content: [ - { - key: 'axes-vertical-axis', - getLabel: () => i18n.t('Vertical (y) axis'), - content: React.Children.toArray([ - , - , - , - , - ]), - }, + getVerticalAxisSection(hasCustomAxes), { key: 'axes-horizontal-axis', - getLabel: () => i18n.t('Horizontal (x) axis'), + label: i18n.t('Horizontal (x) axis'), content: React.Children.toArray([]), }, ], }, { key: 'series-tab', - getLabel: () => i18n.t('Series'), + label: i18n.t('Series'), content: [ { key: 'series-table', @@ -90,11 +68,11 @@ export default [ }, { key: 'style-tab', - getLabel: () => i18n.t('Style'), + label: i18n.t('Style'), content: [ { key: 'style-chart-style', - getLabel: () => i18n.t('Chart style'), + label: i18n.t('Chart style'), content: React.Children.toArray([ , , @@ -104,7 +82,7 @@ export default [ }, { key: 'style-titles', - getLabel: () => i18n.t('Titles'), + label: i18n.t('Titles'), content: React.Children.toArray([ , , diff --git a/packages/app/src/modules/options/yearOverYearConfig.js b/packages/app/src/modules/options/yearOverYearConfig.js index 05f940a423..3d2f1048d4 100644 --- a/packages/app/src/modules/options/yearOverYearConfig.js +++ b/packages/app/src/modules/options/yearOverYearConfig.js @@ -5,15 +5,8 @@ import i18n from '@dhis2/d2-i18n' import CumulativeValues from '../../components/VisualizationOptions/Options/CumulativeValues' import ShowData from '../../components/VisualizationOptions/Options/ShowData' import HideEmptyRowItems from '../../components/VisualizationOptions/Options/HideEmptyRowItems' -import RegressionType from '../../components/VisualizationOptions/Options/RegressionType' -import TargetLine from '../../components/VisualizationOptions/Options/TargetLine' -import BaseLine from '../../components/VisualizationOptions/Options/BaseLine' import SortOrder from '../../components/VisualizationOptions/Options/SortOrder' import AggregationType from '../../components/VisualizationOptions/Options/AggregationType' -import AxisRange from '../../components/VisualizationOptions/Options/AxisRange' -import RangeAxisSteps from '../../components/VisualizationOptions/Options/RangeAxisSteps' -import RangeAxisDecimals from '../../components/VisualizationOptions/Options/RangeAxisDecimals' -import RangeAxisLabel from '../../components/VisualizationOptions/Options/RangeAxisLabel' import DomainAxisLabel from '../../components/VisualizationOptions/Options/DomainAxisLabel' import NoSpaceBetweenColumns from '../../components/VisualizationOptions/Options/NoSpaceBetweenColumns' import HideLegend from '../../components/VisualizationOptions/Options/HideLegend' @@ -21,33 +14,27 @@ import HideTitle from '../../components/VisualizationOptions/Options/HideTitle' import HideSubtitle from '../../components/VisualizationOptions/Options/HideSubtitle' import CompletedOnly from '../../components/VisualizationOptions/Options/CompletedOnly' import SeriesTable from '../../components/VisualizationOptions/Options/SeriesTable' +import getLinesSection from './sections/lines' +import getVerticalAxisSection from './sections/verticalAxis' -export default [ +export default hasCustomAxes => [ { key: 'data-tab', - getLabel: () => i18n.t('Data'), + label: i18n.t('Data'), content: [ { key: 'data-display', - getLabel: () => i18n.t('Display'), + label: i18n.t('Display'), content: React.Children.toArray([ , , , ]), }, - { - key: 'data-lines', - getLabel: () => i18n.t('Lines'), - content: React.Children.toArray([ - , - , - , - ]), - }, + getLinesSection(hasCustomAxes), { key: 'data-advanced', - getLabel: () => i18n.t('Advanced'), + label: i18n.t('Advanced'), content: React.Children.toArray([ , , @@ -57,28 +44,19 @@ export default [ }, { key: 'axes-tab', - getLabel: () => i18n.t('Axes'), + label: i18n.t('Axes'), content: [ - { - key: 'axes-vertical-axis', - getLabel: () => i18n.t('Vertical (y) axis'), - content: React.Children.toArray([ - , - , - , - , - ]), - }, + getVerticalAxisSection(hasCustomAxes), { key: 'axes-horizontal-axis', - getLabel: () => i18n.t('Horizontal (x) axis'), + label: i18n.t('Horizontal (x) axis'), content: React.Children.toArray([]), }, ], }, { key: 'series-tab', - getLabel: () => i18n.t('Series'), + label: i18n.t('Series'), content: [ { key: 'series-table', @@ -88,11 +66,11 @@ export default [ }, { key: 'style-tab', - getLabel: () => i18n.t('Style'), + label: i18n.t('Style'), content: [ { key: 'style-chart-style', - getLabel: () => i18n.t('Chart style'), + label: i18n.t('Chart style'), content: React.Children.toArray([ , , @@ -102,7 +80,7 @@ export default [ }, { key: 'style-titles', - getLabel: () => i18n.t('Titles'), + label: i18n.t('Titles'), content: React.Children.toArray([ , , diff --git a/packages/app/src/reducers/ui.js b/packages/app/src/reducers/ui.js index 34d80f6e62..dd9ad2823c 100644 --- a/packages/app/src/reducers/ui.js +++ b/packages/app/src/reducers/ui.js @@ -299,12 +299,15 @@ export const sGetAxes = state => sGetUi(state).axes // Selectors level 2 -export const getAxisIdByDimensionId = (state, dimensionId) => +export const sGetAxisIdByDimensionId = (state, dimensionId) => (getInverseLayout(sGetUiLayout(state)) || {})[dimensionId] export const sGetUiItemsByDimension = (state, dimension) => sGetUiItems(state)[dimension] || DEFAULT_UI.itemsByDimension[dimension] +export const sGetDimensionItemsByAxis = (state, axisId) => + sGetUiItemsByDimension(state, (sGetUiLayout(state) || {})[axisId]) || [] + export const sGetDimensionIdsFromLayout = state => Object.values(sGetUiLayout(state)).reduce( (ids, axisDimensionIds) => ids.concat(axisDimensionIds), diff --git a/packages/plugin/package.json b/packages/plugin/package.json index e43774deec..5a220e286b 100644 --- a/packages/plugin/package.json +++ b/packages/plugin/package.json @@ -10,7 +10,7 @@ "access": "public" }, "dependencies": { - "@dhis2/analytics": "^8.0.0", + "@dhis2/analytics": "^8.1.0", "@dhis2/ui": "^5.3.0", "lodash-es": "^4.17.11" }, diff --git a/yarn.lock b/yarn.lock index 8dad59241c..26c2537fc8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1524,10 +1524,10 @@ debug "^3.1.0" lodash.once "^4.1.1" -"@dhis2/analytics@^8.0.0": - version "8.0.0" - resolved "https://registry.yarnpkg.com/@dhis2/analytics/-/analytics-8.0.0.tgz#146f1d4c36c4117de5d4d05cd35205c5012eb983" - integrity sha512-o3ryWHiMUp24SY88M7mdg9R8egnGbZ6StgZTmmkAN7/iGhFD75alVaUHXFQvt/06Pt5dz+fK7Ys0pZqB+Ywz2A== +"@dhis2/analytics@^8.1.0": + version "8.1.0" + resolved "https://registry.yarnpkg.com/@dhis2/analytics/-/analytics-8.1.0.tgz#fea90bb51930efbcc97bb9d14297e767613e65fa" + integrity sha512-8h4mN1HNFclGRm8JH0H9lvLCULvUxd5+O4VC0SPDa8uAGqs424Jj2g8/5x1ytwAKew30xkxyESSYyGysh8SEVg== dependencies: "@dhis2/d2-ui-org-unit-dialog" "^7.0.4" "@dhis2/ui" "^5.3.0"