Merge branch 'master' into feature/open-chart-as-map

dhis2 · Feb 27, 2019 · dd4c65b · dd4c65b
2 parents 3f71e0d + 13ab746
commit dd4c65b
Show file tree

Hide file tree

Showing 76 changed files with 4,944 additions and 1,792 deletions.
diff --git a/README.md b/README.md
@@ -5,11 +5,11 @@ This is a lerna repo that contains the data-visualizer-app. Eventually it will a
 ## Getting started
 
 To run data-visualizer-app from the repo root directory, install the dependencies for all packages
-and link all the packages in the repo:
+and link all the packages in the repo, then make sure the plugin is built:
 
 ```
 $ yarn install
-$ yarn bootstrap
+$ yarn build
 ```
 
 ### Development

diff --git a/config/shim.js b/config/shim.js
@@ -5,5 +5,5 @@ global.requestAnimationFrame = callback => {
 };
 
 // needed for headerbar beta
-global.DHIS_CONFIG = {};
+global.DHIS_CONFIG = { baseUrl: 'http://localhost:8080' };
 global.manifest = {};
diff --git a/jest.config.js b/jest.config.js
@@ -22,7 +22,7 @@ module.exports = {
             '<rootDir>/config/jest/fileTransform.js',
     },
     transformIgnorePatterns: [
-        'node_modules/(?!(lodash-es|@dhis2/d2-ui-[a-z-]+)/)',
+        'node_modules/(?!(lodash-es|analytics-shared|@dhis2/d2-ui-[a-z-]+)/)',
     ],
     moduleFileExtensions: ['js', 'jsx'],
     moduleDirectories: ['node_modules'],

diff --git 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: 2019-02-11T08:33:18.634Z\n"
-"PO-Revision-Date: 2019-02-11T08:33:18.634Z\n"
+"POT-Creation-Date: 2019-02-27T09:12:48.095Z\n"
+"PO-Revision-Date: 2019-02-27T09:12:48.095Z\n"
 
 msgid "Rename successful"
 msgstr ""
@@ -35,15 +35,6 @@ msgstr ""
 msgid "Period"
 msgstr ""
 
-msgid "Selected Data"
-msgstr ""
-
-msgid "Deselect All"
-msgstr ""
-
-msgid "Select All"
-msgstr ""
-
 msgid "Search dimensions"
 msgstr ""
 

