comments

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

Author: Qxisylolo

src/plugins/explore/public/components/visualizations/bar_gauge/bar_gauge_exclusive_vis_options.test.tsx

@@ -30,7 +30,11 @@ describe('BarGaugeExclusiveVisOptions', () => {
 
   it('should call onChange when orientation is changed', () => {
     const { getByText } = render(
-      <BarGaugeExclusiveVisOptions styles={defaultStyles} onChange={mockOnChange} />
+      <BarGaugeExclusiveVisOptions
+        styles={defaultStyles}
+        onChange={mockOnChange}
+        isXaxisNumerical={false}
+      />
     );
 
     fireEvent.click(getByText('Horizontal'));
@@ -43,7 +47,11 @@ describe('BarGaugeExclusiveVisOptions', () => {
 
   it('should call onChange when display mode is changed', () => {
     const { getByText } = render(
-      <BarGaugeExclusiveVisOptions styles={defaultStyles} onChange={mockOnChange} />
+      <BarGaugeExclusiveVisOptions
+        styles={defaultStyles}
+        onChange={mockOnChange}
+        isXaxisNumerical={false}
+      />
     );
 
     fireEvent.click(getByText('Stack'));
@@ -56,7 +64,11 @@ describe('BarGaugeExclusiveVisOptions', () => {
 
   it('should call onChange when value display is changed', () => {
     const { getByText } = render(
-      <BarGaugeExclusiveVisOptions styles={defaultStyles} onChange={mockOnChange} />
+      <BarGaugeExclusiveVisOptions
+        styles={defaultStyles}
+        onChange={mockOnChange}
+        isXaxisNumerical={false}
+      />
     );
 
     fireEvent.click(getByText('Text Color'));
@@ -69,7 +81,11 @@ describe('BarGaugeExclusiveVisOptions', () => {
 
   it('should call onChange when unfilled area switch is toggled', () => {
     const { getByRole } = render(
-      <BarGaugeExclusiveVisOptions styles={defaultStyles} onChange={mockOnChange} />
+      <BarGaugeExclusiveVisOptions
+        styles={defaultStyles}
+        onChange={mockOnChange}
+        isXaxisNumerical={false}
+      />
     );
 
     const switchElement = getByRole('switch');
@@ -83,7 +99,11 @@ describe('BarGaugeExclusiveVisOptions', () => {
 
   it('should handle undefined styles with defaults', () => {
     const { getByText } = render(
-      <BarGaugeExclusiveVisOptions styles={undefined as any} onChange={mockOnChange} />
+      <BarGaugeExclusiveVisOptions
+        styles={undefined as any}
+        onChange={mockOnChange}
+        isXaxisNumerical={false}
+      />
     );
 
     fireEvent.click(getByText('Horizontal'));
@@ -92,20 +112,4 @@ describe('BarGaugeExclusiveVisOptions', () => {
       orientation: 'horizontal',
     });
   });
-
-  it('should show correct selected values', () => {
-    const customStyles: ExclusiveBarGaugeConfig = {
-      orientation: 'horizontal',
-      displayMode: 'basic',
-      valueDisplay: 'textColor',
-      showUnfilledArea: false,
-    };
-
-    const { container } = render(
-      <BarGaugeExclusiveVisOptions styles={customStyles} onChange={mockOnChange} />
-    );
-
-    // Check that the correct buttons are selected by looking for active state
-    expect(container).toBeInTheDocument();
-  });
 });

src/plugins/explore/public/components/visualizations/bar_gauge/bar_gauge_exclusive_vis_options.tsx

@@ -62,37 +62,25 @@ export const BarGaugeExclusiveVisOptions = ({
   onChange,
   isXaxisNumerical,
 }: BarGaugeVisOptionsProps) => {
-  const orientationOption = [
-    isXaxisNumerical
-      ? {
-          id: 'vertical',
-          label: i18n.translate('explore.vis.barGauge.orientation.vertical.isXaxisNumerical', {
-            defaultMessage: 'Horizontal',
-          }),
-        }
-      : {
-          id: 'vertical',
-          label: i18n.translate('explore.vis.barGauge.orientation.vertical', {
-            defaultMessage: 'Vertical',
-          }),
-        },
-    isXaxisNumerical
-      ? {
-          id: 'horizontal',
-          label: i18n.translate(
-            'explore.vis.barGauge.orientation.threshold.horizontal.isXaxisNumerical',
-            {
-              defaultMessage: 'Vertical',
-            }
-          ),
-        }
-      : {
-          id: 'horizontal',
-          label: i18n.translate('explore.vis.barGauge.orientation.threshold.horizontal', {
-            defaultMessage: 'Horizontal',
-          }),
-        },
-  ];
+  const getOrientationOptions = () => {
+    const horizontalLabel = i18n.translate('explore.vis.barGauge.orientation.horizontal', {
+      defaultMessage: 'Horizontal',
+    });
+    const verticalLabel = i18n.translate('explore.vis.barGauge.orientation.vertical', {
+      defaultMessage: 'Vertical',
+    });
+
+    // When X-axis is numerical, the labels are swapped
+    const verticalOptionLabel = isXaxisNumerical ? horizontalLabel : verticalLabel;
+    const horizontalOptionLabel = isXaxisNumerical ? verticalLabel : horizontalLabel;
+
+    return [
+      { id: 'vertical', label: verticalOptionLabel },
+      { id: 'horizontal', label: horizontalOptionLabel },
+    ];
+  };
+
+  const orientationOption = getOrientationOptions();
 
   const updateExclusiveOption = (key: keyof BarGaugeChartStyle['exclusive'], value: any) => {
     onChange({

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

@@ -20,9 +20,7 @@ export const getBarOrientation = (
   };
   const nullStyle = { axis: null };
 
-  const shouldSwapAxes = (isXNumerical && isHorizontal) || (!isXNumerical && isHorizontal);
-
-  if (shouldSwapAxes) {
+  if (isHorizontal) {
     return {
       xAxis: yAxis,
       xAxisStyle: isXNumerical ? axisStyle : nullStyle,
@@ -118,7 +116,8 @@ export const processThresholds = (thresholds: Threshold[]) => {
   return result;
 };
 
-export const NormalizeData = (data: number, start: number, end: number) => {
+export const normalizeData = (data: number, start: number, end: number) => {
+  if (start === end) return null;
   // normalize data value between start and end into 0–1 range
   return (data - start) / (end - start);
 };
@@ -159,7 +158,7 @@ export const generateParams = (
 
     // collect stops up to current threshold
     const stops = thresholds.slice(0, i + 1).map((threshold) => {
-      const offset = NormalizeData(threshold.value, start, end);
+      const offset = normalizeData(threshold.value, start, end);
       return { offset, color: threshold.color };
     });
 

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

@@ -14,7 +14,6 @@ export interface ExclusiveBarGaugeConfig {
   orientation: 'vertical' | 'horizontal';
   displayMode: 'gradient' | 'stack' | 'basic';
   valueDisplay: 'valueColor' | 'textColor' | 'hidden';
-  // namePlacement: 'auto' | 'hidden';
   showUnfilledArea: boolean;
 }