refactor(): use @dhis2/analytics in place of @dhis2/d2-ui-analytics (#…

…307)
dhis2 · Jun 27, 2019 · c9f5c93 · c9f5c93
1 parent 5cfecd9
commit c9f5c93
Show file tree

Hide file tree

Showing 28 changed files with 119 additions and 103 deletions.
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -25,8 +25,8 @@
         "webpack-bundle-analyzer": "^3.0.3"
     },
     "dependencies": {
+        "@dhis2/analytics": "2.1.1",
         "@dhis2/d2-i18n": "^1.0.3",
-        "@dhis2/d2-ui-analytics": "^1.0.5",
         "@dhis2/d2-ui-core": "6.1.0",
         "@dhis2/d2-ui-file-menu": "6.1.0",
         "@dhis2/d2-ui-interpretations": "6.1.0",
@@ -46,7 +46,6 @@
         "chalk": "2.4.1",
         "css-loader": "0.28.7",
         "d2": "31.2.1",
-        "d2-charts-api": "33.0.1",
         "d2-manifest": "^1.0.0",
         "dotenv": "6.0.0",
         "dotenv-expand": "4.2.0",

diff --git a/packages/app/src/api/analytics.js b/packages/app/src/api/analytics.js
@@ -1,4 +1,4 @@
-import { DIMENSION_ID_PERIOD } from '@dhis2/d2-ui-analytics';
+import { DIMENSION_ID_PERIOD } from '@dhis2/analytics';
 import { getInstance } from 'd2';
 
 export const apiDownloadImage = async (type, formData) => {

diff --git a/packages/app/src/components/DimensionsPanel/Dialogs/AddToLayoutButton/AddToLayoutButton.js b/packages/app/src/components/DimensionsPanel/Dialogs/AddToLayoutButton/AddToLayoutButton.js
@@ -4,7 +4,7 @@ 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 { AXIS_NAME_COLUMNS } from '@dhis2/analytics';
 
 import UpdateButton from '../../../UpdateButton/UpdateButton';
 import Menu from './Menu';

diff --git a/packages/app/src/components/DimensionsPanel/Dialogs/DialogManager.js b/packages/app/src/components/DimensionsPanel/Dialogs/DialogManager.js
@@ -17,7 +17,7 @@ import {
     DIMENSION_ID_PERIOD,
     DIMENSION_ID_ORGUNIT,
     FIXED_DIMENSIONS,
-} from '@dhis2/d2-ui-analytics';
+} from '@dhis2/analytics';
 
 import HideButton from './HideButton';
 import AddToLayoutButton from './AddToLayoutButton/AddToLayoutButton';

diff --git a/packages/app/src/components/DimensionsPanel/Dialogs/__tests__/DialogManager.spec.js b/packages/app/src/components/DimensionsPanel/Dialogs/__tests__/DialogManager.spec.js
@@ -4,7 +4,7 @@ import {
     DIMENSION_ID_DATA,
     DIMENSION_ID_PERIOD,
     DIMENSION_ID_ORGUNIT,
-} from '@dhis2/d2-ui-analytics';
+} from '@dhis2/analytics';
 
 import { DialogManager } from '../DialogManager';
 
@@ -18,7 +18,7 @@ jest.mock('@material-ui/core/DialogActions', () => props => (
     <div id="mock-mui-dialog-actions">{props.children}</div>
 ));
 
