@thoughtspot/ts-chart-sdk 0.0.2-alpha.3 → 0.0.2-alpha.4

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@thoughtspot/ts-chart-sdk",
     "private": false,
-    "version": "0.0.2-alpha.3",
+    "version": "0.0.2-alpha.4",
     "module": "lib/index",
     "main": "lib/index",
     "types": "lib/index",
@@ -42,7 +42,7 @@
         "@typescript-eslint/eslint-plugin": "^5.59.5",
         "@typescript-eslint/parser": "^5.59.5",
         "dts-bundle": "^0.7.3",
-        "eslint": "7.32.0",
+        "eslint": "^8.56.0",
         "eslint-config-airbnb-base": "15.0.0",
         "eslint-config-prettier": "^6.9.0",
         "eslint-import-resolver-typescript": "^2.0.0",

package/src/index.ts

@@ -6,3 +6,5 @@ export * from './types/chart-to-ts-event.types';
 export * from './types/ts-to-chart-event.types';
 export * from './main/custom-chart-context';
 export * from './react/use-custom-chart-context';
+export * from './types/conditional-formatting.types';
+export * from './utils/conditional-formatting/conditional-formatting';

package/src/main/custom-chart-context.spec.ts

@@ -170,7 +170,124 @@ describe('CustomChartContext', () => {
             eventProcessor = null;
         });
 
