Adjust baseline and brush

- adjust baseline to set a min and max available dates on the baseline date selector
- adjust brush selection range to the next correct available one

Author: ClaudiaGivan

src/graphs/Renderer.js

@@ -28,6 +28,7 @@ export default class Renderer {
    * @returns {d3.Selection} The created SVG element.
    */
   createSvg(selector, height = this.height, width = this.width) {
+    this.graphElementSelector = selector;
     const htmlElement = document.querySelector(selector);
     if (htmlElement) {
       htmlElement.innerHTML = '';

src/graphs/UIControlsRenderer.js

@@ -47,9 +47,41 @@ export default class UIControlsRenderer extends Renderer {
   updateBrushSelection(newTimeRange) {
     if (newTimeRange) {
       this.isManualBrushUpdate = false;
-      const maxX = newTimeRange[1] > this.x.domain()[1] ? this.x.domain()[1] : newTimeRange[1];
-      const minX = newTimeRange[0] < this.x.domain()[0] ? this.x.domain()[0] : newTimeRange[0];
-      this.selectedTimeRange = [minX, maxX];
+      const [newStart, newEnd] = newTimeRange;
+      const [domainStart, domainEnd] = this.x.domain();
+      const duration = newEnd - newStart;
+      let selectedMin = newStart;
+      let selectedMax = newEnd;
+      // Ensure selectedMin does not go before domainStart
+      const adjustSelectedMin = (calculatedMin) => {
+        if (calculatedMin < domainStart) {
+          return domainStart;
+        }
+        return calculatedMin;
+      };
+
+      // Check if newTimeRange exceeds the domain
+      if (newStart < domainStart || newEnd > domainEnd) {
+        selectedMax = domainEnd;
+
+        // Calculate selectedMin based on the duration
+        selectedMin = new Date(domainEnd.getTime() - duration);
+
+        // Ensure selectedMin does not go before domainStart
+        selectedMin = adjustSelectedMin(selectedMin);
+
+        if (selectedMin === domainStart) {
+          selectedMax = new Date(selectedMin.getTime() + duration);
+
+          // Ensure selectedMax does not exceed domainEnd
+          if (selectedMax > domainEnd) {
+            selectedMax = domainEnd;
+          }
+        }
+      }
+
+      this.selectedTimeRange = [selectedMin, selectedMax];
+
       // Set the flag before emitting an event
       this.preventEventLoop = true;
 

src/graphs/scatterplot/ScatterplotRenderer.js

@@ -226,18 +226,54 @@ class ScatterplotRenderer extends UIControlsRenderer {
     }
   }
 
-  setBaselineListener(baselineStartDateSelector, baselineEndDateSelector) {
-    this.baselineStartDateElement = document.querySelector(baselineStartDateSelector);
+  setBaselineListener(baselineStartDateSelector, baselineEndDateSelector, baselineErrorSelector, namespace) {
+    const lastIndex = this.data.length - 1;
+    this.baselineStartDateElement = d3.select(baselineStartDateSelector);
     if (this.baselineStartDateElement) {
-      this.baselineStartDateElement.addEventListener('change', (event) => {
-        this.baselineStartDate = new Date(event.target.value);
+      this.baselineStartDateElement.attr('min', new Date(this.data[0].deliveredDate).toISOString().split('T')[0]);
+      this.baselineStartDateElement.attr('max', new Date(this.data[lastIndex].deliveredDate).toISOString().split('T')[0]);
+      this.baselineStartDateElement.on(`change.${namespace}`, (event) => {
+        const selectedValue = d3.select(event.target).property('value');
+        this.baselineStartDate = new Date(selectedValue);
+
+        if (this.baselineEndDate && this.baselineStartDate > this.baselineEndDate) {
+          d3.select(baselineErrorSelector).style('display', 'block').text('Start date cannot be later than end date.');
+
+          // Reset the end date to the start date
+          this.baselineEndDateElement.property('value', selectedValue);
+          this.baselineEndDate = new Date(selectedValue);
+
+          // Hide the error message after 3 seconds
+          setTimeout(() => {
+            d3.select(baselineErrorSelector).style('display', 'none');
+          }, 3000);
+        }
+
         this.updateGraph(this.selectedTimeRange);
       });
     }
-    this.baselineEndDateElement = document.querySelector(baselineEndDateSelector);
+
+    this.baselineEndDateElement = d3.select(baselineEndDateSelector);
     if (this.baselineEndDateElement) {
-      this.baselineEndDateElement.addEventListener('change', (event) => {
-        this.baselineEndDate = new Date(event.target.value);
+      this.baselineEndDateElement.attr('min', new Date(this.data[0].deliveredDate).toISOString().split('T')[0]);
+      this.baselineEndDateElement.attr('max', new Date(this.data[lastIndex].deliveredDate).toISOString().split('T')[0]);
+      this.baselineEndDateElement.on(`change.${namespace}`, (event) => {
+        const selectedValue = d3.select(event.target).property('value');
+        this.baselineEndDate = new Date(selectedValue);
+
+        if (this.baselineStartDate && this.baselineStartDate > this.baselineEndDate) {
+          d3.select(baselineErrorSelector).style('display', 'block').text('End date cannot be earlier than start date.');
+
+          // Reset the start date to the end date
+          this.baselineStartDateElement.property('value', selectedValue);
+          this.baselineStartDate = new Date(selectedValue);
+
+          // Hide the error message after 3 seconds
+          setTimeout(() => {
+            d3.select(baselineErrorSelector).style('display', 'none');
+          }, 3000);
+        }
+
         this.updateGraph(this.selectedTimeRange);
       });
     }