-jest.mock('@dhis2/d2-ui-analytics', () => {
+jest.mock('@dhis2/analytics', () => {
     const dataId = 'dx';
     const periodId = 'pe';
     const ouId = 'ou';

diff --git a/packages/app/src/components/DimensionsPanel/DimensionsPanel.js b/packages/app/src/components/DimensionsPanel/DimensionsPanel.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { DIMENSION_ID_PERIOD, DimensionsPanel } from '@dhis2/d2-ui-analytics';
+import { DIMENSION_ID_PERIOD, DimensionsPanel } from '@dhis2/analytics';
 
 import DialogManager from './Dialogs/DialogManager';
 import DimensionOptions from './DimensionOptions/DimensionOptions';

diff --git a/packages/app/src/components/DimensionsPanel/__tests__/DimensionsPanel.spec.js b/packages/app/src/components/DimensionsPanel/__tests__/DimensionsPanel.spec.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { DimensionsPanel } from '@dhis2/d2-ui-analytics';
+import { DimensionsPanel } from '@dhis2/analytics';
 
 import { Dimensions } from '../DimensionsPanel';
 

diff --git a/packages/app/src/components/Layout/Chip.js b/packages/app/src/components/Layout/Chip.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import i18n from '@dhis2/d2-i18n';
-import { FIXED_DIMENSIONS } from '@dhis2/d2-ui-analytics';
+import { FIXED_DIMENSIONS } from '@dhis2/analytics';
 
 import Menu from './Menu';
 import Tooltip from './Tooltip';

diff --git a/packages/app/src/components/Layout/DefaultLayout/DefaultAxis.js b/packages/app/src/components/Layout/DefaultLayout/DefaultAxis.js
@@ -7,7 +7,7 @@ import {
     AXIS_NAME_COLUMNS,
     AXIS_NAMES,
     DIMENSION_ID_DATA,
-} from '@dhis2/d2-ui-analytics';
+} from '@dhis2/analytics';
 
 import Chip from '../Chip';
 import { sGetUi } from '../../../reducers/ui';

diff --git a/packages/app/src/components/Layout/PieLayout/PieLayout.js b/packages/app/src/components/Layout/PieLayout/PieLayout.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { AXIS_NAME_COLUMNS, AXIS_NAME_FILTERS } from '@dhis2/d2-ui-analytics';
+import { AXIS_NAME_COLUMNS, AXIS_NAME_FILTERS } from '@dhis2/analytics';
 
 import DefaultAxis from '../DefaultLayout/DefaultAxis';
 import defaultAxisStyles from '../DefaultLayout/styles/DefaultAxis.style';

diff --git a/packages/app/src/components/Layout/YearOverYearLayout/YearOverYearLayout.js b/packages/app/src/components/Layout/YearOverYearLayout/YearOverYearLayout.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { AXIS_NAME_FILTERS } from '@dhis2/d2-ui-analytics';
+import { AXIS_NAME_FILTERS } from '@dhis2/analytics';
 
 import DefaultAxis from '../DefaultLayout/DefaultAxis';
 import defaultLayoutStyles from '../DefaultLayout/styles/DefaultLayout.style';

diff --git a/packages/app/src/modules/__tests__/current.spec.js b/packages/app/src/modules/__tests__/current.spec.js
@@ -5,7 +5,7 @@ import {
     DIMENSION_ID_DATA,
     DIMENSION_ID_PERIOD,
     DIMENSION_ID_ORGUNIT,
-} from '@dhis2/d2-ui-analytics';
+} from '@dhis2/analytics';
 
 import { getAxesFromUi } from '../current';
 

diff --git a/packages/app/src/modules/__tests__/layoutAdapters.spec.js b/packages/app/src/modules/__tests__/layoutAdapters.spec.js
@@ -5,7 +5,7 @@ import {
     DIMENSION_ID_DATA,
     DIMENSION_ID_PERIOD,
     DIMENSION_ID_ORGUNIT,
-} from '@dhis2/d2-ui-analytics';
+} from '@dhis2/analytics';
 
 import { pieLayoutAdapter, yearOverYearLayoutAdapter } from '../layoutAdapters';
 

diff --git a/packages/app/src/modules/current.js b/packages/app/src/modules/current.js
@@ -6,7 +6,7 @@ import {
     DIMENSION_ID_DATA,
     DIMENSION_ID_PERIOD,
     dimensionCreate,
-} from '@dhis2/d2-ui-analytics';
+} from '@dhis2/analytics';
 
 import options from './options';
 import {} from './layout';

diff --git a/packages/app/src/modules/currentAnalyticalObject.js b/packages/app/src/modules/currentAnalyticalObject.js
@@ -1,7 +1,7 @@
 import {
     DIMENSION_ID_ORGUNIT,
     layoutGetAxisNameDimensionIdsObject,
-} from '@dhis2/d2-ui-analytics';
+} from '@dhis2/analytics';
 
 import { getInverseLayout } from './layout';
 

diff --git a/packages/app/src/modules/layout.js b/packages/app/src/modules/layout.js
@@ -3,7 +3,7 @@ import {
     AXIS_NAME_COLUMNS,
     AXIS_NAME_ROWS,
     AXIS_NAME_FILTERS,
-} from '@dhis2/d2-ui-analytics';
+} from '@dhis2/analytics';
 
 // Names for dnd sources
 export const SOURCE_DIMENSIONS = 'dimensions';

