change a bunch more thingsmultiseries

5 files changed, 86 insertions, 38 deletions

diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index 24b9b59d27c..a091ed84363 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -183,15 +183,16 @@ export default {
         const d1 = series.values[overlayIndex];
         return !(d0 === undefined || d1 === undefined);
       })
-      if (!timeSeriesWithValues) return;
+      if (!timeSeriesWithValues) {
+        debugger
+        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];
       if (d0 === undefined || d1 === undefined) {
-        console.log('errrrr')
         return;
       }
       const evalTime = timeValueOverlay - d0[0] > d1[0] - timeValueOverlay;
@@ -317,7 +318,7 @@ export default {
             :area-color="path.areaColor"
             :current-coordinates="currentCoordinates[index]"
             :current-time-series-index="index"
-            :show-dot="(showFlagContent && currentCoordinates[index]) ? true : false"
+            :show-dot="showFlagContent"
           />
           <graph-deployment
             :deployment-data="reducedDeploymentData"
diff --git a/app/assets/javascripts/monitoring/components/graph/path.vue b/app/assets/javascripts/monitoring/components/graph/path.vue
index bc40981cfc6..b6a257a34b8 100644
--- a/app/assets/javascripts/monitoring/components/graph/path.vue
+++ b/app/assets/javascripts/monitoring/components/graph/path.vue
@@ -67,8 +67,9 @@ export default {
       class="metric-area"
     />
     <path
-      v-for="generatedLinePath in generatedLinePaths"
+      v-for="(generatedLinePath, index) in generatedLinePaths"
       :d="generatedLinePath"
+      :key="index"
       :stroke="lineColor"
       :stroke-dasharray="strokeDashArray"
       class="metric-line"
diff --git a/app/assets/javascripts/monitoring/mixins/monitoring_mixins.js b/app/assets/javascripts/monitoring/mixins/monitoring_mixins.js
index 5b555165d35..98eaf350341 100644
--- a/app/assets/javascripts/monitoring/mixins/monitoring_mixins.js
+++ b/app/assets/javascripts/monitoring/mixins/monitoring_mixins.js
@@ -8,9 +8,10 @@ const mixins = {
       let dataFound = false;
       this.reducedDeploymentData = this.reducedDeploymentData.map((d) => {
         const deployment = d;
+        console.log(d.xPos)
+        console.log(mouseXPos)
         if (d.xPos >= mouseXPos - 10 && d.xPos <= mouseXPos + 10 && !dataFound) {
           dataFound = d.xPos + 1;
-          debugger
 
           deployment.showDeploymentFlag = true;
         } else {
@@ -25,9 +26,11 @@ const mixins = {
     formatDeployments() {
       this.reducedDeploymentData = this.deploymentData.reduce((deploymentDataArray, deployment) => {
         const time = new Date(deployment.created_at);
-        const xPos = Math.floor(this.activeTimeSeries[0].timeSeriesScaleX(time));
+        const xPos = Math.floor(this.activeTimeSeries[1].timeSeriesScaleX(time));
 
-        time.setSeconds(this.activeTimeSeries[0].values[0].time.getSeconds());
+        time.setSeconds(this.activeTimeSeries[1].values[0].time.getSeconds());
+
+        console.log(xPos)
 
         if (xPos >= 0) {
           const seriesIndex = bisectDate(this.timeSeries[0].values, time);
@@ -51,7 +54,14 @@ const mixins = {
     },
 
     positionFlag() {
-      const timeSeries = this.activeTimeSeries[0];
+      const timeSeries = this.timeSeries[0]
+      // .find(series => {
+      //   if (!series) return;
+      //   const hoveredDataIndex = bisectDate(series.values, this.hoverData.hoveredDate);
+      //   const currentData = timeSeries.values[hoveredDataIndex]
+      //   return currentData
+      // });
+
       if (!timeSeries) return;
       const hoveredDataIndex = bisectDate(timeSeries.values, this.hoverData.hoveredDate);
 
@@ -61,18 +71,36 @@ const mixins = {
       }
       this.currentXCoordinate = Math.floor(timeSeries.timeSeriesScaleX(this.currentData.time));
 
-      this.currentCoordinates = this.activeTimeSeries.map((series) => {
-        const currentDataIndex = bisectDate(series.values, this.hoverData.hoveredDate);
-        const currentData = series.values[currentDataIndex];
-        if  (!currentData) { debugger; return null; }
-        const currentX = Math.floor(series.timeSeriesScaleX(currentData.time));
-        const currentY = Math.floor(series.timeSeriesScaleY(currentData.value));
-
-        return {
-          currentX,
-          currentY,
-          currentDataIndex,
-        };
+      let val
+
+      this.currentCoordinates = this.activeTimeSeries
+        .filter((series) => {
+          const currentDataIndex = bisectDate(series.values, this.hoverData.hoveredDate);
+          const currentData = series.values[currentDataIndex];
+          if  (!currentData) { debugger; return null; }
+          const currentX = Math.floor(series.timeSeriesScaleX(currentData.time));
+          const currentY = Math.floor(series.timeSeriesScaleY(currentData.value));
+
+          // if hovered data doesn't match we don't want this
+          if (currentData.time == this.hoverData.hoveredDate) {
+            return true
+          } else {
+            console.log('neg')
+            return  false;
+          }
+        })
+        .map((series) => {
+          const currentDataIndex = bisectDate(series.values, this.hoverData.hoveredDate);
+          const currentData = series.values[currentDataIndex];
+          if  (!currentData) { debugger; return null; }
+          const currentX = Math.floor(series.timeSeriesScaleX(currentData.time));
+          const currentY = Math.floor(series.timeSeriesScaleY(currentData.value));
+
+          return {
+            currentX,
+            currentY,
+            currentDataIndex,
+          };
       });
 
       if (this.hoverData.currentDeployXPos) {
diff --git a/app/assets/javascripts/monitoring/services/monitoring_service.js b/app/assets/javascripts/monitoring/services/monitoring_service.js
index e8c5845bb88..7669a38d96e 100644
--- a/app/assets/javascripts/monitoring/services/monitoring_service.js
+++ b/app/assets/javascripts/monitoring/services/monitoring_service.js
@@ -86,29 +86,29 @@ export default class MonitoringService {
                       "backend": "canary_web",
                       "code": "5xx"
                     },
-                    "values": valuesWithGap,
+                    "values": values,
                   },
                   {
                     "metric": {
                       "backend": "https_git",
                       "code": "5xx"
                     },
-                    values: values
-                  },
-                  {
-                    "metric": {
-                      "backend": "pages_http",
-                      "code": "5xx"
-                    },
-                    values: createValues()
-                  },
-                  {
-                    "metric": {
-                      "backend": "registry",
-                      "code": "5xx"
-                    },
                     values: valuesWithGap
                   },
+                  // {
+                  //   "metric": {
+                  //     "backend": "pages_http",
+                  //     "code": "5xx"
+                  //   },
+                  //   values: createValues()
+                  // },
+                  // {
+                  //   "metric": {
+                  //     "backend": "registry",
+                  //     "code": "5xx"
+                  //   },
+                  //   values: valuesWithGap
+                  // },
                 ]
               }
             ]
diff --git a/app/assets/javascripts/monitoring/utils/multiple_time_series.js b/app/assets/javascripts/monitoring/utils/multiple_time_series.js
index dd37f5c9608..32a189edb29 100644
--- a/app/assets/javascripts/monitoring/utils/multiple_time_series.js
+++ b/app/assets/javascripts/monitoring/utils/multiple_time_series.js
@@ -1,7 +1,7 @@
 import _ from 'underscore';
 import { scaleLinear, scaleTime } from 'd3-scale';
 import { line, area, curveLinear } from 'd3-shape';
-import { extent, max, sum } from 'd3-array';
+import { extent, min, max, sum } from 'd3-array';
 import { timeMinute } from 'd3-time';
 import { mouse } from 'd3-selection';
 import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
@@ -13,6 +13,7 @@ const d3 = {
   area,
   curveLinear,
   extent,
+  min,
   max,
   timeMinute,
   sum,
@@ -53,6 +54,14 @@ function queryTimeSeries(query, graphWidth, graphHeight, xDom, yDom, lineStyle)
     return defaultColorPalette[pick];
   }
 
+  // const minX = Object.keys(query.result).reduce((min, time) => {
+  //   return Math.min(time, min)
+  // }, Infinity)
+  // console.log(minX)
+  // const maxX = query.result.find
+
+  let maxMax = 0;
+
   query.result.forEach((timeSeries, timeSeriesNumber) => {
     let metricTag = '';
     let lineColor = '';
@@ -63,12 +72,17 @@ function queryTimeSeries(query, graphWidth, graphHeight, xDom, yDom, lineStyle)
     const accum = d3.sum(timeSeriesValues);
     const trackName = capitalizeFirstCharacter(query.track ? query.track : 'Stable');
 
+    const times = timeSeries.values.map(d => d.time);
+    const min =  d3.min(times)
+    const max = d3.max(times)
+    const diff = (max - min)
+    maxMax = Math.max(maxMax, diff);
+
     if (trackName === 'Canary') {
       renderCanary = true;
     }
 
     const timeSeriesScaleX = d3.scaleTime().range([0, graphWidth]);
-    console.log(timeSeriesScaleX)
 
     const timeSeriesScaleY = d3.scaleLinear().range([graphHeight, 0]);
 
@@ -109,10 +123,14 @@ function queryTimeSeries(query, graphWidth, graphHeight, xDom, yDom, lineStyle)
       }
     }
 
+    maxMax = maxMax / 60000
+    console.log('MAXMAX: ', maxMax);
+
     if (!shouldRenderLegend) {
       if (!timeSeriesParsed[0].tracksLegend) {
         timeSeriesParsed[0].tracksLegend = [];
       }
+
       timeSeriesParsed[0].tracksLegend.push({
         max: maximumValue,
         average: accum / timeSeries.values.length,