SCAL-229147 Dynamic Measure Name/Values

example/custom-bar-chart/custom-chart.ts

@@ -32,8 +32,16 @@ import { ChartConfigEditorDefinition } from '@thoughtspot/ts-chart-sdk/src';
 import Chart from 'chart.js/auto';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import _ from 'lodash';
-import { availableColor, getBackgroundColor, getPlotLinesAndBandsFromConditionalFormatting, visualPropKeyMap } from './custom-chart.utils';
-import { createPlotbandPlugin, createPlotlinePlugin } from './custom-chart-plugins';
+import {
+    availableColor,
+    getBackgroundColor,
+    getPlotLinesAndBandsFromConditionalFormatting,
+    visualPropKeyMap,
+} from './custom-chart.utils';
+import {
+    createPlotbandPlugin,
+    createPlotlinePlugin,
+} from './custom-chart-plugins';
 
 Chart.register(ChartDataLabels);
 
@@ -487,6 +495,16 @@ const renderChart = async (ctx: CustomChartContext): Promise<void> => {
         },
         allowedConfigurations: {
             allowColumnConditionalFormatting: true,
+            allowMeasureNamesAndValues: true,
+        },
+        chartConfigParameters: {
+            measureNameValueColumns: {
+                enableMeasureNameColumn: true,
+                enableMeasureValueColumn: true,
+                measureNameColumnAlias: 'Name',
+                measureValueColumnAlias: 'Value',
+            },
+            batchSizeLimit: 20000,
         },
     });
 

example/custom-bar-chart/package.json

@@ -14,7 +14,7 @@
         "vite": "^4.3.5"
     },
     "dependencies": {
-        "@thoughtspot/ts-chart-sdk": "0.0.2-alpha.14",
+        "@thoughtspot/ts-chart-sdk": "0.0.2-alpha.20",
         "chart.js": "^4.3.0",
         "chartjs-plugin-datalabels": "^2.2.0",
         "lodash": "^4.17.21"

package.json

@@ -1,7 +1,7 @@
 {
     "name": "@thoughtspot/ts-chart-sdk",
     "private": false,
-    "version": "0.0.2-alpha.19",
+    "version": "0.0.2-alpha.20",
     "module": "lib/index",
     "main": "lib/index",
     "types": "lib/index",

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

@@ -117,6 +117,15 @@ describe('CustomChartContext', () => {
                     allowColumnConditionalFormatting: false,
                     allowMeasureNamesAndValues: false,
                 },
+                chartConfigParameters: {
+                    measureNameValueColumns: {
+                        enableMeasureNameColumn: false,
+                        enableMeasureValueColumn: false,
+                        measureNameColumnAlias: 'Measure Name',
+                        measureValueColumnAlias: 'Measure Values',
+                    },
+                    batchSizeLimit: 20000,
+                },
             });
         });
 

src/main/custom-chart-context.ts

@@ -56,12 +56,105 @@
     postMessageToHostApp,
 } from './post-message-event-bridge';
 
