[Lens] Fixes a bug in gauges number palette (#137813)

src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx

@@ -27,6 +27,7 @@ import {
   getValueFromAccessor,
   getSubtypeByGaugeType,
   getGoalConfig,
+  computeMinMax,
 } from './utils';
 import './index.scss';
 import { GaugeCentralMajorMode } from '../../common/types';
@@ -119,27 +120,6 @@ function getTitle(
   return major || fallbackTitle || '';
 }
 
-const calculateRealRangeValueMin = (
-  relativeRangeValue: number,
-  { min, max }: { min: number; max: number }
-) => {
-  if (isFinite(relativeRangeValue)) {
-    return relativeRangeValue * ((max - min) / 100);
-  }
-  return min;
-};
-
-const calculateRealRangeValueMax = (
-  relativeRangeValue: number,
-  { min, max }: { min: number; max: number }
-) => {
-  if (isFinite(relativeRangeValue)) {
-    return relativeRangeValue * ((max - min) / 100);
-  }
-
-  return max;
-};
-
 const getPreviousSectionValue = (value: number, bands: number[]) => {
   // bands value is equal to the stop. The purpose of this value is coloring the previous section, which is smaller, then the band.
   // So, the smaller value should be taken. For the first element -1, for the next - middle value of the previous section.
@@ -176,24 +156,13 @@ export const GaugeComponent: FC<GaugeRenderProps> = memo(
         bands: number[],
         percentageMode?: boolean
       ) => {
-        const { rangeMin, rangeMax, range }: CustomPaletteState = paletteConfig.params!;
-        const minRealValue = bands[0];
-        const maxRealValue = bands[bands.length - 1];
-        let min = rangeMin;
-        let max = rangeMax;
-
         let stops = paletteConfig.params?.stops ?? [];
 
         if (percentageMode) {
           stops = bands.map((v) => v * 100);
         }
 
-        if (range === 'percent') {
-          const minMax = { min: minRealValue, max: maxRealValue };
-
-          min = calculateRealRangeValueMin(min, minMax);
-          max = calculateRealRangeValueMax(max, minMax);
-        }
+        const { min, max } = computeMinMax(paletteConfig, bands);
 
         return paletteService
           .get(paletteConfig?.name ?? 'custom')

src/plugins/chart_expressions/expression_gauge/public/components/utils/helpers.test.ts

@@ -0,0 +1,80 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import type { PaletteOutput } from '@kbn/coloring';
+import type { CustomPaletteState } from '@kbn/charts-plugin/public';
+import { computeMinMax } from './helpers';
+
+describe('computeMinMax', () => {
+  it('returns the correct min max for percent palette', () => {
+    const palette = {
+      type: 'palette' as const,
+      name: 'custom',
+      params: {
+        colors: ['#aaa', '#bbb', '#ccc'],
+        gradient: false,
+        stops: [20, 60, 80],
+        range: 'percent',
+        rangeMin: 0,
+        rangeMax: 100,
+      },
+    } as PaletteOutput<CustomPaletteState>;
+    const bands = [0, 2, 6, 8, 10];
+    expect(computeMinMax(palette, bands)).toEqual({ min: 0, max: 10 });
+  });
+
+  it('returns the correct min max for percent palette and Infinite bounds', () => {
+    const palette = {
+      type: 'palette' as const,
+      name: 'custom',
+      params: {
+        colors: ['#aaa', '#bbb', '#ccc'],
+        gradient: false,
+        stops: [],
+        range: 'percent',
+        rangeMin: -Infinity,
+        rangeMax: Infinity,
+      },
+    } as PaletteOutput<CustomPaletteState>;
+    const bands = [0, 2, 6, 8, 10];
+    expect(computeMinMax(palette, bands)).toEqual({ min: 0, max: 10 });
+  });
+
+  it('returns the correct min max for number palette', () => {
+    const palette = {
+      type: 'palette' as const,
+      name: 'custom',
+      params: {
+        colors: ['#aaa', '#bbb', '#ccc'],
+        gradient: false,
+        stops: [0, 6, 10],
+        range: 'number',
+        rangeMin: 0,
+        rangeMax: 20,
+      },
+    } as PaletteOutput<CustomPaletteState>;
+    const bands = [0, 2, 6, 8, 10];
+    expect(computeMinMax(palette, bands)).toEqual({ min: 0, max: 20 });
+  });
+
+  it('returns the correct min max for number palette and Infinite bounds', () => {
+    const palette = {
+      type: 'palette' as const,
+      name: 'custom',
+      params: {
+        colors: ['#aaa', '#bbb', '#ccc'],
+        gradient: false,
+        stops: [],
+        range: 'number',
+        rangeMin: -Infinity,
+        rangeMax: Infinity,
+      },
+    } as PaletteOutput<CustomPaletteState>;
+    const bands = [0, 2, 6, 8, 10];
+    expect(computeMinMax(palette, bands)).toEqual({ min: 0, max: 10 });
+  });
+});

src/plugins/chart_expressions/expression_gauge/public/components/utils/helpers.ts

@@ -0,0 +1,58 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import type { PaletteOutput } from '@kbn/coloring';
+import type { CustomPaletteState } from '@kbn/charts-plugin/public';
+
+const calculateRealRangeValueMin = (
+  relativeRangeValue: number,
+  { min, max }: { min: number; max: number }
+) => {
+  if (isFinite(relativeRangeValue)) {
+    return relativeRangeValue * ((max - min) / 100);
+  }
+  return min;
+};
+
+const calculateRealRangeValueMax = (
+  relativeRangeValue: number,
+  { min, max }: { min: number; max: number }
+) => {
+  if (isFinite(relativeRangeValue)) {
+    return relativeRangeValue * ((max - min) / 100);
+  }
+
+  return max;
+};
+
+export const computeMinMax = (
+  paletteConfig: PaletteOutput<CustomPaletteState>,
+  bands: number[]
+) => {
+  const { rangeMin, rangeMax, range }: CustomPaletteState = paletteConfig.params!;
+  const minRealValue = bands[0];
+  const maxRealValue = bands[bands.length - 1];
+  let min = rangeMin;
+  let max = rangeMax;
+
+  if (range === 'percent') {
+    const minMax = { min: minRealValue, max: maxRealValue };
+
+    min = calculateRealRangeValueMin(min, minMax);
+    max = calculateRealRangeValueMax(max, minMax);
+  }
+
+  if (range === 'number') {
+    min = isFinite(min) ? min : minRealValue;
+    max = isFinite(max) ? max : maxRealValue;
+  }
+
+  return {
+    min,
+    max,
+  };
+};

src/plugins/chart_expressions/expression_gauge/public/components/utils/index.ts

@@ -10,3 +10,5 @@ export * from './accessors';
 export * from './icons';
 export * from './gauge_types';
 export * from './goal_config';
+
+export { computeMinMax } from './helpers';