[Heatmap] Fixes bands computation when only metric is applied (#124664)

* [Heatmap] Fixes bands computation when only metric is applied

* Fixes overwrite with formatter

* Fixes overwrite

* Addresses PR comments

* Address PR comments
This commit is contained in:
Stratoula Kalafateli 2022-02-04 17:58:03 +02:00 committed by GitHub
parent bf7fae9e0a
commit 431adef604
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 39 additions and 11 deletions

View file

@ -168,6 +168,29 @@ describe('HeatmapComponent', function () {
});
});
it('computes the bands correctly if only value accessor is provided', async () => {
const newData: Datatable = {
type: 'datatable',
rows: [{ 'col-0-1': 571.806 }],
columns: [{ id: 'col-0-1', name: 'Count', meta: { type: 'number' } }],
};
const newProps = {
...wrapperProps,
data: newData,
args: { ...wrapperProps.args, lastRangeIsRightOpen: false },
} as unknown as HeatmapRenderProps;
const component = mountWithIntl(<HeatmapComponent {...newProps} />);
await act(async () => {
expect(component.find(Heatmap).prop('colorScale')).toEqual({
bands: [
{ color: 'rgb(0, 0, 0)', end: 0, start: 0 },
{ color: 'rgb(112, 38, 231)', end: Infinity, start: 571.806 },
],
type: 'bands',
});
});
});
it('renders the axis titles', () => {
const component = shallowWithIntl(<HeatmapComponent {...wrapperProps} />);
expect(component.find(Heatmap).prop('xAxisTitle')).toEqual('Dest');

View file

@ -274,38 +274,43 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
// adds a very small number to the max value to make sure the max value will be included
const smattering = 0.00001;
let endValue = max + smattering;
let endValueDistinctBounds = max + smattering;
if (paletteParams?.rangeMax || paletteParams?.rangeMax === 0) {
endValue =
endValueDistinctBounds =
(paletteParams?.range === 'number'
? paletteParams.rangeMax
: min + ((max - min) * paletteParams.rangeMax) / 100) + smattering;
}
const overwriteColors = uiState?.get('vis.colors') ?? null;
const hasSingleValue = max === min;
const bands = ranges.map((start, index, array) => {
const isPenultimate = index === array.length - 1;
const nextValue = array[index + 1];
// by default the last range is right-open
let end = index === array.length - 1 ? Number.POSITIVE_INFINITY : array[index + 1];
let endValue = isPenultimate ? Number.POSITIVE_INFINITY : nextValue;
const startValue = isPenultimate && hasSingleValue ? min : start;
// if the lastRangeIsRightOpen is set to false, we need to set the last range to the max value
if (args.lastRangeIsRightOpen === false) {
const lastBand = max === start ? Number.POSITIVE_INFINITY : endValue;
end = index === array.length - 1 ? lastBand : array[index + 1];
const lastBand = hasSingleValue ? Number.POSITIVE_INFINITY : endValueDistinctBounds;
endValue = isPenultimate ? lastBand : nextValue;
}
let overwriteArrayIdx;
if (end === Number.POSITIVE_INFINITY) {
overwriteArrayIdx = `${start}`;
if (endValue === Number.POSITIVE_INFINITY) {
overwriteArrayIdx = `${metricFormatter.convert(startValue)}`;
} else {
overwriteArrayIdx = `${metricFormatter.convert(start)} - ${metricFormatter.convert(end)}`;
overwriteArrayIdx = `${metricFormatter.convert(start)} - ${metricFormatter.convert(
endValue
)}`;
}
const overwriteColor = overwriteColors?.[overwriteArrayIdx];
return {
// with the default continuity:above the every range is left-closed
start,
end,
start: startValue,
end: endValue,
// the current colors array contains a duplicated color at the beginning that we need to skip
color: overwriteColor ?? colors[index + 1],
};