+/**
+ * Configuration for allowing or disallowing specific TS UI features.
+ *
+ * @fileoverview
+ * This configuration defines the ability to toggle specific features such as
+ * column number formatting, conditional formatting, and measure names/values.
+ *
+ * @version SDK: 0.1 | ThoughtSpot:
+ */
 export type AllowedConfigurations = {
+    /**
+     * Allows column-level number formatting.
+     *
+     * @default false
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
     allowColumnNumberFormatting?: boolean;
+
+    /**
+     * Allows conditional formatting at the column level.
+     * This allows users to apply rules that visually highlight or differentiate data.
+     *
+     * @default false
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
     allowColumnConditionalFormatting?: boolean;
+
+    /**
+     * Enables measure_name and measure_values in the chart configuration.
+     *
+     * @default false
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
     allowMeasureNamesAndValues?: boolean;
 };
 
+/**
+ * Configuration parameters for setting chart-specific options.
+ *
+ * @fileoverview
+ * This configuration includes settings for controlling measure name/value columns
+ * and batch size limits for data processing.
+ *
+ * @version SDK: 0.1 | ThoughtSpot:
+ */
+export type ChartConfigParameters = {
+    /**
+     * Configurations related to measure name and value columns.
+     * These parameters allow for enabling/disabling and aliasing the columns
+     * used to represent measure names and values.
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    measureNameValueColumns?: {
+        /**
+         * Enables or disables the measure_name column.
+         *
+         * @default false
+         * @version SDK: 0.1 | ThoughtSpot:
+         */
+        enableMeasureNameColumn?: boolean;
+
+        /**
+         * Enables or disables the measure_value column.
+         *
+         * @default false
+         * @version SDK: 0.1 | ThoughtSpot:
+         */
+        enableMeasureValueColumn?: boolean;
+
+        /**
+         * Alias for the measure_name column.
+         * This allows users to define a custom name for the measure_name column.
+         *
+         * @default 'Measure Name'
+         * @version SDK: 0.1 | ThoughtSpot:
+         */
+        measureNameColumnAlias?: string;
+
+        /**
+         * Alias for the measure_value column.
+         * This allows users to define a custom name for the measure_value column.
+         *
+         * @default 'Measure Value'
+         * @version SDK: 0.1 | ThoughtSpot:
+         */
+        measureValueColumnAlias?: string;
+    };
+
+    /**
+     * Limit on the batch size for data processing.
+     * This sets an upper limit on how much data can be processed in a single batch.
+     *
+     * @default 20000
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    batchSizeLimit?: number;
+};
+
 export type CustomChartContextProps = {
     /**
      * Generate the default axis configuration for rendering the chart on first load.
@@ -142,10 +235,21 @@
         | VisualEditorDefinitionSetter
         | VisualPropEditorDefinition;
 
-    // Whether user wants thoughtspot default number and conditional formatting
+    /**
+     * Optional configuration to toggle native TS UI configurations, such as column number formatting
+     * and conditional formatting.
+     *
+     * @type {AllowedConfigurations}
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
     allowedConfigurations?: AllowedConfigurations;
-    // TODO: needs to implement this on TS side
-    batchSizeLimit?: number;
+    /**
+     * Optional parameters for configuring specific chart-related features, such as measure name and value columns.
+     *
+     * @type {ChartConfigParameters}
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    chartConfigParameters?: ChartConfigParameters;
 };
 
 export type ValidationFunctions =
@@ -164,6 +268,15 @@
         allowColumnConditionalFormatting: false,
         allowMeasureNamesAndValues: false,
     },
+    chartConfigParameters: {
+        measureNameValueColumns: {
+            enableMeasureNameColumn: false,
+            enableMeasureValueColumn: false,
+            measureNameColumnAlias: 'Measure Name',
+            measureValueColumnAlias: 'Measure Values',
+        },
+        batchSizeLimit: 20000,
+    },
 };
 
 export class CustomChartContext {
@@ -285,7 +398,7 @@
      * @version SDK: 0.1 | ThoughtSpot:
      */
     public initialize = (): Promise<void> => {
         console.log('Chart Context: initialization start');
         return this.hasInitializedPromise;
     };
 
@@ -317,7 +430,7 @@
      */
     public off<T extends keyof TSToChartEventsPayloadMap>(eventType: T): void {
         if (_.isNil(this.eventListeners[eventType])) {
             console.log('No event listener found to remove');
             this.eventListeners[eventType] = [];
             return;
         }
@@ -538,7 +651,7 @@
         ...eventPayload: ChartToTSEventsPayloadMap[T]
     ): Promise<any> {
         if (!globalThis.isInitialized) {
             console.log(
                 'Chart Context: not initialized the context, something went wrong',
             );
             return Promise.reject(new Error('Context not initialized'));
@@ -561,7 +674,7 @@
      */
     private registerEventProcessor = () => {
         if (globalThis.isInitialized) {
             console.error(
                 'The context is already initialized. you cannot have multiple contexts',
             );
             throw new Error(ErrorType.MultipleContextsNotSupported);
@@ -577,7 +690,7 @@
      * @param event : Message Event Object
      */
     private eventProcessor = (data: any) => {
         console.log('Chart Context: message received:', data.eventType, data);
 
         const messageResponse = this.executeEventListenerCBs(data);
 
@@ -740,7 +853,7 @@
                         isValid: true,
                     };
                 } catch (error: unknown) {
                     console.log(
                         'ContextMenuCustomAction: payload recieved:',
                         payload,
                         'CustomActionCallbackStore:',
@@ -783,7 +896,7 @@
                         isValid: true,
                     };
                 } catch (error: unknown) {
                     console.log(
                         'AxisMenuCustomAction: payload recieved:',
                         payload,
                         'CustomActionCallbackStore:',
@@ -913,6 +1026,8 @@
                     this.getVisualPropEditorDefinition(),
                 allowedConfigurations:
                     this.chartContextProps.allowedConfigurations,
+                chartConfigParameters:
+                    this.chartContextProps.chartConfigParameters,
             };
         };
 

src/types/configurator.types.ts

@@ -14,7 +14,7 @@
  * Copyright: ThoughtSpot Inc. 2023
  */
 
-import { CustomChartContext } from '../main/custom-chart-context';
+import type { CustomChartContext } from '../main/custom-chart-context';
 import { ChartModel } from './common.types';
 /**
  *

src/types/ts-to-chart-event.types.ts

@@ -1,6 +1,9 @@
-import { AllowedConfigurations } from '../main/custom-chart-context';
+import type {
+    AllowedConfigurations,
+    ChartConfigParameters,
+} from '../main/custom-chart-context';
 import { ChartColumn } from './answer-column.types';
-import { Point } from './chart-to-ts-event.types';
+import type { Point } from './chart-to-ts-event.types';
 import {
     AppConfig,
     ChartConfig,
@@ -9,8 +12,8 @@ import {
     ValidationResponse,
     VisualProps,
 } from './common.types';
-import { ChartConfigEditorDefinition } from './configurator.types';
-import { VisualPropEditorDefinition } from './visual-prop.types';
+import type { ChartConfigEditorDefinition } from './configurator.types';
+import type { VisualPropEditorDefinition } from './visual-prop.types';
 
 /**
  * All the events sent from the ThoughtSpot application to Custom Chart App
@@ -206,6 +209,13 @@ export interface InitializeEventResponsePayload {
      * @version SDK: 0.1 | ThoughtSpot:
      */
     allowedConfigurations?: AllowedConfigurations;
+    /**
+     * Additional chart configuration parameters supported by TS UI. Ex: show/hide Measure Name/
+     * Value columns.
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    chartConfigParameters?: ChartConfigParameters;
 }
 
 /**

src/types/visual-prop.types.ts

@@ -8,7 +8,7 @@
  * Copyright: ThoughtSpot Inc. 2023
  */
 
-import { CustomChartContext } from '../main/custom-chart-context';
+import type { CustomChartContext } from '../main/custom-chart-context';
 import { ColumnType } from './answer-column.types';
 import { ChartModel } from './common.types';
 /**