[Lens] metric bar miscolored when max is 0

[drewdaemon]

STR

• enable dynamic coloring (status palette for example)
• add max dimension (defaults to 0)

Result: bar is green
Expected: bar is red

Screen.Recording.2023-11-30.at.3.25.18.PM.mov

[elasticmachine]

Pinging @elastic/kibana-visualizations (Team:Visualizations)

[nickofthyme]

I think this is the same as #172297 😆

[drewdaemon]

Great minds think alike! But, in #172297 the bars disappear, right? Whereas here, they're getting an incorrect palette color. You think it's still the same underlying cause?

[nickofthyme]

Are you using color ranges as percentage value? If so, does the issue go away if you set the max value to the default? Otherwise do you know what triggers with behavior other than using the dynamic color ranges?

Update: Discuss this with Drew offline and we found this to be a related but separate issue to #172297. This issue is concerning bad color scaling of max values around 0. Both likely due to code here...

kibana/src/plugins/charts/public/services/palettes/helpers.ts

Lines 94 to 141 in 7ad94e9

	/**
	* When stops are empty, it is assumed a predefined palette, so colors are distributed uniformly in the whole data range
	* When stops are passed, then rangeMin/rangeMax are used as reference for user defined limits:
	* continuity is defined over rangeMin/rangeMax, not these stops values (rangeMin/rangeMax are computed from user's stop inputs)
	*/
	export function workoutColorForValue(
	value: number | undefined,
	params: CustomPaletteState,
	minMax: { min: number; max: number }
	) {
	if (value == null) {
	return;
	}
	const { colors, stops, range = 'percent', continuity = 'above', rangeMax, rangeMin } = params;
	const isMinContinuity = checkIsMinContinuity(continuity);
	const isMaxContinuity = checkIsMaxContinuity(continuity);
	// ranges can be absolute numbers or percentages
	// normalized the incoming value to the same format as range to make easier comparisons
	const normalizedValue = getNormalizedValueByRange(value, params, minMax);
	const [min, max]: [number, number] = range === 'percent' ? [0, 100] : [minMax.min, minMax.max];
	const minRange = getNormalizedMinRange({ stops, rangeMin }, isMinContinuity, min);
	const maxRange = getNormalizedMaxRange({ stops, colors, rangeMax }, isMaxContinuity, [min, max]);
	const comparisonFn = (v: number, threshold: number) => v - threshold;
	if (comparisonFn(normalizedValue, minRange) < 0) {
	if (isMinContinuity) {
	return colors[0];
	}
	return;
	}
	if (comparisonFn(normalizedValue, maxRange) > 0) {
	if (isMaxContinuity) {
	return colors[colors.length - 1];
	}
	return;
	}
	if (stops.length) {
	return findColorsByStops(normalizedValue, comparisonFn, colors, stops);
	}
	return findColorSegment(normalizedValue, comparisonFn, colors, min, max);
	}