diff --git a/ui/spec/utils/timeSeriesToDygraphSpec.js b/ui/spec/utils/timeSeriesToDygraphSpec.js index c80cf24bf..5dfb04e53 100644 --- a/ui/spec/utils/timeSeriesToDygraphSpec.js +++ b/ui/spec/utils/timeSeriesToDygraphSpec.js @@ -1,39 +1,36 @@ -import timeSeriesToDygraph from 'src/utils/timeSeriesToDygraph'; -import {STROKE_WIDTH} from 'src/shared/constants'; - -const {light: strokeWidth} = STROKE_WIDTH; +import timeSeriesToDygraph from 'src/utils/timeSeriesToDygraph' describe('timeSeriesToDygraph', () => { it('parses a raw InfluxDB response into a dygraph friendly data format', () => { const influxResponse = [ { - "response": + response: { - "results": [ + results: [ { - "series": [ + series: [ { - "name":"m1", - "columns": ["time","f1"], - "values": [[1000, 1],[2000, 2]], + name: "m1", + columns: ["time", "f1"], + values: [[1000, 1], [2000, 2]], }, - ] + ], }, { - "series": [ + series: [ { - "name":"m1", - "columns": ["time","f2"], - "values": [[2000, 3],[4000, 4]], + name: "m1", + columns: ["time", "f2"], + values: [[2000, 3], [4000, 4]], }, - ] + ], }, ], }, - } - ]; + }, + ] - const actual = timeSeriesToDygraph(influxResponse); + const actual = timeSeriesToDygraph(influxResponse) const expected = { labels: [ @@ -49,40 +46,38 @@ describe('timeSeriesToDygraph', () => { dygraphSeries: { 'm1.f1': { axis: 'y', - strokeWidth, }, 'm1.f2': { axis: 'y', - strokeWidth, }, }, - }; + } - expect(actual).to.deep.equal(expected); - }); + expect(actual).to.deep.equal(expected) + }) it('can sort numerical timestamps correctly', () => { const influxResponse = [ { - "response": + response: { - "results": [ + results: [ { - "series": [ + series: [ { - "name":"m1", - "columns": ["time","f1"], - "values": [[100, 1],[3000, 3],[200, 2]], + name: "m1", + columns: ["time", "f1"], + values: [[100, 1], [3000, 3], [200, 2]], }, - ] + ], }, ], }, - } - ]; + }, + ] - const actual = timeSeriesToDygraph(influxResponse); + const actual = timeSeriesToDygraph(influxResponse) const expected = { labels: [ @@ -94,113 +89,110 @@ describe('timeSeriesToDygraph', () => { [new Date(200), 2], [new Date(3000), 3], ], - }; + } - expect(actual.timeSeries).to.deep.equal(expected.timeSeries); - }); + expect(actual.timeSeries).to.deep.equal(expected.timeSeries) + }) it('can parse multiple responses into two axes', () => { const influxResponse = [ { - "response": + response: { - "results": [ + results: [ { - "series": [ + series: [ { - "name":"m1", - "columns": ["time","f1"], - "values": [[1000, 1],[2000, 2]], + name: "m1", + columns: ["time", "f1"], + values: [[1000, 1], [2000, 2]], }, - ] + ], }, { - "series": [ + series: [ { - "name":"m1", - "columns": ["time","f2"], - "values": [[2000, 3],[4000, 4]], + name: "m1", + columns: ["time", "f2"], + values: [[2000, 3], [4000, 4]], }, - ] + ], }, ], }, }, { - "response": + response: { - "results": [ + results: [ { - "series": [ + series: [ { - "name":"m3", - "columns": ["time","f3"], - "values": [[1000, 1],[2000, 2]], + name: "m3", + columns: ["time", "f3"], + values: [[1000, 1], [2000, 2]], }, - ] + ], }, ], }, }, - ]; + ] - const actual = timeSeriesToDygraph(influxResponse); + const actual = timeSeriesToDygraph(influxResponse) const expected = { - 'm1.f1': { - axis: 'y', - strokeWidth, - }, - 'm1.f2': { - axis: 'y', - strokeWidth, - }, - 'm3.f3': { - axis: 'y2', - strokeWidth, - }, - }; + 'm1.f1': { + axis: 'y', + }, + 'm1.f2': { + axis: 'y', + }, + 'm3.f3': { + axis: 'y2', + }, + } - expect(actual.dygraphSeries).to.deep.equal(expected); - }); + expect(actual.dygraphSeries).to.deep.equal(expected) + }) it('can parse multiple responses with the same field and measurement', () => { const influxResponse = [ { - "response": + response: { - "results": [ + results: [ { - "series": [ + series: [ { - "name":"m1", - "columns": ["time","f1"], - "values": [[1000, 1],[2000, 2]], + name: "m1", + columns: ["time", "f1"], + values: [[1000, 1], [2000, 2]], }, - ] + ], }, ], }, }, { - "response": + response: { - "results": [ + results: [ { - "series": [ + series: [ { - "name":"m1", - "columns": ["time","f1"], - "values": [[2000, 3],[4000, 4]], + name: "m1", + columns: ["time", "f1"], + values: [[2000, 3], [4000, 4]], }, - ] + ], }, ], }, }, - ]; + ] - const actual = timeSeriesToDygraph(influxResponse); + const actual = timeSeriesToDygraph(influxResponse) const expected = { labels: [ @@ -214,162 +206,107 @@ describe('timeSeriesToDygraph', () => { [new Date(4000), null, 4], ], dygraphSeries: { - // 'm1.f1': { - // axis: 'y', - // strokeWidth, - // }, 'm1.f1': { axis: 'y2', - strokeWidth, }, }, - }; + } - expect(actual).to.deep.equal(expected); - }); + expect(actual).to.deep.equal(expected) + }) it('it does not use multiple axes if being used for the DataExplorer', () => { const influxResponse = [ { - "response": + response: { - "results": [ + results: [ { - "series": [ + series: [ { - "name":"m1", - "columns": ["time","f1"], - "values": [[1000, 1],[2000, 2]], + name: "m1", + columns: ["time", "f1"], + values: [[1000, 1], [2000, 2]], }, - ] + ], }, ], }, }, { - "response": + response: { - "results": [ + results: [ { - "series": [ + series: [ { - "name":"m1", - "columns": ["time","f2"], - "values": [[2000, 3],[4000, 4]], + name: "m1", + columns: ["time", "f2"], + values: [[2000, 3], [4000, 4]], }, - ] + ], }, ], }, }, - ]; + ] - const isInDataExplorer = true; - const actual = timeSeriesToDygraph(influxResponse, undefined, isInDataExplorer); + const isInDataExplorer = true + const actual = timeSeriesToDygraph(influxResponse, undefined, isInDataExplorer) - const expected = { - 'm1.f1': { - strokeWidth, - }, - 'm1.f2': { - strokeWidth, - }, - }; + const expected = {} - expect(actual.dygraphSeries).to.deep.equal(expected); - }); - - it('it highlights the appropriate response', () => { - const influxResponse = [ - { - "response": - { - "results": [ - { - "series": [ - { - "name":"m1", - "columns": ["time","f1"], - "values": [[1000, 1],[2000, 2]], - }, - ] - }, - ], - }, - }, - { - "response": - { - "results": [ - { - "series": [ - { - "name":"m2", - "columns": ["time","f2"], - "values": [[2000, 3],[4000, 4]], - }, - ] - }, - ], - }, - }, - ]; - - const highlightIndex = 1; - const actual = timeSeriesToDygraph(influxResponse, highlightIndex); - const {dygraphSeries} = actual; - - expect(dygraphSeries["m2.f2"].strokeWidth).to.be.above(dygraphSeries["m1.f1"].strokeWidth); - }); + expect(actual.dygraphSeries).to.deep.equal(expected) + }) it('parses a raw InfluxDB response into a dygraph friendly data format', () => { const influxResponse = [ { - "response": + response: { - "results": [ + results: [ { - "series": [ + series: [ { - "name":"mb", - "columns": ["time","f1"], - "values": [[1000, 1],[2000, 2]], + name: "mb", + columns: ["time", "f1"], + values: [[1000, 1], [2000, 2]], }, - ] + ], }, { - "series": [ + series: [ { - "name":"ma", - "columns": ["time","f1"], - "values": [[1000, 1],[2000, 2]], + name: "ma", + columns: ["time", "f1"], + values: [[1000, 1], [2000, 2]], }, - ] + ], }, { - "series": [ + series: [ { - "name":"mc", - "columns": ["time","f2"], - "values": [[2000, 3],[4000, 4]], + name: "mc", + columns: ["time", "f2"], + values: [[2000, 3], [4000, 4]], }, - ] + ], }, { - "series": [ + series: [ { - "name":"mc", - "columns": ["time","f1"], - "values": [[2000, 3],[4000, 4]], + name: "mc", + columns: ["time", "f1"], + values: [[2000, 3], [4000, 4]], }, - ] + ], }, ], }, - } - ]; + }, + ] - const actual = timeSeriesToDygraph(influxResponse); + const actual = timeSeriesToDygraph(influxResponse) const expected = [ 'time', @@ -377,8 +314,8 @@ describe('timeSeriesToDygraph', () => { `mb.f1`, `mc.f1`, `mc.f2`, - ]; + ] - expect(actual.labels).to.deep.equal(expected); - }); -}); + expect(actual.labels).to.deep.equal(expected) + }) +}) diff --git a/ui/src/utils/timeSeriesToDygraph.js b/ui/src/utils/timeSeriesToDygraph.js index e2024a739..ccde3986c 100644 --- a/ui/src/utils/timeSeriesToDygraph.js +++ b/ui/src/utils/timeSeriesToDygraph.js @@ -1,5 +1,4 @@ import _ from 'lodash' -import {STROKE_WIDTH} from 'src/shared/constants' import {map, reduce, forEach, concat, clone} from 'fast.js' /** @@ -102,15 +101,11 @@ export default function timeSeriesToDygraph(raw = [], activeQueryIndex, isInData } const sortedTimeSeries = _.sortBy(timeSeries, 'time') - const {light, heavy} = STROKE_WIDTH - const dygraphSeries = reduce(sortedLabels, (acc, {label, responseIndex}) => { - acc[label] = { - strokeWidth: responseIndex === activeQueryIndex ? heavy : light, - } - if (!isInDataExplorer) { - acc[label].axis = responseIndex === 0 ? 'y' : 'y2' + acc[label] = { + axis: responseIndex === 0 ? 'y' : 'y2', + } } return acc