fix: dynamic axis names based on vis type

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-02-05T10:48:05.798Z\n"
-"PO-Revision-Date: 2020-02-05T10:48:05.798Z\n"
+"POT-Creation-Date: 2020-02-07T07:26:26.626Z\n"
+"PO-Revision-Date: 2020-02-07T07:26:26.626Z\n"
 
 msgid "Rename successful"
 msgstr ""
@@ -34,6 +34,9 @@ msgstr ""
 msgid "Update"
 msgstr ""
 
+msgid "Add to"
+msgstr ""
+
 msgid ""
 "'{{visualizationType}}' is intended to show a single data item. Only the "
 "first item will be used and saved."
@@ -119,12 +122,6 @@ msgstr ""
 msgid "{{dimensionName}} is locked to {{axisName}} for {{visTypeName}}"
 msgstr ""
 
-msgid "Columns"
-msgstr ""
-
-msgid "Rows"
-msgstr ""
-
 msgid "None selected"
 msgstr ""
 
@@ -459,31 +456,25 @@ msgid ""
 "you may not have access to it."
 msgstr ""
 
-msgid "Series is empty"
+msgid "{{axisName}} is empty"
 msgstr ""
 
-msgid "Add at least one item to Series."
-msgstr ""
-
-msgid "Category is empty"
-msgstr ""
-
-msgid "Add at least one item to Category."
+msgid "Add at least one item to {{axisName}}."
 msgstr ""
 
 msgid "No period set"
 msgstr ""
 
-msgid "{{visType}} must have at least one period set in {{axes}}."
+msgid "{{visualizationType}} must have at least one period set in {{axes}}."
 msgstr ""
 
 msgid "No data set"
 msgstr ""
 
-msgid "{{visType}} must have at least one data item in {{axes}}."
+msgid "{{visualizationType}} must have at least one data item in {{axes}}."
 msgstr ""
 
-msgid "There is a problem with this {{visType}} visualization."
+msgid "There is a problem with this {{visualizationType}} visualization."
 msgstr ""
 
 msgid "There was a problem getting the data from the server."
@@ -504,24 +495,6 @@ msgstr ""
 msgid "or"
 msgstr ""
 
-msgid "Add to series"
-msgstr ""
-
-msgid "Add to category"
-msgstr ""
-
-msgid "Add to filter"
-msgstr ""
-
-msgid "series"
-msgstr ""
-
-msgid "category"
-msgstr ""
-
-msgid "filter"
-msgstr ""
-
 msgid "Today"
 msgstr ""
 

packages/app/src/components/DimensionsPanel/Dialogs/AddToLayoutButton/AddToLayoutButton.js

@@ -4,14 +4,18 @@ import { connect } from 'react-redux'
 import Button from '@material-ui/core/Button'
 import MenuItem from '@material-ui/core/Button'
 import { withStyles } from '@material-ui/core/styles'
-import { getAvailableAxes } from '@dhis2/analytics'
+import {
+    getAvailableAxes,
+    getAxisNameByLayoutType,
+    getLayoutTypeByVisType,
+} from '@dhis2/analytics'
 
 import Menu from './Menu'
 import { sGetUiActiveModalDialog, sGetUiType } from '../../../../reducers/ui'
 import { acAddUiLayoutDimensions } from '../../../../actions/ui'
 
-import { ADD_TO_LAYOUT_OPTIONS } from '../../../../modules/layout'
 import styles from './styles/AddToLayoutButton.style'
