IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Histogram: Add approx bucket count option (#80990)

Browse Source
This commit is contained in:
Leon Sorokin
2024-02-05 11:09:36 -06:00
committed by GitHub
parent ce0c6a9787
commit d5ac9340e5
9 changed files with 99 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
public/app/features/transformers/editors/HistogramTransformerEditor.tsx
View File

@@ -28,10 +28,21 @@ export const HistogramTransformerEditor = ({
const labelWidth = 18;
const [isInvalid, setInvalid] = useState({
bucketCount: !numberOrVariableValidator(options.bucketCount || ''),
bucketSize: !numberOrVariableValidator(options.bucketSize || ''),
bucketOffset: !numberOrVariableValidator(options.bucketOffset || ''),
});
const onBucketCountChanged = useCallback(
(val?: number) => {
onChange({
...options,
bucketCount: val,
});
},
[onChange, options]
);
const onBucketSizeChanged = useCallback(
(val?: number) => {
onChange({
@@ -52,6 +63,18 @@ export const HistogramTransformerEditor = ({
[onChange, options]
);
const onVariableBucketCountChanged = useCallback(
(value: string) => {
setInvalid({ ...isInvalid, bucketCount: !numberOrVariableValidator(value) });
onChange({
...options,
bucketCount: Number(value) === 0 ? undefined : Number(value),
});
},
[onChange, options, isInvalid]
);
const onVariableBucketSizeChanged = useCallback(
(value: string) => {
setInvalid({ ...isInvalid, bucketSize: !numberOrVariableValidator(value) });
@@ -105,6 +128,20 @@ export const HistogramTransformerEditor = ({
return (
<div>
<InlineFieldRow>
<InlineField
labelWidth={labelWidth}
label={histogramFieldInfo.bucketCount.name}
tooltip={histogramFieldInfo.bucketCount.description}
>
<NumberInput
value={options.bucketCount}
placeholder="Default: 30"
onChange={onBucketCountChanged}
min={0}
/>
</InlineField>
</InlineFieldRow>
<InlineFieldRow>
<InlineField
labelWidth={labelWidth}
@@ -138,6 +175,22 @@ export const HistogramTransformerEditor = ({
return (
<div>
<InlineFieldRow>
<InlineField
invalid={isInvalid.bucketCount}
error={'Value needs to be an integer or a variable'}
labelWidth={labelWidth}
label={histogramFieldInfo.bucketCount.name}
tooltip={histogramFieldInfo.bucketCount.description}
>
<SuggestionsInput
suggestions={variables}
value={options.bucketCount}
placeholder="Default: 30"
onChange={onVariableBucketCountChanged}
/>
</InlineField>
</InlineFieldRow>
<InlineFieldRow>
<InlineField
invalid={isInvalid.bucketSize}

4
public/app/plugins/panel/histogram/Histogram.tsx
View File

@@ -37,6 +37,7 @@ function incrRoundUp(num: number, incr: number) {
export interface HistogramProps extends Themeable2 {
options: Options; // used for diff
alignedFrame: DataFrame; // This could take HistogramFields
bucketCount?: number;
bucketSize: number;
width: number;
height: number;
@@ -310,13 +311,14 @@ export class Histogram extends React.Component<HistogramProps, State> {
}
componentDidUpdate(prevProps: HistogramProps) {
const { structureRev, alignedFrame, bucketSize } = this.props;
const { structureRev, alignedFrame, bucketSize, bucketCount } = this.props;
if (alignedFrame !== prevProps.alignedFrame) {
let newState = this.prepState(this.props, false);
if (newState) {
const shouldReconfig =
bucketCount !== prevProps.bucketCount ||
bucketSize !== prevProps.bucketSize ||
this.props.options !== prevProps.options ||
this.state.config === undefined ||

1
public/app/plugins/panel/histogram/HistogramPanel.tsx
View File

@@ -65,6 +65,7 @@ export const HistogramPanel = ({ data, options, width, height }: Props) => {
height={height}
alignedFrame={histogram}
bucketSize={bucketSize}
bucketCount={options.bucketCount}
>
{(config, alignedFrame) => {
return null; // <TooltipPlugin data={alignedFrame} config={config} mode={options.tooltip.mode} timeZone={timeZone} />;

13
public/app/plugins/panel/histogram/module.tsx
View File

@@ -17,6 +17,16 @@ export const plugin = new PanelPlugin<Options, FieldConfig>(HistogramPanel)
editor: () => null, // empty editor
showIf: (opts, data) => originalDataHasHistogram(data),
})
.addNumberInput({
path: 'bucketCount',
name: histogramFieldInfo.bucketCount.name,
description: histogramFieldInfo.bucketCount.description,
settings: {
placeholder: `Default: ${defaultOptions.bucketCount}`,
min: 0,
},
showIf: (opts, data) => !originalDataHasHistogram(data),
})
.addNumberInput({
path: 'bucketSize',
name: histogramFieldInfo.bucketSize.name,
@@ -33,10 +43,9 @@ export const plugin = new PanelPlugin<Options, FieldConfig>(HistogramPanel)
name: histogramFieldInfo.bucketOffset.name,
description: histogramFieldInfo.bucketOffset.description,
settings: {
placeholder: '0',
placeholder: `Default: ${defaultOptions.bucketOffset}`,
min: 0,
},
defaultValue: defaultOptions.bucketOffset,
showIf: (opts, data) => !originalDataHasHistogram(data),
})
.addBooleanSwitch({

4
public/app/plugins/panel/histogram/panelcfg.cue
View File

@@ -29,10 +29,12 @@ composableKinds: PanelCfg: {
common.OptionsWithLegend
common.OptionsWithTooltip
//Bucket count (approx)
bucketCount?: int32 & >0 | *30
//Size of each bucket
bucketSize?: int32
//Offset buckets by this amount
bucketOffset?: int32 | *0
bucketOffset?: float32 | *0
//Combines multiple series into a single histogram
combine?: bool
} @cuetsy(kind="interface")

5
public/app/plugins/panel/histogram/panelcfg.gen.ts
View File

@@ -11,6 +11,10 @@
import * as common from '@grafana/schema';
export interface Options extends common.OptionsWithLegend, common.OptionsWithTooltip {
/**
* Bucket count (approx)
*/
bucketCount?: number;
/**
* Offset buckets by this amount
*/
@@ -26,6 +30,7 @@ export interface Options extends common.OptionsWithLegend, common.OptionsWithToo
}
export const defaultOptions: Partial<Options> = {
bucketCount: 30,
bucketOffset: 0,
};