mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Histogram: support units on the x axis (#35218)
This commit is contained in:
parent
3bbe6473b6
commit
99a6337e1f
@ -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,
|
||||
|
@ -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 = {
|
||||
...counts[0],
|
||||
const bucketMin: Field = {
|
||||
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,
|
||||
|
@ -27,8 +27,8 @@ export const HistogramPanel: React.FC<Props> = ({ data, options, width, height }
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return histogramFieldsToFrame(hist);
|
||||
}, [data.series, options]);
|
||||
return histogramFieldsToFrame(hist, theme);
|
||||
}, [data.series, options, theme]);
|
||||
|
||||
if (!histogram || !histogram.fields.length) {
|
||||
return (
|
||||
|
Loading…
Reference in New Issue
Block a user