+import i18n from '@dhis2/d2-i18n'
 
 export class AddToLayoutButton extends Component {
     constructor(props) {
@@ -36,31 +40,27 @@ export class AddToLayoutButton extends Component {
         this.props.onClick()
     }
 
-    getAxisMeta = axisIdArray =>
-        axisIdArray.map(axisId =>
-            ADD_TO_LAYOUT_OPTIONS.find(
-                axisMetaObj => axisMetaObj.axisId === axisId
-            )
-        )
-
     renderMenuItems = () =>
-        this.getAxisMeta(getAvailableAxes(this.props.visType))
+        getAvailableAxes(this.props.visType)
             .slice(1)
-            .map(axisMetaObj => (
+            .map(axis => (
                 <MenuItem
                     className={this.props.classes.menuItem}
                     component="li"
-                    key={axisMetaObj.axisId}
-                    onClick={() => this.onUpdate(axisMetaObj.axisId)}
+                    key={axis}
+                    onClick={() => this.onUpdate(axis)}
                 >
-                    {axisMetaObj.name}
+                    {i18n.t(`Add to {{axisName}}`, {
+                        axisName: getAxisNameByLayoutType(
+                            axis,
+                            getLayoutTypeByVisType(this.props.visType)
+                        ),
+                    })}
                 </MenuItem>
             ))
 
     render() {
-        const availableAxisMeta = this.getAxisMeta(
-            getAvailableAxes(this.props.visType)
-        )
+        const availableAxis = getAvailableAxes(this.props.visType)
 
         return (
             <div ref={addToRef => (this.buttonRef = addToRef)}>
@@ -70,11 +70,16 @@ export class AddToLayoutButton extends Component {
                     color="primary"
                     disableRipple
                     disableFocusRipple
-                    onClick={() => this.onUpdate(availableAxisMeta[0].axisId)}
+                    onClick={() => this.onUpdate(availableAxis[0])}
                 >
-                    {availableAxisMeta[0].name}
+                    {i18n.t(`Add to {{axisName}}`, {
+                        axisName: getAxisNameByLayoutType(
+                            availableAxis[0],
+                            getLayoutTypeByVisType(this.props.visType)
+                        ),
+                    })}
                 </Button>
-                {availableAxisMeta.length > 1 ? (
+                {availableAxis.length > 1 ? (
                     <Menu
                         onClose={this.onClose}
                         onClick={this.onToggle}

packages/app/src/components/DimensionsPanel/Dialogs/AddToLayoutButton/__tests__/Menu.spec.js

@@ -2,10 +2,11 @@ import React from 'react'
 import { shallow } from 'enzyme'
 import Menu from '@material-ui/core/Menu'
 import MenuItem from '@material-ui/core/MenuItem'
-import { ADD_TO_LAYOUT_OPTIONS } from '../../../../../modules/layout'
 
 import { DropDown } from '../Menu'
 import DropDownButton from '../DropDownButton'
+import { VIS_TYPE_COLUMN } from '@dhis2/analytics/build/modules/visTypes'
+import { getAvailableAxes } from '@dhis2/analytics'
 
 describe('The DropDownButton component ', () => {
     let props
@@ -55,7 +56,7 @@ describe('The DropDownButton component ', () => {
     it('renders a Menu with children if prop anchorel is equal to a truthy value', () => {
         props.anchorEl = { getBoundingClientRect: () => ({ bottom: 100 }) }
 
-        props.menuItems = ADD_TO_LAYOUT_OPTIONS.map((option, i) => (
+        props.menuItems = getAvailableAxes(VIS_TYPE_COLUMN).map((option, i) => (
             <MenuItem key={i} value={option.axisId} />
         ))
 

packages/app/src/components/DimensionsPanel/Dialogs/__tests__/DialogManager.spec.js

@@ -35,7 +35,6 @@ jest.mock('@dhis2/analytics', () => {
         DIMENSION_ID_ORGUNIT: ouId,
         getAxisMaxNumberOfItems: () => {},
         filterOutPredefinedDimensions: () => [],
-        getAxisName: () => {},
         getPredefinedDimensions: () => {},
         getPredefinedDimensionProp: () => {},
     }

packages/app/src/components/Layout/Chip.js

@@ -9,7 +9,8 @@ import {
     getAxisMaxNumberOfItems,
     hasAxisTooManyItems,
     getDisplayNameByVisType,
-    getAxisName,
+    getAxisNameByLayoutType,
+    getLayoutTypeByVisType,
     DIMENSION_ID_ASSIGNED_CATEGORIES,
     isDimensionLocked,
     DIMENSION_PROP_NO_ITEMS,
@@ -154,7 +155,10 @@ class Chip extends React.Component {
                       `{{dimensionName}} is locked to {{axisName}} for {{visTypeName}}`,
                       {
                           dimensionName: this.props.dimensionName,
-                          axisName: getAxisName(this.props.axisId),
+                          axisName: getAxisNameByLayoutType(
+                              this.props.axisId,
+                              getLayoutTypeByVisType(this.props.type)
+                          ),
                           visTypeName: getDisplayNameByVisType(this.props.type),
                       }
                   )

packages/app/src/components/Layout/DefaultLayout/DefaultAxis.js

@@ -2,7 +2,11 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { Droppable, Draggable } from 'react-beautiful-dnd'
-import { getAxisName, isDimensionLocked } from '@dhis2/analytics'
+import {
+    getAxisNameByLayoutType,
+    getLayoutTypeByVisType,
+    isDimensionLocked,
+} from '@dhis2/analytics'
 import { withStyles } from '@material-ui/core'
 
 import Chip from '../Chip'
@@ -25,7 +29,11 @@ class Axis extends React.Component {
                 onDragOver={this.onDragOver}
             >
                 <div style={styles.label}>
-                    {this.props.label || getAxisName(axisId)}
+                    {this.props.label ||
+                        getAxisNameByLayoutType(
+                            axisId,
+                            getLayoutTypeByVisType(type)
+                        )}
                 </div>
                 <Droppable droppableId={axisId} direction="horizontal">
                     {provided => (

packages/app/src/components/Layout/PivotTableLayout/PivotTableLayout.js

@@ -1,5 +1,4 @@
 import React from 'react'
-import i18n from '@dhis2/d2-i18n'
 import {
     AXIS_ID_COLUMNS,
     AXIS_ID_ROWS,
@@ -22,15 +21,13 @@ const Layout = () => (
         >
             <DefaultAxis
                 axisId={AXIS_ID_COLUMNS}
-                label={i18n.t('Columns')}
                 style={{
                     ...defaultLayoutStyles.columns,
                     ...defaultAxisStyles.axisContainerLeft,
                 }}
             />
             <DefaultAxis
                 axisId={AXIS_ID_ROWS}
-                label={i18n.t('Rows')}
                 style={{
                     ...defaultLayoutStyles.rows,
                     ...defaultAxisStyles.axisContainerLeft,

packages/app/src/components/Layout/YearOverYearLayout/YearOverYearAxis.js

@@ -1,6 +1,9 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import { getAxisName } from '@dhis2/analytics'
+import {
+    getAxisNameByLayoutType,
+    LAYOUT_TYPE_YEAR_OVER_YEAR,
+} from '@dhis2/analytics'
 import PropTypes from 'prop-types'
 
 import {
@@ -16,7 +19,7 @@ const YearOverYearAxis = props => (
         style={{ ...defaultAxisStyles.axisContainer, ...props.style }}
     >
         <div className="label" style={defaultAxisStyles.label}>
-            {getAxisName(props.axisId)}
+            {getAxisNameByLayoutType(props.axisId, LAYOUT_TYPE_YEAR_OVER_YEAR)}
         </div>
         <div
             className="content"

packages/app/src/components/Layout/YearOverYearLayout/YearOverYearLayout.js

@@ -1,6 +1,10 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import { AXIS_ID_FILTERS } from '@dhis2/analytics'
+import {
+    AXIS_ID_FILTERS,
+    AXIS_ID_COLUMNS,
+    AXIS_ID_ROWS,
+} from '@dhis2/analytics'
 import PropTypes from 'prop-types'
 
 import DefaultAxis from '../DefaultLayout/DefaultAxis'
@@ -29,7 +33,7 @@ const Layout = props => (
             }}
         >
             <YearOverYearAxis
-                axisId="yearOverYearSeries"
+                axisId={AXIS_ID_COLUMNS}
                 style={{
                     ...defaultLayoutStyles.columns,
                     ...defaultAxisStyles.axisContainerLeft,
@@ -43,7 +47,7 @@ const Layout = props => (
                 />
             </YearOverYearAxis>
             <YearOverYearAxis
-                axisId="yearOverYearCategory"
+                axisId={AXIS_ID_ROWS}
                 style={{
                     ...defaultLayoutStyles.rows,
                     ...defaultAxisStyles.axisContainerLeft,

packages/app/src/components/Visualization/StartScreen.js

@@ -67,7 +67,7 @@ const StartScreen = ({ error, classes }) => {
                 {mostViewedVisualizations.length > 0 && (
                     <div style={styles.section}>
                         <h3 style={styles.title}>
-                            Most viewed charts and tables
+                            Your most viewed charts and tables
                         </h3>
                         {mostViewedVisualizations.map(
                             (visualization, index) => (