chore: use shared layout resources

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: 2019-04-18T12:38:17.377Z\n"
-"PO-Revision-Date: 2019-04-18T12:38:17.377Z\n"
+"POT-Creation-Date: 2019-05-22T13:11:50.814Z\n"
+"PO-Revision-Date: 2019-05-22T13:11:50.814Z\n"
 
 msgid "Rename successful"
 msgstr ""
@@ -373,12 +373,6 @@ msgstr ""
 msgid "Program indicators"
 msgstr ""
 
-msgid "Period"
-msgstr ""
-
-msgid "Organisation Unit"
-msgstr ""
-
 msgid "Add to series"
 msgstr ""
 

packages/app/package.json

@@ -26,7 +26,7 @@
     },
     "dependencies": {
         "@dhis2/d2-i18n": "^1.0.3",
-        "@dhis2/d2-ui-analytics": "^1.0.2",
+        "@dhis2/d2-ui-analytics": "^1.0.4",
         "@dhis2/d2-ui-core": "5.3.8",
         "@dhis2/d2-ui-file-menu": "5.3.9",
         "@dhis2/d2-ui-interpretations": "5.2.10",

packages/app/src/api/analytics.js

@@ -1,7 +1,5 @@
+import { DIMENSION_ID_PERIOD } from '@dhis2/d2-ui-analytics';
 import { getInstance } from 'd2';
-import { FIXED_DIMENSIONS } from '../modules/fixedDimensions';
-
-const peId = FIXED_DIMENSIONS.pe.id;
 
 export const apiDownloadImage = async (type, formData) => {
     const d2 = await getInstance();
@@ -82,7 +80,7 @@ export const apiFetchAnalyticsForYearOverYear = async (current, options) => {
     const currentDay = ('' + now.getDate()).padStart(2, 0);
     const currentMonth = ('' + (now.getMonth() + 1)).padStart(2, 0);
 
-    yearlySeriesRes.metaData.dimensions[peId].forEach(period => {
+    yearlySeriesRes.metaData.dimensions[DIMENSION_ID_PERIOD].forEach(period => {
         yearlySeriesLabels.push(yearlySeriesRes.metaData.items[period].name);
 
         const startDate = `${period}-${currentMonth}-${currentDay}`;

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

@@ -1,13 +1,13 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 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 { AXIS_NAME_COLUMNS } from '@dhis2/d2-ui-analytics';
+
 import UpdateButton from '../../../UpdateButton/UpdateButton';
 import Menu from './Menu';
-
 import {
     sGetUi,
     sGetUiLayout,
@@ -28,7 +28,7 @@ const UNSELECTED_BUTTON_TYPE = -1;
 const seriesItem = ADD_TO_LAYOUT_OPTIONS[0];
 const filterItem = ADD_TO_LAYOUT_OPTIONS[2];
 const itemsWithoutSeries = ADD_TO_LAYOUT_OPTIONS.filter(
-    option => option.axisKey !== 'columns'
+    option => option.axisKey !== AXIS_NAME_COLUMNS
 );
 
 export class AddToLayoutButton extends Component {

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

@@ -13,6 +13,10 @@ import {
     DynamicDimension,
     PeriodDimension,
     OrgUnitDimension,
+    DIMENSION_ID_DATA,
+    DIMENSION_ID_PERIOD,
+    DIMENSION_ID_ORGUNIT,
+    FIXED_DIMENSIONS,
 } from '@dhis2/d2-ui-analytics';
 
 import HideButton from './HideButton';
@@ -38,16 +42,11 @@ import { sGetDimensions } from '../../../reducers/dimensions';
 import { sGetMetadata } from '../../../reducers/metadata';
 import { sGetSettingsDisplayNameProperty } from '../../../reducers/settings';
 import { apiFetchRecommendedIds } from '../../../api/dimensions';
-import { FIXED_DIMENSIONS } from '../../../modules/fixedDimensions';
 import {
     getOrgUnitsFromIds,
     removeOrgUnitLastPathSegment,
 } from '../../../modules/orgUnitDimensions';
 
-const dxId = FIXED_DIMENSIONS.dx.id;
-const peId = FIXED_DIMENSIONS.pe.id;
-const ouId = FIXED_DIMENSIONS.ou.id;
-
 export class DialogManager extends Component {
     state = {
         onMounted: false,
@@ -62,7 +61,10 @@ export class DialogManager extends Component {
             this.fetchRecommended();
         }
 
-        if (this.props.dialogId === ouId && !this.state.ouMounted) {
+        if (
+            this.props.dialogId === DIMENSION_ID_ORGUNIT &&
+            !this.state.ouMounted
+        ) {
             this.setState({ ouMounted: true });
         }
     };
@@ -83,7 +85,7 @@ export class DialogManager extends Component {
         });
 
         switch (dimensionId) {
-            case ouId: {
+            case DIMENSION_ID_ORGUNIT: {
                 const forMetadata = {};
                 const forParentGraphMap = {};
 
@@ -148,10 +150,11 @@ export class DialogManager extends Component {
         if (this.state.ouMounted) {
             const ouItems = getOrgUnitsFromIds(ouIds, metadata, parentGraphMap);
 
-            const display = ouId === dialogId ? 'block' : 'none';
+            const display =
+                DIMENSION_ID_ORGUNIT === dialogId ? 'block' : 'none';
 
             return (
-                <div key={ouId} style={{ display }}>
+                <div key={DIMENSION_ID_ORGUNIT} style={{ display }}>
                     <OrgUnitDimension
                         displayNameProperty={displayNameProperty}
                         ouItems={ouItems}
@@ -183,7 +186,7 @@ export class DialogManager extends Component {
         const dynamicContent = () => {
             const selectedItems = this.getSelectedItems(dialogId);
 
-            if (dialogId === dxId) {
+            if (dialogId === DIMENSION_ID_DATA) {
                 return (
                     <DataDimension
                         displayNameProp={displayNameProperty}
@@ -193,7 +196,7 @@ export class DialogManager extends Component {
                 );
             }
 
-            if (dialogId === peId) {
+            if (dialogId === DIMENSION_ID_PERIOD) {
                 return (
                     <PeriodDimension
                         selectedPeriods={selectedItems}
@@ -228,7 +231,7 @@ export class DialogManager extends Component {
 
     render() {
         const { dialogId, dimensions } = this.props;
-        const keepMounted = !dialogId || dialogId === ouId;
+        const keepMounted = !dialogId || dialogId === DIMENSION_ID_ORGUNIT;
 
         return (
             <Dialog
@@ -275,8 +278,8 @@ const mapStateToProps = state => ({
     dimensions: sGetDimensions(state),
     metadata: sGetMetadata(state),
     parentGraphMap: sGetUiParentGraphMap(state),
-    dxIds: sGetUiItemsByDimension(state, dxId),
-    ouIds: sGetUiItemsByDimension(state, ouId),
+    dxIds: sGetUiItemsByDimension(state, DIMENSION_ID_DATA),
+    ouIds: sGetUiItemsByDimension(state, DIMENSION_ID_ORGUNIT),
     selectedItems: sGetUiItems(state),
 });
 

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

@@ -1,7 +1,12 @@
 import React from 'react';
 import { shallow } from 'enzyme';
+import {
+    DIMENSION_ID_DATA,
+    DIMENSION_ID_PERIOD,
+    DIMENSION_ID_ORGUNIT,
+} from '@dhis2/d2-ui-analytics';
+
 import { DialogManager } from '../DialogManager';
-import { FIXED_DIMENSIONS } from '../../../../modules/fixedDimensions';
 
 jest.mock('@material-ui/core/Dialog', () => props => {
     console.log('children', props.children);
@@ -70,47 +75,47 @@ describe('The DialogManager component', () => {
 
     it('should add the dialogId of fixed dimensions to state "mounted" on first time render', () => {
         const dialog = dialogManager().setProps({
-            dialogId: FIXED_DIMENSIONS.ou.id,
+            dialogId: DIMENSION_ID_ORGUNIT,
         });
 
         expect(dialog.state().ouMounted).toBe(true);
     });
 
     it('renders the DataDimension content in dialog', () => {
         const dialog = dialogManager().setProps({
-            dialogId: FIXED_DIMENSIONS.dx.id,
+            dialogId: DIMENSION_ID_DATA,
         });
 
         expect(dialog).toMatchSnapshot();
     });
 
     it('renders the OrgUnitDimension content in dialog', () => {
         const dialog = dialogManager().setProps({
-            dialogId: FIXED_DIMENSIONS.ou.id,
+            dialogId: DIMENSION_ID_ORGUNIT,
         });
 
         expect(dialog).toMatchSnapshot();
     });
 
     it('renders the PeriodDimension content in dialog', () => {
         const dialog = dialogManager().setProps({
-            dialogId: FIXED_DIMENSIONS.pe.id,
+            dialogId: DIMENSION_ID_PERIOD,
         });
 
         expect(dialog).toMatchSnapshot();
     });
 
     it('renders OUDimension content with display:none when previously mounted', () => {
         const dialog = dialogManager().setProps({
-            dialogId: FIXED_DIMENSIONS.ou.id,
+            dialogId: DIMENSION_ID_ORGUNIT,
         });
 
         expect(dialog).toMatchSnapshot();
 
         dialog.setProps({ dialogId: null });
         expect(dialog).toMatchSnapshot();
 
-        dialog.setProps({ dialogId: FIXED_DIMENSIONS.dx.id });
+        dialog.setProps({ dialogId: DIMENSION_ID_DATA });
         expect(dialog).toMatchSnapshot();
     });
 
@@ -140,7 +145,7 @@ describe('The DialogManager component', () => {
 
     it('calls the closeDialog function', () => {
         const dialog = dialogManager().setProps({
-            dialogId: FIXED_DIMENSIONS.dx.id,
+            dialogId: DIMENSION_ID_DATA,
         });
 
         dialog.simulate('close');

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

@@ -1,11 +1,10 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { DimensionsPanel } from '@dhis2/d2-ui-analytics';
+import { DIMENSION_ID_PERIOD, DimensionsPanel } from '@dhis2/d2-ui-analytics';
 
 import DialogManager from './Dialogs/DialogManager';
 import DimensionOptions from './DimensionOptions/DimensionOptions';
 import { SOURCE_DIMENSIONS } from '../../modules/layout';
-import { FIXED_DIMENSIONS } from '../../modules/fixedDimensions';
 import { setDataTransfer } from '../../modules/dnd';
 import { isYearOverYear } from '../../modules/chartTypes';
 import * as fromReducers from '../../reducers';
@@ -42,7 +41,7 @@ export class Dimensions extends Component {
 
     disabledDimension = dimension => {
         return (
-            dimension.id === FIXED_DIMENSIONS.pe.id &&
+            dimension.id === DIMENSION_ID_PERIOD &&
             isYearOverYear(this.props.type)
         );
     };

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { DimensionsPanel } from '@dhis2/d2-ui-analytics';
+
 import { Dimensions } from '../DimensionsPanel';
 
 describe('The Dimensions component ', () => {

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

@@ -1,16 +1,16 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import i18n from '@dhis2/d2-i18n';
+import { FIXED_DIMENSIONS } from '@dhis2/d2-ui-analytics';
 
 import Menu from './Menu';
 import Tooltip from './Tooltip';
 import { setDataTransfer } from '../../modules/dnd';
 import { sGetDimensions } from '../../reducers/dimensions';
 import { sGetUiItemsByDimension } from '../../reducers/ui';
-import { styles } from './styles/Chip.style';
-import { FIXED_DIMENSIONS } from '../../modules/fixedDimensions';
 import DynamicDimensionIcon from '../../assets/DynamicDimensionIcon';
 import { sGetMetadata } from '../../reducers/metadata';
+import { styles } from './styles/Chip.style';
 
 const TOOLTIP_ENTER_DELAY = 500;
 

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

@@ -3,6 +3,11 @@ import { connect } from 'react-redux';
 import i18n from '@dhis2/d2-i18n';
 import MenuItem from '@material-ui/core/MenuItem';
 import Divider from '@material-ui/core/Divider';
+import {
+    AXIS_NAME_COLUMNS,
+    AXIS_NAMES,
+    DIMENSION_ID_DATA,
+} from '@dhis2/d2-ui-analytics';
 
 import Chip from '../Chip';
 import { sGetUi } from '../../../reducers/ui';
@@ -12,17 +17,12 @@ import {
     acRemoveUiLayoutDimensions,
     acSetUiActiveModalDialog,
 } from '../../../actions/ui';
-import {
-    AXIS_NAMES,
-    SOURCE_DIMENSIONS,
-    menuLabels,
-    AXIS_NAME_COLUMNS,
-} from '../../../modules/layout';
-import styles from './styles/DefaultAxis.style';
+import { SOURCE_DIMENSIONS, menuLabels } from '../../../modules/layout';
 import { getAdaptedUiByType } from '../../../modules/ui';
 import { isYearOverYear, isDualAxisType } from '../../../modules/chartTypes';
 import { AXIS_SETUP_DIALOG_ID } from '../../AxisSetup/AxisSetup';
-import { FIXED_DIMENSIONS } from '../../../modules/fixedDimensions';
+
+import styles from './styles/DefaultAxis.style';
 
 const axisLabels = {
     columns: i18n.t('Series'),
@@ -64,7 +64,7 @@ class Axis extends React.Component {
 
     isSeries = () => this.props.axisName === AXIS_NAME_COLUMNS;
 
-    isData = dimensionId => dimensionId === FIXED_DIMENSIONS.dx.id;
+    isData = dimensionId => dimensionId === DIMENSION_ID_DATA;
 
     getItemsArrayByDimension = dimensionId =>
         this.props.itemsByDimension[dimensionId] || [];

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

@@ -1,9 +1,9 @@
 import React from 'react';
+import { AXIS_NAME_COLUMNS, AXIS_NAME_FILTERS } from '@dhis2/d2-ui-analytics';
 
 import DefaultAxis from '../DefaultLayout/DefaultAxis';
 import defaultAxisStyles from '../DefaultLayout/styles/DefaultAxis.style';
 import defaultLayoutStyles from '../DefaultLayout/styles/DefaultLayout.style';
-import { AXIS_NAME_COLUMNS, AXIS_NAME_FILTERS } from '../../../modules/layout';
 
 const Layout = () => (
     <div id="layout-ct" style={defaultLayoutStyles.ct}>

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import { AXIS_NAME_FILTERS } from '@dhis2/d2-ui-analytics';
 
 import DefaultAxis from '../DefaultLayout/DefaultAxis';
 import defaultLayoutStyles from '../DefaultLayout/styles/DefaultLayout.style';
@@ -16,7 +17,6 @@ import {
     acSetUiYearOverYearCategory,
 } from '../../../actions/ui';
 import { seriesOptions, categoryOptions } from '../../../modules/yearOverYear';
-import { AXIS_NAME_FILTERS } from '../../../modules/layout';
 
 const Layout = props => (
     <div id="layout-ct" style={defaultLayoutStyles.ct}>