Histogram: reduce default bucket size, fix rendering (#35294)

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

@@ -38,6 +38,7 @@ function incrRoundUp(num: number, incr: number) {
 export interface HistogramProps extends Themeable2 {
   options: PanelOptions; // used for diff
   alignedFrame: DataFrame; // This could take HistogramFields
+  bucketSize: number;
   width: number;
   height: number;
   structureRev?: number; // a number that will change when the frames[] structure changes
@@ -45,13 +46,18 @@ export interface HistogramProps extends Themeable2 {
   children?: (builder: UPlotConfigBuilder, frame: DataFrame) => React.ReactNode;
 }
 
+export function getBucketSize(frame: DataFrame) {
+  // assumes BucketMin is fields[0] and BucktMax is fields[1]
+  return frame.fields[1].values.get(0) - frame.fields[0].values.get(0);
+}
+
 const prepConfig = (frame: DataFrame, theme: GrafanaTheme2) => {
   // todo: scan all values in BucketMin and BucketMax fields to assert if uniform bucketSize
 
   let builder = new UPlotConfigBuilder();
 
   // assumes BucketMin is fields[0] and BucktMax is fields[1]
-  let bucketSize = frame.fields[1].values.get(0) - frame.fields[0].values.get(0);
+  let bucketSize = getBucketSize(frame);
 
   // splits shifter, to ensure splits always start at first bucket
   let xSplits: uPlot.Axis.Splits = (u, axisIdx, scaleMin, scaleMax, foundIncr, foundSpace) => {
@@ -251,13 +257,14 @@ export class Histogram extends React.Component<HistogramProps, State> {
   }
 
   componentDidUpdate(prevProps: HistogramProps) {
-    const { structureRev, alignedFrame } = this.props;
+    const { structureRev, alignedFrame, bucketSize } = this.props;
 
     if (alignedFrame !== prevProps.alignedFrame) {
       let newState = this.prepState(this.props, false);
 
       if (newState) {
         const shouldReconfig =
+          bucketSize !== prevProps.bucketSize ||
           this.props.options !== prevProps.options ||
           this.state.config === undefined ||
           structureRev !== prevProps.structureRev ||

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

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { PanelProps, buildHistogram, getHistogramFields } from '@grafana/data';
 
-import { Histogram } from './Histogram';
+import { Histogram, getBucketSize } from './Histogram';
 import { PanelOptions } from './models.gen';
 import { useTheme2 } from '@grafana/ui';
 
@@ -38,6 +38,8 @@ export const HistogramPanel: React.FC<Props> = ({ data, options, width, height }
     );
   }
 
+  const bucketSize = getBucketSize(histogram);
+
   return (
     <Histogram
       options={options}
@@ -47,6 +49,7 @@ export const HistogramPanel: React.FC<Props> = ({ data, options, width, height }
       width={width}
       height={height}
       alignedFrame={histogram}
+      bucketSize={bucketSize}
     >
       {(config, alignedFrame) => {
         return null; // <TooltipPlugin data={alignedFrame} config={config} mode={options.tooltip.mode} timeZone={timeZone} />;