WIP handle duplicate field and measurement names

This solution can now handle an arbitrary number of
responses and series.  Once we munge the series out
into one flat collection, we utilize the index of each
series to identify duplicate labels.

ui/spec/utils/timeSeriesToDygraphSpec.js

@@ -33,6 +33,17 @@ describe('timeSeriesToDygraph', () => {
       }
     ];
 
+    //  dygraphSeries: {
+    //    'm1.f1': {
+    //      axis: 'y',
+    //      strokeWidth,
+    //    },
+    //    'm1.f2': {
+    //      axis: 'y',
+    //      strokeWidth,
+    //    },
+    //  },
+
     const actual = timeSeriesToDygraph(influxResponse);
 
     const expected = {
@@ -46,16 +57,6 @@ describe('timeSeriesToDygraph', () => {
         [new Date(2000), 2, 3],
         [new Date(4000), null, 4],
       ],
-      dygraphSeries: {
-        'm1.f1': {
-          axis: 'y',
-          strokeWidth,
-        },
-        'm1.f2': {
-          axis: 'y',
-          strokeWidth,
-        },
-      },
     };
 
     expect(actual).to.deep.equal(expected);
@@ -201,28 +202,28 @@ describe('timeSeriesToDygraph', () => {
     ];
 
     const actual = timeSeriesToDygraph(influxResponse);
+    //  dygraphSeries: {
+    //    'm1.f1': {
+    //      axis: 'y',
+    //      strokeWidth,
+    //    },
+    //    'm1.f1-1': {
+    //      axis: 'y2',
+    //      strokeWidth,
+    //    },
+    //  },
 
     const expected = {
       labels: [
         'time',
         `m1.f1`,
-        `m1.f1-1`,
+        `m1.f1`,
       ],
       timeSeries: [
         [new Date(1000), 1, null],
         [new Date(2000), 2, 3],
-        [new Date(4000), 4, null],
+        [new Date(4000), null, 4],
       ],
-      dygraphSeries: {
-        'm1.f1': {
-          axis: 'y',
-          strokeWidth,
-        },
-        'm1.f1-1': {
-          axis: 'y2',
-          strokeWidth,
-        },
-      },
     };
 
     expect(actual).to.deep.equal(expected);
@@ -322,7 +323,7 @@ describe('timeSeriesToDygraph', () => {
     expect(dygraphSeries["m2.f2"].strokeWidth).to.be.above(dygraphSeries["m1.f1"].strokeWidth);
   });
 
-  it.only('parses labels alphabetically with the correct field values for multiple series', () => {
+  it('parses labels alphabetically with the correct field values for multiple series', () => {
     const influxResponse = [
       {
         "response":

ui/src/utils/timeSeriesToDygraph.js

@@ -5,8 +5,7 @@ import {STROKE_WIDTH} from 'src/shared/constants';
  * that Dygraph understands.
  */
 
-// activeQueryIndex is an optional argument that indicated which query's series
+// activeQueryIndex is an optional argument that indicated which query's series we want highlighted.
-// we want highlighted.
 export default function timeSeriesToDygraph(raw = [], activeQueryIndex, isInDataExplorer) {
   // const labels = []; // all of the effective field names (i.e. <measurement>.<field>)
   const fieldToIndex = {}; // see parseSeries
@@ -31,14 +30,17 @@ export default function timeSeriesToDygraph(raw = [], activeQueryIndex, isInData
    */
   const dateToFieldValue = {};
 
+  // collect results from each influx response
   const results = raw.reduce((acc, response) => {
     return [...acc, ..._.get(response, 'response.results', [])]
   }, [])
 
+  // collect each series
   const serieses = results.reduce((acc, result, index) => {
     return [...acc, ...result.series.map((item) => ({...item, index}))];
   }, [])
 
+  // convert series into cells with rows and columns
   const cells = serieses.reduce((acc, {name, columns, values, index}) => {
     const rows = values.map((values) => ({
       name,
@@ -46,7 +48,6 @@ export default function timeSeriesToDygraph(raw = [], activeQueryIndex, isInData
       values,
       index,
     }))
-    console.log("HI IM Rerws: ", rows)
 
     rows.forEach(({values: vals, columns: cols, name: n, index: seriesIndex}) => {
       const [time, ...rowValues] = vals
@@ -64,8 +65,6 @@ export default function timeSeriesToDygraph(raw = [], activeQueryIndex, isInData
     return acc
   }, [])
 
-  console.log("HI IM CELLS: ", cells)
-
   const labels = cells.reduce((acc, cell) => {
     const existingLabel = acc.find(({label, seriesIndex}) => cell.label === label && cell.seriesIndex === seriesIndex)
 
@@ -93,10 +92,10 @@ export default function timeSeriesToDygraph(raw = [], activeQueryIndex, isInData
       existingRowIndex = acc.length - 1
     }
 
-      const values = acc[existingRowIndex].values
+    const values = acc[existingRowIndex].values
-      const labelIndex = sortedLabels.findIndex(({label}) => label === cell.label)
+    const labelIndex = sortedLabels.findIndex(({label, seriesIndex}) => label === cell.label && cell.seriesIndex === seriesIndex);
-      values[labelIndex] = cell.value
+    values[labelIndex] = cell.value
-      acc[existingRowIndex].values = values
+    acc[existingRowIndex].values = values
 
     return acc
   }, [])
@@ -111,10 +110,10 @@ export default function timeSeriesToDygraph(raw = [], activeQueryIndex, isInData
 
   // console.log("MY CAT LOVES LABELS: ", labels)
   // console.log("MY CAT HATES SORTED LABELS: ", sortedLabels)
- console.log("sorted term serrrrries: ", JSON.stringify(timeSeriesToDygraph, null, 2))
+  // console.log("sorted term serrrrries: ", JSON.stringify(timeSeriesToDygraph, null, 2))
 
   return timeSeriesToDygraph;
-// timeSeriesToDygraph , {labels: [], timeSeries: []}
+  // timeSeriesToDygraph , {labels: [], timeSeries: []}
 
   // raw.forEach(({response}, queryIndex) => {
   //   // If a response is an empty result set or a query returned an error