fix: make series options unavailable for relative items

packages/app/i18n/en.pot

@@ -529,6 +529,14 @@ msgstr ""
 msgid "There aren't any Series options for this visualization type"
 msgstr ""
 
+msgid "Series options unavailable"
+msgstr ""
+
+msgid ""
+"Series options are not available when using relative selections for "
+"periods, org.units or categories"
+msgstr ""
+
 msgid "Value labels"
 msgstr ""
 

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

@@ -26,6 +26,7 @@ const LegendDisplayStrategy = ({ value, onChange }) => (
                 value={LEGEND_DISPLAY_STRATEGY_BY_DATA_ITEM}
                 checked={value === LEGEND_DISPLAY_STRATEGY_BY_DATA_ITEM}
                 onChange={onChange}
+                dense
             />
             <Radio
                 key={LEGEND_DISPLAY_STRATEGY_FIXED}
@@ -35,6 +36,7 @@ const LegendDisplayStrategy = ({ value, onChange }) => (
                 value={LEGEND_DISPLAY_STRATEGY_FIXED}
                 checked={value === LEGEND_DISPLAY_STRATEGY_FIXED}
                 onChange={onChange}
+                dense
             />
         </Field>
         {value === LEGEND_DISPLAY_STRATEGY_FIXED ? (

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

@@ -23,6 +23,7 @@ export const RadioBaseOption = ({
                 checked={value === id}
                 onChange={({ value }) => onChange(value)}
                 disabled={disabled}
+                dense
             />
         ))}
     </Field>

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

@@ -11,13 +11,18 @@ import {
     TableBody,
     Radio,
 } from '@dhis2/ui'
-import { VIS_TYPE_COLUMN, VIS_TYPE_LINE, visTypeIcons } from '@dhis2/analytics'
+import {
+    VIS_TYPE_COLUMN,
+    VIS_TYPE_LINE,
+    visTypeIcons,
+    hasRelativeItems,
+} from '@dhis2/analytics'
 
 import styles from '../styles/SeriesTable.module.css'
 import { acSetUiOptions, acUpdateUiSeriesItem } from '../../../actions/ui'
-import { sGetUiOptions, sGetUiType } from '../../../reducers/ui'
+import { sGetUiLayout, sGetUiOptions, sGetUiType } from '../../../reducers/ui'
 import { sGetSeriesSetupItems } from '../../../reducers'
-import { EmptySeries, EmptyBox } from '../../../assets/ErrorIcons'
+import { EmptySeries, EmptyBox, GenericError } from '../../../assets/ErrorIcons'
 import {
     AxisOne,
     AxisTwo,
@@ -33,6 +38,7 @@ const availableAxes = [0, 1, 2, 3]
 const allTypes = [VIS_TYPE_COLUMN, VIS_TYPE_LINE]
 
 const SeriesTable = ({
+    columns,
     layoutItems,
     optionItems,
     onChange,
@@ -197,8 +203,24 @@ const SeriesTable = ({
             EmptyBox()
         )
 
+    const renderRelativeItemsError = () =>
+        renderError(
+            i18n.t('Series options unavailable'),
+            i18n.t(
+                'Series options are not available when using relative selections for periods, org units or categories'
+            ),
+            GenericError()
+        )
+
     if (!showAxisOptions && !showTypeOptions) {
         return renderNoSeriesOptionsError()
+    } else if (
+        hasRelativeItems(
+            columns[0],
+            layoutItems.map(item => item.dimensionItem)
+        )
+    ) {
+        return renderRelativeItemsError()
     } else {
         return Object.keys(layoutItems).length && optionItems.length
             ? renderTable()
@@ -207,6 +229,7 @@ const SeriesTable = ({
 }
 
 SeriesTable.propTypes = {
+    columns: PropTypes.array.isRequired,
     visType: PropTypes.string.isRequired,
     onChange: PropTypes.func.isRequired,
     onItemChange: PropTypes.func.isRequired,
@@ -225,6 +248,7 @@ SeriesTable.defaultProps = {
 
 const mapStateToProps = state => ({
     layoutItems: sGetSeriesSetupItems(state),
+    columns: sGetUiLayout(state).columns,
     optionItems: sGetUiOptions(state).series,
     visType: sGetUiType(state),
 })

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

@@ -19,11 +19,13 @@ import {
     sGetUiType,
     sGetUiOptions,
     sGetDimensionItemsByAxis,
+    sGetUiLayout,
 } from '../../reducers/ui'
 import { getOptionsByType } from '../../modules/options/config'
 import {
     isDualAxisType,
     hasCustomAxes,
+    hasRelativeItems,
     AXIS_ID_COLUMNS,
 } from '@dhis2/analytics'
 
@@ -48,9 +50,7 @@ export class VisualizationOptions extends Component {
                     {content}
                     {helpText ? (
                         <Legend>
-                            <Help className={tabSectionOptionText.className}>
-                                {helpText}
-                            </Help>
+                            <Help>{helpText}</Help>
                         </Legend>
                     ) : null}
                 </FieldSet>
@@ -65,15 +65,22 @@ export class VisualizationOptions extends Component {
         }))
 
     render() {
-        const { visualizationType, columnDimensionItems, series } = this.props
+        const {
+            visualizationType,
+            columnDimensionItems,
+            series,
+            columns,
+        } = this.props
         const filteredSeries = series.filter(seriesItem =>
             columnDimensionItems.some(
                 layoutItem => layoutItem === seriesItem.dimensionItem
             )
         )
         const optionsConfig = getOptionsByType(
             visualizationType,
-            isDualAxisType(visualizationType) && hasCustomAxes(filteredSeries)
+            isDualAxisType(visualizationType) &&
+                hasCustomAxes(filteredSeries) &&
+                !hasRelativeItems(columns[0], columnDimensionItems)
         )
 
         const tabs = this.generateTabs(optionsConfig)
@@ -118,13 +125,15 @@ export class VisualizationOptions extends Component {
 VisualizationOptions.propTypes = {
     visualizationType: PropTypes.string.isRequired,
     columnDimensionItems: PropTypes.array,
+    columns: PropTypes.array,
     series: PropTypes.array,
 }
 
 const mapStateToProps = state => ({
     visualizationType: sGetUiType(state),
     columnDimensionItems: sGetDimensionItemsByAxis(state, AXIS_ID_COLUMNS),
     series: sGetUiOptions(state).series,
+    columns: sGetUiLayout(state).columns,
 })
 
 export default connect(mapStateToProps)(VisualizationOptions)

packages/app/src/components/VisualizationOptions/styles/VisualizationOptions.style.js

@@ -52,8 +52,11 @@ export const tabSectionOptionItem = css.resolve`
 
 export const tabSectionOptionText = css.resolve`
     p {
-        font-size: ${spacers.dp14};
-        padding-bottom: ${spacers.dp16};
+        margin: 0;
+        padding-bottom: ${spacers.dp8};
+        font-size: 14px;
+        line-height: 19px;
+        color: ${colors.grey700};
     }
 `