@thoughtspot/ts-chart-sdk 0.0.1-alpha.9 → 0.0.2-alpha.10

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

@@ -3,18 +3,20 @@ import { renderHook } from '@testing-library/react-hooks';
 import React from 'react';
 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 { TSToChartEvent } from '../types/ts-to-chart-event.types';
 import { contextChartProps } from './mocks/custom-chart-context-mock';
 import { useChartContext } from './use-custom-chart-context';
 
-jest.mock('../main/post-message-event-bridge');
-
 describe('useChartContext initialization', () => {
     let eventProcessor: any;
     let mockInitMessage;
     let mockPostMessageToHost;
-    const mockedChartModel = { columns: [], config: {} };
+    const mockedChartModel = {
+        columns: [{ type: ColumnType.MEASURE }, { type: ColumnType.ATTRIBUTE }],
+        config: {},
+    };
     beforeEach(() => {
         mockInitMessage = jest.spyOn(
             PostMessageEventBridge,
@@ -26,6 +28,7 @@ describe('useChartContext initialization', () => {
         );
         mockInitMessage.mockImplementation((fn: any) => {
             eventProcessor = fn;
+            return () => null;
         });
 
         mockPostMessageToHost.mockImplementation(() => {
@@ -35,6 +38,7 @@ describe('useChartContext initialization', () => {
     afterEach(() => {
         // Clear mock implementations after each test
         jest.clearAllMocks();
+        PostMessageEventBridge.globalThis.isInitialized = false;
     });
 
     test('should initialize the context only after intialize completes', async () => {
@@ -47,32 +51,84 @@ describe('useChartContext initialization', () => {
         expect(result.current.hasInitialized).toBe(false);
         expect(result.current.chartModel).toBeUndefined();
         const mockPostMessage = jest.fn();
-        eventProcessor({
-            data: {
-                payload: {
-                    componentId: 'COMPONENT_ID',
-                    hostUrl: 'https://some.chart.app',
-                    chartModel: mockedChartModel,
-                },
-                eventType: TSToChartEvent.Initialize,
-                source: 'ts-host-app',
+        await eventProcessor({
+            payload: {
+                componentId: 'COMPONENT_ID',
+                hostUrl: 'https://some.chart.app',
+                chartModel: mockedChartModel,
             },
-            ports: [{ postMessage: mockPostMessage }],
+            eventType: TSToChartEvent.Initialize,
         });
-
-        eventProcessor({
-            data: {
-                payload: {},
-                eventType: TSToChartEvent.InitializeComplete,
-                source: 'ts-host-app',
-            },
-            ports: [{ postMessage: mockPostMessage }],
+        await eventProcessor({
+            payload: {},
+            eventType: TSToChartEvent.InitializeComplete,
+            source: 'ts-host-app',
         });
+
         await waitFor(() => {
             expect(result.current.hasInitialized).toBe(true);
             expect(result.current.chartModel).toEqual(mockedChartModel);
         });
-        result.current?.destroy();
+    });
+
+    test('should trigger getDataQuery and fetch correct query response', 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',
+                                columns: [mockedChartModel.columns[0]],
+                            },
+                            {
+                                key: 'y',
+                                columns: [mockedChartModel.columns[1]],
+                            },
+                        ],
+                    },
+                ],
+            },
+            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(result.current.hasInitialized).toBeTruthy();
+        });
     });
 
     test('should make sure hasInitialized to remain false when context initialization failed', async () => {
@@ -84,7 +140,6 @@ describe('useChartContext initialization', () => {
                 emitEvent: jest.fn(),
                 on: jest.fn(),
                 getChartModel: jest.fn(),
-                renderChart: jest.fn(),
                 destroy: jest.fn(),
             })),
         }));
@@ -117,6 +172,7 @@ describe('useChartContext emit', () => {
         );
         mockInitMessage.mockImplementation((fn: any) => {
             eventProcessor = fn;
+            return () => null;
         });
 
         mockPostMessageToHost.mockImplementation(() => {
@@ -126,6 +182,7 @@ describe('useChartContext emit', () => {
     afterEach(() => {
         // Clear mock implementations after each test
         jest.clearAllMocks();
+        PostMessageEventBridge.globalThis.isInitialized = false;
     });
 
     test('should trigger the emitter correctly when context is initialized', async () => {
@@ -134,23 +191,17 @@ describe('useChartContext emit', () => {
             useChartContext(contextChartProps),
         );
         const mockPostMessage = jest.fn();
-        eventProcessor({
-            data: {
-                payload: mockInitializeContextPayload,
-                eventType: TSToChartEvent.Initialize,
-                source: 'ts-host-app',
-            },
-            ports: [{ postMessage: mockPostMessage }],
+        await eventProcessor({
+            payload: mockInitializeContextPayload,
+            eventType: TSToChartEvent.Initialize,
         });
 
-        eventProcessor({
-            data: {
-                payload: {},
-                eventType: TSToChartEvent.InitializeComplete,
-                source: 'ts-host-app',
-            },
-            ports: [{ postMessage: mockPostMessage }],
+        await eventProcessor({
+            payload: {},
+            eventType: TSToChartEvent.InitializeComplete,
+            source: 'ts-host-app',
         });
+
         await waitFor(() => {
             expect(result.current.hasInitialized).toBe(true);
         });
@@ -174,14 +225,12 @@ describe('useChartContext emit', () => {
             useChartContext(contextChartProps),
         );
         const mockPostMessage = jest.fn();
-        eventProcessor({
-            data: {
-                payload: mockInitializeContextPayload,
-                eventType: TSToChartEvent.Initialize,
-                source: 'ts-host-app',
-            },
-            ports: [{ postMessage: mockPostMessage }],
+        await eventProcessor({
+            payload: mockInitializeContextPayload,
+            eventType: TSToChartEvent.Initialize,
+            source: 'ts-host-app',
         });
+
         await waitFor(() => {
             expect(result.current.hasInitialized).toBe(false);
         });
@@ -207,6 +256,7 @@ describe('useChartContext setOn listeners', () => {
         );
         mockInitMessage.mockImplementation((fn: any) => {
             eventProcessor = fn;
+            return () => null;
         });
 
         mockPostMessageToHost.mockImplementation(() => {
@@ -216,6 +266,7 @@ describe('useChartContext setOn listeners', () => {
     afterEach(() => {
         // Clear mock implementations after each test
         jest.clearAllMocks();
+        PostMessageEventBridge.globalThis.isInitialized = false;
     });
 
     test('should trigger the setOnEvent correctly when context is initialized', async () => {
@@ -227,63 +278,49 @@ describe('useChartContext setOn listeners', () => {
         // Assert that the context is not initialized initially
         expect(result.current.hasInitialized).toBe(false);
         expect(result.current.chartModel).toBeUndefined();
-        const mockPostMessage = jest.fn();
-        eventProcessor({
-            data: {
-                payload: {
-                    componentId: 'COMPONENT_ID',
-                    hostUrl: 'https://some.chart.app',
-                    chartModel: mockedChartModel,
-                },
-                eventType: TSToChartEvent.Initialize,
-                source: 'ts-host-app',
+        await eventProcessor({
+            payload: {
+                componentId: 'COMPONENT_ID',
+                hostUrl: 'https://some.chart.app',
+                chartModel: mockedChartModel,
             },
-            ports: [{ postMessage: mockPostMessage }],
+            eventType: TSToChartEvent.Initialize,
         });
 
-        eventProcessor({
-            data: {
-                payload: {},
-                eventType: TSToChartEvent.InitializeComplete,
-                source: 'ts-host-app',
-            },
-            ports: [{ postMessage: mockPostMessage }],
+        await eventProcessor({
+            payload: {},
+            eventType: TSToChartEvent.InitializeComplete,
+            source: 'ts-host-app',
         });
+
         await waitFor(() => {
             expect(result.current.hasInitialized).toBe(true);
             expect(result.current.chartModel).toEqual(mockedChartModel);
         });
 
-        eventProcessor({
-            data: {
-                payload: { chartModel: {} },
-                eventType: TSToChartEvent.ChartModelUpdate,
-                source: 'ts-host-app',
-            },
-            ports: [{ postMessage: mockPostMessage }],
+        const resp = await eventProcessor({
+            payload: { chartModel: {} },
+            eventType: TSToChartEvent.ChartModelUpdate,
+            source: 'ts-host-app',
         });
+
         await waitFor(() => {
-            expect(mockPostMessage).toHaveBeenCalledWith({
+            expect(resp).toEqual({
                 triggerRenderChart: true,
             });
             expect(result.current.chartModel).toEqual({});
         });
 
-        eventProcessor({
-            data: {
-                payload: { visualProps: { color: 'red' } },
-                eventType: TSToChartEvent.VisualPropsUpdate,
-                source: 'ts-host-app',
-            },
-            ports: [{ postMessage: mockPostMessage }],
+        const propsUpdateResp = await eventProcessor({
+            payload: { visualProps: { color: 'red' } },
+            eventType: TSToChartEvent.VisualPropsUpdate,
+            source: 'ts-host-app',
         });
-        expect(mockPostMessage).toHaveBeenCalledWith({
+
+        expect(propsUpdateResp).toEqual({
             triggerRenderChart: true,
         });
         await waitFor(() => {
-            expect(mockPostMessage).toHaveBeenCalledWith({
-                triggerRenderChart: true,
-            });
             expect(result.current.chartModel?.visualProps).toEqual({
                 color: 'red',
             });
@@ -297,14 +334,12 @@ describe('useChartContext setOn listeners', () => {
             useChartContext(contextChartProps),
         );
         const mockPostMessage = jest.fn();
-        eventProcessor({
-            data: {
-                payload: mockInitializeContextPayload,
-                eventType: TSToChartEvent.Initialize,
-                source: 'ts-host-app',
-            },
-            ports: [{ postMessage: mockPostMessage }],
+        await eventProcessor({
+            payload: mockInitializeContextPayload,
+            eventType: TSToChartEvent.Initialize,
+            source: 'ts-host-app',
         });
+
         await waitFor(() => {
             expect(result.current.hasInitialized).toBe(false);
         });
@@ -333,6 +368,7 @@ describe('useChartContext on React Wrapper component', () => {
         );
         mockInitMessage.mockImplementation((fn: any) => {
             eventProcessor = fn;
+            return () => null;
         });
 
         mockPostMessageToHost.mockImplementation(() => {
@@ -342,6 +378,7 @@ describe('useChartContext on React Wrapper component', () => {
     afterEach(() => {
         // Clear mock implementations after each test
         jest.clearAllMocks();
+        PostMessageEventBridge.globalThis.isInitialized = false;
     });
     test('TSChartContext renders children and should not increase counter for useEffect on chartModel if visualProps is updated', async () => {
         const CustomChartComponent = () => {
@@ -364,18 +401,15 @@ describe('useChartContext on React Wrapper component', () => {
         const { getByTestId, rerender } = render(<CustomChartComponent />);
 
         const mockPostMessage = jest.fn();
-        eventProcessor({
-            data: {
-                payload: {
-                    componentId: 'COMPONENT_ID',
-                    hostUrl: 'https://some.chart.app',
-                    chartModel: mockedChartModel,
-                },
-                eventType: TSToChartEvent.Initialize,
-                source: 'ts-host-app',
+        await eventProcessor({
+            payload: {
+                componentId: 'COMPONENT_ID',
+                hostUrl: 'https://some.chart.app',
+                chartModel: mockedChartModel,
             },
-            ports: [{ postMessage: mockPostMessage }],
+            eventType: TSToChartEvent.Initialize,
         });
+
         rerender(<CustomChartComponent />);
 
         // Check if the child element is rendered
@@ -385,13 +419,10 @@ describe('useChartContext on React Wrapper component', () => {
             );
         });
 
-        eventProcessor({
-            data: {
-                payload: { visualProps: { color: 'red' } },
-                eventType: TSToChartEvent.VisualPropsUpdate,
-                source: 'ts-host-app',
-            },
-            ports: [{ postMessage: mockPostMessage }],
+        await eventProcessor({
+            payload: { visualProps: { color: 'red' } },
+            eventType: TSToChartEvent.VisualPropsUpdate,
+            source: 'ts-host-app',
         });
 
         // Re-render the component with a new key
@@ -432,26 +463,22 @@ describe('useChartContext on React Wrapper component', () => {
 
         // Re-render the component with a new key
         const mockPostMessage = jest.fn();
-        eventProcessor({
-            data: {
-                payload: {
-                    componentId: 'COMPONENT_ID',
-                    hostUrl: 'https://some.chart.app',
-                    chartModel: mockedChartModel,
-                },
-                eventType: TSToChartEvent.Initialize,
-                source: 'ts-host-app',
+        await eventProcessor({
+            payload: {
+                componentId: 'COMPONENT_ID',
+                hostUrl: 'https://some.chart.app',
+                chartModel: mockedChartModel,
             },
-            ports: [{ postMessage: mockPostMessage }],
+            eventType: TSToChartEvent.Initialize,
+            source: 'ts-host-app',
         });
-        eventProcessor({
-            data: {
-                payload: { visualProps: { color: 'red' } },
-                eventType: TSToChartEvent.VisualPropsUpdate,
-                source: 'ts-host-app',
-            },
-            ports: [{ postMessage: mockPostMessage }],
+
+        await eventProcessor({
+            payload: { visualProps: { color: 'red' } },
+            eventType: TSToChartEvent.VisualPropsUpdate,
+            source: 'ts-host-app',
         });
+
         rerender(<CustomChartComponent />);
         // Check if the child element is still in the document after re-render
         const updatedChildElement = getByTestId('child-element');

package/src/test/test-conditional-formatting-utils.ts

@@ -0,0 +1,95 @@
+/**
+ * @file: Test Conditional Formatting Utils
+ *
+ * @author Yashvardhan Nehra <yashvardhan.nehra@thoughtspot.com>
+ *
+ * Copyright: ThoughtSpot Inc. 2023
+ */
+import {
+    BackgroundFormatTypes,
+    ConditionalFormattingComparisonTypes,
+    ConditionalMetric,
+    Operators,
+} from '../types/conditional-formatting.types';
+
+/**
+ * Creates a metric operator for conditional formatting.
+ *
+ * @param operator - The operator to use for the metric (e.g., LessThan, GreaterThan).
+ * @param lhsColumnId - (Optional) The ID of the left-hand side column.
+ * @param rhsColumnId - (Optional) The ID of the right-hand side column.
+ * @param comparisonParameterId - (Optional) The ID of the comparison parameter.
+ * @param comparisonType - The type of comparison to use (default is ValueBased).
+ * @returns A ConditionalMetric object configured with the specified parameters.
+ */
+export const createMetricOperator = (
+    operator: Operators,
+    lhsColumnId?: string,
+    rhsColumnId?: string,
+    comparisonParameterId?: string,
+    comparisonType = ConditionalFormattingComparisonTypes.ValueBased,
+): ConditionalMetric => {
+    return {
+        solidBackgroundAttrs: {
+            color: '#000',
+        },
+        backgroundFormatType: 'SOLID' as BackgroundFormatTypes,
+        operator,
+        value: '200',
+        plotAsBand: false,
+        comparisonParameterId,
+        comparisonType,
+        lhsColumnId,
+        rhsColumnId,
+    };
+};
+
+/**
+ * Creates a between metric operator for conditional formatting.
+ *
+ * @param operator - The operator to use for the metric (e.g., IsBetween).
+ * @param min - The minimum value for the range (default is 100).
+ * @param max - The maximum value for the range (default is 200).
+ * @returns A ConditionalMetric object configured with the specified parameters.
+ */
+export const createBetweenMetricOperator = (
+    operator: Operators,
+    min = 100,
+    max = 200,
+): ConditionalMetric => {
+    return {
+        backgroundFormatType: 'SOLID' as BackgroundFormatTypes,
+        solidBackgroundAttrs: {
+            color: '#000',
+        },
+        operator,
+        rangeValues: {
+            min,
+            max,
+        },
+        plotAsBand: false,
+        lhsColumnId: undefined,
+        rhsColumnId: undefined,
+        comparisonParameterId: undefined,
+        comparisonType: ConditionalFormattingComparisonTypes.ValueBased,
+    };
+};
+
+/**
+ * Creates an attribute operator for conditional formatting.
+ *
+ * @param operator - The operator to use for the attribute (e.g., Is, IsNot).
+ * @param comparisonType - (Optional) The type of comparison to use.
+ * @returns A ConditionalMetric object configured with the specified parameters.
+ */
+export const createAttributeOperator = (
+    operator: Operators,
+    comparisonType?: ConditionalFormattingComparisonTypes,
+): ConditionalMetric => {
+    return {
+        backgroundFormatType: 'SOLID' as BackgroundFormatTypes,
+        operator,
+        value: 'check attribute',
+        comparisonType,
+    };
+};

package/src/types/answer-column.types.ts

@@ -1,7 +1,21 @@
+import { ConditionalFormatting, Maybe } from './conditional-formatting.types';
+
 export enum ColumnType {
     UNKNOWN,
     MEASURE,
     ATTRIBUTE,
+    // Virtual columns that are measure name/value columns
+    VIRTUAL,
+}
+
+/**
+ * When the column is generated for the chart for creating views,
+ * on top of measure columns from the worksheet which are part of answer query.
+ */
+export enum ChartSpecificColumnType {
+    UNKNOWN,
+    MEASURE_NAMES,
+    MEASURE_VALUES,
 }
 
 /**
@@ -71,6 +85,51 @@ export enum CurrencyFormatType {
     ISO_CODE,
 }
 
+/**
+ * Type of aggregations applied on the column data
+ *
+ * @version SDK: 0.1 | ThoughtSpot:
+ */
+export enum ColumnAggregationType {
+    AGGREGATE,
+    AGGREGATE_DISTINCT,
+    APPROX_AGGR_DISTINCT,
+    APPROX_AGGR_DISTINCT_MERGE,
+    APPROX_COUNT_DISTINCT,
+    AVERAGE,
+    COUNT,
+    COUNT_DISTINCT,
+    CUMULATIVE_AVERAGE,
+    CUMULATIVE_COUNT,
+    CUMULATIVE_MAX,
+    CUMULATIVE_MIN,
+    CUMULATIVE_SUM,
+    GROWTH,
+    MAX,
+    MEDIAN,
+    MIN,
+    MOVING_AVERAGE,
+    MOVING_COUNT,
+    MOVING_MAX,
+    MOVING_MIN,
+    MOVING_SUM,
+    NONE,
+    PERCENTILE,
+    RANK,
+    RANK_PERCENTILE,
+    SQL_BOOL_AGGREGATE_OP,
+    SQL_DATE_AGGREGATE_OP,
+    SQL_DATE_TIME_AGGREGATE_OP,
+    SQL_DOUBLE_AGGREGATE_OP,
+    SQL_INT_AGGREGATE_OP,
+    SQL_STRING_AGGREGATE_OP,
+    SQL_TIME_AGGREGATE_OP,
+    STD_DEVIATION,
+    SUM,
+    TABLE_AGGR,
+    VARIANCE,
+}
+
 /**
  * Currency format for the column defined in the worksheet
  *
@@ -171,4 +230,43 @@ export interface ChartColumn {
      * @version SDK: 0.1 | ThoughtSpot:
      */
     format?: ColumnFormat;
+
+    /**
+     * Column Properties of the columns
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    columnProperties?: {
+        conditionalFormatting?: Maybe<ConditionalFormatting>;
+    };
+
+    /**
+     * Aggregation applied on the column data
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    aggregationType?: ColumnAggregationType;
+
+    /**
+     * Custom sort order defined for the column to sort charts in a specific order
+     * Defined in worksheet
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    customOrder?: Array<string>;
+
+    /**
+     * Guid of Custom calender for the column if defined in worksheet else null
+     *
+     * @version SDK: 0.1 | ThoughtSpot: sdcwdc
+     */
+    calenderGuid?: string;
+
+    /**
+     * Type of arbitrary column, can be measure names or measure values
+     * also, unknown if regular column
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    chartSpecificColumnType: ChartSpecificColumnType;
 }