chore: bump d3-scale and use ESModule imports (#7245)

Co-authored-by: John Hill <[email protected]>

Author: ozyx

.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'),

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",

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]);
       }
 

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]);
       }
 

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);

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]);
       }