Provide d2 as a prop rather than being a dependency

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

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import i18n from '@dhis2/d2-i18n';
@@ -107,6 +108,7 @@ export class Visualization extends Component {
         ) : (
             <ChartPlugin
                 id={renderId}
+                d2={this.context.d2}
                 config={chartConfig}
                 filters={chartFilters}
                 onChartGenerated={this.onChartGenerated}
@@ -118,6 +120,10 @@ export class Visualization extends Component {
     }
 }
 
+Visualization.contextTypes = {
+    d2: PropTypes.object,
+};
+
 export const chartConfigSelector = createSelector(
     [sGetCurrent, sGetVisualization, sGetUiInterpretation],
     (current, visualization, interpretation) =>

packages/plugin/package.json

@@ -6,7 +6,6 @@
     "license": "BSD-3-Clause",
     "dependencies": {
         "@material-ui/core": "^3.1.2",
-        "d2": "31.2.1",
         "d2-charts-api": "^31.0.12",
         "lodash-es": "^4.17.11",
         "react": "^16.6.0",

packages/plugin/src/ChartPlugin.js

@@ -80,7 +80,7 @@ class ChartPlugin extends Component {
     };
 
     getConfigById = id => {
-        return apiFetchVisualization('chart', id);
+        return apiFetchVisualization(this.props.d2, 'chart', id);
     };
 
     renderChart = async () => {
@@ -118,7 +118,11 @@ class ChartPlugin extends Component {
                 extraOptions[BASE_FIELD_YEARLY_SERIES] = yearlySeriesLabels;
                 extraOptions.xAxisLabels = computeGenericPeriodNames(responses);
             } else {
-                responses = await apiFetchAnalytics(visualization, options);
+                responses = await apiFetchAnalytics(
+                    this.props.d2,
+                    visualization,
+                    options
+                );
             }
 
             if (responses.length) {
@@ -175,6 +179,7 @@ ChartPlugin.defaultProps = {
 
 ChartPlugin.propTypes = {
     id: PropTypes.number,
+    d2: PropTypes.object.isRequired,
     animation: PropTypes.number,
     config: PropTypes.object.isRequired,
     filters: PropTypes.object,

packages/plugin/src/__tests__/ChartPlugin.spec.js

@@ -109,6 +109,7 @@ describe('ChartPlugin', () => {
             filters: {},
             style: { height: 100 },
             id: 1,
+            d2: {},
             forDashboard: false,
             onChartGenerated: jest.fn(),
             onResponsesReceived: jest.fn(),
@@ -173,7 +174,7 @@ describe('ChartPlugin', () => {
 
             setTimeout(() => {
                 expect(api.apiFetchAnalytics).toHaveBeenCalled();
-                expect(api.apiFetchAnalytics.mock.calls[0][1]).toEqual({
+                expect(api.apiFetchAnalytics.mock.calls[0][2]).toEqual({
                     option1: 'def',
                 });
 
@@ -193,6 +194,7 @@ describe('ChartPlugin', () => {
             setTimeout(() => {
                 expect(apiViz.apiFetchVisualization).toHaveBeenCalled();
                 expect(apiViz.apiFetchVisualization).toHaveBeenCalledWith(
+                    props.d2,
                     'chart',
                     'test1'
                 );
@@ -244,7 +246,7 @@ describe('ChartPlugin', () => {
 
             setTimeout(() => {
                 expect(api.apiFetchAnalytics).toHaveBeenCalled();
-                expect(api.apiFetchAnalytics.mock.calls[0][1]).toHaveProperty(
+                expect(api.apiFetchAnalytics.mock.calls[0][2]).toHaveProperty(
                     'relativePeriodDate',
                     period
                 );

packages/plugin/src/api/analytics.js

@@ -1,10 +1,6 @@
-import { getInstance } from 'd2';
-
 const peId = 'pe';
 
-export const apiFetchAnalytics = async (current, options) => {
-    const d2 = await getInstance();
-
+export const apiFetchAnalytics = async (d2, current, options) => {
     const req = new d2.analytics.request()
         .fromModel(current)
         .withParameters(options);
@@ -14,9 +10,11 @@ export const apiFetchAnalytics = async (current, options) => {
     return [new d2.analytics.response(rawResponse)];
 };
 
-export const apiFetchAnalyticsForYearOverYear = async (current, options) => {
-    const d2 = await getInstance();
-
+export const apiFetchAnalyticsForYearOverYear = async (
+    d2,
+    current,
+    options
+) => {
     let yearlySeriesReq = new d2.analytics.request()
         .addPeriodDimension(current.yearlySeries)
         .withSkipData(true)

packages/plugin/src/api/visualization.js

@@ -1,9 +1,6 @@
-import { getInstance } from 'd2';
 import { getFieldsStringByType } from '../modules/fields';
 
-export const apiFetchVisualization = (type, id) =>
-    getInstance().then(d2 =>
-        d2.models[type].get(id, {
-            fields: getFieldsStringByType(type),
-        })
-    );
+export const apiFetchVisualization = (d2, type, id) =>
+    d2.models[type].get(id, {
+        fields: getFieldsStringByType(type),
+    });