Update codebase:

- CFDGraph.js
- CFDRenderer.js
- ScatterplotGraph.js
- UIControlsRenderer.js

Author: ClaudiaGivan

src/graphs/UIControlsRenderer.js

@@ -127,24 +127,25 @@ export default class UIControlsRenderer extends Renderer {
    * @returns {d3.Axis} - The configured D3 axis for the x-axis.
    */
   createXAxis(x, timeInterval = this.timeInterval) {
+    console.log("time interval", this.timeInterval)
     let axis;
     switch (timeInterval) {
-      case 'days':
+      case "days":
         axis = d3
             .axisBottom(x)
             .ticks(d3.timeDay.every(1)) // label every 2 days
             .tickFormat((d, i) => {
               return i % 2 === 0 ? d3.timeFormat("%b %d")(d) : "";
             });
         break;
-      case 'weeks':
+      case "weeks":
         axis = d3.axisBottom(x).ticks(d3.timeWeek);
         break;
-      case 'months':
+      case "months":
         axis = d3.axisBottom(x).ticks(d3.timeMonth);
         break;
       default:
-        axis = d3.axisBottom(x);
+        return d3.axisBottom(x);
     }
     return axis;
   }
@@ -155,6 +156,8 @@ export default class UIControlsRenderer extends Renderer {
    * and then redraws the x-axis based on the selected time range.
    */
   changeTimeInterval(isManualUpdate, chart) {
+    // console.log("this.timeInterval", this.timeInterval)
+
     if (isManualUpdate) {
     switch (this.timeInterval) {
       case 'weeks':
@@ -176,6 +179,7 @@ export default class UIControlsRenderer extends Renderer {
   }
 
   determineTheAppropriateAxisLabels() {
+    // console.log("this.reportingRangeDays", this.reportingRangeDays)
     if (this.reportingRangeDays <= 31) {
       return "days";
     }

src/graphs/cfd/CFDRenderer.js

@@ -49,7 +49,7 @@ class CFDRenderer extends UIControlsRenderer {
    *   }
    * ];
    */
-  constructor(data, states = ['analysis_active', 'analysis_done', 'in_progress', 'dev_complete', 'verification_start', 'delivered']) {
+  constructor(data, states) {
     super(data);
     this.states = states;
     this.#statesColors = d3.scaleOrdinal().domain(this.states).range(this.#colorPalette);
@@ -142,7 +142,8 @@ class CFDRenderer extends UIControlsRenderer {
     this.reportingRangeDays = calculateDaysBetweenDates(domain[0], domain[1])
     this.currentXScale = this.x.copy().domain(domain);
     this.currentYScale = this.y.copy().domain([0, maxY]).nice();
-    this.drawXAxis(this.gx, this.currentXScale, this.height);
+    this.changeTimeInterval(false, "cfd");
+    this.drawXAxis(this.gx, this.currentXScale, this.height,true);
     this.drawYAxis(this.gy, this.currentYScale);
 
     this.chartArea
@@ -178,7 +179,7 @@ class CFDRenderer extends UIControlsRenderer {
    */
   #drawArea() {
     this.chartArea = this.addClipPath(this.svg, 'cfd-clip');
-    // this.chartArea.append('rect').attr('width', '100%').attr('height', '100%').attr('id', 'cfd-area').attr('fill', 'transparent');
+    this.chartArea.append('rect').attr('width', '100%').attr('height', '100%').attr('id', 'cfd-area').attr('fill', 'transparent');
     const areaGenerator = this.#createAreaGenerator(this.x, this.y);
     this.#drawStackedAreaChart(this.chartArea, this.#stackedData, areaGenerator);
     this.#drawLegend();
@@ -323,7 +324,7 @@ class CFDRenderer extends UIControlsRenderer {
    * @param isGraph
    */
   drawXAxis(g, x, height = this.height, isGraph = false) {
-    const axis = this.createXAxis(x);
+    let axis;
     const clipId = 'cfd-x-axis-clip';
     this.svg
       .append('clipPath')
@@ -334,6 +335,7 @@ class CFDRenderer extends UIControlsRenderer {
       .attr('width', this.width)
       .attr('height', this.height);
     if (isGraph) {
+      axis = this.createXAxis(x);
       const axisGroup = g.call(axis).attr('transform', `translate(0, ${height})`);
       const axisPath = axisGroup
         .selectAll('path')
@@ -353,6 +355,7 @@ class CFDRenderer extends UIControlsRenderer {
       g.selectAll('text').attr('y', 30).style('fill', 'black');
       g.attr('clip-path', `url(#${clipId})`);
     } else {
+      axis = this.createXAxis(x, "months");
       g.call(axis).attr('transform', `translate(0, ${height})`);
     }
   }
@@ -554,10 +557,25 @@ class CFDRenderer extends UIControlsRenderer {
   #handleMouseEvent(event, eventName) {
     if (this.#areMetricsEnabled) {
       this.#removeMetricsLines();
-      const coords = d3.pointer(event, d3.select('#cfd-area').node()); // Get the mouse x-position
+      const coords = d3.pointer(event, d3.select('#cfd-area').node());
       const xPosition = coords[0];
       const yPosition = coords[1];
+
+      // Debug logs
+      // console.log("coords:", coords);
+      // console.log("xPosition:", xPosition, "yPosition:", yPosition);
+      // console.log("currentXScale domain:", this.currentXScale.domain());
+      // console.log("currentXScale range:", this.currentXScale.range());
+
+      // Ensure xPosition is within the chart's range
+      if (xPosition < 0 || xPosition > this.width) {
+        console.log("xPosition out of bounds:", xPosition);
+        return;
+      }
+
       const date = this.currentXScale.invert(xPosition);
+      // console.log("pointer", date, event, coords);
+
       const cumulativeCountOfWorkItems = this.currentYScale.invert(yPosition);
       const excludeCycleTime = eventName === 'scatterplot-mousemove';
 
@@ -597,7 +615,7 @@ class CFDRenderer extends UIControlsRenderer {
    */
   computeMetrics(currentDate, currentCumulativeCount, excludeCycleTime = false) {
     currentDate = new Date(currentDate);
-    currentDate.setUTCHours(0, 0, 0, 0);
+    // currentDate.setUTCHours(0, 0, 0, 0);
     const currentDataEntry = this.data.find((d) => areDatesEqual(new Date(d.date), currentDate));
     if (currentDataEntry) {
       const filteredData = this.data.filter((d) => d.date <= currentDate).reverse();

src/graphs/scatterplot/ScatterplotGraph.js

@@ -37,10 +37,10 @@ class ScatterplotGraph {
    *   }
    * ];
    */
-  constructor(data) {
-    this.data = data;
+  constructor(data, states = ["analysis_active", "analysis_done", "in_progress", "dev_complete", "verification_start", "delivered"]) {
+      this.data = data;
+      this.states = states;
   }
-
   /**
    * Computes the dataSet for the Scatterplot and Histogram graphs.
    *
@@ -65,12 +65,13 @@ class ScatterplotGraph {
       this.data.forEach((ticket) => {
           if (ticket.delivered) {
               const deliveredDate = new Date(ticket.delivered * 1000);
-              deliveredDate.setUTCHours(0, 0, 0, 0);
+              deliveredDate.setHours(0, 0, 0, 0);
               const scatterplotTicket = {
                   deliveredDate: deliveredDate,
                   leadTime: 0,
                   ticketId: ticket.work_id,
               };
+              console.log(scatterplotTicket)
               for (const state of this.states) {
                   if (ticket[state]) {
                       scatterplotTicket.leadTime = calculateDaysBetweenDates(ticket[state], ticket.delivered);