Heatmap: Fix tooltip y range of top and bottom buckets in calculated heatmaps (#59172)

Co-authored-by: xdavidwu <xdavidwuph@gmail.com>
This commit is contained in:
Leon Sorokin 2022-11-22 21:54:54 -06:00 committed by GitHub
parent e157ef1171
commit 2a8706b025
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 47 additions and 5 deletions

View File

@ -48,16 +48,43 @@ const HeatmapHoverCell = ({ data, hover, showHistogram }: Props) => {
// labeled buckets
const meta = readHeatmapRowsCustomMeta(data.heatmap);
const yDispSrc = meta.yOrdinalDisplay ?? yVals;
const yDisp = yField?.display ? (v: any) => formattedValueToString(yField.display!(v)) : (v: any) => `${v}`;
const yValueIdx = index % data.yBucketCount! ?? 0;
let yBucketMin: string;
let yBucketMax: string;
if (meta.yOrdinalDisplay) {
const yMinIdx = data.yLayout === HeatmapCellLayout.le ? yValueIdx - 1 : yValueIdx;
const yMaxIdx = data.yLayout === HeatmapCellLayout.le ? yValueIdx : yValueIdx + 1;
yBucketMin = `${meta.yOrdinalDisplay[yMinIdx]}`;
yBucketMax = `${meta.yOrdinalDisplay[yMaxIdx]}`;
} else {
const value = yVals?.[yValueIdx];
const yBucketMin = yDispSrc?.[yMinIdx];
const yBucketMax = yDispSrc?.[yMaxIdx];
if (data.yLayout === HeatmapCellLayout.le) {
yBucketMax = `${value}`;
if (data.yLog) {
let logFn = data.yLog === 2 ? Math.log2 : Math.log10;
let exp = logFn(value) - 1 / data.yLogSplit!;
yBucketMin = `${data.yLog ** exp}`;
} else {
yBucketMin = `${value - data.yBucketSize!}`;
}
} else {
yBucketMin = `${value}`;
if (data.yLog) {
let logFn = data.yLog === 2 ? Math.log2 : Math.log10;
let exp = logFn(value) + 1 / data.yLogSplit!;
yBucketMax = `${data.yLog ** exp}`;
} else {
yBucketMax = `${value + data.yBucketSize!}`;
}
}
}
let xBucketMin: number;
let xBucketMax: number;

View File

@ -35,6 +35,12 @@ export interface HeatmapData {
xLayout?: HeatmapCellLayout;
yLayout?: HeatmapCellLayout;
xLog?: number;
yLog?: number;
xLogSplit?: number;
yLogSplit?: number;
// color scale range
minValue?: number;
maxValue?: number;
@ -224,6 +230,9 @@ const getDenseHeatmapData = (
options.filterValues?.ge
);
let calcX = options.calculation?.xBuckets;
let calcY = options.calculation?.yBuckets;
const data: HeatmapData = {
heatmap: frame,
exemplars: exemplars?.length ? exemplars : undefined,
@ -232,6 +241,12 @@ const getDenseHeatmapData = (
xBucketCount: xBinQty,
yBucketCount: yBinQty,
yLog: calcY?.scale?.log ?? 0,
xLog: calcX?.scale?.log ?? 0,
xLogSplit: calcX?.scale?.log ? +(calcX?.value ?? '1') : 1,
yLogSplit: calcY?.scale?.log ? +(calcY?.value ?? '1') : 1,
minValue,
maxValue,