?????

3 files changed, 11 insertions, 7 deletions

diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index b4f2a95121c..24b9b59d27c 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -3,7 +3,7 @@ import { scaleLinear, scaleTime } from 'd3-scale';
 import { axisLeft, axisBottom } from 'd3-axis';
 import _ from 'underscore';
 import { max, extent } from 'd3-array';
-import { select } from 'd3-selection';
+import { mouse, select } from 'd3-selection';
 import GraphAxis from './graph/axis.vue';
 import GraphLegend from './graph/legend.vue';
 import GraphFlag from './graph/flag.vue';
@@ -177,15 +177,16 @@ export default {
       this.point = this.point.matrixTransform(this.$refs.graphData.getScreenCTM().inverse());
       this.point.x += 7;
       const timeSeriesWithValues = this.timeSeries.find((series) => {
-        const timeValueOverlay = series.timeSeriesScaleX.invert(this.point.x);
+        const timeValueOverlay = series.timeSeriesScaleX.clamp(true).invert(this.point.x);
         const overlayIndex = bisectDate(series.values, timeValueOverlay);
         const d0 = series.values[overlayIndex - 1];
         const d1 = series.values[overlayIndex];
         return !(d0 === undefined || d1 === undefined);
       })
-      if (!timeSeriesWithValues) debugger
+      if (!timeSeriesWithValues) return;
       const firstTimeSeries = timeSeriesWithValues;
       const timeValueOverlay = firstTimeSeries.timeSeriesScaleX.invert(this.point.x);
+      console.log(timeValueOverlay)
       const overlayIndex = bisectDate(firstTimeSeries.values, timeValueOverlay);
       const d0 = firstTimeSeries.values[overlayIndex - 1];
       const d1 = firstTimeSeries.values[overlayIndex];
diff --git a/app/assets/javascripts/monitoring/mixins/monitoring_mixins.js b/app/assets/javascripts/monitoring/mixins/monitoring_mixins.js
index be8819e432f..5b555165d35 100644
--- a/app/assets/javascripts/monitoring/mixins/monitoring_mixins.js
+++ b/app/assets/javascripts/monitoring/mixins/monitoring_mixins.js
@@ -10,6 +10,7 @@ const mixins = {
         const deployment = d;
         if (d.xPos >= mouseXPos - 10 && d.xPos <= mouseXPos + 10 && !dataFound) {
           dataFound = d.xPos + 1;
+          debugger
 
           deployment.showDeploymentFlag = true;
         } else {
@@ -24,9 +25,9 @@ const mixins = {
     formatDeployments() {
       this.reducedDeploymentData = this.deploymentData.reduce((deploymentDataArray, deployment) => {
         const time = new Date(deployment.created_at);
-        const xPos = Math.floor(this.timeSeries[0].timeSeriesScaleX(time));
+        const xPos = Math.floor(this.activeTimeSeries[0].timeSeriesScaleX(time));
 
-        time.setSeconds(this.timeSeries[0].values[0].time.getSeconds());
+        time.setSeconds(this.activeTimeSeries[0].values[0].time.getSeconds());
 
         if (xPos >= 0) {
           const seriesIndex = bisectDate(this.timeSeries[0].values, time);
@@ -59,9 +60,8 @@ const mixins = {
         return;
       }
       this.currentXCoordinate = Math.floor(timeSeries.timeSeriesScaleX(this.currentData.time));
-      console.log(timeSeries)
 
-      this.currentCoordinates = this.timeSeries.map((series) => {
+      this.currentCoordinates = this.activeTimeSeries.map((series) => {
         const currentDataIndex = bisectDate(series.values, this.hoverData.hoveredDate);
         const currentData = series.values[currentDataIndex];
         if  (!currentData) { debugger; return null; }
diff --git a/app/assets/javascripts/monitoring/utils/multiple_time_series.js b/app/assets/javascripts/monitoring/utils/multiple_time_series.js
index 932403f0d0f..dd37f5c9608 100644
--- a/app/assets/javascripts/monitoring/utils/multiple_time_series.js
+++ b/app/assets/javascripts/monitoring/utils/multiple_time_series.js
@@ -3,6 +3,7 @@ import { scaleLinear, scaleTime } from 'd3-scale';
 import { line, area, curveLinear } from 'd3-shape';
 import { extent, max, sum } from 'd3-array';
 import { timeMinute } from 'd3-time';
+import { mouse } from 'd3-selection';
 import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 
 const d3 = {
@@ -15,6 +16,7 @@ const d3 = {
   max,
   timeMinute,
   sum,
+  mouse,
 };
 
 const defaultColorPalette = {
@@ -66,6 +68,7 @@ function queryTimeSeries(query, graphWidth, graphHeight, xDom, yDom, lineStyle)
     }
 
     const timeSeriesScaleX = d3.scaleTime().range([0, graphWidth]);
+    console.log(timeSeriesScaleX)
 
     const timeSeriesScaleY = d3.scaleLinear().range([graphHeight, 0]);