Influxdata
/
chronograf
mirror of https://github.com/influxdata/chronograf.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Remove series highlighting

pull/1136/head
Andrew Watkins 2017-03-30 15:28:36 -07:00
parent 576779b031
commit c0f9964a29
2 changed files with 136 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

349
ui/spec/utils/timeSeriesToDygraphSpec.js
View File

@ -1,39 +1,36 @@
import timeSeriesToDygraph from 'src/utils/timeSeriesToDygraph'; import timeSeriesToDygraph from 'src/utils/timeSeriesToDygraph'
import {STROKE_WIDTH} from 'src/shared/constants';
const {light: strokeWidth} = STROKE_WIDTH;
describe('timeSeriesToDygraph', () => { describe('timeSeriesToDygraph', () => {
it('parses a raw InfluxDB response into a dygraph friendly data format', () => { it('parses a raw InfluxDB response into a dygraph friendly data format', () => {
const influxResponse = [ const influxResponse = [
{ {
"response": response:
{ {
"results": [ results: [
{ {
"series": [ series: [
{ {
"name":"m1", name: "m1",
"columns": ["time","f1"], columns: ["time", "f1"],
"values": [[1000, 1],[2000, 2]], values: [[1000, 1], [2000, 2]],
},
]
},
{
"series": [
{
"name":"m1",
"columns": ["time","f2"],
"values": [[2000, 3],[4000, 4]],
},
]
}, },
], ],
}, },
} {
]; series: [
{
name: "m1",
columns: ["time", "f2"],
values: [[2000, 3], [4000, 4]],
},
],
},
],
},
},
]
const actual = timeSeriesToDygraph(influxResponse); const actual = timeSeriesToDygraph(influxResponse)
const expected = { const expected = {
labels: [ labels: [
@ -49,40 +46,38 @@ describe('timeSeriesToDygraph', () => {
dygraphSeries: { dygraphSeries: {
'm1.f1': { 'm1.f1': {
axis: 'y', axis: 'y',
strokeWidth,
}, },
'm1.f2': { 'm1.f2': {
axis: 'y', axis: 'y',
strokeWidth,
}, },
}, },
}; }
expect(actual).to.deep.equal(expected); expect(actual).to.deep.equal(expected)
}); })
it('can sort numerical timestamps correctly', () => { it('can sort numerical timestamps correctly', () => {
const influxResponse = [ const influxResponse = [
{ {
"response": response:
{ {
"results": [ results: [
{ {
"series": [ series: [
{ {
"name":"m1", name: "m1",
"columns": ["time","f1"], columns: ["time", "f1"],
"values": [[100, 1],[3000, 3],[200, 2]], values: [[100, 1], [3000, 3], [200, 2]],
},
]
}, },
], ],
}, },
} ],
]; },
},
]
const actual = timeSeriesToDygraph(influxResponse); const actual = timeSeriesToDygraph(influxResponse)
const expected = { const expected = {
labels: [ labels: [
@ -94,113 +89,110 @@ describe('timeSeriesToDygraph', () => {
[new Date(200), 2], [new Date(200), 2],
[new Date(3000), 3], [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', () => { it('can parse multiple responses into two axes', () => {
const influxResponse = [ const influxResponse = [
{ {
"response": response:
{ {
"results": [ results: [
{ {
"series": [ series: [
{ {
"name":"m1", name: "m1",
"columns": ["time","f1"], columns: ["time", "f1"],
"values": [[1000, 1],[2000, 2]], values: [[1000, 1], [2000, 2]],
}, },
] ],
}, },
{ {
"series": [ series: [
{ {
"name":"m1", name: "m1",
"columns": ["time","f2"], columns: ["time", "f2"],
"values": [[2000, 3],[4000, 4]], values: [[2000, 3], [4000, 4]],
}, },
] ],
}, },
], ],
}, },
}, },
{ {
"response": response:
{ {
"results": [ results: [
{ {
"series": [ series: [
{ {
"name":"m3", name: "m3",
"columns": ["time","f3"], columns: ["time", "f3"],
"values": [[1000, 1],[2000, 2]], values: [[1000, 1], [2000, 2]],
}, },
] ],
}, },
], ],
}, },
}, },
]; ]
const actual = timeSeriesToDygraph(influxResponse); const actual = timeSeriesToDygraph(influxResponse)
const expected = { const expected = {
'm1.f1': { 'm1.f1': {
axis: 'y', axis: 'y',
strokeWidth,
}, },
'm1.f2': { 'm1.f2': {
axis: 'y', axis: 'y',
strokeWidth,
}, },
'm3.f3': { 'm3.f3': {
axis: 'y2', axis: 'y2',
strokeWidth,
}, },
}; }
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', () => { it('can parse multiple responses with the same field and measurement', () => {
const influxResponse = [ const influxResponse = [
{ {
"response": response:
{ {
"results": [ results: [
{ {
"series": [ series: [
{ {
"name":"m1", name: "m1",
"columns": ["time","f1"], columns: ["time", "f1"],
"values": [[1000, 1],[2000, 2]], values: [[1000, 1], [2000, 2]],
}, },
] ],
}, },
], ],
}, },
}, },
{ {
"response": response:
{ {
"results": [ results: [
{ {
"series": [ series: [
{ {
"name":"m1", name: "m1",
"columns": ["time","f1"], columns: ["time", "f1"],
"values": [[2000, 3],[4000, 4]], values: [[2000, 3], [4000, 4]],
}, },
] ],
}, },
], ],
}, },
}, },
]; ]
const actual = timeSeriesToDygraph(influxResponse); const actual = timeSeriesToDygraph(influxResponse)
const expected = { const expected = {
labels: [ labels: [
@ -214,162 +206,107 @@ describe('timeSeriesToDygraph', () => {
[new Date(4000), null, 4], [new Date(4000), null, 4],
], ],
dygraphSeries: { dygraphSeries: {
// 'm1.f1': {
// axis: 'y',
// strokeWidth,
// },
'm1.f1': { 'm1.f1': {
axis: 'y2', 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', () => { it('it does not use multiple axes if being used for the DataExplorer', () => {
const influxResponse = [ const influxResponse = [
{ {
"response": response:
{ {
"results": [ results: [
{ {
"series": [ series: [
{ {
"name":"m1", name: "m1",
"columns": ["time","f1"], columns: ["time", "f1"],
"values": [[1000, 1],[2000, 2]], values: [[1000, 1], [2000, 2]],
}, },
] ],
}, },
], ],
}, },
}, },
{ {
"response": response:
{ {
"results": [ results: [
{ {
"series": [ series: [
{ {
"name":"m1", name: "m1",
"columns": ["time","f2"], columns: ["time", "f2"],
"values": [[2000, 3],[4000, 4]], values: [[2000, 3], [4000, 4]],
}, },
] ],
}, },
], ],
}, },
}, },
];
const isInDataExplorer = true;
const actual = timeSeriesToDygraph(influxResponse, undefined, isInDataExplorer);
const expected = {
'm1.f1': {
strokeWidth,
},
'm1.f2': {
strokeWidth,
},
};
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 isInDataExplorer = true
const actual = timeSeriesToDygraph(influxResponse, highlightIndex); const actual = timeSeriesToDygraph(influxResponse, undefined, isInDataExplorer)
const {dygraphSeries} = actual;
expect(dygraphSeries["m2.f2"].strokeWidth).to.be.above(dygraphSeries["m1.f1"].strokeWidth); const expected = {}
});
expect(actual.dygraphSeries).to.deep.equal(expected)
})
it('parses a raw InfluxDB response into a dygraph friendly data format', () => { it('parses a raw InfluxDB response into a dygraph friendly data format', () => {
const influxResponse = [ const influxResponse = [
{ {
"response": response:
{ {
"results": [ results: [
{ {
"series": [ series: [
{ {
"name":"mb", name: "mb",
"columns": ["time","f1"], columns: ["time", "f1"],
"values": [[1000, 1],[2000, 2]], values: [[1000, 1], [2000, 2]],
},
]
},
{
"series": [
{
"name":"ma",
"columns": ["time","f1"],
"values": [[1000, 1],[2000, 2]],
},
]
},
{
"series": [
{
"name":"mc",
"columns": ["time","f2"],
"values": [[2000, 3],[4000, 4]],
},
]
},
{
"series": [
{
"name":"mc",
"columns": ["time","f1"],
"values": [[2000, 3],[4000, 4]],
},
]
}, },
], ],
}, },
} {
]; series: [
{
name: "ma",
columns: ["time", "f1"],
values: [[1000, 1], [2000, 2]],
},
],
},
{
series: [
{
name: "mc",
columns: ["time", "f2"],
values: [[2000, 3], [4000, 4]],
},
],
},
{
series: [
{
name: "mc",
columns: ["time", "f1"],
values: [[2000, 3], [4000, 4]],
},
],
},
],
},
},
]
const actual = timeSeriesToDygraph(influxResponse); const actual = timeSeriesToDygraph(influxResponse)
const expected = [ const expected = [
'time', 'time',
@ -377,8 +314,8 @@ describe('timeSeriesToDygraph', () => {
`mb.f1`, `mb.f1`,
`mc.f1`, `mc.f1`,
`mc.f2`, `mc.f2`,
]; ]
expect(actual.labels).to.deep.equal(expected); expect(actual.labels).to.deep.equal(expected)
}); })
}); })

11
ui/src/utils/timeSeriesToDygraph.js
View File

@ -1,5 +1,4 @@
import _ from 'lodash' import _ from 'lodash'
import {STROKE_WIDTH} from 'src/shared/constants'
import {map, reduce, forEach, concat, clone} from 'fast.js' 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 sortedTimeSeries = _.sortBy(timeSeries, 'time')
const {light, heavy} = STROKE_WIDTH
const dygraphSeries = reduce(sortedLabels, (acc, {label, responseIndex}) => { const dygraphSeries = reduce(sortedLabels, (acc, {label, responseIndex}) => {
acc[label] = {
strokeWidth: responseIndex === activeQueryIndex ? heavy : light,
}
if (!isInDataExplorer) { if (!isInDataExplorer) {
acc[label].axis = responseIndex === 0 ? 'y' : 'y2' acc[label] = {
axis: responseIndex === 0 ? 'y' : 'y2',
}
} }
return acc return acc