[Charts] Add: errors bands in graphs

client/app/services/query-result.js

@@ -224,6 +224,7 @@ function QueryResultService($resource, $timeout, $q) {
         let seriesName;
         let xValue = 0;
         const yValues = {};
+        let eValue = null;
 
         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,16 @@ function QueryResultService($resource, $timeout, $q) {
 
         if (seriesName === undefined) {
           each(yValues, (yValue, ySeriesName) => {
-            addPointToSeries({ x: xValue, y: yValue }, 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);
         }
       });
-
       return values(series);
     }
 

client/app/visualizations/chart/chart-editor.html

@@ -1,16 +1,16 @@
 <div>
   <ul class="tab-nav">
     <li ng-class="{active: currentTab == 'general'}">
-      <a ng-click="currentTab='general'">General</a>
+      <a ng-click="changeTab('general')">General</a>
     </li>
     <li ng-class="{active: currentTab == 'xAxis'}" ng-if="options.globalSeriesType != 'custom'">
-      <a ng-click="currentTab='xAxis'">X Axis</a>
+      <a ng-click="changeTab('xAxis')">X Axis</a>
     </li>
     <li ng-class="{active: currentTab == 'yAxis'}" ng-if="options.globalSeriesType != 'custom'">
-      <a ng-click="currentTab='yAxis'">Y Axis</a>
+      <a ng-click="changeTab('yAxis')">Y Axis</a>
     </li>
     <li ng-class="{active: currentTab == 'series'}" ng-if="options.globalSeriesType != 'custom'">
-      <a ng-click="currentTab='series'">Series</a>
+      <a ng-click="changeTab('series')">Series</a>
     </li>
   </ul>
   <div ng-show="currentTab == 'general'">
@@ -65,6 +65,20 @@
           <small class="text-muted" ng-bind="columns[column].type"></small>
         </ui-select-choices>
       </ui-select>
+      <button class='btn btn-default m-t-10' ng-disabled='!form.groupby' ng-click='clearGroupBy()'>Clear</button>
+    </div>
+
+    <div class="form-group" ng-if="options.globalSeriesType != 'custom'">
+      <label class="control-label">Errors column</label>
+
+      <ui-select name="errorColumn" ng-model="form.errorColumn">
+        <ui-select-match placeholder="Choose column...">{{$select.selected}}</ui-select-match>
+        <ui-select-choices repeat="column in columnNames | remove:form.yAxisColumns | remove:form.groupby">
+          <span ng-bind-html="column | highlight: $select.search"></span><span> </span>
+          <small class="text-muted" ng-bind="columns[column].type"></small>
+        </ui-select-choices>
+      </ui-select>
+      <button class='btn btn-default m-t-10' ng-disabled='!form.errorColumn' ng-click='clearErrorColumn()'>Clear</button>
     </div>
 
     <div class="checkbox" ng-if="options.globalSeriesType != 'custom'">

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,

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 (!isUndefined(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);
         });