diff --git a/packages/app/src/modules/layoutAdapters.js b/packages/app/src/modules/layoutAdapters.js
@@ -3,7 +3,7 @@ import {
     AXIS_NAME_ROWS,
     AXIS_NAME_FILTERS,
     DIMENSION_ID_PERIOD,
-} from '@dhis2/d2-ui-analytics';
+} from '@dhis2/analytics';
 
 // Transform from ui.layout to pie layout format
 export const pieLayoutAdapter = layout => {

diff --git a/packages/app/src/modules/layoutValidation.js b/packages/app/src/modules/layoutValidation.js
@@ -6,7 +6,7 @@ import {
     FIXED_DIMENSIONS,
     dimensionIsValid,
     layoutGetDimension,
-} from '@dhis2/d2-ui-analytics';
+} from '@dhis2/analytics';
 
 import {
     YEAR_OVER_YEAR_LINE,

diff --git a/packages/app/src/modules/ui.js b/packages/app/src/modules/ui.js
@@ -3,7 +3,7 @@ import {
     DIMENSION_ID_ORGUNIT,
     layoutGetAxisNameDimensionIdsObject,
     layoutGetDimensionIdItemIdsObject,
-} from '@dhis2/d2-ui-analytics';
+} from '@dhis2/analytics';
 
 import {
     YEAR_OVER_YEAR_LINE,

diff --git a/packages/app/src/reducers/__tests__/current.spec.js b/packages/app/src/reducers/__tests__/current.spec.js
@@ -2,7 +2,7 @@ import {
     DIMENSION_ID_DATA,
     DIMENSION_ID_PERIOD,
     DIMENSION_ID_ORGUNIT,
-} from '@dhis2/d2-ui-analytics';
+} from '@dhis2/analytics';
 
 import options from '../../modules/options';
 import reducer, {

diff --git a/packages/app/src/reducers/__tests__/dimensions.spec.js b/packages/app/src/reducers/__tests__/dimensions.spec.js
@@ -1,4 +1,4 @@
-import { FIXED_DIMENSIONS } from '@dhis2/d2-ui-analytics';
+import { FIXED_DIMENSIONS } from '@dhis2/analytics';
 
 import reducer, { SET_DIMENSIONS } from '../dimensions';
 

diff --git a/packages/app/src/reducers/__tests__/ui.spec.js b/packages/app/src/reducers/__tests__/ui.spec.js
@@ -5,7 +5,7 @@ import {
     AXIS_NAME_COLUMNS,
     AXIS_NAME_ROWS,
     AXIS_NAME_FILTERS,
-} from '@dhis2/d2-ui-analytics';
+} from '@dhis2/analytics';
 
 import * as ui from '../ui';
 import { BAR } from '../../modules/chartTypes';

diff --git a/packages/app/src/reducers/dimensions.js b/packages/app/src/reducers/dimensions.js
@@ -1,4 +1,4 @@
-import { FIXED_DIMENSIONS as DEFAULT_DIMENSIONS } from '@dhis2/d2-ui-analytics';
+import { FIXED_DIMENSIONS as DEFAULT_DIMENSIONS } from '@dhis2/analytics';
 
 export const SET_DIMENSIONS = 'SET_DIMENSIONS';
 export const SET_SELECTED_DIMENSION = 'SET_SELECTED_DIMENSION';

diff --git a/packages/app/src/reducers/ui.js b/packages/app/src/reducers/ui.js
@@ -5,7 +5,7 @@ import {
     DIMENSION_ID_ORGUNIT,
     AXIS_NAME_COLUMNS,
     AXIS_NAME_ROWS,
-} from '@dhis2/d2-ui-analytics';
+} from '@dhis2/analytics';
 
 import { getFilteredLayout, getSwapModObj } from '../modules/layout';
 import { getOptionsForUi } from '../modules/options';

