diff --git a/web/ui/react-app/src/pages/graph/HistogramChart.tsx b/web/ui/react-app/src/pages/graph/HistogramChart.tsx
index 5d634fe01af..3d76aa60a1e 100644
--- a/web/ui/react-app/src/pages/graph/HistogramChart.tsx
+++ b/web/ui/react-app/src/pages/graph/HistogramChart.tsx
@@ -16,6 +16,7 @@ const HistogramChart: FC<{ histogram: Histogram; index: number; scale: ScaleType
const rangeMax = buckets ? parseFloat(buckets[buckets.length - 1][2]) : 0;
const rangeMin = buckets ? parseFloat(buckets[0][1]) : 0;
+ const countMax = buckets ? buckets.map((b) => parseFloat(b[3])).reduce((a, b) => Math.max(a, b)) : 0;
// The count of a histogram bucket is represented by its area rather than its height. This means it considers
// both the count and the width (range) of the bucket. For this, we can set the height of the bucket proportional
@@ -62,7 +63,7 @@ const HistogramChart: FC<{ histogram: Histogram; index: number; scale: ScaleType
{[1, 0.75, 0.5, 0.25].map((i) => (
- {formatter.format(fdMax * i)}
+ {scale === 'linear' ? '' : formatter.format(countMax * i)}
))}
@@ -92,6 +93,7 @@ const HistogramChart: FC<{ histogram: Histogram; index: number; scale: ScaleType
index={index}
fds={fds}
fdMax={fdMax}
+ countMax={countMax}
/>
)}
@@ -119,9 +121,19 @@ interface RenderHistogramProps {
index: number;
fds: number[];
fdMax: number;
+ countMax: number;
}
-const RenderHistogramBars: FC
= ({ buckets, scale, rangeMin, rangeMax, index, fds, fdMax }) => {
+const RenderHistogramBars: FC = ({
+ buckets,
+ scale,
+ rangeMin,
+ rangeMax,
+ index,
+ fds,
+ fdMax,
+ countMax,
+}) => {
return (
{buckets.map((b, bIdx) => {
@@ -134,6 +146,8 @@ const RenderHistogramBars: FC = ({ buckets, scale, rangeMi
scale === 'linear'
? ((parseFloat(b[2]) - parseFloat(b[1])) / (rangeMax - rangeMin)) * 100 + '%'
: 100 / buckets.length + '%';
+ const bucketHeight =
+ scale === 'linear' ? (fds[bIdx] / fdMax) * 100 + '%' : (parseFloat(b[3]) / countMax) * 100 + '%';
return (
= ({ buckets, scale, rangeMi
id={bucketIdx}
className="histogram-bucket"
style={{
- height: (fds[bIdx] / fdMax) * 100 + '%',
+ height: bucketHeight,
}}
>