Merge pull request #1070 from buster-so/jacob-bus-1829-100-stacked-bar-chart-isnt-formatted-correctly

If the Y-axis is a % for a stacked chart, auto flip it to a percentag…

packages/ai/src/tools/visualization-tools/metrics/helpers/bar-line-axis-validator.test.ts

@@ -174,4 +174,128 @@ describe('validateAndAdjustBarLineAxes', () => {
       /Bar and line charts require at least one column for each axis/
     );
   });
+
+  it('should automatically set barGroupType to percentage-stack for percent-styled Y columns', () => {
+    const chartConfig = {
+      selectedChartType: 'bar',
+      barGroupType: 'stack',
+      columnLabelFormats: {
+        subcategory_name: {
+          columnType: 'text',
+          style: 'string',
+        },
+        percentage: {
+          columnType: 'number',
+          style: 'percent',
+        },
+      },
+      barAndLineAxis: {
+        x: ['subcategory_name'],
+        y: ['percentage'],
+      },
+    } as any;
+
+    const result = validateAndAdjustBarLineAxes(chartConfig);
+    expect(result.barGroupType).toBe('percentage-stack');
+  });
+
+  it('should not change barGroupType for non-bar charts with percent columns', () => {
+    const chartConfig = {
+      selectedChartType: 'line',
+      lineGroupType: 'stack',
+      columnLabelFormats: {
+        month: {
+          columnType: 'date',
+          style: 'string',
+        },
+        percentage: {
+          columnType: 'number',
+          style: 'percent',
+        },
+      },
+      barAndLineAxis: {
+        x: ['month'],
+        y: ['percentage'],
+      },
+    } as any;
+
+    const result = validateAndAdjustBarLineAxes(chartConfig);
+    expect(result.lineGroupType).toBe('stack'); // Should remain unchanged
+  });
+
+  it('should not change barGroupType if it is not already stack', () => {
+    const chartConfig = {
+      selectedChartType: 'bar',
+      barGroupType: 'group',
+      columnLabelFormats: {
+        category: {
+          columnType: 'text',
+          style: 'string',
+        },
+        percentage: {
+          columnType: 'number',
+          style: 'percent',
+        },
+      },
+      barAndLineAxis: {
+        x: ['category'],
+        y: ['percentage'],
+      },
+    } as any;
+
+    const result = validateAndAdjustBarLineAxes(chartConfig);
+    expect(result.barGroupType).toBe('group'); // Should remain unchanged
+  });
+
+  it('should not change barGroupType if no Y columns have percent style', () => {
+    const chartConfig = {
+      selectedChartType: 'bar',
+      barGroupType: 'stack',
+      columnLabelFormats: {
+        category: {
+          columnType: 'text',
+          style: 'string',
+        },
+        revenue: {
+          columnType: 'number',
+          style: 'currency',
+        },
+      },
+      barAndLineAxis: {
+        x: ['category'],
+        y: ['revenue'],
+      },
+    } as any;
+
+    const result = validateAndAdjustBarLineAxes(chartConfig);
+    expect(result.barGroupType).toBe('stack'); // Should remain unchanged
+  });
+
+  it('should set percentage-stack when multiple Y columns include at least one percent', () => {
+    const chartConfig = {
+      selectedChartType: 'bar',
+      barGroupType: 'stack',
+      columnLabelFormats: {
+        category: {
+          columnType: 'text',
+          style: 'string',
+        },
+        count: {
+          columnType: 'number',
+          style: 'number',
+        },
+        percentage: {
+          columnType: 'number',
+          style: 'percent',
+        },
+      },
+      barAndLineAxis: {
+        x: ['category'],
+        y: ['count', 'percentage'],
+      },
+    } as any;
+
+    const result = validateAndAdjustBarLineAxes(chartConfig);
+    expect(result.barGroupType).toBe('percentage-stack');
+  });
 });

packages/ai/src/tools/visualization-tools/metrics/helpers/bar-line-axis-validator.ts

@@ -37,9 +37,9 @@ export function validateAndAdjustBarLineAxes(
 
   const allYColumnsNumeric = yAxisNumericStatus.every((isNumeric: boolean) => isNumeric);
 
-  // If all Y columns are numeric, no adjustment needed
+  // If all Y columns are numeric, check if we need to auto-set percentage-stack
   if (allYColumnsNumeric) {
-    return metricChartConfig;
+    return autoSetPercentageStack(metricChartConfig, yColumns, columnLabelFormats);
   }
 
   // At least one Y column is non-numeric, check if we can swap with X
@@ -81,3 +81,37 @@ export function validateAndAdjustBarLineAxes(
     `Bar and line charts require numeric values on the Y axis. The following columns are non-numeric: ${columnTypes}. Please adjust your SQL query to ensure numeric columns are used for the Y axis, or use a different chart type.`
   );
 }
+
+/**
+ * Automatically sets barGroupType to 'percentage-stack' if Y-axis columns are percentage-styled
+ * @param chartConfig The chart configuration
+ * @param yColumns The Y-axis column names
+ * @param columnLabelFormats The column format configurations
+ * @returns Updated chart configuration with auto-adjusted barGroupType if needed
+ */
+function autoSetPercentageStack(
+  chartConfig: ChartConfigProps,
+  yColumns: string[],
+  columnLabelFormats: ChartConfigProps['columnLabelFormats']
+): ChartConfigProps {
+  // Only apply to bar charts (line charts use lineGroupType)
+  if (chartConfig.selectedChartType !== 'bar') {
+    return chartConfig;
+  }
+
+  // Check if any Y-axis column has percent style
+  const hasPercentStyle = yColumns.some((col: string) => {
+    const format = columnLabelFormats?.[col];
+    return format?.style === 'percent';
+  });
+
+  // If we have percent-styled columns and barGroupType is 'stack', auto-change to 'percentage-stack'
+  if (hasPercentStyle && chartConfig.barGroupType === 'stack') {
+    return {
+      ...chartConfig,
+      barGroupType: 'percentage-stack',
+    };
+  }
+
+  return chartConfig;
+}