Histogram: support units on the x axis (#35218)

packages/grafana-data/src/transformations/transformers/histogram.test.ts

@@ -12,7 +12,7 @@ describe('histogram frames frames', () => {
     const series1 = toDataFrame({
       fields: [
         { name: 'A', type: FieldType.number, values: [1, 2, 3, 4, 5] },
-        { name: 'B', type: FieldType.number, values: [3, 4, 5, 6, 7] },
+        { name: 'B', type: FieldType.number, values: [3, 4, 5, 6, 7], config: { unit: 'mph' } },
         { name: 'C', type: FieldType.number, values: [5, 6, 7, 8, 9] },
       ],
     });
@@ -26,10 +26,14 @@ describe('histogram frames frames', () => {
       out.fields.map((f) => ({
         name: f.name,
         values: f.values.toArray(),
+        config: f.config,
       }))
     ).toMatchInlineSnapshot(`
       Array [
         Object {
+          "config": Object {
+            "unit": "mph",
+          },
           "name": "BucketMin",
           "values": Array [
             1,
@@ -44,6 +48,9 @@ describe('histogram frames frames', () => {
           ],
         },
         Object {
+          "config": Object {
+            "unit": "mph",
+          },
           "name": "BucketMax",
           "values": Array [
             2,
@@ -58,6 +65,9 @@ describe('histogram frames frames', () => {
           ],
         },
         Object {
+          "config": Object {
+            "unit": undefined,
+          },
           "name": "A",
           "values": Array [
             1,
@@ -72,6 +82,9 @@ describe('histogram frames frames', () => {
           ],
         },
         Object {
+          "config": Object {
+            "unit": undefined,
+          },
           "name": "B",
           "values": Array [
             0,
@@ -86,6 +99,9 @@ describe('histogram frames frames', () => {
           ],
         },
         Object {
+          "config": Object {
+            "unit": undefined,
+          },
           "name": "C",
           "values": Array [
             0,
@@ -100,6 +116,9 @@ describe('histogram frames frames', () => {
           ],
         },
         Object {
+          "config": Object {
+            "unit": undefined,
+          },
           "name": "C",
           "values": Array [
             0,

packages/grafana-data/src/transformations/transformers/histogram.ts

@@ -2,9 +2,11 @@ import { DataTransformerInfo } from '../../types';
 import { map } from 'rxjs/operators';
 
 import { DataTransformerID } from './ids';
-import { DataFrame, Field, FieldType } from '../../types/dataFrame';
+import { DataFrame, Field, FieldConfig, FieldType } from '../../types/dataFrame';
 import { ArrayVector } from '../../vector/ArrayVector';
 import { AlignedData, join } from './joinDataFrames';
+import { getDisplayProcessor } from '../../field';
+import { createTheme, GrafanaTheme2 } from '../../themes';
 
 /* eslint-disable */
 // prettier-ignore
@@ -172,13 +174,23 @@ export function buildHistogram(frames: DataFrame[], options?: HistogramTransform
 
   let histograms: AlignedData[] = [];
   let counts: Field[] = [];
+  let config: FieldConfig | undefined = undefined;
 
   for (const frame of frames) {
     for (const field of frame.fields) {
       if (field.type === FieldType.number) {
         let fieldHist = histogram(field.values.toArray(), getBucket, histFilter, histSort) as AlignedData;
         histograms.push(fieldHist);
-        counts.push({ ...field });
+        counts.push({
+          ...field,
+          config: {
+            ...field.config,
+            unit: undefined,
+          },
+        });
+        if (!config && field.config.unit) {
+          config = field.config;
+        }
       }
     }
   }
@@ -202,18 +214,17 @@ export function buildHistogram(frames: DataFrame[], options?: HistogramTransform
     }
   }
 
-  const bucketMin = {
+  const bucketMin: Field = {
-    ...counts[0],
     name: histogramFrameBucketMinFieldName,
     values: new ArrayVector(joinedHists[0]),
     type: FieldType.number,
     state: undefined,
+    config: config ?? {},
   };
   const bucketMax = {
     ...bucketMin,
     name: histogramFrameBucketMaxFieldName,
     values: new ArrayVector(joinedHists[0].map((v) => v + bucketSize!)),
-    state: undefined,
   };
 
   if (options?.combine) {
@@ -301,7 +312,15 @@ function histogram(
 /**
  * @internal
  */
-export function histogramFieldsToFrame(info: HistogramFields): DataFrame {
+export function histogramFieldsToFrame(info: HistogramFields, theme?: GrafanaTheme2): DataFrame {
+  if (!info.bucketMin.display) {
+    const display = getDisplayProcessor({
+      field: info.bucketMin,
+      theme: theme ?? createTheme(),
+    });
+    info.bucketMin.display = display;
+    info.bucketMax.display = display;
+  }
   return {
     fields: [info.bucketMin, info.bucketMax, ...info.counts],
     length: info.bucketMin.values.length,

public/app/plugins/panel/histogram/HistogramPanel.tsx

@@ -27,8 +27,8 @@ export const HistogramPanel: React.FC<Props> = ({ data, options, width, height }
       return undefined;
     }
 
-    return histogramFieldsToFrame(hist);
+    return histogramFieldsToFrame(hist, theme);
-  }, [data.series, options]);
+  }, [data.series, options, theme]);
 
   if (!histogram || !histogram.fields.length) {
     return (