From 97cb783c4b734af047b8ea7ee861ca23ac586783 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <ozyx@users.noreply.github.com>
Date: Tue, 28 Nov 2023 14:07:34 -0800
Subject: [PATCH] chore: bump `d3-scale` and use ESModule imports (#7245)

Co-authored-by: John Hill <john.c.hill@nasa.gov>
---
 .webpack/webpack.common.js                         | 1 -
 package.json                                       | 2 +-
 src/plugins/imagery/components/ImageryTimeView.vue | 6 +++---
 src/plugins/plan/components/PlanView.vue           | 6 +++---
 src/plugins/timeConductor/ConductorAxis.vue        | 6 +++---
 src/ui/components/TimeSystemAxis.vue               | 6 +++---
 6 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/.webpack/webpack.common.js b/.webpack/webpack.common.js
index 0b02484aa0..77a6103e5b 100644
--- a/.webpack/webpack.common.js
+++ b/.webpack/webpack.common.js
@@ -71,7 +71,6 @@ const config = {
       bourbon: 'bourbon.scss',
       'plotly-basic': 'plotly.js-basic-dist',
       'plotly-gl2d': 'plotly.js-gl2d-dist',
-      'd3-scale': path.join(projectRootDir, 'node_modules/d3-scale/dist/d3-scale.min.js'),
       printj: path.join(projectRootDir, 'node_modules/printj/dist/printj.min.js'),
       styles: path.join(projectRootDir, 'src/styles'),
       MCT: path.join(projectRootDir, 'src/MCT'),
diff --git a/package.json b/package.json
index 4157b0c77e..37b7e1c504 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "cspell": "7.3.8",
     "css-loader": "6.8.1",
     "d3-axis": "3.0.0",
-    "d3-scale": "3.3.0",
+    "d3-scale": "4.0.2",
     "d3-selection": "3.0.0",
     "eslint": "8.54.0",
     "eslint-config-prettier": "9.0.0",
diff --git a/src/plugins/imagery/components/ImageryTimeView.vue b/src/plugins/imagery/components/ImageryTimeView.vue
index 44b2aacfaa..5f0809e30b 100644
--- a/src/plugins/imagery/components/ImageryTimeView.vue
+++ b/src/plugins/imagery/components/ImageryTimeView.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script>
-import * as d3Scale from 'd3-scale';
+import { scaleLinear, scaleUtc } from 'd3-scale';
 import _ from 'lodash';
 import mount from 'utils/mount';
 
@@ -220,10 +220,10 @@ export default {
       }
 
       if (timeSystem.isUTCBased) {
-        this.xScale = d3Scale.scaleUtc();
+        this.xScale = scaleUtc();
         this.xScale.domain([new Date(this.viewBounds.start), new Date(this.viewBounds.end)]);
       } else {
-        this.xScale = d3Scale.scaleLinear();
+        this.xScale = scaleLinear();
         this.xScale.domain([this.viewBounds.start, this.viewBounds.end]);
       }
 
diff --git a/src/plugins/plan/components/PlanView.vue b/src/plugins/plan/components/PlanView.vue
index b6a54957e3..cb35a2c6a0 100644
--- a/src/plugins/plan/components/PlanView.vue
+++ b/src/plugins/plan/components/PlanView.vue
@@ -53,7 +53,7 @@
 </template>
 
 <script>
-import * as d3Scale from 'd3-scale';
+import { scaleLinear, scaleUtc } from 'd3-scale';
 
 import SwimLane from '@/ui/components/swim-lane/SwimLane.vue';
 
@@ -342,10 +342,10 @@ export default {
       }
 
       if (timeSystem.isUTCBased) {
-        this.xScale = d3Scale.scaleUtc();
+        this.xScale = scaleUtc();
         this.xScale.domain([new Date(this.viewBounds.start), new Date(this.viewBounds.end)]);
       } else {
-        this.xScale = d3Scale.scaleLinear();
+        this.xScale = scaleLinear();
         this.xScale.domain([this.viewBounds.start, this.viewBounds.end]);
       }
 
diff --git a/src/plugins/timeConductor/ConductorAxis.vue b/src/plugins/timeConductor/ConductorAxis.vue
index 71672be46d..b2eb7a59e1 100644
--- a/src/plugins/timeConductor/ConductorAxis.vue
+++ b/src/plugins/timeConductor/ConductorAxis.vue
@@ -27,7 +27,7 @@
 
 <script>
 import * as d3Axis from 'd3-axis';
-import * as d3Scale from 'd3-scale';
+import { scaleLinear, scaleUtc } from 'd3-scale';
 import * as d3Selection from 'd3-selection';
 
 import { TIME_CONTEXT_EVENTS } from '../../api/time/constants';
@@ -135,9 +135,9 @@ export default {
       //The D3 scale used depends on the type of time system as d3
       // supports UTC out of the box.
       if (timeSystem.isUTCBased) {
-        this.xScale = d3Scale.scaleUtc();
+        this.xScale = scaleUtc();
       } else {
-        this.xScale = d3Scale.scaleLinear();
+        this.xScale = scaleLinear();
       }
 
       this.xAxis.scale(this.xScale);
diff --git a/src/ui/components/TimeSystemAxis.vue b/src/ui/components/TimeSystemAxis.vue
index d67ffd60f3..b3a796596f 100644
--- a/src/ui/components/TimeSystemAxis.vue
+++ b/src/ui/components/TimeSystemAxis.vue
@@ -27,7 +27,7 @@
 
 <script>
 import * as d3Axis from 'd3-axis';
-import * as d3Scale from 'd3-scale';
+import { scaleLinear, scaleUtc } from 'd3-scale';
 import * as d3Selection from 'd3-selection';
 
 import utcMultiTimeFormat from '@/plugins/timeConductor/utcMultiTimeFormat';
@@ -155,10 +155,10 @@ export default {
       }
 
       if (timeSystem.isUTCBased) {
-        this.xScale = d3Scale.scaleUtc();
+        this.xScale = scaleUtc();
         this.xScale.domain([new Date(bounds.start), new Date(bounds.end)]);
       } else {
-        this.xScale = d3Scale.scaleLinear();
+        this.xScale = scaleLinear();
         this.xScale.domain([bounds.start, bounds.end]);
       }