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

Revert "Bugfix/legend data order"

pull/804/head
Nathan Haugo 2017-01-26 17:55:21 -08:00 committed by GitHub
parent 1da41c760a
commit 8067b32b17
2 changed files with 211 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,10 +16,6 @@ describe('timeSeriesToDygraph', () => {
"name":"m1",
"columns": ["time","f1"],
"values": [[1000, 1],[2000, 2]],
"tags": {
tk1: "tv1",
tk2: "tv2",
},
},
]
},
@ -29,9 +25,6 @@ describe('timeSeriesToDygraph', () => {
"name":"m1",
"columns": ["time","f2"],
"values": [[2000, 3],[4000, 4]],
"tags": {
tk3: "tv3",
},
},
]
},
@ -45,8 +38,8 @@ describe('timeSeriesToDygraph', () => {
const expected = {
labels: [
'time',
`m1.f1[tk1=tv1][tk2=tv2]`,
`m1.f2[tk3=tv3]`,
`m1.f1`,
`m1.f2`,
],
timeSeries: [
[new Date(1000), 1, null],
@ -54,11 +47,11 @@ describe('timeSeriesToDygraph', () => {
[new Date(4000), null, 4],
],
dygraphSeries: {
'm1.f1[tk1=tv1][tk2=tv2]': {
'm1.f1': {
axis: 'y',
strokeWidth,
},
'm1.f2[tk3=tv3]': {
'm1.f2': {
axis: 'y',
strokeWidth,
},
@ -154,18 +147,18 @@ describe('timeSeriesToDygraph', () => {
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',
strokeWidth,
},
'm1.f2': {
axis: 'y',
strokeWidth,
},
'm3.f3': {
axis: 'y2',
strokeWidth,
},
};
expect(actual.dygraphSeries).to.deep.equal(expected);
@ -213,19 +206,19 @@ describe('timeSeriesToDygraph', () => {
labels: [
'time',
`m1.f1`,
`m1.f1`,
`m1.f1-1`,
],
timeSeries: [
[new Date(1000), 1, null],
[new Date(2000), 2, 3],
[new Date(4000), null, 4],
[new Date(4000), 4, null],
],
dygraphSeries: {
'm1.f1': {
axis: 'y',
strokeWidth,
},
'm1.f1': {
'm1.f1-1': {
axis: 'y2',
strokeWidth,
},
@ -329,7 +322,7 @@ describe('timeSeriesToDygraph', () => {
expect(dygraphSeries["m2.f2"].strokeWidth).to.be.above(dygraphSeries["m1.f1"].strokeWidth);
});
it('parses labels alphabetically with the correct field values for multiple series', () => {
it('parses a raw InfluxDB response into a dygraph friendly data format', () => {
const influxResponse = [
{
"response":
@ -339,22 +332,8 @@ describe('timeSeriesToDygraph', () => {
"series": [
{
"name":"mb",
"columns": ["time","fa"],
"values": [
[1000, 200],
[2000, 300],
[4000, 400],
],
},
{
"name":"mc",
"columns": ["time","fa"],
"values": [
[1000, 400],
[2000, 600],
[3000, 800],
[5000, 1000],
],
"columns": ["time","f1"],
"values": [[1000, 1],[2000, 2]],
},
]
},
@ -362,12 +341,26 @@ describe('timeSeriesToDygraph', () => {
"series": [
{
"name":"ma",
"columns": ["time","fa","fc","fb"],
"values": [
[1000, 20, 10, 10],
[2000, 30, 15, 9],
[3000, 40, 20, 8],
],
"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]],
},
]
},
@ -378,25 +371,14 @@ describe('timeSeriesToDygraph', () => {
const actual = timeSeriesToDygraph(influxResponse);
const expected = {
labels: [
'time',
`ma.fa`,
`ma.fb`,
`ma.fc`,
`mb.fa`,
`mc.fa`,
],
timeSeries: [
[new Date(1000), 20, 10, 10, 200, 400],
[new Date(2000), 30, 9, 15, 300, 600],
[new Date(3000), 40, 8, 20, null, 800],
[new Date(4000), null, null, null, 400, null],
[new Date(5000), null, null, null, null, 1000],
],
};
const expected = [
'time',
`ma.f1`,
`mb.f1`,
`mc.f1`,
`mc.f2`,
];
expect(actual.labels).to.deep.equal(expected.labels);
expect(actual.timeSeries).to.deep.equal(expected.timeSeries);
expect(actual.labels).to.deep.equal(expected);
});
});

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

@ -1,113 +1,181 @@
import _ from 'lodash';
import {STROKE_WIDTH} from 'src/shared/constants';
/**
* Accepts an array of raw influxdb responses and returns a format
* that Dygraph understands.
*/
// activeQueryIndex is an optional argument that indicated which query's series we want highlighted.
// activeQueryIndex is an optional argument that indicated which query's series
// we want highlighted.
export default function timeSeriesToDygraph(raw = [], activeQueryIndex, isInDataExplorer) {
// collect results from each influx response
const results = raw.reduce((acc, rawResponse, responseIndex) => {
const responses = _.get(rawResponse, 'response.results', []);
const indexedResponses = responses.map((response) => ({...response, responseIndex}));
return [...acc, ...indexedResponses];
}, []);
const labels = []; // all of the effective field names (i.e. <measurement>.<field>)
const fieldToIndex = {}; // see parseSeries
const dates = {}; // map of date as string to date value to minimize string coercion
const dygraphSeries = {}; // dygraphSeries is a graph legend label and its corresponding y-axis e.g. {legendLabel1: 'y', legendLabel2: 'y2'};
// collect each series
const serieses = results.reduce((acc, {series = [], responseIndex}, index) => {
return [...acc, ...series.map((item) => ({...item, responseIndex, index}))];
}, []);
/**
* dateToFieldValue will look like:
*
* {
* Date1: {
* effectiveFieldName_1: ValueForField1AtDate1,
* effectiveFieldName_2: ValueForField2AtDate1,
* ...
* },
* Date2: {
* effectiveFieldName_1: ValueForField1AtDate2,
* effectiveFieldName_2: ValueForField2AtDate2,
* ...
* }
* }
*/
const dateToFieldValue = {};
// convert series into cells with rows and columns
const cells = serieses.reduce((acc, {name, columns, values, index, responseIndex, tags = {}}) => {
const rows = values.map((vals) => ({
name,
columns,
vals,
index,
}));
raw.forEach(({response}, queryIndex) => {
// If a response is an empty result set or a query returned an error
// from InfluxDB, don't try and parse.
if (response.results.length) {
if (isEmpty(response) || hasError(response)) {
return;
}
}
// tagSet is each tag key and value for a series
const tagSet = Object.keys(tags).map((tag) => `[${tag}=${tags[tag]}]`).sort().join('');
/**
* response looks like:
* {
* results: [
* { series: [...] },
* { series: [...] },
* ]
* }
*/
response.results.forEach(parseResult);
rows.forEach(({vals, columns: cols, name: measurement, index: seriesIndex}) => {
const [time, ...rowValues] = vals;
function parseResult(s) {
/*
* s looks like:
* {
* series: [
* {
* name: "<measurement>",
* columns: ["time", "<field name 1>", "<field name 2>", ...],
* values: [<time>, <value of field 1>, <value of field 2>, ...],
* },
* }
*/
s.series.forEach(parseSeries);
}
rowValues.forEach((value, i) => {
const field = cols[i + 1];
acc.push({
label: `${measurement}.${field}${tagSet}`,
value,
time,
seriesIndex,
responseIndex,
function parseSeries(series) {
/*
* series looks like:
* {
* name: "<measurement>",
* columns: ["time", "<field name 1>", "<field name 2>", ...],
* values: [
* [<time1>, <value of field 1 @ time1>, <value of field 2 @ time1>, ...],
* [<time2>, <value of field 1 @ time2>, <value of field 2 @ time2>, ...],
* ]
* }
*/
const measurementName = series.name;
const columns = series.columns;
// Tags are only included in an influxdb response under certain circumstances, e.g.
// when a query is using GROUP BY (<tag key>).
const tags = Object.keys(series.tags || {}).map((key) => {
return `[${key}=${series.tags[key]}]`;
}).sort().join('');
columns.slice(1).forEach((fieldName) => {
let effectiveFieldName = `${measurementName}.${fieldName}${tags}`;
// If there are duplicate effectiveFieldNames identify them by their queryIndex
if (effectiveFieldName in dygraphSeries) {
effectiveFieldName = `${effectiveFieldName}-${queryIndex}`;
}
// Given a field name, identify which column in the timeSeries result should hold the field's value
// ex given this timeSeries [Date, 10, 20, 30] field index at 2 would correspond to value 20
fieldToIndex[effectiveFieldName] = labels.length + 1;
labels.push(effectiveFieldName);
const {light, heavy} = STROKE_WIDTH;
const dygraphSeriesStyles = {
strokeWidth: queryIndex === activeQueryIndex ? heavy : light,
};
if (!isInDataExplorer) {
dygraphSeriesStyles.axis = queryIndex === 0 ? 'y' : 'y2';
}
dygraphSeries[effectiveFieldName] = dygraphSeriesStyles;
});
(series.values || []).forEach(parseRow);
function parseRow(row) {
/**
* row looks like:
* [<time1>, <value of field 1 @ time1>, <value of field 2 @ time1>, ...]
*/
const date = row[0];
const dateString = date.toString();
row.forEach((value, index) => {
if (index === 0) {
// index 0 in a row is always the timestamp
if (!dateToFieldValue[dateString]) {
dateToFieldValue[dateString] = {};
dates[dateString] = date;
}
return;
}
const fieldName = columns[index];
let effectiveFieldName = `${measurementName}.${fieldName}${tags}`;
// If there are duplicate effectiveFieldNames identify them by their queryIndex
if (effectiveFieldName in dateToFieldValue[dateString]) {
effectiveFieldName = `${effectiveFieldName}-${queryIndex}`;
}
dateToFieldValue[dateString][effectiveFieldName] = value;
});
}
}
});
function buildTimeSeries() {
const allDates = Object.keys(dateToFieldValue);
allDates.sort((a, b) => a - b);
const rowLength = labels.length + 1;
return allDates.map((date) => {
const row = new Array(rowLength);
row.fill(null);
row[0] = new Date(dates[date]);
const fieldsForRow = dateToFieldValue[date];
Object.keys(fieldsForRow).forEach((effectiveFieldName) => {
row[fieldToIndex[effectiveFieldName]] = fieldsForRow[effectiveFieldName];
});
return row;
});
return acc;
}, []);
// labels are a unique combination of measurement, fields, and tags that indicate a specific series on the graph legend
const labels = cells.reduce((acc, {label, seriesIndex, responseIndex}) => {
const existingLabel = acc.find(({
label: findLabel,
seriesIndex: findSeriesIndex,
}) => findLabel === label && findSeriesIndex === seriesIndex);
if (!existingLabel) {
acc.push({
label,
seriesIndex,
responseIndex,
});
}
return acc;
}, []);
const sortedLabels = _.sortBy(labels, 'label');
const timeSeries = cells.reduce((acc, cell) => {
let existingRowIndex = acc.findIndex(({time}) => cell.time === time);
if (existingRowIndex === -1) {
acc.push({
time: cell.time,
values: Array(sortedLabels.length).fill(null),
});
existingRowIndex = acc.length - 1;
}
const values = acc[existingRowIndex].values;
const labelIndex = sortedLabels.findIndex(({label, seriesIndex}) => label === cell.label && cell.seriesIndex === seriesIndex);
values[labelIndex] = cell.value;
acc[existingRowIndex].values = values;
return acc;
}, []);
const sortedTimeSeries = _.sortBy(timeSeries, 'time');
const {light, heavy} = STROKE_WIDTH;
const dygraphSeries = sortedLabels.reduce((acc, {label, responseIndex}) => {
acc[label] = {
strokeWidth: responseIndex === activeQueryIndex ? heavy : light,
};
if (!isInDataExplorer) {
acc[label].axis = responseIndex === 0 ? 'y' : 'y2';
}
return acc;
}, {});
}
return {
timeSeries: sortedTimeSeries.map(({time, values}) => ([new Date(time), ...values])),
labels: ["time", ...sortedLabels.map(({label}) => label)],
labels: ['time', ...labels.sort()],
timeSeries: buildTimeSeries(),
dygraphSeries,
};
}
function isEmpty(resp) {
return !resp.results[0].series;
}
function hasError(resp) {
return !!resp.results[0].error;
}