From 870e7c200efbb5df0fdd4ce12508ebb8968ab31f Mon Sep 17 00:00:00 2001 From: luke14free Date: Mon, 28 Nov 2016 11:33:04 +0100 Subject: [PATCH 1/4] Adding errors bands in graphs and fixing chart-edit bugs --- client/app/services/query-result.js | 8 ++++-- .../visualizations/chart/chart-editor.html | 22 +++++++++++++--- client/app/visualizations/chart/index.js | 26 ++++++++++++++++--- client/app/visualizations/chart/plotly.js | 19 ++++++++++++-- 4 files changed, 64 insertions(+), 11 deletions(-) diff --git a/client/app/services/query-result.js b/client/app/services/query-result.js index d117f2367c..56d5c562ba 100644 --- a/client/app/services/query-result.js +++ b/client/app/services/query-result.js @@ -224,6 +224,7 @@ function QueryResultService($resource, $timeout, $q) { let seriesName; let xValue = 0; const yValues = {}; + let eValue = 0; each(row, (v, definition) => { const name = definition.split('::')[0] || definition.split('__')[0]; @@ -248,6 +249,10 @@ function QueryResultService($resource, $timeout, $q) { yValues[name] = value; point[type] = value; } + if (type === 'yError') { + eValue = value; + point[type] = value; + } if (type === 'series') { seriesName = String(value); @@ -260,13 +265,12 @@ function QueryResultService($resource, $timeout, $q) { if (seriesName === undefined) { each(yValues, (yValue, ySeriesName) => { - addPointToSeries({ x: xValue, y: yValue }, series, ySeriesName); + addPointToSeries({ x: xValue, y: yValue, yError: eValue }, series, ySeriesName); }); } else { addPointToSeries(point, series, seriesName); } }); - return values(series); } diff --git a/client/app/visualizations/chart/chart-editor.html b/client/app/visualizations/chart/chart-editor.html index 0694280476..6434274a0f 100644 --- a/client/app/visualizations/chart/chart-editor.html +++ b/client/app/visualizations/chart/chart-editor.html @@ -1,16 +1,16 @@
@@ -65,6 +65,20 @@ + +
+ +
+ + + + {{$select.selected}} + + + + + +
diff --git a/client/app/visualizations/chart/index.js b/client/app/visualizations/chart/index.js index b7e6569a98..b5d772e525 100644 --- a/client/app/visualizations/chart/index.js +++ b/client/app/visualizations/chart/index.js @@ -51,12 +51,19 @@ function ChartEditor(clientConfig) { link(scope) { scope.currentTab = 'general'; + scope.clearGroupBy = () => { delete scope.form.groupby; }; + scope.clearErrorColumn = () => { delete scope.form.errorColumn; }; + scope.stackingOptions = { Disabled: null, Enabled: 'normal', Percent: 'percent', }; + scope.changeTab = (tab) => { + scope.currentTab = tab; + }; + scope.chartTypes = { line: { name: 'Line', icon: 'line-chart' }, column: { name: 'Bar', icon: 'bar-chart' }, @@ -73,8 +80,8 @@ function ChartEditor(clientConfig) { scope.yAxisScales = ['linear', 'logarithmic', 'datetime']; scope.chartTypeChanged = () => { - scope.options.seriesOptions.forEach((options) => { - options.type = scope.options.globalSeriesType; + keys(scope.options.seriesOptions).forEach((key) => { + scope.options.seriesOptions[key].type = scope.options.globalSeriesType; }); }; @@ -177,6 +184,16 @@ function ChartEditor(clientConfig) { if (value !== undefined) { setColumnRole('x', value); } }); + scope.$watch('form.errorColumn', (value, old) => { + if (old !== undefined) { + unsetColumn(old); + } + if (value !== undefined) { + setColumnRole('yError', value); + } + }); + + scope.$watch('form.groupby', (value, old) => { if (old !== undefined) { unsetColumn(old); @@ -205,6 +222,8 @@ function ChartEditor(clientConfig) { scope.form.yAxisColumns.push(key); } else if (value === 'series') { scope.form.groupby = key; + } else if (value === 'yError') { + scope.form.errorColumn = key; } }); } @@ -233,7 +252,8 @@ export default function (ngModule) { legend: { enabled: true }, yAxis: [{ type: 'linear' }, { type: 'linear', opposite: true }], xAxis: { type: 'datetime', labels: { enabled: true } }, - series: { stacking: null }, + error_y: { type: 'data', visible: true }, + series: { stacking: null, error_y: { type: 'data', visible: true } }, seriesOptions: {}, columnMapping: {}, bottomMargin: 50, diff --git a/client/app/visualizations/chart/plotly.js b/client/app/visualizations/chart/plotly.js index 7e2ba351fb..f8d3a01b44 100644 --- a/client/app/visualizations/chart/plotly.js +++ b/client/app/visualizations/chart/plotly.js @@ -284,6 +284,7 @@ const PlotlyChart = () => { const plotlySeries = { x: [], y: [], + error_y: { array: [] }, name: seriesOptions.name || series.name, marker: { color: seriesOptions.color ? seriesOptions.color : getColor(index) }, }; @@ -301,20 +302,34 @@ const PlotlyChart = () => { if (useUnifiedXaxis && index === 0) { const yValues = {}; + const eValues = {}; - data.forEach((row) => { yValues[row.x] = row.y; }); + data.forEach((row) => { + yValues[row.x] = row.y; + if (row.yError) { + eValues[row.x] = row.yError; + } + }); unifiedX.forEach((x) => { plotlySeries.x.push(normalizeValue(x)); plotlySeries.y.push(normalizeValue(yValues[x] || null)); + if (eValues[x]) { + plotlySeries.error_y.array.push(normalizeValue(eValues[x] || null)); + } }); } else { data.forEach((row) => { plotlySeries.x.push(normalizeValue(row.x)); plotlySeries.y.push(normalizeValue(row.y)); + if (row.yError) { + plotlySeries.error_y.array.push(normalizeValue(row.yError)); + } }); } - + if (!plotlySeries.error_y.length) { + delete plotlySeries.error_y.length; + } scope.data.push(plotlySeries); }); From 624a14488062fed24f863b211c30adf5628b31b6 Mon Sep 17 00:00:00 2001 From: luke14free Date: Mon, 28 Nov 2016 11:43:08 +0100 Subject: [PATCH 2/4] Fix: add error bands to plotly only if they are set by the user --- client/app/services/query-result.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/client/app/services/query-result.js b/client/app/services/query-result.js index 56d5c562ba..1da127dfe6 100644 --- a/client/app/services/query-result.js +++ b/client/app/services/query-result.js @@ -224,7 +224,7 @@ function QueryResultService($resource, $timeout, $q) { let seriesName; let xValue = 0; const yValues = {}; - let eValue = 0; + let eValue = null; each(row, (v, definition) => { const name = definition.split('::')[0] || definition.split('__')[0]; @@ -265,7 +265,11 @@ function QueryResultService($resource, $timeout, $q) { if (seriesName === undefined) { each(yValues, (yValue, ySeriesName) => { - addPointToSeries({ x: xValue, y: yValue, yError: eValue }, series, ySeriesName); + if (eValue !== null) { + addPointToSeries({ x: xValue, y: yValue, yError: eValue }, series, ySeriesName); + } else { + addPointToSeries({ x: xValue, y: yValue }, series, ySeriesName); + } }); } else { addPointToSeries(point, series, seriesName); From a754e58fd829f6896b814ef1eef52f29da1314fd Mon Sep 17 00:00:00 2001 From: luke14free Date: Sun, 4 Dec 2016 10:50:03 +0100 Subject: [PATCH 3/4] Explicitly checking undefined values --- client/app/visualizations/chart/plotly.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/app/visualizations/chart/plotly.js b/client/app/visualizations/chart/plotly.js index f8d3a01b44..a2a27acbdf 100644 --- a/client/app/visualizations/chart/plotly.js +++ b/client/app/visualizations/chart/plotly.js @@ -314,7 +314,7 @@ const PlotlyChart = () => { unifiedX.forEach((x) => { plotlySeries.x.push(normalizeValue(x)); plotlySeries.y.push(normalizeValue(yValues[x] || null)); - if (eValues[x]) { + if (isUndefined(eValues[x])) { plotlySeries.error_y.array.push(normalizeValue(eValues[x] || null)); } }); From e7fdc23b035998ff481c4cd08a528540e5d8c935 Mon Sep 17 00:00:00 2001 From: luke14free Date: Sun, 4 Dec 2016 10:56:13 +0100 Subject: [PATCH 4/4] wrong check --- client/app/visualizations/chart/plotly.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/app/visualizations/chart/plotly.js b/client/app/visualizations/chart/plotly.js index a2a27acbdf..c723190522 100644 --- a/client/app/visualizations/chart/plotly.js +++ b/client/app/visualizations/chart/plotly.js @@ -314,7 +314,7 @@ const PlotlyChart = () => { unifiedX.forEach((x) => { plotlySeries.x.push(normalizeValue(x)); plotlySeries.y.push(normalizeValue(yValues[x] || null)); - if (isUndefined(eValues[x])) { + if (!isUndefined(eValues[x])) { plotlySeries.error_y.array.push(normalizeValue(eValues[x] || null)); } });