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

This commit is contained in:
Ryan McKinley 2021-06-04 10:42:53 -07:00 committed by GitHub
parent 3bbe6473b6
commit 99a6337e1f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 47 additions and 9 deletions

View File

@ -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,

View File

@ -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,

View File

@ -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 (