Build changeS:

- replace export default with export for classes
- change the entry point to the dist built file
- preserve the names of the classes and functions

package.json

@@ -2,7 +2,8 @@
   "name": "graphs-renderer",
   "version": "1.0.0",
   "description": "A library for rendering the graphs: CFD, Scatterplot and Histogram with d3.js",
-  "main": "./src/index.js",
+  "main": "./dist/graphs-renderer.js",
+  "module": "./dist/graphs-renderer.js",
   "type": "module",
   "scripts": {
     "build:dev": "webpack --mode development",
@@ -24,6 +25,7 @@
     "babel-loader": "^9.2.1",
     "d3": "^7.9.0",
     "imports-loader": "^4.0.1",
+    "terser-webpack-plugin": "^5.3.11",
     "webpack": "^5.96.1",
     "webpack-cli": "^5.1.4"
   },

src/graphs/ObservationLoggingService.js

@@ -1,4 +1,4 @@
-class ObservationLoggingService {
+export class ObservationLoggingService {
   observationsByService = { data: { rows: [] } };
   btoaToken = '';
   serviceId = '';
@@ -68,5 +68,3 @@ class ObservationLoggingService {
     return observation;
   }
 }
-
-export default ObservationLoggingService;

src/graphs/Renderer.js

@@ -3,7 +3,7 @@ import * as d3 from 'd3';
 /**
  * Represents a generic graphs renderer
  */
-export default class Renderer {
+export class Renderer {
   margin = { top: 30, right: 40, bottom: 70, left: 40 };
   width = 1040 - this.margin.left - this.margin.right;
   height = 460 - this.margin.top - this.margin.bottom;

src/graphs/UIControlsRenderer.js

@@ -1,11 +1,11 @@
 import { addDaysToDate, calculateDaysBetweenDates, readJsonFile } from '../utils/utils.js';
-import Renderer from './Renderer.js';
+import { Renderer } from './Renderer.js';
 import * as d3 from 'd3';
 
 /**
  * Extends Renderer to manage UI controls the graphs
  */
-export default class UIControlsRenderer extends Renderer {
+export class UIControlsRenderer extends Renderer {
   selectedTimeRange;
   preventEventLoop;
   chartName;

src/graphs/cfd/CFDGraph.js

@@ -3,7 +3,7 @@ import * as d3 from 'd3';
 /**
  * Class representing a Cumulative Flow Diagram (CFD) Graph Data
  */
-class CFDGraph {
+export class CFDGraph {
   /**
    * Creates a new CFDGraph instance.
    * @constructor
@@ -83,7 +83,7 @@ class CFDGraph {
         date: currentDate,
       };
       this.states.forEach((state, index) => {
-        dataEntry[state] = this.#getNoOfTicketsInState(this.states[index], currentTimestamp);
+        dataEntry[state] = this.getNoOfTicketsInState(this.states[index], currentTimestamp);
       });
       dataSet.push(dataEntry);
     }
@@ -100,14 +100,14 @@ class CFDGraph {
    * @param {number} timestamp - The timestamp at which to check the ticket state.
    * @returns {number} noOfTickets - The count of tickets in the specified state for the given timestamp.
    */
-  #getNoOfTicketsInState(state, timestamp) {
+  getNoOfTicketsInState(state, timestamp) {
     return this.data.filter((d) => {
       if (!d[state]) {
         return false;
       }
-      let nextState = this.#getNextState(state);
+      let nextState = this.getNextState(state);
       while (nextState !== null && !d[nextState]) {
-        nextState = this.#getNextState(nextState);
+        nextState = this.getNextState(nextState);
       }
       if (!d[nextState]) {
         return d[state] <= timestamp;
@@ -123,10 +123,8 @@ class CFDGraph {
    * @param {string} state - The current state of the ticket.
    * @returns {string|null} nextState - The next state in the ticket lifecycle, or null if there is no next state.
    */
-  #getNextState(state) {
+  getNextState(state) {
     const index = this.states.indexOf(state);
     return index >= 0 && index < this.states.length - 1 ? this.states[index + 1] : null;
   }
 }
-
-export default CFDGraph;

src/graphs/cfd/CFDRenderer.js

@@ -1,12 +1,12 @@
 import { calculateDaysBetweenDates, areDatesEqual, formatDateToLocalString } from '../../utils/utils.js';
-import UIControlsRenderer from '../UIControlsRenderer.js';
+import { UIControlsRenderer } from '../UIControlsRenderer.js';
 import styles from '../tooltipStyles.module.css';
 import * as d3 from 'd3';
 
 /**
  * Class representing a Cumulative Flow Diagram (CFD) graph renderer
  */
-class CFDRenderer extends UIControlsRenderer {
+export class CFDRenderer extends UIControlsRenderer {
   #colorPalette = ['#22c55e', '#bbf7d0', '#8b5cf6', '#ddd6fe', '#0ea5e9', '#bae6fd'];
   #statesColors;
   #leadTimeColor = 'yellow';
@@ -893,5 +893,3 @@ class CFDRenderer extends UIControlsRenderer {
 
   //endregion
 }
-
-export default CFDRenderer;

src/graphs/control-chart/ControlRenderer.js

@@ -1,7 +1,7 @@
-import ScatterplotRenderer from '../scatterplot/ScatterplotRenderer.js';
+import { ScatterplotRenderer } from '../scatterplot/ScatterplotRenderer.js';
 import * as d3 from 'd3';
 
-class ControlRenderer extends ScatterplotRenderer {
+export class ControlRenderer extends ScatterplotRenderer {
   color = '#0ea5e9';
   timeScale = 'linear';
   connectDots = false;
@@ -114,5 +114,3 @@ class ControlRenderer extends ScatterplotRenderer {
     this.displayObservationMarkers(this.observations);
   }
 }
-
-export default ControlRenderer;

src/graphs/histogram/HistogramRenderer.js

@@ -1,10 +1,10 @@
-import Renderer from '../Renderer.js';
+import { Renderer } from '../Renderer.js';
 import * as d3 from 'd3';
 
 /**
  * Class representing a Histogram graph renderer
  */
-class HistogramRenderer extends Renderer {
+export class HistogramRenderer extends Renderer {
   #color = '#0ea5e9';
   #padding = 3;
   #binnedData;
@@ -295,5 +295,3 @@ class HistogramRenderer extends Renderer {
 
   //endregion
 }
-
-export default HistogramRenderer;

src/graphs/moving-range/MovingRangeGraph.js

@@ -1,4 +1,4 @@
-class MovingRangeGraph {
+export class MovingRangeGraph {
   dataSet = [];
 
   constructor(data) {
@@ -30,5 +30,3 @@ class MovingRangeGraph {
     return Math.ceil(filteredData.reduce((acc, curr) => acc + curr.leadTime, 0) / filteredData.length);
   }
 }
-
-export default MovingRangeGraph;

src/graphs/moving-range/MovingRangeRenderer.js

@@ -1,7 +1,7 @@
-import ScatterplotRenderer from '../scatterplot/ScatterplotRenderer.js';
+import { ScatterplotRenderer } from '../scatterplot/ScatterplotRenderer.js';
 import * as d3 from 'd3';
 
-class MovingRangeRenderer extends ScatterplotRenderer {
+export class MovingRangeRenderer extends ScatterplotRenderer {
   color = '#0ea5e9';
   timeScale = 'linear';
 
@@ -98,4 +98,3 @@ class MovingRangeRenderer extends ScatterplotRenderer {
     this.drawGraphLimits(this.currentYScale);
   }
 }
-export default MovingRangeRenderer;

src/graphs/scatterplot/ScatterplotGraph.js

@@ -3,7 +3,7 @@ import { calculateDaysBetweenDates } from '../../utils/utils.js';
 /**
  * Class representing a Scatterplot Graph Data
  */
-class ScatterplotGraph {
+export class ScatterplotGraph {
   /**
    * Creates a new ScatterplotGraph instance.
    * @constructor
@@ -91,5 +91,3 @@ class ScatterplotGraph {
     return dataSet;
   }
 }
-
-export default ScatterplotGraph;

src/graphs/scatterplot/ScatterplotRenderer.js

@@ -1,13 +1,13 @@
 import { calculateDaysBetweenDates } from '../../utils/utils.js';
-import UIControlsRenderer from '../UIControlsRenderer.js';
+import { UIControlsRenderer } from '../UIControlsRenderer.js';
 import styles from '../tooltipStyles.module.css';
 
 import * as d3 from 'd3';
 
 /**
  * Class representing a Scatterplot graph renderer
  */
-class ScatterplotRenderer extends UIControlsRenderer {
+export class ScatterplotRenderer extends UIControlsRenderer {
   color = '#0ea5e9';
   currentXScale;
   currentYScale;
@@ -654,5 +654,3 @@ class ScatterplotRenderer extends UIControlsRenderer {
 
   //endregion
 }
-
-export default ScatterplotRenderer;

src/graphs/scatterplot/SimpleScatterplotRenderer.js

@@ -1,9 +1,9 @@
-import ScatterplotRenderer from './ScatterplotRenderer.js';
+import { ScatterplotRenderer } from './ScatterplotRenderer.js';
 
 /**
  * Class representing a Scatterplot graph renderer
  */
-class SimpleScatterplotRenderer extends ScatterplotRenderer {
+export class SimpleScatterplotRenderer extends ScatterplotRenderer {
   currentXScale;
   currentYScale;
   timeScale = 'logarithmic';
@@ -84,5 +84,3 @@ class SimpleScatterplotRenderer extends ScatterplotRenderer {
     percentile1 && this.drawHorizontalLine(y, percentile4, 'red', 'p4', '95%');
   }
 }
-
-export default SimpleScatterplotRenderer;

src/graphs/work-item-age/WorkItemAgeGraph.js

@@ -3,7 +3,7 @@ import { calculateDaysBetweenDates } from '../../utils/utils.js';
 /**
  * Class representing a Work Item Graph Data
  */
-class WorkItemAgeGraph {
+export class WorkItemAgeGraph {
   constructor(data, states = ['analysis_active', 'analysis_done', 'in_progress', 'dev_complete', 'verification_start', 'delivered']) {
     this.data = data;
     this.states = states;
@@ -46,5 +46,3 @@ class WorkItemAgeGraph {
     return ticketStates;
   }
 }
-
-export default WorkItemAgeGraph;