diff --git a/packages/app/package.json b/packages/app/package.json
@@ -25,11 +25,12 @@
     },
     "dependencies": {
         "@dhis2/d2-i18n": "^1.0.3",
-        "@dhis2/d2-ui-core": "5.0.17",
-        "@dhis2/d2-ui-file-menu": "5.0.17",
-        "@dhis2/d2-ui-interpretations": "5.0.17",
-        "@dhis2/d2-ui-org-unit-dialog": "5.0.17",
-        "@dhis2/d2-ui-period-selector-dialog": "5.0.17",
+        "@dhis2/d2-ui-core": "5.1.3",
+        "@dhis2/d2-ui-file-menu": "5.1.3",
+        "@dhis2/d2-ui-interpretations": "5.2.5",
+        "@dhis2/d2-ui-org-unit-dialog": "5.1.3",
+        "@dhis2/d2-ui-period-selector-dialog": "5.1.3",
+        "@dhis2/ui": "^1.0.0-beta.11",
         "@material-ui/core": "^3.1.2",
         "@material-ui/icons": "^3.0.1",
         "autoprefixer": "9.1.3",
@@ -46,7 +47,7 @@
         "d2": "31.2.1",
         "d2-charts-api": "31.0.12",
         "d2-manifest": "^1.0.0",
-        "data-visualizer-plugin": "^32.0.2",
+        "data-visualizer-plugin": "github:d2-ci/data-visualizer-plugin",
         "dotenv": "6.0.0",
         "dotenv-expand": "4.2.0",
         "eslint": "5.4.0",
@@ -70,18 +71,17 @@
         "prop-types": "^15.6.1",
         "raf": "3.4.0",
         "react": "^16.6.0",
+        "react-beautiful-dnd": "^10.0.4",
         "react-dev-utils": "^5.0.2",
         "react-dom": "^16.6.0",
         "react-redux": "^5.1.0",
-        "react-sortable-hoc": "^0.8.3",
         "redux": "^4.0.0",
         "redux-actions": "^2.2.1",
         "redux-logger": "^3.0.6",
         "redux-thunk": "^2.2.0",
         "reselect": "^4.0.0",
         "style-loader": "0.22.1",
         "sw-precache-webpack-plugin": "0.11.5",
-        "ui": "github:d2-ci/ui#a14c74a62a5baefe84786282b145ba20e19bc907",
         "url-loader": "0.6.2",
         "url-polyfill": "^1.1.2",
         "webpack": "^3.10.0",

diff --git a/packages/app/src/components/AddToLayoutButton/styles/DropDownButton.style.js b/packages/app/src/components/AddToLayoutButton/styles/DropDownButton.style.js
@@ -1,4 +1,4 @@
-import { colors } from '../../../modules/colors';
+import { colors } from 'analytics-shared';
 
 export default {
     arrowDown: {

diff --git a/packages/app/src/components/App.css b/packages/app/src/components/App.css
@@ -9,6 +9,10 @@
     outline: none;
 }
 
+body {
+    font-family: 'Roboto', sans-serif;
+}
+
 /* Flex */
 
 .flex-ct {

diff --git a/packages/app/src/components/App.js b/packages/app/src/components/App.js
@@ -2,8 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import i18n from '@dhis2/d2-i18n';
-import UI from 'ui/core/UI';
-import HeaderBar from 'ui/widgets/HeaderBar';
+import HeaderBar from '@dhis2/ui/widgets/HeaderBar';
 
 import FatalErrorBoundary from './ErrorBoundaries/FatalErrorBoundary';
 import Snackbar from '../components/Snackbar/Snackbar';
@@ -25,6 +24,8 @@ import {
     CURRENT_AO_KEY,
 } from '../api/userDataStore';
 
+import '@dhis2/ui/defaults/reset.css';
+
 import './App.css';
 import './scrollbar.css';
 import { getParentGraphMapFromVisualization } from '../modules/ui';
@@ -160,53 +161,44 @@ export class App extends Component {
 
         return (
             <FatalErrorBoundary>
-                <UI>
-                    <div className="app flex-ct flex-dir-col">
-                        <div className="section-headerbar">
-                            <HeaderBar appName={i18n.t('Data Visualizer')} />
+                <div className="app flex-ct flex-dir-col">
+                    <div className="section-headerbar">
+                        <HeaderBar appName={i18n.t('Data Visualizer')} />
+                    </div>
+                    <div className="section-toolbar flex-ct">
+                        <div className="toolbar-type">
+                            <VisualizationTypeSelector />
                         </div>
-                        <div className="section-toolbar flex-ct">
-                            <div className="toolbar-type">
-                                <VisualizationTypeSelector />
-                            </div>
-                            <div className="toolbar-menubar flex-1">
-                                <MenuBar
-                                    apiObjectName={this.props.apiObjectName}
-                                />
-                            </div>
+                        <div className="toolbar-menubar flex-1">
+                            <MenuBar apiObjectName={this.props.apiObjectName} />
                         </div>
-                        <div className="section-main flex-1 flex-ct">
-                            <div className="main-left">
-                                <DimensionsPanel />
+                    </div>
+                    <div className="section-main flex-1 flex-ct">
+                        <div className="main-left">
+                            <DimensionsPanel />
+                        </div>
+                        <div className="main-center flex-1 flex-ct flex-dir-col">
+                            <div className="main-center-layout">
+                                <Layout />
+                            </div>
+                            <div className="main-center-titlebar">
+                                <TitleBar />
                             </div>
-                            <div className="main-center flex-1 flex-ct flex-dir-col">
-                                <div className="main-center-layout">
-                                    <Layout />
-                                </div>
-                                <div className="main-center-titlebar">
-                                    <TitleBar />
-                                </div>
-                                <div className="main-center-canvas flex-1">
-                                    {showVis ? (
-                                        <Visualization />
-                                    ) : (
-                                        <BlankCanvas />
-                                    )}
-                                </div>
+                            <div className="main-center-canvas flex-1">
+                                {showVis ? <Visualization /> : <BlankCanvas />}
                             </div>
-                            {this.props.ui.rightSidebarOpen &&
-                                this.props.current && (
-                                    <div className="main-right">
-                                        <Interpretations
-                                            type={this.props.apiObjectName}
-                                            id={this.props.current.id}
-                                        />
-                                    </div>
-                                )}
                         </div>
+                        {this.props.ui.rightSidebarOpen && this.props.current && (
+                            <div className="main-right">
+                                <Interpretations
+                                    type={this.props.apiObjectName}
+                                    id={this.props.current.id}
+                                />
+                            </div>
+                        )}
                     </div>
-                    <Snackbar />
-                </UI>
+                </div>
+                <Snackbar />
             </FatalErrorBoundary>
         );
     }

diff --git a/packages/app/src/components/DimensionsPanel/Dialogs/DataDimension/DataDimension.js b/packages/app/src/components/DimensionsPanel/Dialogs/DataDimension/DataDimension.js
@@ -8,18 +8,18 @@ import debounce from 'lodash-es/debounce';
 import keyBy from 'lodash-es/keyBy';
 import isEqual from 'lodash-es/isEqual';
 
+import { ItemSelector } from 'analytics-shared';
 import DataTypes from './DataTypesSelector';
 import Groups from './Groups';
 import FilterField from '../FilterField';
-import UnselectedItems from '../UnselectedItems';
-import SelectedItems from '../SelectedItems';
 
 import {
     apiFetchGroups,
     apiFetchAlternatives,
 } from '../../../../api/dimensions';
 import { sGetUiItemsByDimension } from '../../../../reducers/ui';
 import { sGetSettingsDisplayNameProperty } from '../../../../reducers/settings';
+import { sGetMetadata } from '../../../../reducers/metadata';
 
 import {
     acRemoveUiItems,
@@ -38,7 +38,6 @@ import {
 import { FIXED_DIMENSIONS } from '../../../../modules/fixedDimensions';
 
 import { styles } from './styles/DataDimension.style';
-import '../styles/Dialog.css';
 
 const dxId = FIXED_DIMENSIONS.dx.id;
 
@@ -219,43 +218,62 @@ export class DataDimension extends Component {
     render = () => {
         const groups = this.state.groups[this.state.dataType] || [];
 
+        const filterZone = () => {
+            return (
+                <div>
+                    <DataTypes
+                        currentDataType={this.state.dataType}
+                        onDataTypeChange={this.onDataTypeChange}
+                    />
+                    <Groups
+                        dataType={this.state.dataType}
+                        groups={groups}
+                        groupId={this.state.groupId}
+                        onGroupChange={this.onGroupChange}
+                        onDetailChange={this.onDetailChange}
+                        detailValue={this.state.groupDetail}
+                    />
+                    <FilterField
+                        text={this.state.filterText}
+                        onFilterTextChange={this.onFilterTextChange}
+                        onClearFilter={this.onClearFilter}
+                    />
+                </div>
+            );
+        };
+
+        const unselected = {
+            items: this.state.items,
+            onSelect: this.selectDataDimensions,
+            filterText: this.state.filterText,
+            requestMoreItems: this.requestMoreItems,
+        };
+
+        const selectedItems = this.props.selectedItems.map(i => {
+            return {
+                id: i,
+                name: this.props.metadata[i].name,
+            };
+        });
+
+        const selected = {
+            items: selectedItems,
+            dialogId: dxId,
+            onDeselect: this.deselectDataDimensions,
+            onReorder: this.setUiItems,
+        };
+
         return (
             <Fragment>
                 <DialogTitle>{i18n.t('Data')}</DialogTitle>
                 <DialogContent style={styles.dialogContent}>
-                    <div style={styles.dialogContainer}>
-                        <DataTypes
-                            currentDataType={this.state.dataType}
-                            onDataTypeChange={this.onDataTypeChange}
-                        />
-                        <Groups
-                            dataType={this.state.dataType}
-                            groups={groups}
-                            groupId={this.state.groupId}
-                            onGroupChange={this.onGroupChange}
-                            onDetailChange={this.onDetailChange}
-                            detailValue={this.state.groupDetail}
-                        />
-                        <FilterField
-                            text={this.state.filterText}
-                            onFilterTextChange={this.onFilterTextChange}
-                            onClearFilter={this.onClearFilter}
-                        />
-                        <UnselectedItems
-                            className="data-dimension"
-                            items={this.state.items}
-                            onSelect={this.selectDataDimensions}
-                            filterText={this.state.filterText}
-                            requestMoreItems={this.requestMoreItems}
-                        />
-                    </div>
-                    <SelectedItems
-                        className="data-dimension"
-                        items={this.props.selectedItems}
-                        dialogId={dxId}
-                        onDeselect={this.deselectDataDimensions}
-                        onReorder={this.setUiItems}
-                    />
+                    <ItemSelector
+                        itemClassName="data-dimension"
+                        unselected={unselected}
+                        selected={selected}
+                    >
+                        {filterZone()}
+                    </ItemSelector>
                 </DialogContent>
             </Fragment>
         );
@@ -278,6 +296,7 @@ DataDimension.defaultProps = {
 const mapStateToProps = state => ({
     selectedItems: sGetUiItemsByDimension(state, dxId),
     displayNameProp: sGetSettingsDisplayNameProperty(state),
+    metadata: sGetMetadata(state),
 });
 
 export default connect(

diff --git a/...es/app/src/components/DimensionsPanel/Dialogs/DataDimension/styles/DataDimension.style.js b/...es/app/src/components/DimensionsPanel/Dialogs/DataDimension/styles/DataDimension.style.js
@@ -2,7 +2,4 @@ export const styles = {
     dialogContent: {
         display: 'flex',
     },
-    dialogContainer: {
-        paddingRight: 55,
-    },
 };
diff --git a/...pp/src/components/DimensionsPanel/Dialogs/DataDimension/styles/DataTypesSelector.style.js b/...pp/src/components/DimensionsPanel/Dialogs/DataDimension/styles/DataTypesSelector.style.js
@@ -1,8 +1,7 @@
-import { colors } from '../../../../../modules/colors';
+import { colors } from 'analytics-shared';
 
 export const styles = {
     container: {
-        border: `1px solid ${colors.greyLight}`,
         display: 'flex',
         flexFlow: 'column',
         height: 53,