-        test('default internal function testing', async () => {
+        test('TSToChartEvent.ChartConfigValidate validation response testing', async () => {
+            // Define initial context with object definitions
+            customChartContext = new CustomChartContext({
+                getDefaultChartConfig,
+                getQueriesFromChartConfig,
+                renderChart,
+                visualPropEditorDefinition: { elements: [] },
+                chartConfigEditorDefinition: [],
+            });
+
+            // Trigger event processor with initial context
+            const responseWithInitialContext = await eventProcessor({
+                payload: mockInitializeContextPayload,
+                eventType: TSToChartEvent.ChartConfigValidate,
+                source: 'ts-host-app',
+            });
+            // Verify response with object definitions
+            expect(responseWithInitialContext).toStrictEqual({
+                isValid: true,
+                visualPropEditorDefinition: { elements: [] },
+                chartConfigEditorDefinition: [],
+            });
+
+            // Redefine context with function-returned definitions
+            customChartContext = new CustomChartContext({
+                getDefaultChartConfig,
+                getQueriesFromChartConfig,
+                renderChart,
+                visualPropEditorDefinition: () => {
+                    return { elements: [] };
+                },
+                chartConfigEditorDefinition: () => {
+                    return [
+                        {
+                            key: 'x',
+                            columnSections: [{ label: 'x-axis', key: 'x' }],
+                        },
+                    ];
+                },
+            });
+            // Trigger event processor with updated context
+            const responseWithUpdatedContext = await eventProcessor({
+                payload: mockInitializeContextPayload,
+                eventType: TSToChartEvent.ChartConfigValidate,
+                source: 'ts-host-app',
+            });
+            // Verify response with function-returned definitions
+            expect(responseWithUpdatedContext).toStrictEqual({
+                isValid: true,
+                visualPropEditorDefinition: { elements: [] },
+                chartConfigEditorDefinition: [
+                    {
+                        key: 'x',
+                        columnSections: [{ label: 'x-axis', key: 'x' }],
+                    },
+                ],
+            });
+        });
+
+        test('TSToChartEvent.validateVisualProps validation response testing', () => {
+            // Define initial context with object definitions
+            customChartContext = new CustomChartContext({
+                getDefaultChartConfig,
+                getQueriesFromChartConfig,
+                renderChart,
+                visualPropEditorDefinition: { elements: [] },
+                chartConfigEditorDefinition: [],
+            });
+
+            // Trigger event processor with initial context
+            const responseWithInitialContext = eventProcessor({
+                payload: mockInitializeContextPayload,
+                eventType: TSToChartEvent.VisualPropsValidate,
+                source: 'ts-host-app',
+            });
+            // Verify response with object definitions
+            expect(responseWithInitialContext).toStrictEqual({
+                isValid: true,
+                visualPropEditorDefinition: { elements: [] },
+                chartConfigEditorDefinition: [],
+            });
+            // Redefine context with function-returned definitions
+            customChartContext = new CustomChartContext({
+                getDefaultChartConfig,
+                getQueriesFromChartConfig,
+                renderChart,
+                visualPropEditorDefinition: () => {
+                    return { elements: [] };
+                },
+                chartConfigEditorDefinition: () => {
+                    return [
+                        {
+                            key: 'x',
+                            columnSections: [{ label: 'x-axis', key: 'x' }],
+                        },
+                    ];
+                },
+            });
+            // Trigger event processor with updated context
+            const responseWithFunctionReturnedValues = eventProcessor({
+                payload: mockInitializeContextPayload,
+                eventType: TSToChartEvent.VisualPropsValidate,
+                source: 'ts-host-app',
+            });
+            // Verify response with function-returned definitions
+            expect(responseWithFunctionReturnedValues).toStrictEqual({
+                isValid: true,
+                visualPropEditorDefinition: { elements: [] },
+                chartConfigEditorDefinition: [
+                    {
+                        key: 'x',
+                        columnSections: [{ label: 'x-axis', key: 'x' }],
+                    },
+                ],
+            });
+        });
+
+        test('should not trigger post message if host is not accurate', async () => {
             expect(mockInitMessage).toHaveBeenCalled();
 
             // mock the event trigger for ChartConfigValidate

package/src/main/custom-chart-context.ts

@@ -21,10 +21,14 @@ import {
     AppConfig,
     ChartConfig,
     ChartModel,
+    SuccessValidationResponse,
     ValidationResponse,
     VisualProps,
 } from '../types/common.types';
-import { ChartConfigEditorDefinition } from '../types/configurator.types';
+import {
+    ChartConfigEditorDefinition,
+    ConfigEditorDefinitionSetter,
+} from '../types/configurator.types';
 import {
     AxisMenuCustomActionPayload,
     ChartConfigValidateEventPayload,
@@ -42,7 +46,10 @@ import {
     VisualPropsUpdateEventPayload,
     VisualPropsValidateEventPayload,
 } from '../types/ts-to-chart-event.types';
-import { VisualPropEditorDefinition } from '../types/visual-prop.types';
+import {
+    VisualEditorDefinitionSetter,
+    VisualPropEditorDefinition,
+} from '../types/visual-prop.types';
 import {
     globalThis,
     initMessageListener,
@@ -116,7 +123,9 @@ export type CustomChartContextProps = {
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
-    chartConfigEditorDefinition?: ChartConfigEditorDefinition[];
+    chartConfigEditorDefinition?:
+        | ConfigEditorDefinitionSetter
+        | ChartConfigEditorDefinition[];
 
     /**
      * Definition to help edit/customize the visual properties from chart settings editor
@@ -127,12 +136,18 @@ export type CustomChartContextProps = {
      * @returns {@link VisualPropEditorDefinition}
      * @version SDK: 0.1 | ThoughtSpot:
      */
-    visualPropEditorDefinition?: VisualPropEditorDefinition;
+    visualPropEditorDefinition?:
+        | VisualEditorDefinitionSetter
+        | VisualPropEditorDefinition;
 
     // Whether user wants thoughtspot default number and conditional formatting
     allowedConfigurations?: AllowedConfigurations;
 };
 
+export type ValidationFunctions =
+    | CustomChartContextProps['validateVisualProps']
+    | CustomChartContextProps['validateConfig'];
+
 /**
  * Default configuration options for all the chart context properties
  */
@@ -379,6 +394,48 @@ export class CustomChartContext {
         return processedPayload;
     }
 
+    /**
+     * Funtions return the chart config editor definition
+     * @param {ChartConfig[]} currentChartConfig
+     * @param {VisualProps}
+     * @returns {ChartConfigEditorDefinition[]}
+     */
+    private getChartConfigEditorDefinition = (
+        currentState: Partial<ChartModel> = {},
+    ) => {
+        if (_.isFunction(this.chartContextProps.chartConfigEditorDefinition)) {
+            return this.chartContextProps.chartConfigEditorDefinition(
+                {
+                    ...this.chartModel,
+                    ...currentState,
+                },
+                this,
+            );
+        }
+        return this.chartContextProps.chartConfigEditorDefinition;
+    };
+
+    /**
+     * Funtions returns the visual prop editor definition
+     * @param {ChartConfig[]} currentChartConfig
+     * @param {VisualProps}
+     * @returns {VisualPropEditorDefinition}
+     */
+    private getVisualPropEditorDefinition = (
+        currentState: Partial<ChartModel> = {},
+    ) => {
+        if (_.isFunction(this.chartContextProps.visualPropEditorDefinition)) {
+            return this.chartContextProps.visualPropEditorDefinition(
+                {
+                    ...this.chartModel,
+                    ...currentState,
+                },
+                this,
+            );
+        }
+        return this.chartContextProps.visualPropEditorDefinition;
+    };
+
     /**
      * Function to store the axis menu custom action callback mapped with action id
      * @param  {[OpenAxisMenuEventPayload]} eventPayload Event payload bound
@@ -438,6 +495,24 @@ export class CustomChartContext {
         }
     }
 
+    private validationsResponseProcessor(
+        currentValidationState: Partial<ChartModel>,
+        validationResponse: ValidationResponse,
+    ) {
+        const visualPropEditorDefinition = this.getVisualPropEditorDefinition(
+            currentValidationState,
+        );
+        const chartConfigEditorDefinition = this.getChartConfigEditorDefinition(
+            currentValidationState,
+        );
+
+        return {
+            ...validationResponse,
+            visualPropEditorDefinition,
+            chartConfigEditorDefinition,
+        };
+    }
+
     /**
      * Function to emit Chart to TS Events to the TS application.
 
@@ -530,13 +605,27 @@ export class CustomChartContext {
          */
         this.onInternal(
             TSToChartEvent.VisualPropsValidate,
-            (payload: VisualPropsValidateEventPayload): ValidationResponse => {
+            (
+                payload: VisualPropsValidateEventPayload,
+            ):
+                | (ValidationResponse & SuccessValidationResponse)
+                | ValidationResponse => {
                 if (this.chartContextProps.validateVisualProps) {
                     const validationResponse =
                         this.chartContextProps.validateVisualProps(
                             payload.visualProps,
                             this.chartModel,
                         );
+                    if (validationResponse.isValid) {
+                        const currentVisualState = {
+                            visualProps: payload.visualProps,
+                        };
+
+                        return this.validationsResponseProcessor(
+                            currentVisualState,
+                            validationResponse,
+                        );
+                    }
                     return validationResponse;
                 }
                 // this will never be true
@@ -551,13 +640,29 @@ export class CustomChartContext {
          */
         this.onInternal(
             TSToChartEvent.ChartConfigValidate,
-            (payload: ChartConfigValidateEventPayload): ValidationResponse => {
+            (
+                payload: ChartConfigValidateEventPayload,
+            ):
+                | (ValidationResponse & SuccessValidationResponse)
+                | ValidationResponse => {
                 if (this.chartContextProps.validateConfig) {
                     const validationResponse =
                         this.chartContextProps.validateConfig(
                             payload.chartConfig,
                             this.chartModel,
                         );
+                    if (validationResponse.isValid) {
+                        const currentConfigState = {
+                            config: {
+                                ...this.chartModel.config,
+                                chartConfig: payload.chartConfig,
+                            },
+                        };
+                        return this.validationsResponseProcessor(
+                            currentConfigState,
+                            validationResponse,
+                        );
+                    }
                     return validationResponse;
                 }
                 // this will never be true
@@ -789,9 +894,9 @@ export class CustomChartContext {
                 isConfigValid: isValid,
                 defaultChartConfig,
                 chartConfigEditorDefinition:
-                    this.chartContextProps.chartConfigEditorDefinition,
+                    this.getChartConfigEditorDefinition(),
                 visualPropEditorDefinition:
-                    this.chartContextProps.visualPropEditorDefinition,
+                    this.getVisualPropEditorDefinition(),
                 allowedConfigurations:
                     this.chartContextProps.allowedConfigurations,
             };

package/src/main/post-message-event-bridge.ts

@@ -53,7 +53,7 @@ const postMessageToHostApp = async (
         TIMEOUT_THRESHOLD,
         'ChartContext: postMessage operation timed out.',
     );
-    if (resp.hasError) {
+    if (resp?.hasError) {
         throw new Error(resp.error);
     }
     return resp;

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,3 +1,5 @@
+import { ConditionalFormatting, Maybe } from './conditional-formatting.types';
+
 export enum ColumnType {
     UNKNOWN,
     MEASURE,
@@ -71,6 +73,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 +218,20 @@ 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:
+     */
+    columnAggregationType?: ColumnAggregationType;
 }

package/src/types/common.types.ts

@@ -7,6 +7,8 @@
  */
 
 import { ChartColumn } from './answer-column.types';
+import { ChartConfigEditorDefinition } from './configurator.types';
+import { VisualPropEditorDefinition } from './visual-prop.types';
 
 /**
  * List of Columns for a dimension in the Custom Chart Config.
@@ -140,6 +142,12 @@ export interface ChartModel {
     };
 }
 
+// Validation Response for valid config or visual props
+export type SuccessValidationResponse = {
+    chartConfigEditorDefinition: ChartConfigEditorDefinition[];
+    visualPropEditorDefinition: VisualPropEditorDefinition;
+};
+
 // Generic Validation Response
 export type ValidationResponse = {
     isValid: boolean;