Fix the Scatterplot time scale selector bug

- update the percentile lines when the times scale changes

Author: ClaudiaGivan

examples/example.html

@@ -150,6 +150,15 @@ <h1 class="my-2 text-center font-bold">CFD</h1>
                 <div id="cfd-area-div"></div>
                 <div id="cfd-brush-div"></div>
                 <h1 class="my-2 text-center font-bold">Scatterplot</h1>
+                <div class="flex-1 flex flex-col items-end mr-16 mb-12">
+                    <label class="block my-2 text-sm mr-14 font-medium text-gray-900" for="time-scale-select">Time scale</label>
+                    <select
+                            class="bg-gray-50 border w-180px border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2"
+                            id="time-scale-select">
+                        <option selected value="logarithmic">logarithmic</option>
+                        <option value="linear">linear</option>
+                    </select>
+                </div>
                 <div id="scatterplot-area-div"></div>
                 <div id="scatterplot-brush-div"></div>
                 <h1 class="my-2 text-center font-bold">Histogram</h1>

src/graphs/Renderer.js

@@ -128,7 +128,7 @@ export default class Renderer {
       .append('text')
       .attr('text-anchor', 'end')
       .attr('x', -20)
-      .attr('y', -10)
+      .attr('y', -15)
       .text(yLabel)
       .attr('text-anchor', 'start')
       .style('font-size', this.axisLabelFontSize);

src/graphs/control-chart/ControlRenderer.js

@@ -10,15 +10,15 @@ class ControlRenderer extends ScatterplotRenderer {
     this.chartType = 'CONTROL';
     this.avgMovingRange = avgMovingRange;
     this.dotClass = 'control-dot';
+    this.yAxisLabel = 'Days';
   }
 
   setupEventBus(eventBus) {
     this.eventBus = eventBus;
     this.eventBus?.addEventListener('change-time-range-moving-range', this.updateBrushSelection.bind(this));
   }
 
-  renderGraph(graphElementSelector, timeScaleSelector) {
-    console.log(timeScaleSelector);
+  renderGraph(graphElementSelector) {
     this.drawSvg(graphElementSelector);
     this.drawAxes();
     this.drawArea();
@@ -28,11 +28,6 @@ class ControlRenderer extends ScatterplotRenderer {
     this.drawHorizontalLine(this.y, this.topLimit, 'purple', 'top');
     this.drawHorizontalLine(this.y, this.avgLeadTime, 'orange', 'center');
     this.bottomLimit > 0 && this.drawHorizontalLine(this.y, this.bottomLimit, 'purple', 'bottom');
-    console.log('avgLeadTime', this.avgLeadTime);
-    console.log('avgMovingRange', this.avgMovingRange);
-    console.log('top', this.topLimit);
-    console.log('bottom', this.bottomLimit);
-    this.drawAxesLabels(this.svg, 'Time', 'Days');
   }
 
   drawScatterplot(chartArea, data, x, y) {

src/graphs/moving-range/MovingRangeRenderer.js

@@ -17,8 +17,7 @@ class MovingRangeRenderer extends ScatterplotRenderer {
     this.eventBus?.addEventListener('change-time-range-control', this.updateBrushSelection.bind(this));
   }
 
-  renderGraph(graphElementSelector, timeScaleSelector) {
-    console.log(timeScaleSelector);
+  renderGraph(graphElementSelector) {
     this.drawSvg(graphElementSelector);
     this.drawAxes();
     this.drawArea();

src/graphs/scatterplot/ScatterplotRenderer.js

@@ -17,6 +17,7 @@ class ScatterplotRenderer extends UIControlsRenderer {
   yAxisLabel = '# of delivery days';
   timeScale = 'logarithmic';
   timeIntervalChangeEventName = 'change-time-interval-scatterplot';
+  workTicketsURL = '#';
 
   /**
    * Creates a ScatterplotRenderer instance
@@ -61,8 +62,7 @@ class ScatterplotRenderer extends UIControlsRenderer {
    * Renders the Scatterplot graph in a specified DOM element.
    * @param {string} graphElementSelector - The DOM selector for the graph element.
    */
-  renderGraph(graphElementSelector, timeScaleSelector) {
-    console.log(timeScaleSelector);
+  renderGraph(graphElementSelector) {
     this.drawSvg(graphElementSelector);
     this.drawAxes();
     this.drawArea();

src/graphs/scatterplot/SimpleScatterplotRenderer.js

@@ -49,13 +49,11 @@ class SimpleScatterplotRenderer extends ScatterplotRenderer {
     });
   }
 
-  renderGraph(graphElementSelector, timeScaleSelector) {
+  renderGraph(graphElementSelector) {
     this.drawSvg(graphElementSelector);
     this.drawAxes();
     this.drawArea();
     this.drawPercentileLines(this.data, this.y);
-    this.drawAxesLabels(this.svg, 'Time', '# of delivery days');
-    this.setTimeScaleListener(timeScaleSelector);
   }
 
   drawScatterplot(chartArea, data, x, y) {
@@ -78,7 +76,7 @@ class SimpleScatterplotRenderer extends ScatterplotRenderer {
 
   updateGraph(domain) {
     const focusData = this.updateChartArea(domain);
-    this.drawPercentileLines(this.svg, focusData, this.currentYScale);
+    this.drawPercentileLines(focusData, this.currentYScale);
     this.displayObservationMarkers(this.observations);
   }
 
@@ -89,7 +87,7 @@ class SimpleScatterplotRenderer extends ScatterplotRenderer {
       this.timeScaleSelectElement.addEventListener('change', (event) => {
         this.timeScale = event.target.value;
         this.computeYScale();
-        this.brushSelector ? this.renderBrush() : this.updateGraph(this.selectedTimeRange);
+        this.updateGraph(this.selectedTimeRange);
       });
     }
   }