Resolve Third-Party Library Conflicts Between Custom Visualizations

You can easily resolve third-party library conflicts between custom visualizations, in the same document, report, or dashboard, that depend on different libraries. This issue may occur with older visualizations created outside of the Custom Visualization Tool.

The Custom Visualization Tool provides an easy way to build modular custom visualizations. Let's say you have two custom visualizations in the same dashboard. One visualization uses DS.js-4.1.0. Another visualization uses D3.js-3.5.1. Both are inited in global scope and mounted to window, so the last visualization to load overrides the previous one, which may cause potential risks and errors. To resolve this, you can migrate your old custom visualization, so you can load D3.js in a modular way. Please note that this procedure intentionally uses an older version of the D3WordCloud visualization code.

1. Open the .js file that contains your custom visualization.

2. Remove externalLibraries and noConflictLibraries, if they exist.

   Copy

       mstrmojo.plugins.D3WordCloud.D3WordCloud = mstrmojo.declare(
           mstrmojo.CustomVisBase,
           null,
           {
               scriptClass: "mstrmojo.plugins.D3WordCloud.D3WordCloud",
               cssClass: "d3wordcloud",
               errorMessage: "Either there is not enough data to display the visualization or the visualization configuration is incomplete.",
               errorDetails: "This visualization requires one or more attributes and one metric.",
               externalLibraries: [
                   {url: "//d3js.org/d3.v4.min.js"},
                   {url: (mstrApp.getPluginsRoot && mstrApp.getPluginsRoot() || "../plugins/") + "D3WordCloud/javascript/mojo/js/source/d3.layout.cloud.js"}
               ],
               noConflictLibraries: [
                   mstrmojo.CustomVisBase.ENUM_EXTERNAL_LIBS.D3
               ],
               useRichTooltip: false,
               reuseDOMNode: false,
               draggable: false,

3. Open a command line and navigate to the folder that contains your custom visualization.

4. Run the npm install command to install a third-party library/package via Node Package Manager. The --save prod portion of the command shown below saves the package in your devDependencies. d3 represents name of the package and @4 represents the version. Your command will be different, based on the package you are installing. See Install a package in the NPM online help for more information about using the npm install command to install packages.

   Copy

   npm install --save-prod d3@4

5. Open the .js file that contains your custom visualization.

6. Import the packages at the beginning of the file as shown below. Your code will vary based on the packages you are importing.

   Copy

   import * as d3 from 'd3';
   import cloud from 'd3-cloud';
   // mojo module
   mstrmojo.requiresCls('mstrmojo.CustomVisBase');
   
   const { GraphicModel } = mstrmojo.customviz;
   const { ENUM_RAW_DATA_FORMAT } = mstrmojo.models.template.DataInterface;