[SCAL-271696] feat: add axis-driven chart config support with validation

package.json

@@ -1,7 +1,7 @@
 {
     "name": "@thoughtspot/ts-chart-sdk",
     "private": false,
-    "version": "2.5.8",
+    "version": "2.6.0",
     "module": "lib/index",
     "main": "lib/index",
     "types": "lib/index",

src/index.ts

@@ -8,6 +8,7 @@ export * from './main/custom-chart-context';
 export * from './react/use-custom-chart-context';
 export * from './types/conditional-formatting.types';
 export * from './types/number-formatting.types';
+export * from './utils/chart-config';
 export * from './utils/date-formatting';
 export * from './utils/conditional-formatting/conditional-formatting';
 export * from './utils/number-formatting/number-formatting';

src/main/custom-chart-context.ts

@@ -59,6 +59,7 @@ import {
     VisualEditorDefinitionSetter,
     VisualPropEditorDefinition,
 } from '../types/visual-prop.types';
+import { validateAllChartConfigs } from '../utils/chart-config';
 import { setLocaleBasedStringFormats } from '../utils/number-formatting/number-formatting-utils';
 import { create } from './logger';
 import {
@@ -1275,6 +1276,7 @@ export class CustomChartContext {
                         this.appConfig,
                     );
             }
+            validateAllChartConfigs(defaultChartConfig);
             return {
                 isConfigValid: isValid,
                 defaultChartConfig,

src/react/mocks/custom-chart-context-mock.ts

@@ -3,6 +3,7 @@ import { CustomChartContextProps } from '../../main/custom-chart-context';
 import { ColumnType } from '../../types/answer-column.types';
 import { ChartConfig, ChartModel } from '../../types/common.types';
 import { Query } from '../../types/ts-to-chart-event.types';
+import { fetchQueryColumns } from '../../utils/chart-config';
 
 export const contextChartProps: CustomChartContextProps = {
     getDefaultChartConfig: (chartModel: ChartModel): ChartConfig[] => {
@@ -35,19 +36,9 @@ export const contextChartProps: CustomChartContextProps = {
     },
     getQueriesFromChartConfig: (chartConfig: ChartConfig[]): Array<Query> => {
         const queries = chartConfig.map(
-            (config: ChartConfig): Query =>
-                _.reduce(
-                    config.dimensions,
-                    (acc: Query, dimension) => ({
-                        queryColumns: [
-                            ...acc.queryColumns,
-                            ...dimension.columns,
-                        ],
-                    }),
-                    {
-                        queryColumns: [],
-                    } as Query,
-                ),
+            (config: ChartConfig): Query => ({
+                queryColumns: fetchQueryColumns(config),
+            }),
         );
         return queries;
     },

src/react/use-custom-chart-context.spec.tsx

@@ -5,6 +5,7 @@ import * as PostMessageEventBridge from '../main/post-message-event-bridge';
 import { mockInitializeContextPayload } from '../test/test-utils';
 import { ColumnType } from '../types/answer-column.types';
 import { ChartToTSEvent } from '../types/chart-to-ts-event.types';
+import { AxisType, ChartConfigMode } from '../types/common.types';
 import { TSToChartEvent } from '../types/ts-to-chart-event.types';
 import { contextChartProps } from './mocks/custom-chart-context-mock';
 import { useChartContext } from './use-custom-chart-context';
@@ -71,7 +72,7 @@ describe('useChartContext initialization', () => {
         });
     });
 
-    test('should trigger getDataQuery and fetch correct query response', async () => {
+    test('should trigger getDataQuery and fetch correct query response for column driven dimension config', async () => {
         // Render the hook with the custom chart context props
         const { result, waitFor } = renderHook(() =>
             useChartContext(contextChartProps),
@@ -131,6 +132,85 @@ describe('useChartContext initialization', () => {
         });
     });
 
+    test('should trigger getDataQuery and fetch correct query response for config driven dimension config', async () => {
+        // Render the hook with the custom chart context props
+        const { result, waitFor } = renderHook(() =>
+            useChartContext(contextChartProps),
+        );
+
+        // Assert that the context is not initialized initially
+        expect(result.current.hasInitialized).toBe(false);
+        expect(result.current.chartModel).toBeUndefined();
+        await eventProcessor({
+            payload: {
+                componentId: 'COMPONENT_ID',
+                hostUrl: 'https://some.chart.app',
+                chartModel: mockedChartModel,
+            },
+            eventType: TSToChartEvent.Initialize,
+        });
+
+        const response = await eventProcessor({
+            payload: {
+                config: [
+                    {
+                        key: 'column',
+                        dimensions: [
+                            {
+                                key: 'x',
+                                mode: ChartConfigMode.AXIS_DRIVEN,
+                                axes: [
+                                    {
+                                        type: AxisType.FLAT,
+                                        column: mockedChartModel.columns[0],
+                                    },
+                                ],
+                            },
+                            {
+                                key: 'y',
+                                mode: ChartConfigMode.AXIS_DRIVEN,
+                                axes: [
+                                    {
+                                        type: AxisType.MERGED,
+                                        columns: [
+                                            mockedChartModel.columns[1],
+                                            mockedChartModel.columns[2],
+                                        ],
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            },
+            eventType: TSToChartEvent.GetDataQuery,
+            source: 'ts-host-app',
+        });
+        await eventProcessor({
+            payload: {},
+            eventType: TSToChartEvent.TriggerRenderChart,
+            source: 'ts-host-app',
+        });
+        await eventProcessor({
+            payload: {},
+            eventType: TSToChartEvent.InitializeComplete,
+            source: 'ts-host-app',
+        });
+
+        await waitFor(() => {
+            expect(response.queries[0].queryColumns[0]).toBe(
+                mockedChartModel.columns[0],
+            );
+            expect(response.queries[0].queryColumns[1]).toBe(
+                mockedChartModel.columns[1],
+            );
+            expect(response.queries[0].queryColumns[2]).toBe(
+                mockedChartModel.columns[2],
+            );
+            expect(result.current.hasInitialized).toBeTruthy();
+        });
+    });
+
     test('should make sure hasInitialized to remain false when context initialization failed', async () => {
         jest.mock('../main/custom-chart-context', () => ({
             CustomChartContext: jest.fn().mockImplementation(() => ({

src/types/common.types.ts

@@ -59,28 +59,137 @@ export enum CustomizableChartFeature {
 }
 
 /**
- * List of Columns for a dimension in the Custom Chart Config.
- * Associated with the key defined in the chart config editor definition
- * Relates to ChartConfigSection
+ * Enum to indicate the type of dimension config
  *
- * @version SDK: 0.1 | ThoughtSpot:
+ * @version SDK: 2.6.0 | ThoughtSpot:
+ * @group Chart Model
+ */
+export enum AxisType {
+    FLAT = 'flat',
+    MERGED = 'merged',
+    DUAL = 'dual',
+}
+
+/**
+ * Flat axis config: single column, unmodified.
+ *
+ * @version SDK: 2.6.0 | ThoughtSpot:
  * @group Chart Model
  */
-export interface ChartConfigDimension {
+export interface FlatAxis {
+    type: AxisType.FLAT;
+    /** Single column for this axis slot */
+    column: ChartColumn;
+}
+
+/**
+ * Merged axis config: multiple columns combined into one logical series.
+ *
+ * @version SDK: 2.6.0 | ThoughtSpot:
+ * @group Chart Model
+ */
+export interface MergedAxis {
+    type: AxisType.MERGED;
+    /** Columns that are merged into one axis slot */
+    columns: ChartColumn[];
+}
+
+/**
+ * Dual axis config: primary and secondary axis, each can be flat or merged.
+ *
+ * @version SDK: 2.6.0 | ThoughtSpot:
+ * @group Chart Model
+ */
+export interface DualAxis {
+    type: AxisType.DUAL;
+    /** Primary axis config (flat or merged) */
+    primary: FlatAxis | MergedAxis;
+    /** Secondary axis config (flat or merged) */
+    secondary: FlatAxis | MergedAxis;
+}
+
+/**
+ * Union of all supported axis types for a dimension.
+ */
+export type AxisConfig = FlatAxis | MergedAxis | DualAxis;
+
+/**
+ * Enum to indicate whether dimension config uses columns or structured config
+ *
+ * @version SDK: 2.6.0 | ThoughtSpot:
+ * @group Chart Model
+ */
+export enum ChartConfigMode {
+    COLUMN_DRIVEN = 'COLUMN_DRIVEN',
+    AXIS_DRIVEN = 'AXIS_DRIVEN',
+}
+
+/**
+ * Column driven dimension config: single column or multiple columns.
+ *
+ * @version SDK: 2.6.0 | ThoughtSpot:
+ * @group Chart Model
+ */
+export interface ColumnDrivenChartConfigDimension {
     /**
      * Key for the dimension in the chart config
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
     key: string;
     /**
-     * List of columns added for the dimension
+     * Mode of the chart config
      *
-     * @version SDK: 0.1 | ThoughtSpot:
+     * @version SDK: 2.6.0 | ThoughtSpot:
+     */
+    mode?: ChartConfigMode.COLUMN_DRIVEN;
+    /**
+     * List of columns added for the dimension
+     * If chart config mode is COLUMN_DRIVEN, this is required
+     * @version SDK: 2.6.0 | ThoughtSpot:
      */
     columns: ChartColumn[];
 }
 
+/**
+ * Axis driven dimension config: multiple axes, each can be flat or merged.
+ *
+ * @version SDK: 2.6.0 | ThoughtSpot:
+ * @group Chart Model
+ */
+export interface AxisDrivenChartConfigDimension {
+    /**
+     * Key for the dimension in the chart config
+     *
+     * @version SDK: 2.6.0 | ThoughtSpot:
+     */
+    key: string;
+    /**
+     * Mode of the chart config
+     *
+     * @version SDK: 2.6.0 | ThoughtSpot:
+     */
+    mode: ChartConfigMode.AXIS_DRIVEN;
+    /**
+     * Axis config of the dimension
+     *
+     * @version SDK: 2.6.0 | ThoughtSpot:
+     */
+    axes: AxisConfig[];
+}
+
+/**
+ * List of Columns for a dimension in the Custom Chart Config.
+ * Associated with the key defined in the chart config editor definition
+ * Relates to ChartConfigSection
+ *
+ * @version SDK: 0.1 | ThoughtSpot:
+ * @group Chart Model
+ */
+export type ChartConfigDimension =
+    | ColumnDrivenChartConfigDimension
+    | AxisDrivenChartConfigDimension;
+
 /**
  * Custom Chart Config values stored in the metadata
  * Relates to ChartConfigEditorDefinition