From 9fbbdedc694c84a23d4fd3f4554f3fdd10a1668a Mon Sep 17 00:00:00 2001 From: Hunter Trujillo Date: Wed, 25 Jan 2017 14:25:03 -0700 Subject: [PATCH] Add dygraphSeries. Tests pass. --- ui/spec/utils/timeSeriesToDygraphSpec.js | 46 +++++++++++----- ui/src/utils/timeSeriesToDygraph.js | 68 +++++++++++------------- 2 files changed, 65 insertions(+), 49 deletions(-) diff --git a/ui/spec/utils/timeSeriesToDygraphSpec.js b/ui/spec/utils/timeSeriesToDygraphSpec.js index ea48e1011..941680935 100644 --- a/ui/spec/utils/timeSeriesToDygraphSpec.js +++ b/ui/spec/utils/timeSeriesToDygraphSpec.js @@ -57,6 +57,16 @@ 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); @@ -148,20 +158,22 @@ 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, + }, }; + // console.log('BEAP EXPECTED', JSON.stringify(expected, null, 2)) + expect(actual.dygraphSeries).to.deep.equal(expected); }); @@ -224,6 +236,16 @@ describe('timeSeriesToDygraph', () => { [new Date(2000), 2, 3], [new Date(4000), null, 4], ], + dygraphSeries: { + 'm1.f1': { + axis: 'y', + strokeWidth, + }, + 'm1.f1': { + axis: 'y2', + strokeWidth, + }, + }, }; expect(actual).to.deep.equal(expected); diff --git a/ui/src/utils/timeSeriesToDygraph.js b/ui/src/utils/timeSeriesToDygraph.js index 867be3142..4ca6fe400 100644 --- a/ui/src/utils/timeSeriesToDygraph.js +++ b/ui/src/utils/timeSeriesToDygraph.js @@ -7,41 +7,20 @@ import {STROKE_WIDTH} from 'src/shared/constants'; // activeQueryIndex is an optional argument that indicated which query's series we want highlighted. export default function timeSeriesToDygraph(raw = [], activeQueryIndex, isInDataExplorer) { - // const labels = []; // all of the effective field names (i.e. .) - 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'}; - - /** - * dateToFieldValue will look like: - * - * { - * Date1: { - * effectiveFieldName_1: ValueForField1AtDate1, - * effectiveFieldName_2: ValueForField2AtDate1, - * ... - * }, - * Date2: { - * effectiveFieldName_1: ValueForField1AtDate2, - * effectiveFieldName_2: ValueForField2AtDate2, - * ... - * } - * } - */ - const dateToFieldValue = {}; - // collect results from each influx response - const results = raw.reduce((acc, response) => { - return [...acc, ..._.get(response, 'response.results', [])] + const results = raw.reduce((acc, response, responseIndex) => { + const responses = _.get(response, 'response.results', []) + const indexedResponses = responses.map((response) => ({...response, responseIndex})) + return [...acc, ...indexedResponses] }, []) // collect each series - const serieses = results.reduce((acc, result, index) => { - return [...acc, ...result.series.map((item) => ({...item, index}))]; + const serieses = results.reduce((acc, {series, responseIndex}, index) => { + return [...acc, ...series.map((item) => ({...item, responseIndex, index}))]; }, []) // convert series into cells with rows and columns - const cells = serieses.reduce((acc, {name, columns, values, index}) => { + const cells = serieses.reduce((acc, {name, columns, values, index, responseIndex}) => { const rows = values.map((values) => ({ name, columns, @@ -58,6 +37,7 @@ export default function timeSeriesToDygraph(raw = [], activeQueryIndex, isInData value, time, seriesIndex, + responseIndex, }) }) }) @@ -65,13 +45,17 @@ export default function timeSeriesToDygraph(raw = [], activeQueryIndex, isInData return acc }, []) - const labels = cells.reduce((acc, cell) => { - const existingLabel = acc.find(({label, seriesIndex}) => cell.label === label && cell.seriesIndex === seriesIndex) + 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: cell.label, - seriesIndex: cell.seriesIndex, + label, + seriesIndex, + responseIndex, }) } @@ -102,16 +86,26 @@ export default function timeSeriesToDygraph(raw = [], activeQueryIndex, isInData 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 + }, {}) + const timeSeriesToDygraph = { timeSeries: sortedTimeSeries.map(({time, values}) => ([new Date(time), ...values])), labels: ["time", ...sortedLabels.map(({label}) => label)], + dygraphSeries, } - - // 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)) - return timeSeriesToDygraph; // timeSeriesToDygraph , {labels: [], timeSeries: []}