D3 to v7 upgrade POC

package.json

@@ -24,6 +24,9 @@
   "browserslist": [
     "extends @cerner/browserslist-config-terra"
   ],
+  "dependencies": {
+    "d3": "^7.0.0"
+  },
   "devDependencies": {
     "@babel/cli": "^7.5.0",
     "@babel/core": "^7.5.0",

packages/carbon-graphs/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Updated for compatibility with d3 v7.
+
 ## 2.23.1 - (August 21, 2023)
 
 * Fixed

packages/carbon-graphs/dev/examples/controls/colors.js

@@ -1,4 +1,4 @@
-import * as d3 from '../../../src/js/d3Modules';
+import * as d3 from 'd3';
 import Carbon from '../../../src/js/carbon';
 
 import { vector } from '../helpers';

packages/carbon-graphs/dev/examples/controls/line.js

@@ -1,4 +1,4 @@
-import * as d3 from '../../../src/js/d3Modules';
+import * as d3 from 'd3';
 import Carbon from '../../../src/js/carbon';
 import utils from '../../../src/js/helpers/utils';
 

packages/carbon-graphs/dev/examples/controls/shapes.js

@@ -1,4 +1,4 @@
-import * as d3 from '../../../src/js/d3Modules';
+import * as d3 from 'd3';
 import Carbon from '../../../src/js/carbon';
 import { getBar, getHashedBar } from '../../../src/js/helpers/barType';
 import styles from '../../../src/js/helpers/styles';

packages/carbon-graphs/dev/examples/panHelpers.js

@@ -1,4 +1,4 @@
-import * as d3 from '../../src/js/d3Modules';
+import * as d3 from 'd3';
 import Carbon from '../../src/js/carbon';
 
 import {

packages/carbon-graphs/dev/examples/popup.js

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import * as d3 from "../../src/js/d3Modules";
+import * as d3 from 'd3';
 import constants from "../../src/js/helpers/constants";
 import utils from "../../src/js/helpers/utils";
 

packages/carbon-graphs/package.json

@@ -50,22 +50,7 @@
     "access": "public"
   },
   "dependencies": {
-    "d3-array": "1",
-    "d3-axis": "1",
-    "d3-drag": "1",
-    "d3-ease": "1",
-    "d3-format": "1",
-    "d3-geo": "1",
-    "d3-hierarchy": "1",
-    "d3-interpolate": "1",
-    "d3-path": "1",
-    "d3-scale": "2",
-    "d3-selection": "1",
-    "d3-shape": "1",
-    "d3-time": "1",
-    "d3-time-format": "2",
-    "d3-timer": "1",
-    "d3-transition": "1.3.0"
+    "d3": "^7.0.0"
   },
   "devDependencies": {
     "@cerner/carbon-site-helpers": "^1.11.3",

packages/carbon-graphs/src/js/controls/Bar/helpers/axisInfoRowHelpers.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import * as d3 from '../../../d3Modules';
+import * as d3 from 'd3';
 import { Shape } from '../../../core';
 import { getDefaultSVGProps } from '../../../core/Shape';
 import {
@@ -112,7 +112,7 @@ const toggleDataPointSelection = (value, canvasSVG, type, uniqueKey, index) => {
  * @param {string} uniqueKey - unique id of the content loaded in graph
  * @returns {undefined} - returns nothing
  */
-const axisInfoRowActionHandler = (value, index, canvasSVG, type, uniqueKey) => {
+const axisInfoRowActionHandler = (value, index, canvasSVG, type, uniqueKey, event) => {
   if (utils.isEmpty(value.onClick)) {
     return;
   }
@@ -125,6 +125,7 @@ const axisInfoRowActionHandler = (value, index, canvasSVG, type, uniqueKey) => {
       index,
       uniqueKey,
       selectedTarget,
+      event,
     ),
   );
 };
@@ -238,13 +239,14 @@ const createAxisInfoRowLabel = (
         'aria-disabled',
         !utils.isFunction(textLabelList.value.onClick),
       )
-      .on('click', (value) => {
+      .on('click', (event, value) => {
         axisInfoRowActionHandler(
           value,
           index,
           canvasSVG,
           config.axis.x.type,
           uniqueKey,
+          event,
         );
       });
   }

packages/carbon-graphs/src/js/controls/Bar/helpers/creationHelpers.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import * as d3 from '../../../d3Modules';
+import * as d3 from 'd3';
 import { getType } from '../../../core/BaseConfig';
 import {
   calculateVerticalPadding,
@@ -238,7 +238,7 @@ const toggleDataPointSelection = (value, canvasSVG, type, tickValues) => {
  * @param {Array} datum - selected bar data to be passed to onclick function
  * @returns {undefined} - returns nothing
  */
-const barActionHandler = (value, index, canvasSVG, type, tickValues, datum) => {
+const barActionHandler = (value, index, canvasSVG, type, tickValues, datum, event) => {
   if (utils.isEmpty(value.onClick)) {
     return;
   }
@@ -251,6 +251,7 @@ const barActionHandler = (value, index, canvasSVG, type, tickValues, datum) => {
       index,
       datum,
       selectedTarget,
+      event,
     ),
   );
 };
@@ -341,14 +342,15 @@ const drawDataBars = (
           config.shownTargets.indexOf(dataPoint.key) < 0,
         )
         .attr('aria-disabled', !utils.isFunction(dataPoint.onClick))
-        .on('click', (value) => {
+        .on('click', (event, value) => {
           barActionHandler(
             value,
             index,
             canvasSVG,
             config.axis.x.type,
             config.axis.x.ticks.values,
             getSelectedData(canvasSVG, value, config),
+            event,
           );
         });
       if (utils.notEmpty(regionList)) {

packages/carbon-graphs/src/js/controls/Bar/helpers/goalLineHelpers.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import * as d3 from '../../../d3Modules';
+import * as d3 from 'd3';
 import { parseTypedValue } from '../../../core/BaseConfig';
 import { isValidAxisType } from '../../../helpers/axis';
 import constants from '../../../helpers/constants';

packages/carbon-graphs/src/js/controls/Bar/helpers/legendHelpers.js

@@ -1,4 +1,4 @@
-import * as d3 from '../../../d3Modules';
+import * as d3 from 'd3';
 import {
   legendClickHandler,
   legendHoverHandler,

packages/carbon-graphs/src/js/controls/Bar/helpers/resizeHelpers.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import * as d3 from '../../../d3Modules';
+import * as d3 from 'd3';
 import { getXAxisRange } from '../../../helpers/axis';
 import constants from '../../../helpers/constants';
 import utils from '../../../helpers/utils';

packages/carbon-graphs/src/js/controls/Bubble/helpers/colorGradient.js

@@ -1,4 +1,4 @@
-import * as d3 from '../../../d3Modules';
+import * as d3 from 'd3';
 import constants, { BUBBLE } from '../../../helpers/constants';
 import utils from '../../../helpers/utils';
 

packages/carbon-graphs/src/js/controls/Bubble/helpers/helpers.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import * as d3 from '../../../d3Modules';
+import * as d3 from 'd3';
 import { parseTypedValue } from '../../../core/BaseConfig';
 import {
   calculateVerticalPadding,
@@ -143,9 +143,10 @@ const removeBubbleBlur = () => d3
  * @param {object} value - data point object
  * @param {number} index - data point index for the set
  * @param {object} target - DOM object of the clicked point
+ * @param {object} event - global click event
  * @returns {undefined} - returns nothing
  */
-const dataPointActionHandler = (value, index, target) => {
+const dataPointActionHandler = (value, index, target, event) => {
   if (utils.isEmpty(value.onClick)) {
     return;
   }
@@ -158,6 +159,7 @@ const dataPointActionHandler = (value, index, target) => {
     index,
     value,
     selectedTarget,
+    event,
   ));
 };
 /**
@@ -273,8 +275,8 @@ const drawBubbles = (scale, config, pointGroupPath, dataTarget, legendSVG) => {
       .attr(
         'aria-hidden', legendSVG ? legendSVG.select(`.${styles.legendItem}[aria-describedby='${value.key}']`)?.attr('aria-current') === 'false' : 'false',
       )
-      .on('click', function () {
-        dataPointActionHandler(value, index, this);
+      .on('click', function (event) {
+        dataPointActionHandler(value, index, this, event);
       });
 
     bubblePoint
@@ -293,8 +295,8 @@ const drawBubbles = (scale, config, pointGroupPath, dataTarget, legendSVG) => {
       .attr('aria-disabled', utils.isDefined(value.onClick))
       .attr('aria-hidden', true)
       .attr('aria-describedby', value.key)
-      .on('click', function () {
-        dataPointActionHandler(value, index, this);
+      .on('click', function (event) {
+        dataPointActionHandler(value, index, this, event);
       })
       .append('circle')
       .attr(

packages/carbon-graphs/src/js/controls/Bubble/helpers/helpersMultipleDataset.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import * as d3 from '../../../d3Modules';
+import * as d3 from 'd3';
 import {
   calculateVerticalPadding,
   getXAxisXPosition,
@@ -57,8 +57,8 @@ const drawBubbles = (scale, config, pointGroupPath, dataTarget) => {
           )
           ?.getAttribute('aria-current') === 'false',
       )
-      .on('click', function () {
-        dataPointActionHandler(value, index, this);
+      .on('click', function (event) {
+        dataPointActionHandler(value, index, this, event);
       });
 
     bubblePoint
@@ -77,8 +77,8 @@ const drawBubbles = (scale, config, pointGroupPath, dataTarget) => {
       .attr('aria-disabled', utils.isDefined(value.onClick))
       .attr('aria-hidden', true)
       .attr('aria-describedby', value.key)
-      .on('click', function () {
-        dataPointActionHandler(value, index, this);
+      .on('click', function (event) {
+        dataPointActionHandler(value, index, this, event);
       })
       .append('circle')
       .attr(

packages/carbon-graphs/src/js/controls/Bubble/helpers/helpersSingleDataset.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import * as d3 from '../../../d3Modules';
+import * as d3 from 'd3';
 import {
   calculateVerticalPadding,
   getXAxisXPosition,
@@ -80,8 +80,8 @@ const drawBubbles = (scale, config, pointGroupPath, dataTarget) => {
           )
           ?.getAttribute('aria-current') === 'false',
       )
-      .on('click', function () {
-        dataPointActionHandler(value, index, this);
+      .on('click', function (event) {
+        dataPointActionHandler(value, index, this, event);
       });
 
     bubblePoint
@@ -100,8 +100,8 @@ const drawBubbles = (scale, config, pointGroupPath, dataTarget) => {
       .attr('aria-disabled', utils.isDefined(value.onClick))
       .attr('aria-hidden', true)
       .attr('aria-describedby', value.key)
-      .on('click', function () {
-        dataPointActionHandler(value, index, this);
+      .on('click', function (event) {
+        dataPointActionHandler(value, index, this, event);
       })
       .append('circle')
       .attr(

packages/carbon-graphs/src/js/controls/Gantt/Gantt.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import * as d3 from '../../d3Modules';
+import * as d3 from 'd3';
 import Construct from '../../core/Construct';
 import { getYAxisHeight, setXAxisDomain } from '../../helpers/axis';
 import constants from '../../helpers/constants';

packages/carbon-graphs/src/js/controls/Gantt/Track.js

@@ -5,7 +5,7 @@
  * @typedef {object} GraphContent
  * @typedef {object} GanttConfig
  */
-import * as d3 from '../../d3Modules';
+import * as d3 from 'd3';
 import { GraphContent } from '../../core';
 import errors from '../../helpers/errors';
 import { loadLabelPopup, shouldTruncateLabel } from '../../helpers/label';
@@ -100,16 +100,17 @@ const addTrackLabelEventHandler = (canvasSVG, labelObj) => canvasSVG
         ? d3
           .select(this)
           .style('cursor', 'pointer')
-          .on('click', () => {
+          .on('click', (event) => {
             // If the consumer provides onclick function, it will override default onClick functionality provided by Carbon-graphs
             // eslint-disable-next-line no-unused-expressions
             utils.isDefined(labelObj.onClick)
             && utils.isFunction(labelObj.onClick)
               ? labelObj.onClick(
                 labelObj.display,
                 d3.select(this),
+                event,
               )
-              : loadLabelPopup(labelObj.display, 'y');
+              : loadLabelPopup(labelObj.display, 'y', event);
           })
         : null;
     }

packages/carbon-graphs/src/js/controls/Gantt/helpers/actionHelpers.js

@@ -1,4 +1,4 @@
-import * as d3 from '../../../d3Modules';
+import * as d3 from 'd3';
 import { Shape } from '../../../core';
 import { getDefaultSVGProps } from '../../../core/Shape';
 import constants, { SHAPES } from '../../../helpers/constants';
@@ -222,8 +222,8 @@ const renderDataPointPath = (scale, config, path, dataPoint, index, legendSVG) =
     svgClassNames: styles.point,
     svgStyles: `fill: ${getColorForTarget(dataPoint)};`,
     transformFn: transformPoint(scale, config)(dataPoint),
-    onClickFn() {
-      dataPointActionHandler(dataPoint, index, this);
+    onClickFn(event) {
+      dataPointActionHandler(dataPoint, index, this, event);
     },
     a11yAttributes: {
       'aria-hidden': legendSVG ? legendSVG.select(`.${styles.legendItem}[aria-describedby='${dataPoint.key}']`)?.attr('aria-current') === 'false' : 'false',

packages/carbon-graphs/src/js/controls/Gantt/helpers/activityHelpers.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import * as d3 from '../../../d3Modules';
+import * as d3 from 'd3';
 import { getXAxisXPosition } from '../../../helpers/axis';
 import { getRect } from '../../../helpers/barType';
 import constants, { COLORS } from '../../../helpers/constants';

packages/carbon-graphs/src/js/controls/Gantt/helpers/creationHelpers.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import * as d3 from '../../../d3Modules';
+import * as d3 from 'd3';
 import {
   getAxisTickFormat,
   getXAxisHeight,