small fix

Signed-off-by: Qxisylolo <[email protected]>

Author: Qxisylolo

src/plugins/explore/public/components/visualizations/bar_gauge/bar_gauge_utils.test.ts

@@ -9,13 +9,11 @@ import {
   symbolOpposite,
   getGradientConfig,
   generateThresholds,
+  generateValueThresholds,
 } from './bar_gauge_utils';
 import { AxisColumnMappings, Threshold, VisFieldType } from '../types';
 import { BarGaugeChartStyle } from './bar_gauge_vis_config';
-
-jest.mock('../theme/default_colors', () => ({
-  getColors: jest.fn(() => ({ statusGreen: '#00FF00' })),
-}));
+import { getColors } from '../theme/default_colors';
 
 describe('bar_gauge_utils', () => {
   describe('getBarOrientation', () => {
@@ -142,56 +140,55 @@ describe('bar_gauge_utils', () => {
 
     describe('Basic functionality', () => {
       it('should handle empty thresholds array', () => {
-        const result = generateThresholds(0, 100, [], '#BLUE', []);
+        const result = generateThresholds(0, 100, [], '#BLUE');
 
-        expect(result.mergedThresholds).toHaveLength(1);
-        expect(result.mergedThresholds[0]).toEqual({ value: 0, color: '#BLUE' });
-        expect(result.valueThresholds).toEqual([]);
+        expect(result).toHaveLength(1);
+        expect(result[0]).toEqual({ value: 0, color: '#BLUE' });
       });
 
       it('should use default color when baseColor is undefined', () => {
-        const result = generateThresholds(0, 100, [], undefined, []);
+        const result = generateThresholds(0, 100, [], undefined);
 
-        expect(result.mergedThresholds).toHaveLength(1);
-        expect(result.mergedThresholds[0]).toEqual({ value: 0, color: '#00FF00' });
+        expect(result).toHaveLength(1);
+        expect(result[0]).toEqual({ value: 0, color: '#00BD6B' });
       });
 
       it('should process normal thresholds correctly', () => {
-        const result = generateThresholds(0, 100, mockThresholds, '#BLUE', []);
+        const result = generateThresholds(0, 100, mockThresholds, '#BLUE');
 
-        expect(result.mergedThresholds).toHaveLength(4);
-        expect(result.mergedThresholds[0]).toEqual({ value: 0, color: '#BLUE' });
-        expect(result.mergedThresholds[1]).toEqual({ value: 10, color: '#FF0000' });
-        expect(result.mergedThresholds[2]).toEqual({ value: 50, color: '#FFFF00' });
-        expect(result.mergedThresholds[3]).toEqual({ value: 80, color: '#0037ffff' });
+        expect(result).toHaveLength(4);
+        expect(result[0]).toEqual({ value: 0, color: '#BLUE' });
+        expect(result[1]).toEqual({ value: 10, color: '#FF0000' });
+        expect(result[2]).toEqual({ value: 50, color: '#FFFF00' });
+        expect(result[3]).toEqual({ value: 80, color: '#0037ffff' });
       });
     });
 
     describe('Threshold filtering and range handling', () => {
       it('should filter thresholds above maxBase', () => {
-        const result = generateThresholds(0, 60, mockThresholds, '#BLUE', []);
+        const result = generateThresholds(0, 60, mockThresholds, '#BLUE');
 
-        expect(result.mergedThresholds).toHaveLength(3);
-        expect(result.mergedThresholds[0]).toEqual({ value: 0, color: '#BLUE' });
-        expect(result.mergedThresholds[1]).toEqual({ value: 10, color: '#FF0000' });
-        expect(result.mergedThresholds[2]).toEqual({ value: 50, color: '#FFFF00' });
+        expect(result).toHaveLength(3);
+        expect(result[0]).toEqual({ value: 0, color: '#BLUE' });
+        expect(result[1]).toEqual({ value: 10, color: '#FF0000' });
+        expect(result[2]).toEqual({ value: 50, color: '#FFFF00' });
         // Should not include the threshold with value 80
       });
 
       it('should handle minBase higher than first threshold', () => {
-        const result = generateThresholds(25, 100, mockThresholds, '#BLUE', []);
+        const result = generateThresholds(25, 100, mockThresholds, '#BLUE');
 
-        expect(result.mergedThresholds).toHaveLength(3);
-        expect(result.mergedThresholds[0]).toEqual({ value: 25, color: '#FF0000' });
-        expect(result.mergedThresholds[1]).toEqual({ value: 50, color: '#FFFF00' });
-        expect(result.mergedThresholds[2]).toEqual({ value: 80, color: '#0037ffff' });
+        expect(result).toHaveLength(3);
+        expect(result[0]).toEqual({ value: 25, color: '#FF0000' });
+        expect(result[1]).toEqual({ value: 50, color: '#FFFF00' });
+        expect(result[2]).toEqual({ value: 80, color: '#0037ffff' });
       });
 
       it('should handle minBase higher than all thresholds', () => {
-        const result = generateThresholds(90, 100, mockThresholds, '#BLUE', []);
+        const result = generateThresholds(90, 100, mockThresholds, '#BLUE');
 
-        expect(result.mergedThresholds).toHaveLength(1);
-        expect(result.mergedThresholds[0]).toEqual({ value: 90, color: '#0037ffff' });
+        expect(result).toHaveLength(1);
+        expect(result[0]).toEqual({ value: 90, color: '#0037ffff' });
       });
     });
 
@@ -204,109 +201,82 @@ describe('bar_gauge_utils', () => {
           { value: 80, color: '#00FF00' },
         ];
 
-        const result = generateThresholds(0, 100, duplicateThresholds, '#BLUE', []);
+        const result = generateThresholds(0, 100, duplicateThresholds, '#BLUE');
 
-        expect(result.mergedThresholds).toHaveLength(4);
-        expect(result.mergedThresholds[0]).toEqual({ value: 0, color: '#BLUE' });
-        expect(result.mergedThresholds[1]).toEqual({ value: 10, color: '#FF0000' });
-        expect(result.mergedThresholds[2]).toEqual({ value: 50, color: '#00FFFF' }); // Latest color
-        expect(result.mergedThresholds[3]).toEqual({ value: 80, color: '#00FF00' });
+        expect(result).toHaveLength(4);
+        expect(result[0]).toEqual({ value: 0, color: '#BLUE' });
+        expect(result[1]).toEqual({ value: 10, color: '#FF0000' });
+        expect(result[2]).toEqual({ value: 50, color: '#00FFFF' }); // Latest color
+        expect(result[3]).toEqual({ value: 80, color: '#00FF00' });
       });
     });
+  });
+
+  describe('generateValueThresholds', () => {
+    const mockThresholds: Threshold[] = [
+      { value: 10, color: '#FF0000' },
+      { value: 50, color: '#FFFF00' },
+      { value: 80, color: '#0037ffff' },
+    ];
+
+    afterEach(() => {
+      jest.restoreAllMocks();
+    });
 
     describe('Value stops processing', () => {
       it('should process value stops correctly', () => {
         const valueStops = [15, 45, 75];
-        const result = generateThresholds(0, 100, mockThresholds, '#BLUE', valueStops);
+        const result = generateValueThresholds(0, 100, valueStops, mockThresholds);
 
-        expect(result.valueThresholds).toHaveLength(3);
-        expect(result.valueThresholds[0]).toEqual({ value: 15, color: '#FF0000' }); // Uses threshold at 10
-        expect(result.valueThresholds[1]).toEqual({ value: 45, color: '#FF0000' }); // Uses threshold at 10
-        expect(result.valueThresholds[2]).toEqual({ value: 75, color: '#FFFF00' }); // Uses threshold at 50
+        expect(result).toHaveLength(3);
+        expect(result[0]).toEqual({ value: 15, color: '#FF0000' }); // Uses threshold at 10
+        expect(result[1]).toEqual({ value: 45, color: '#FF0000' }); // Uses threshold at 10
+        expect(result[2]).toEqual({ value: 75, color: '#FFFF00' }); // Uses threshold at 50
       });
 
       it('should filter value stops outside range', () => {
         const valueStops = [5, 15, 45, 95, 105]; // 105 is above maxBase, 5 is below minBase (when minBase > 0)
-        const result = generateThresholds(10, 90, mockThresholds, '#BLUE', valueStops);
+        const result = generateValueThresholds(10, 90, valueStops, mockThresholds);
 
         // Should only include stops between minBase (10) and maxBase (90)
-        expect(result.valueThresholds).toHaveLength(2);
-        expect(result.valueThresholds[0]).toEqual({ value: 15, color: '#FF0000' });
-        expect(result.valueThresholds[1]).toEqual({ value: 45, color: '#FF0000' });
+        expect(result).toHaveLength(2);
+        expect(result[0]).toEqual({ value: 15, color: '#FF0000' });
+        expect(result[1]).toEqual({ value: 45, color: '#FF0000' });
       });
 
       it('should handle duplicate value stops', () => {
         const valueStops = [15, 15, 45, 45, 75]; // Duplicates
-        const result = generateThresholds(0, 100, mockThresholds, '#BLUE', valueStops);
-
-        expect(result.valueThresholds).toHaveLength(3); // Should deduplicate
-        expect(result.valueThresholds[0]).toEqual({ value: 15, color: '#FF0000' });
-        expect(result.valueThresholds[1]).toEqual({ value: 45, color: '#FF0000' });
-        expect(result.valueThresholds[2]).toEqual({ value: 75, color: '#FFFF00' });
+        const result = generateValueThresholds(0, 100, valueStops, mockThresholds);
+        expect(result).toHaveLength(3); // Should deduplicate
+        expect(result[0]).toEqual({ value: 15, color: '#FF0000' });
+        expect(result[1]).toEqual({ value: 45, color: '#FF0000' });
+        expect(result[2]).toEqual({ value: 75, color: '#FFFF00' });
       });
 
       it('should handle unsorted value stops', () => {
         const valueStops = [75, 15, 45]; // Unsorted
-        const result = generateThresholds(0, 100, mockThresholds, '#BLUE', valueStops);
+        const result = generateValueThresholds(0, 100, valueStops, mockThresholds);
 
-        expect(result.valueThresholds).toHaveLength(3);
-        expect(result.valueThresholds[0]).toEqual({ value: 15, color: '#FF0000' });
-        expect(result.valueThresholds[1]).toEqual({ value: 45, color: '#FF0000' });
-        expect(result.valueThresholds[2]).toEqual({ value: 75, color: '#FFFF00' });
+        expect(result).toHaveLength(3);
+        expect(result[0]).toEqual({ value: 15, color: '#FF0000' });
+        expect(result[1]).toEqual({ value: 45, color: '#FF0000' });
+        expect(result[2]).toEqual({ value: 75, color: '#FFFF00' });
       });
 
       it('should handle empty value stops array', () => {
-        const result = generateThresholds(0, 100, mockThresholds, '#BLUE', []);
+        const result = generateValueThresholds(0, 100, [], mockThresholds);
 
-        expect(result.valueThresholds).toEqual([]);
-      });
-    });
-
-    describe('Edge cases', () => {
-      it('should handle single threshold', () => {
-        const singleThreshold: Threshold[] = [{ value: 50, color: '#FF0000' }];
-        const result = generateThresholds(0, 100, singleThreshold, '#BLUE', [25, 75]);
-
-        expect(result.mergedThresholds).toHaveLength(2);
-        expect(result.mergedThresholds[0]).toEqual({ value: 0, color: '#BLUE' });
-        expect(result.mergedThresholds[1]).toEqual({ value: 50, color: '#FF0000' });
-
-        expect(result.valueThresholds).toHaveLength(2);
-        expect(result.valueThresholds[0]).toEqual({ value: 25, color: '#BLUE' });
-        expect(result.valueThresholds[1]).toEqual({ value: 75, color: '#FF0000' });
-      });
-
-      it('should handle minBase equal to maxBase', () => {
-        const result = generateThresholds(50, 50, mockThresholds, '#BLUE', []);
-
-        expect(result.mergedThresholds).toHaveLength(1);
-        expect(result.mergedThresholds[0]).toEqual({ value: 50, color: '#FFFF00' });
+        expect(result).toEqual([]);
       });
 
       it('should handle value stops equal to threshold values', () => {
         const valueStops = [10, 50, 80]; // Exact threshold values
-        const result = generateThresholds(0, 100, mockThresholds, '#BLUE', valueStops);
-
-        expect(result.valueThresholds).toHaveLength(3);
-        expect(result.valueThresholds[0]).toEqual({ value: 10, color: '#FF0000' });
-        expect(result.valueThresholds[1]).toEqual({ value: 50, color: '#FFFF00' });
-        expect(result.valueThresholds[2]).toEqual({ value: 80, color: '#0037ffff' });
-      });
-
-      it('should handle negative values', () => {
-        const negativeThresholds: Threshold[] = [
-          { value: -50, color: '#FF0000' },
-          { value: 0, color: '#FFFF00' },
-          { value: 50, color: '#00FF00' },
-        ];
-
-        const result = generateThresholds(-100, 100, negativeThresholds, '#BLUE', [-25, 25]);
+        const result = generateValueThresholds(0, 100, valueStops, mockThresholds);
 
-        expect(result.mergedThresholds).toHaveLength(4);
-        expect(result.mergedThresholds[0]).toEqual({ value: -100, color: '#BLUE' });
-        expect(result.valueThresholds).toHaveLength(2);
-        expect(result.valueThresholds[0]).toEqual({ value: -25, color: '#FF0000' });
-        expect(result.valueThresholds[1]).toEqual({ value: 25, color: '#FFFF00' });
+        expect(result).toHaveLength(3);
+        expect(result[0]).toEqual({ value: 10, color: '#FF0000' });
+        expect(result[1]).toEqual({ value: 50, color: '#FFFF00' });
+        expect(result[2]).toEqual({ value: 80, color: '#0037ffff' });
       });
     });
   });

src/plugins/explore/public/components/visualizations/bar_gauge/bar_gauge_utils.ts

@@ -147,8 +147,7 @@ export const generateThresholds = (
   minBase: number,
   maxBase: number,
   thresholds: Threshold[],
-  baseColor: string | undefined,
-  valueStops: number[]
+  baseColor: string | undefined
 ) => {
   const defaultColor = baseColor ?? getColors().statusGreen;
 
@@ -167,9 +166,6 @@ export const generateThresholds = (
       return [...acc, t];
     }, [] as Threshold[]);
 
-  const filteredValueStops = valueStops
-    .filter((v) => v <= maxBase && v >= minBase)
-    .sort((a, b) => a - b);
   const result: Threshold[] = [];
 
   const minThreshold: Threshold = { value: minBase, color: defaultColor };
@@ -183,26 +179,38 @@ export const generateThresholds = (
   }
   result.unshift(minThreshold);
 
-  const valueResults: Threshold[] = [];
-  if (filteredValueStops.length > 0 && result.length > 0) {
+  return result;
+};
+
+export const generateValueThresholds = (
+  minBase: number,
+  maxBase: number,
+  valueStops: number[],
+  thresholds: Threshold[]
+) => {
+  const filteredValueStops = valueStops
+    .filter((v) => v <= maxBase && v >= minBase)
+    .sort((a, b) => a - b);
+
+  const valueThresholds: Threshold[] = [];
+  if (filteredValueStops.length > 0 && thresholds.length > 0) {
     const stops = [...new Set(filteredValueStops)];
 
     let thresholdIndex = 0;
 
     for (const stop of stops) {
-      while (thresholdIndex < result.length - 1 && result[thresholdIndex + 1].value <= stop) {
+      while (
+        thresholdIndex < thresholds.length - 1 &&
+        thresholds[thresholdIndex + 1].value <= stop
+      ) {
         thresholdIndex++;
       }
 
       // Add valid threshold for this stop
-      if (result[thresholdIndex].value <= stop) {
-        valueResults.push({ value: stop, color: result[thresholdIndex].color });
+      if (thresholds[thresholdIndex].value <= stop) {
+        valueThresholds.push({ value: stop, color: thresholds[thresholdIndex].color });
       }
     }
   }
-
-  return {
-    mergedThresholds: result,
-    valueThresholds: valueResults,
-  };
+  return valueThresholds;
 };

src/plugins/explore/public/components/visualizations/bar_gauge/to_expression.ts

@@ -15,6 +15,7 @@ import {
   symbolOpposite,
   generateParams,
   generateThresholds,
+  generateValueThresholds,
 } from './bar_gauge_utils';
 import { getUnitById, showDisplayValue } from '../style_panel/unit/collection';
 
@@ -99,17 +100,18 @@ export const createBarGaugeSpec = (
         ]
       : styleOptions?.thresholdOptions?.thresholds;
 
-  const { mergedThresholds, valueThresholds } = generateThresholds(
+  const mergedThresholds = generateThresholds(
     minBase,
     maxBase,
     styleOptions?.thresholdOptions?.thresholds ?? [],
-    styleOptions?.thresholdOptions?.baseColor,
-    valueStops
+    styleOptions?.thresholdOptions?.baseColor
   );
 
   const processedThresholds = [
     ...mergedThresholds,
-    ...(styleOptions?.exclusive.displayMode === 'gradient' ? valueThresholds : []),
+    ...(styleOptions?.exclusive.displayMode === 'gradient'
+      ? generateValueThresholds(minBase, maxBase, valueStops, mergedThresholds)
+      : []),
   ].sort((a, b) => a.value - b.value);
 
   const gradientParams = generateParams(processedThresholds, styleOptions, isXaxisNumerical);

src/plugins/explore/public/components/visualizations/metric/to_expression.ts

@@ -10,7 +10,6 @@ import { calculatePercentage, calculateValue } from '../utils/calculation';
 import { getColors, DEFAULT_GREY } from '../theme/default_colors';
 import { DEFAULT_OPACITY } from '../constants';
 import { getUnitById, showDisplayValue } from '../style_panel/unit/collection';
-import { getMaxAndMinBase } from '../style_panel/threshold/threshold_utils';
 
 export const createSingleMetric = (
   transformedData: Array<Record<string, any>>,
@@ -36,12 +35,9 @@ export const createSingleMetric = (
   const percentageSize = styles.percentageSize;
 
   let numericalValues: number[] = [];
-  let maxNumber: number = 0;
-  let minNumber: number = 0;
+
   if (numericField) {
     numericalValues = transformedData.map((d) => d[numericField]);
-    maxNumber = Math.max(...numericalValues);
-    minNumber = Math.min(...numericalValues);
   }
 
   const calculatedValue = calculateValue(numericalValues, styles.valueCalculation);
@@ -52,22 +48,14 @@ export const createSingleMetric = (
 
   const displayValue = showDisplayValue(isValidNumber, selectedUnit, calculatedValue);
 
-  const { minBase, maxBase } = getMaxAndMinBase(
-    minNumber,
-    maxNumber,
-    styles?.min,
-    styles?.max,
-    calculatedValue
-  );
-
   function targetFillColor(
     useThresholdColor: boolean,
     threshold?: Threshold[],
     baseColor?: string
   ) {
     const newThreshold = threshold ?? [];
 
-    if (calculatedValue === undefined || calculatedValue < minBase) {
+    if (calculatedValue === undefined) {
       return useThresholdColor ? DEFAULT_GREY : colorPalette.text;
     }