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