feat: WIP pivot table type (#335)

* chore: remove references to chart, use visualization instead

Now that the visualization can be also a pivot table, we should not use
chart when referring to the visualization.

* feat: add pivot table as possible visualization type

Make it the default one too (at least for now), since the AO does not
have the "type" property yet, otherwise the default (previously COLUMN)
would be used as type also for reportTable AOs.

* feat: allow for loading of reportTable AOs

Instead of always pass "chart" in the File Menu, change to "reportTable"
when Pivot table is selected as visualization type.
This does not always currently work due to FileMenu not refreshing the
file list (it needs to be fixed in FileMenu component).
The "apiObjectName" passed around is not computed from the visualization type,
instead of just being set to "chart".

* feat: load a different plugin for PIVOT_TABLE vis type

(Currently the pivot plugin is a copy of the chart one).

* chore: regenerate pot file

* fix: fix failing tests

packages/app/src/components/App.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
 import PropTypes from 'prop-types';
 import i18n from '@dhis2/d2-i18n';
 import HeaderBar from '@dhis2/ui/widgets/HeaderBar';
@@ -14,9 +15,11 @@ import Interpretations from './Interpretations/Interpretations';
 import Visualization from './Visualization/Visualization';
 import Layout from './Layout/Layout';
 import * as fromReducers from '../reducers';
+import { sGetUiType } from '../reducers/ui';
 import * as fromActions from '../actions';
 import history from '../modules/history';
 import defaultMetadata from '../modules/metadata';
+import { PIVOT_TABLE } from '../modules/chartTypes';
 import {
     apiFetchAOFromUserDataStore,
     CURRENT_AO_KEY,
@@ -204,11 +207,17 @@ export class App extends Component {
     }
 }
 
+const apiObjectSelector = createSelector(
+    [sGetUiType],
+    type => (type === PIVOT_TABLE ? 'reportTable' : 'chart')
+);
+
 const mapStateToProps = state => ({
     settings: fromReducers.fromSettings.sGetSettings(state),
     current: fromReducers.fromCurrent.sGetCurrent(state),
     interpretations: fromReducers.fromVisualization.sGetInterpretations(state),
     ui: fromReducers.fromUi.sGetUi(state),
+    apiObjectName: apiObjectSelector(state),
 });
 
 const mapDispatchToProps = dispatch => ({

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

@@ -13,6 +13,7 @@ import {
     VIS_TYPE_YEAR_OVER_YEAR_LINE,
     VIS_TYPE_YEAR_OVER_YEAR_COLUMN,
     VIS_TYPE_SINGLE_VALUE,
+    VIS_TYPE_PIVOT_TABLE,
 } from '@dhis2/analytics';
 
 import DefaultLayout from './DefaultLayout/DefaultLayout';
@@ -33,6 +34,7 @@ const layoutMap = {
     [VIS_TYPE_YEAR_OVER_YEAR_LINE]: YearOverYearLayout,
     [VIS_TYPE_YEAR_OVER_YEAR_COLUMN]: YearOverYearLayout,
     [VIS_TYPE_SINGLE_VALUE]: PieLayout,
+    [VIS_TYPE_PIVOT_TABLE]: DefaultLayout,
 };
 
 const getLayoutByType = (type, props) => {

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

@@ -6,8 +6,7 @@ import i18n from '@dhis2/d2-i18n';
 import debounce from 'lodash-es/debounce';
 
 import styles from './styles/Visualization.style';
-import ChartPlugin from '@dhis2/data-visualizer-plugin';
-
+import VisualizationPlugin from '@dhis2/data-visualizer-plugin';
 import { sGetVisualization } from '../../reducers/visualization';
 import { sGetCurrent } from '../../reducers/current';
 import {
@@ -86,17 +85,17 @@ export class Visualization extends Component {
     }
 
     render() {
-        const { chartConfig, chartFilters, error } = this.props;
+        const { visConfig, visFilters, error } = this.props;
         const { renderId } = this.state;
 
-        return Boolean(!chartConfig || error) ? (
+        return Boolean(!visConfig || error) ? (
             <BlankCanvas />
         ) : (
-            <ChartPlugin
+            <VisualizationPlugin
                 id={renderId}
                 d2={this.context.d2}
-                config={chartConfig}
-                filters={chartFilters}
+                config={visConfig}
+                filters={visFilters}
                 onChartGenerated={this.onChartGenerated}
                 onResponsesReceived={this.onResponsesReceived}
                 onError={this.onError}
@@ -110,13 +109,13 @@ Visualization.contextTypes = {
     d2: PropTypes.object,
 };
 
-export const chartConfigSelector = createSelector(
+export const visConfigSelector = createSelector(
     [sGetCurrent, sGetVisualization, sGetUiInterpretation],
     (current, visualization, interpretation) =>
         interpretation.id ? visualization : current
 );
 
-export const chartFiltersSelector = createSelector(
+export const visFiltersSelector = createSelector(
     [sGetUiInterpretation],
     interpretation =>
         interpretation.created
@@ -125,8 +124,8 @@ export const chartFiltersSelector = createSelector(
 );
 
 const mapStateToProps = state => ({
-    chartConfig: chartConfigSelector(state),
-    chartFilters: chartFiltersSelector(state),
+    visConfig: visConfigSelector(state),
+    visFilters: visFiltersSelector(state),
     rightSidebarOpen: sGetUiRightSidebarOpen(state),
     error: sGetLoadError(state),
 });

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import ChartPlugin from '@dhis2/data-visualizer-plugin';
+import VisualizationPlugin from '@dhis2/data-visualizer-plugin';
 import {
     Visualization,
-    chartConfigSelector,
-    chartFiltersSelector,
+    visConfigSelector,
+    visFiltersSelector,
 } from '../Visualization';
 import BlankCanvas from '../BlankCanvas';
 
@@ -23,8 +23,8 @@ describe('Visualization', () => {
 
         beforeEach(() => {
             props = {
-                chartConfig: {},
-                chartFilters: null,
+                visConfig: {},
+                visFilters: null,
                 error: null,
                 rightSidebarOpen: false,
                 acAddMetadata: jest.fn(),
@@ -42,8 +42,8 @@ describe('Visualization', () => {
             expect(vis().find(BlankCanvas).length).toEqual(1);
         });
 
-        it('renders a ChartPlugin when no error and chartConfig available', () => {
-            expect(vis().find(ChartPlugin).length).toEqual(1);
+        it('renders a VisualizationPlugin when no error and visConfig available', () => {
+            expect(vis().find(VisualizationPlugin).length).toEqual(1);
         });
 
         it('triggers addMetadata action when responses received from chart plugin', () => {
@@ -77,12 +77,12 @@ describe('Visualization', () => {
             expect(props.acSetLoadError).toHaveBeenCalledWith(errorMsg);
         });
 
-        it('renders chart with new id when rightSidebarOpen prop changes', () => {
+        it('renders visualization with new id when rightSidebarOpen prop changes', () => {
             const wrapper = vis();
 
-            const initialId = wrapper.find(ChartPlugin).prop('id');
+            const initialId = wrapper.find(VisualizationPlugin).prop('id');
             wrapper.setProps({ ...props, rightSidebarOpen: true });
-            const updatedId = wrapper.find(ChartPlugin).prop('id');
+            const updatedId = wrapper.find(VisualizationPlugin).prop('id');
 
             expect(initialId).not.toEqual(updatedId);
         });
@@ -97,23 +97,23 @@ describe('Visualization', () => {
             },
         };
 
-        describe('chartConfigSelector', () => {
+        describe('visConfigSelector', () => {
             it('equals the visualization if interpretation selected', () => {
                 const newState = Object.assign({}, state, {
                     ui: { interpretation: { id: 'rainbow dash' } },
                 });
 
-                const selector = chartConfigSelector(newState);
+                const selector = visConfigSelector(newState);
                 expect(selector).toEqual('vis');
             });
 
             it('equals the current if no interpretation selected', () => {
-                const selector = chartConfigSelector(state);
+                const selector = visConfigSelector(state);
                 expect(selector).toEqual('current');
             });
         });
 
-        describe('chartFiltersSelector', () => {
+        describe('visFiltersSelector', () => {
             it('equals object with interpretation date if interpretation selected', () => {
                 const created = 'the near future';
                 const newState = Object.assign({}, state, {
@@ -123,14 +123,14 @@ describe('Visualization', () => {
                         },
                     },
                 });
-                const selector = chartFiltersSelector(newState);
+                const selector = visFiltersSelector(newState);
                 expect(selector).toEqual({
                     relativePeriodDate: created,
                 });
             });
 
             it('equals empty object if no interpretation selected', () => {
-                const selector = chartFiltersSelector(state);
+                const selector = visFiltersSelector(state);
                 expect(selector).toEqual({});
             });
         });

packages/app/src/components/VisualizationTypeSelector/MenuItemIcon.js

@@ -13,6 +13,7 @@ import {
     VIS_TYPE_YEAR_OVER_YEAR_LINE,
     VIS_TYPE_YEAR_OVER_YEAR_COLUMN,
     VIS_TYPE_SINGLE_VALUE,
+    VIS_TYPE_PIVOT_TABLE,
 } from '@dhis2/analytics';
 
 import ColumnIcon from '../../assets/ColumnIcon';
@@ -56,6 +57,7 @@ const MenuItemIcon = ({ iconType, style }) => {
         case 'MAP':
             return <GlobeIcon style={style} />;
         case VIS_TYPE_COLUMN:
+        case VIS_TYPE_PIVOT_TABLE:
         default:
             return <ColumnIcon style={style} />;
     }

packages/app/src/index.js

@@ -18,8 +18,6 @@ import muiTheme from './modules/theme';
 import { extractUserSettings } from './modules/settings';
 import { apiFetchOrganisationUnitLevels } from './api/organisationUnits';
 
-const apiObjectName = 'chart';
-
 const configI18n = async userSettings => {
     const uiLocale = userSettings.uiLocale;
 
@@ -43,7 +41,7 @@ const render = props => {
     ReactDOM.render(
         <Provider store={store}>
             <MuiThemeProvider theme={muiTheme}>
-                <App apiObjectName={apiObjectName} {...props} />
+                <App {...props} />
             </MuiThemeProvider>
         </Provider>,
         document.getElementById('root')
@@ -63,7 +61,7 @@ const init = async () => {
         : DHIS_CONFIG.baseUrl;
 
     config.baseUrl = `${baseUrl}/api/${manifest.dhis2.apiVersion}`;
-    config.schemas = ['chart', 'organisationUnit', 'userGroup'];
+    config.schemas = ['chart', 'reportTable', 'organisationUnit', 'userGroup'];
 
     const userSettings = extractUserSettings(await getUserSettings());