Use old plugin component for rendering visualizations for now (#269)

Fixes DHIS2-5997. This commit fixes visualization type change feature by using old plugin component DefaultPlugin.js. The reason for switching to the old plugin is that we will fetch data on app level and pass complete analytic objects (AO) to plugins for rendering. This will reduce number of network requests and allow to correctly use ChartPlugin component.
dhis2 · Mar 20, 2019 · b1807e3 · b1807e3
1 parent c171165
commit b1807e3
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 52 deletions.
diff --git a/src/components/Item/VisualizationItem/Item.js b/src/components/Item/VisualizationItem/Item.js
@@ -9,13 +9,12 @@ import { getGridItemDomId } from '../../ItemGrid/gridUtil';
 import { sGetVisualization } from '../../../reducers/visualizations';
 import { sGetItemFilterRoot } from '../../../reducers/itemFilter';
 import { acReceivedActiveVisualization } from '../../../actions/selected';
-import { itemTypeMap, CHART } from '../../../modules/itemTypes';
+import { itemTypeMap } from '../../../modules/itemTypes';
 import ItemHeader, { HEADER_HEIGHT } from '../ItemHeader';
 import ItemFooter from './ItemFooter';
 import VisualizationItemHeaderButtons from './ItemHeaderButtons';
 import DefaultPlugin from './DefaultPlugin';
 import { colors } from '../../../modules/colors';
-import ChartPlugin from 'data-visualizer-plugin';
 import ProgressiveLoadingContainer from '../ProgressiveLoadingContainer';
 import uniqueId from 'lodash/uniqueId';
 import memoizeOne from '../../../modules/memoizeOne';
@@ -47,7 +46,13 @@ export class Item extends Component {
         showFooter: false,
     };
 
-    getUniqueKey = memoizeOne(filter => uniqueId());
+    constructor(props, context) {
+        super(props);
+
+        this.d2 = context.d2;
+    }
+
+    getUniqueKey = memoizeOne(() => uniqueId());
 
     pluginCredentials = null;
 
@@ -64,10 +69,7 @@ export class Item extends Component {
             return;
         }
 
-        pluginManager.unmount(
-            this.props.item,
-            this.props.visualization.activeType || this.props.item.type
-        );
+        pluginManager.unmount(this.props.item, this.getActiveType());
 
         this.props.onSelectVisualization(
             this.props.visualization.id,
@@ -96,10 +98,7 @@ export class Item extends Component {
                 </span>
                 {!editMode && this.pluginIsAvailable() ? (
                     <a
-                        href={pluginManager.getLink(
-                            this.props.item,
-                            this.context.d2
-                        )}
+                        href={pluginManager.getLink(this.props.item, this.d2)}
                         style={{ height: 16 }}
                         title={`View in ${
                             itemTypeMap[this.props.item.type].appName
@@ -120,9 +119,7 @@ export class Item extends Component {
             <VisualizationItemHeaderButtons
                 item={this.props.item}
                 activeFooter={this.state.showFooter}
-                activeType={
-                    this.props.visualization.activeType || this.props.item.type
-                }
+                activeType={this.getActiveType()}
                 onSelectVisualization={this.onSelectVisualization}
                 onToggleFooter={this.onToggleFooter}
             />
@@ -138,19 +135,6 @@ export class Item extends Component {
             : null;
     };
 
-    getPluginComponent = () =>
-        this.props.item.type === CHART ? (
-            <ChartPlugin
-                d2={this.context.d2}
-                config={this.props.visualization}
-                filters={this.props.itemFilter}
-                forDashboard={true}
-                style={this.getContentStyle()}
-            />
-        ) : (
-            <DefaultPlugin {...this.props} />
-        );
-
     render() {
         const { item, editMode, itemFilter } = this.props;
         const { showFooter } = this.state;
@@ -172,7 +156,7 @@ export class Item extends Component {
                     className="dashboard-item-content"
                     style={this.getContentStyle()}
                 >
-                    {this.getPluginComponent()}
+                    <DefaultPlugin {...this.props} />
                 </ProgressiveLoadingContainer>
                 {!editMode && showFooter ? <ItemFooter item={item} /> : null}
             </Fragment>

diff --git a/src/components/Item/VisualizationItem/__tests__/Item.spec.js b/src/components/Item/VisualizationItem/__tests__/Item.spec.js
@@ -1,9 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { CHART, REPORT_TABLE } from '../../../../modules/itemTypes';
+import { REPORT_TABLE } from '../../../../modules/itemTypes';
 import { Item } from '../Item';
 import DefaultPlugin from '../DefaultPlugin';
-import ChartPlugin from 'data-visualizer-plugin';
 
 describe('VisualizationItem/Item', () => {
     let props;
@@ -37,28 +36,30 @@ describe('VisualizationItem/Item', () => {
         shallowItem = undefined;
     });
 
-    it('renders a ChartPlugin when a chart item is passed', () => {
-        props.visualization = {
-            name: 'Test chart',
-            description: 'Test chart mock',
-        };
-        props.item = {
-            type: CHART,
-            id: 'testItem1',
-            chart: {
-                id: 'chart1',
-                name: 'Test chart',
-            },
-        };
-
-        const chartPlugin = canvas().find(ChartPlugin);
-
-        expect(chartPlugin.exists()).toBeTruthy();
-
-        expect(chartPlugin.prop('config')).toEqual(props.visualization);
-        expect(chartPlugin.prop('filters')).toEqual(props.itemFilter);
-        expect(chartPlugin.prop('forDashboard')).toBeTruthy();
-    });
+    // TODO uncomment this test once we implement data fetching on app level
+    // and pass complete analytical objects to plugins.
+    // it('renders a ChartPlugin when a chart item is passed', () => {
+    //     props.visualization = {
+    //         name: 'Test chart',
+    //         description: 'Test chart mock',
+    //     };
+    //     props.item = {
+    //         type: CHART,
+    //         id: 'testItem1',
+    //         chart: {
+    //             id: 'chart1',
+    //             name: 'Test chart',
+    //         },
+    //     };
+    //
+    //     const chartPlugin = canvas().find(ChartPlugin);
+    //
+    //     expect(chartPlugin.exists()).toBeTruthy();
+    //
+    //     expect(chartPlugin.prop('config')).toEqual(props.visualization);
+    //     expect(chartPlugin.prop('filters')).toEqual(props.itemFilter);
+    //     expect(chartPlugin.prop('forDashboard')).toBeTruthy();
+    // });
 
     it('renders a DefaultPlugin when a item different from chart is passed', () => {
         props.visualization = {