diff --git a/packages/plugin/package.json b/packages/plugin/package.json
@@ -5,8 +5,8 @@
     "main": "./build/index.js",
     "license": "BSD-3-Clause",
     "dependencies": {
+        "@dhis2/analytics": "2.1.1",
         "@material-ui/core": "^3.1.2",
-        "d2-charts-api": "33.0.1",
         "lodash-es": "^4.17.11",
         "react": "^16.6.0",
         "react-dom": "^16.6.0"

diff --git a/packages/plugin/src/ChartPlugin.js b/packages/plugin/src/ChartPlugin.js
@@ -1,7 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash-es/isEqual';
-import { createChart } from 'd2-charts-api';
+import { createVisualization } from '@dhis2/analytics';
 
 import { apiFetchVisualization } from './api/visualization';
 import {
@@ -20,7 +20,7 @@ class ChartPlugin extends Component {
 
         this.canvasRef = React.createRef();
 
-        this.recreateChart = Function.prototype;
+        this.recreateVisualization = Function.prototype;
 
         this.state = {
             isLoading: true,
@@ -43,8 +43,11 @@ class ChartPlugin extends Component {
         }
 
         // id set by DV app, style works in dashboards
-        if (this.props.id !== prevProps.id || !isEqual(this.props.style, prevProps.style)) {
-            this.recreateChart(0); // disable animation
+        if (
+            this.props.id !== prevProps.id ||
+            !isEqual(this.props.style, prevProps.style)
+        ) {
+            this.recreateVisualization(0); // disable animation
             return;
         }
     }
@@ -134,8 +137,8 @@ class ChartPlugin extends Component {
                 onResponsesReceived(responses);
             }
 
-            this.recreateChart = animation => {
-                const chartConfig = createChart(
+            this.recreateVisualization = animation => {
+                const visualizationConfig = createVisualization(
                     responses,
                     visualization,
                     this.canvasRef.current,
@@ -146,14 +149,14 @@ class ChartPlugin extends Component {
                 );
 
                 onChartGenerated(
-                    chartConfig.chart.getSVGForExport({
+                    visualizationConfig.visualization.getSVGForExport({
                         sourceHeight: 768,
                         sourceWidth: 1024,
                     })
                 );
             };
 
-            this.recreateChart();
+            this.recreateVisualization();
 
             this.setState({ isLoading: false });
         } catch (error) {

diff --git a/packages/plugin/src/__tests__/ChartPlugin.spec.js b/packages/plugin/src/__tests__/ChartPlugin.spec.js
@@ -2,13 +2,13 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import LoadingMask from '../widgets/LoadingMask';
 import ChartPlugin from '../ChartPlugin';
-import * as chartsApi from 'd2-charts-api';
+import * as analytics from '@dhis2/analytics';
 import * as api from '../api/analytics';
 import * as apiViz from '../api/visualization';
 import * as options from '../modules/options';
 import { YEAR_OVER_YEAR_LINE, COLUMN } from '../modules/chartTypes';
 
-jest.mock('d2-charts-api');
+jest.mock('@dhis2/analytics');
 
 const dxMock = {
     dimension: 'dx',
@@ -83,8 +83,8 @@ class MockYoYAnalyticsResponse {
     }
 }
 
-const createChartMock = {
-    chart: {
+const createVisualizationMock = {
+    visualization: {
         getSVGForExport: () => '<svg />',
     },
 };
@@ -135,9 +135,11 @@ describe('ChartPlugin', () => {
         ).toBeTruthy();
     });
 
-    describe('createChart success', () => {
+    describe('createVisualization success', () => {
         beforeEach(() => {
-            chartsApi.createChart = jest.fn().mockReturnValue(createChartMock);
+            analytics.createVisualization = jest
+                .fn()
+                .mockReturnValue(createVisualizationMock);
         });
 
         it('renders a div', done => {
@@ -154,11 +156,11 @@ describe('ChartPlugin', () => {
             done();
         });
 
-        it('calls createChart', done => {
+        it('calls createVisualization', done => {
             canvas();
 
             setTimeout(() => {
-                expect(chartsApi.createChart).toHaveBeenCalled();
+                expect(analytics.createVisualization).toHaveBeenCalled();
                 done();
             });
         });
@@ -220,7 +222,7 @@ describe('ChartPlugin', () => {
             setTimeout(() => {
                 expect(props.onChartGenerated).toHaveBeenCalled();
                 expect(props.onChartGenerated).toHaveBeenCalledWith(
-                    createChartMock.chart.getSVGForExport()
+                    createVisualizationMock.visualization.getSVGForExport()
                 );
                 done();
             });
@@ -284,18 +286,18 @@ describe('ChartPlugin', () => {
                 });
             });
 
-            it('provides extra options to createChart', done => {
+            it('provides extra options to createVisualization', done => {
                 canvas();
 
                 setTimeout(() => {
-                    expect(chartsApi.createChart).toHaveBeenCalled();
+                    expect(analytics.createVisualization).toHaveBeenCalled();
 
                     const expectedExtraOptions = {
                         yearlySeries: mockYoYSeriesLabels,
                         xAxisLabels: ['period 1', 'period 2'],
                     };
 
-                    expect(chartsApi.createChart.mock.calls[0][3]).toEqual({
+                    expect(analytics.createVisualization.mock.calls[0][3]).toEqual({
                         animation: undefined,
                         dashboard: false,
                         ...expectedExtraOptions,