Componetize the legend component

app/assets/javascripts/monitoring/components/graph.vue

 <script>
 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 GraphAxis from './graph/axis.vue';
@@ -179,10 +180,12 @@ export default {
         this.graphHeightOffset,
       );
 
-      const axisXScale = d3.scaleTime()
-        .range([0, this.graphWidth - 70]);
-      const axisYScale = d3.scaleLinear()
-        .range([this.graphHeight - this.graphHeightOffset, 0]);
+      if (_.findWhere(this.timeSeries, { renderCanary: true })) {
+        this.timeSeries = this.timeSeries.map(series => ({ ...series, renderCanary: true }));
+      }
+
+      const axisXScale = d3.scaleTime().range([0, this.graphWidth - 70]);
+      const axisYScale = d3.scaleLinear().range([this.graphHeight - this.graphHeightOffset, 0]);
 
       const allValues = this.timeSeries.reduce((all, { values }) => all.concat(values), []);
       axisXScale.domain(d3.extent(allValues, d => d.time));
@@ -304,7 +307,6 @@ export default {
       v-if="showLegend"
       :legend-title="legendTitle"
       :time-series="timeSeries"
-      :current-data-index="currentDataIndex"
     />
   </div>
 </template>

app/assets/javascripts/monitoring/components/graph/flag.vue

 <script>
 import { dateFormat, timeFormat } from '../../utils/date_time_formatters';
 import { formatRelevantDigits } from '../../../lib/utils/number_utils';
-import icon from '../../../vue_shared/components/icon.vue';
+import Icon from '../../../vue_shared/components/icon.vue';
+import TrackLine from './track_line.vue';
 
 export default {
   components: {
-    icon,
+    Icon,
+    TrackLine,
   },
   props: {
     currentXCoordinate: {
@@ -107,11 +109,6 @@ export default {
       }
       return `series ${index + 1}`;
     },
-    strokeDashArray(type) {
-      if (type === 'dashed') return '6, 3';
-      if (type === 'dotted') return '3, 3';
-      return null;
-    },
   },
 };
 </script>
@@ -165,22 +162,7 @@ export default {
             v-for="(series, index) in timeSeries"
             :key="index"
           >
-            <td>
-              <svg
-                width="15"
-                height="6"
-              >
-                <line
-                  :stroke="series.lineColor"
-                  :stroke-dasharray="strokeDashArray(series.lineStyle)"
-                  stroke-width="4"
-                  x1="0"
-                  x2="15"
-                  y1="2"
-                  y2="2"
-                />
-              </svg>
-            </td>
+            <track-line :track="series"/>
             <td>{{ series.track }} {{ seriesMetricLabel(index, series) }}</td>
             <td>
               <strong>{{ seriesMetricValue(series) }}</strong>

app/assets/javascripts/monitoring/components/graph/legend.vue

 <script>
-import { formatRelevantDigits } from '~/lib/utils/number_utils';
+import TrackLine from './track_line.vue';
+import TrackInfo from './track_info.vue';
 
 export default {
+  components: {
+    TrackLine,
+    TrackInfo,
+  },
   props: {
     legendTitle: {
       type: String,
@@ -11,21 +16,6 @@ export default {
       type: Array,
       required: true,
     },
-    currentDataIndex: {
-      type: Number,
-      required: true,
-    },
-  },
-  methods: {
-    summaryMetrics(series) {
-      return `Avg: ${formatRelevantDigits(series.average)} · Max: ${formatRelevantDigits(series.max)}`;
-    },
-
-    strokeDashArray(type) {
-      if (type === 'dashed') return '6, 3';
-      if (type === 'dotted') return '3, 3';
-      return null;
-    },
   },
 };
 </script>
@@ -35,41 +25,37 @@ export default {
       <tr
         v-for="(series, index) in timeSeries"
         :key="index"
+        v-if="series.shouldRenderLegend"
       >
         <td>
-          <strong>{{ series.track }}</strong>
-        </td>
-        <td>
-          <svg
-            width="15"
-            height="6"
-          >
-            <line
-              :stroke-dasharray="strokeDashArray(series.lineStyle)"
-              :stroke="series.lineColor"
-              stroke-width="4"
-              :x1="0"
-              :x2="15"
-              :y1="2"
-              :y2="2"
-            />
-          </svg>
+          <strong v-if="series.renderCanary">{{ series.trackName }}</strong>
         </td>
+        <track-line :track="series" />
         <td
           class="legend-metric-title"
-          v-if="timeSeries.length > 1"
-        >
-          <template v-if="series.metricTag">
-            <strong>{{ series.metricTag }}</strong> {{ summaryMetrics(series) }}
-          </template>
-          <template v-else>
-            <strong>{{ legendTitle }}</strong>
-            series {{ index + 1 }} {{ summaryMetrics(series) }}
-          </template>
+          v-if="timeSeries.length > 1">
+          <track-info
+            :track="series"
+            v-if="series.metricTag" />
+          <track-info
+            v-else
+            :track="series">
+            <strong>{{ legendTitle }}</strong> series {{ index + 1 }}
+          </track-info>
         </td>
         <td v-else>
-          <strong>{{ legendTitle }}</strong> {{ summaryMetrics(series) }}
+          <track-info :track="series">
+            <strong>{{ legendTitle }}</strong>
+          </track-info>
         </td>
+        <template v-for="(track, trackIndex) in series.tracksLegend">
+          <track-line
+            :track="track"
+            :key="`track-line-${trackIndex}`"/>
+          <td :key="`track-info-${trackIndex}`">
+            <track-info :track="track" />
+          </td>
+        </template>
       </tr>
     </table>
   </div>

app/assets/javascripts/monitoring/components/graph/track_info.vue

+<script>
+import { formatRelevantDigits } from '~/lib/utils/number_utils';
+
+export default {
+  name: 'TrackInfo',
+  props: {
+    track: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    summaryMetrics() {
+      return `Avg: ${formatRelevantDigits(this.track.average)} · Max: ${formatRelevantDigits(
+        this.track.max,
+      )}`;
+    },
+  },
+};
+</script>
+<template>
+  <span>
+    <slot>
+      <strong> {{ track.metricTag }} </strong>
+    </slot>
+    {{ summaryMetrics }}
+  </span>
+</template>
+

app/assets/javascripts/monitoring/components/graph/track_line.vue

+<script>
+export default {
+  name: 'TrackLine',
+  props: {
+    track: {
+      type: Object,
+      required: true,
+    },
+  },
+  methods: {
+    strokeDashArray(type) {
+      if (type === 'dashed') return '6, 3';
+      if (type === 'dotted') return '3, 3';
+      return null;
+    },
+  },
+};
+</script>
+<template>
+  <td>
+    <svg
+      width="15"
+      height="6">
+      <line
+        :stroke-dasharray="strokeDashArray(track.lineStyle)"
+        :stroke="track.lineColor"
+        stroke-width="4"
+        :x1="0"
+        :x2="15"
+        :y1="2"
+        :y2="2"
+      />
+    </svg>
+  </td>
+</template>
+

app/assets/javascripts/monitoring/utils/multiple_time_series.js

@@ -31,6 +31,8 @@ const defaultStyleOrder = ['solid', 'dashed', 'dotted'];
 
 function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom, yDom, lineStyle) {
   let usedColors = [];
+  let renderCanary = false;
+  const timeSeriesParsed = [];
 
   function pickColor(name) {
     let pick;
@@ -49,14 +51,19 @@ function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom
     return defaultColorPalette[pick];
   }
 
-  return query.result.map((timeSeries, timeSeriesNumber) => {
+  query.result.forEach((timeSeries, timeSeriesNumber) => {
     let metricTag = '';
     let lineColor = '';
     let areaColor = '';
+    let shouldRenderLegend = true;
     const timeSeriesValues = timeSeries.values.map(d => d.value);
     const maximumValue = d3.max(timeSeriesValues);
     const accum = d3.sum(timeSeriesValues);
-    const track = capitalizeFirstCharacter(query.track ? query.track : 'Stable');
+    const trackName = capitalizeFirstCharacter(query.track ? query.track : 'Stable');
+
+    if (trackName === 'Canary') {
+      renderCanary = true;
+    }
 
     const timeSeriesScaleX = d3.scaleTime().range([0, graphWidth - 70]);
 
@@ -90,12 +97,29 @@ function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom
     if (seriesCustomizationData) {
       metricTag = seriesCustomizationData.value || timeSeriesMetricLabel;
       [lineColor, areaColor] = pickColor(seriesCustomizationData.color);
+      shouldRenderLegend = false;
     } else {
       metricTag = timeSeriesMetricLabel || query.label || `series ${timeSeriesNumber + 1}`;
       [lineColor, areaColor] = pickColor();
+      if (timeSeriesParsed.length > 1) {
+        shouldRenderLegend = false;
+      }
     }
 
-    return {
+    if (!shouldRenderLegend) {
+      if (!timeSeriesParsed[0].tracksLegend) {
+        timeSeriesParsed[0].tracksLegend = [];
+      }
+      timeSeriesParsed[0].tracksLegend.push({
+        max: maximumValue,
+        average: accum / timeSeries.values.length,
+        lineStyle,
+        lineColor,
+        metricTag,
+      });
+    }
+
+    timeSeriesParsed.push({
       linePath: lineFunction(timeSeries.values),
       areaPath: areaFunction(timeSeries.values),
       timeSeriesScaleX,
@@ -106,9 +130,13 @@ function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom
       lineColor,
       areaColor,
       metricTag,
-      track,
-    };
+      trackName,
+      shouldRenderLegend,
+      renderCanary,
+    });
   });
+
+  return timeSeriesParsed;
 }
 
 export default function createTimeSeries(queries, graphWidth, graphHeight, graphHeightOffset) {