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

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

@ -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)
})
})

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

@ -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