graph: don't change original series name in histogram mode, #8886 (#9782)

public/app/plugins/panel/graph/data_processor.ts

@@ -25,12 +25,20 @@ export class DataProcessor {
 
 
     switch (this.panel.xaxis.mode) {
     switch (this.panel.xaxis.mode) {
       case 'series':
       case 'series':
-      case 'histogram':
       case 'time': {
       case 'time': {
         return options.dataList.map((item, index) => {
         return options.dataList.map((item, index) => {
           return this.timeSeriesHandler(item, index, options);
           return this.timeSeriesHandler(item, index, options);
         });
         });
       }
       }
+      case 'histogram': {
+        let histogramDataList = [{
+          target: 'count',
+          datapoints: _.concat([], _.flatten(_.map(options.dataList, 'datapoints')))
+        }];
+        return histogramDataList.map((item, index) => {
+          return this.timeSeriesHandler(item, index, options);
+        });
+      }
       case 'field': {
       case 'field': {
         return this.customHandler(firstItem);
         return this.customHandler(firstItem);
       }
       }

public/app/plugins/panel/graph/graph.ts

@@ -313,11 +313,7 @@ function graphDirective($rootScope, timeSrv, popoverSrv, contextSrv) {
               let ticks = panel.xaxis.buckets || panelWidth / 50;
               let ticks = panel.xaxis.buckets || panelWidth / 50;
               bucketSize = tickStep(histMin, histMax, ticks);
               bucketSize = tickStep(histMin, histMax, ticks);
               let histogram = convertValuesToHistogram(values, bucketSize);
               let histogram = convertValuesToHistogram(values, bucketSize);
-
               data[0].data = histogram;
               data[0].data = histogram;
-              data[0].alias = data[0].label = data[0].id = "count";
-              data = [data[0]];
-
               options.series.bars.barWidth = bucketSize * 0.8;
               options.series.bars.barWidth = bucketSize * 0.8;
             } else {
             } else {
               bucketSize = 0;
               bucketSize = 0;

public/app/plugins/panel/graph/histogram.ts

 import _ from 'lodash';
 import _ from 'lodash';
+import TimeSeries from 'app/core/time_series2';
 
 
 /**
 /**
  * Convert series into array of series values.
  * Convert series into array of series values.
  * @param data Array of series
  * @param data Array of series
  */
  */
-export function getSeriesValues(data: any): number[] {
+export function getSeriesValues(dataList: TimeSeries[]): number[] {
+  const VALUE_INDEX = 0;
   let values = [];
   let values = [];
 
 
   // Count histogam stats
   // Count histogam stats
-  for (let i = 0; i < data.length; i++) {
-    let series = data[i];
-    for (let j = 0; j < series.data.length; j++) {
-      if (series.data[j][1] !== null) {
-        values.push(series.data[j][1]);
+  for (let i = 0; i < dataList.length; i++) {
+    let series = dataList[i];
+    let datapoints = series.datapoints;
+    for (let j = 0; j < datapoints.length; j++) {
+      if (datapoints[j][VALUE_INDEX] !== null) {
+        values.push(datapoints[j][VALUE_INDEX]);
       }
       }
     }
     }
   }
   }

public/app/plugins/panel/graph/specs/histogram.jest.ts

@@ -37,7 +37,9 @@ describe('Graph Histogam Converter', function () {
     beforeEach(() => {
     beforeEach(() => {
       data = [
       data = [
         {
         {
-          data: [[0, 1], [0, 2], [0, 10], [0, 11], [0, 17], [0, 20], [0, 29]]
+          datapoints: [
+            [1, 0], [2, 0], [10, 0], [11, 0], [17, 0], [20, 0], [29, 0]
+          ]
         }
         }
       ];
       ];
     });
     });
@@ -50,7 +52,7 @@ describe('Graph Histogam Converter', function () {
     });
     });
 
 
     it('Should skip null values', () => {
     it('Should skip null values', () => {
-      data[0].data.push([0, null]);
+      data[0].datapoints.push([null, 0]);
 
 
       let expected = [1, 2, 10, 11, 17, 20, 29];
       let expected = [1, 2, 10, 11, 17, 20, 29];