Dynamic config + visual props POC

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

@@ -8,6 +8,7 @@
  * Copyright: ThoughtSpot Inc. 2023
  */
 
+import { VisualPropEditorDefinition } from '@thoughtspot/ts-chart-sdk';
 import {
     ChartColumn,
     ChartConfig,
@@ -21,7 +22,9 @@ import {
     Query,
     VisualProps,
 } from '@thoughtspot/ts-chart-sdk';
+import { ChartConfigEditorDefinition } from '@thoughtspot/ts-chart-sdk/src';
 import Chart from 'chart.js/auto';
+import { toDimension } from 'chart.js/dist/helpers/helpers.core';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import _ from 'lodash';
 
@@ -151,6 +154,11 @@ function render(ctx: CustomChartContext) {
         visualPropKeyMap[2],
         false,
     );
+    const labelColor = _.get(
+        chartModel.visualProps,
+        visualPropKeyMap[1],
+        'blue',
+    );
     if (!dataModel) {
         return;
     }
@@ -174,11 +182,8 @@ function render(ctx: CustomChartContext) {
                 plugins: {
                     // Change options for ALL labels of THIS CHART
                     datalabels: {
-                        display: allowLabels ? 'auto' : false,
-                        formatter: value => numberFormatter(value),
-                        color: 'blue',
-                        textStrokeColor: 'white',
-                        textStrokeWidth: 5,
+                        display: allowLabels,
+                        color: labelColor,
                         labels: {
                             title: {
                                 font: {
@@ -312,34 +317,70 @@ const renderChart = async (ctx: CustomChartContext): Promise<void> => {
             return queries;
         },
         renderChart: ctx => renderChart(ctx),
-        chartConfigEditorDefinition: [
-            {
-                key: 'column',
-                label: 'Custom Column',
-                descriptionText:
-                    'X Axis can only have attributes, Y Axis can only have measures, Color can only have attributes. ' +
-                    'Should have just 1 column in Y axis with colors columns.',
-                columnSections: [
-                    {
-                        key: 'x',
-                        label: 'Custom X Axis',
-                        allowAttributeColumns: true,
-                        allowMeasureColumns: false,
-                        allowTimeSeriesColumns: true,
-                        maxColumnCount: 1,
-                    },
-                    {
-                        key: 'y',
-                        label: 'Custom Y Axis',
+        chartConfigEditorDefinition: (
+            chartModel: ChartModel,
+            updatedChartConfig: ChartConfig[],
+            updatedVisualPropEditorDefinition:
+                | VisualPropEditorDefinition
+                | undefined,
+        ): ChartConfigEditorDefinition[] => {
+            let yColumns;
+            if(updatedChartConfig.length === 0) {
+                yColumns = chartModel?.config?.chartConfig?.[0]?.dimensions.find(
+                    dimension => dimension.key === 'y' && dimension.columns,
+                );
+            }
+            else {
+                yColumns = updatedChartConfig?.[0]?.dimensions.find(
+                    dimension => dimension.key === 'y' && dimension.columns,
+                );
+            }
+
+            const config = [
+                {
+                    key: 'column',
+                    label: 'Custom Column',
+                    descriptionText:
+                        'X Axis can only have attributes, Y Axis can only have measures, Color can only have attributes. ' +
+                        'Should have just 1 column in Y axis with colors columns.',
+                    columnSections: [
+                        {
+                            key: 'x',
+                            label: 'Custom X Axis',
+                            allowAttributeColumns: true,
+                            allowMeasureColumns: false,
+                            allowTimeSeriesColumns: true,
+                            maxColumnCount: 1,
+                        },
+                        {
+                            key: 'y',
+                            label: 'Custom Y Axis',
+                            allowAttributeColumns: false,
+                            allowMeasureColumns: true,
+                            allowTimeSeriesColumns: false,
+                        },
+                    ],
+                },
+            ];
+            if (yColumns?.columns.length) {
+                for (let i = 0; i < yColumns.columns.length; i++) {
+                    config[0].columnSections.push({
+                        key: 'layers',
+                        label: 'Measures layer',
                         allowAttributeColumns: false,
                         allowMeasureColumns: true,
                         allowTimeSeriesColumns: false,
-                    },
-                ],
-            },
-        ],
-        visualPropEditorDefinition: {
-            elements: [
+                    });
+                }
+            }
+            return config;
+        },
+        visualPropEditorDefinition: (
+            chartModel: ChartModel,
+            visualProps: VisualProps,
+            chartConfig: ChartConfigEditorDefinition[] | undefined,
+        ): VisualPropEditorDefinition => {
+            const elements = [
                 {
                     key: 'color',
                     type: 'radio',
@@ -352,13 +393,6 @@ const renderChart = async (ctx: CustomChartContext): Promise<void> => {
                     key: 'accordion',
                     label: 'Accordion',
                     children: [
-                        {
-                            key: 'Color2',
-                            type: 'radio',
-                            defaultValue: 'blue',
-                            values: ['blue', 'white', 'red'],
-                            label: 'Color2',
-                        },
                         {
                             key: 'datalabels',
                             type: 'toggle',
@@ -367,7 +401,31 @@ const renderChart = async (ctx: CustomChartContext): Promise<void> => {
                         },
                     ],
                 },
-            ],
+            ];
+            if(visualProps.length !== 0) {
+                if (visualProps?.accordion?.datalabels) {
+                    elements[1].children?.push({
+                        key: 'Color2',
+                        type: 'radio',
+                        defaultValue: 'blue',
+                        values: ['blue', 'white', 'red'],
+                        label: 'Color2',
+                    });
+                }
+            }
+            else {
+                if (chartModel.visualProps?.accordion?.datalabels) {
+                    elements[1].children?.push({
+                        key: 'Color2',
+                        type: 'radio',
+                        defaultValue: 'blue',
+                        values: ['blue', 'white', 'red'],
+                        label: 'Color2',
+                    });
+                }
+            }
+
+            return { elements };
         },
     });
 

src/main/custom-chart-context.ts

@@ -106,7 +106,11 @@
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
-    chartConfigEditorDefinition?: ChartConfigEditorDefinition[];
+    chartConfigEditorDefinition?: (
+        chartModel: ChartModel,
+        updatedChartConfig: ChartConfig[],
+        visualPropEditorDefinition: VisualPropEditorDefinition | undefined,
+    ) => ChartConfigEditorDefinition[];
 
     /**
      * Definition to help edit/customize the visual properties from chart settings editor
@@ -117,7 +121,11 @@
      * @returns {@link VisualPropEditorDefinition}
      * @version SDK: 0.1 | ThoughtSpot:
      */
-    visualPropEditorDefinition?: VisualPropEditorDefinition;
+    visualPropEditorDefinition?: (
+        chartModel: ChartModel,
+        updatedVisualProps: VisualProps,
+        chartConfigEditorDefinition: ChartConfigEditorDefinition[] | undefined,
+    ) => VisualPropEditorDefinition;
 };
 
 /**
@@ -126,7 +134,7 @@
 const DEFAULT_CHART_CONTEXT_PROPS: Partial<CustomChartContextProps> = {
     validateConfig: () => ({ isValid: true }),
     validateVisualProps: () => ({ isValid: true }),
-    chartConfigEditorDefinition: undefined,
+    chartConfigEditorDefinition: () => undefined,
 };
 
 export class CustomChartContext {
@@ -241,7 +249,7 @@
      * @version SDK: 0.1 | ThoughtSpot:
      */
     public initialize = (): Promise<void> => {
         console.log('Chart Context: initialization start');
         return this.hasInitializedPromise;
     };
 
@@ -273,7 +281,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;
         }
@@ -430,7 +438,7 @@
         ...eventPayload: ChartToTSEventsPayloadMap[T]
     ): Promise<any> {
         if (!isInitialized) {
             console.log(
                 'Chart Context: not initialized the context, something went wrong',
             );
             return Promise.reject(new Error('Context not initialized'));
@@ -453,7 +461,7 @@
      */
     private registerEventProcessor = () => {
         if (isInitialized) {
             console.error(
                 'The context is already initialized. you cannot have multiple contexts',
             );
             throw new Error(ErrorType.MultipleContextsNotSupported);
@@ -473,7 +481,7 @@
             return;
         }
 
         console.log(
             'Chart Context: message received:',
             event.data.eventType,
             event.data,
@@ -532,6 +540,18 @@
                             payload.visualProps,
                             this.chartModel,
                         );
+                        if (validationResponse.isValid) {
+                            const visualPropEditorDefinition =
+                                this.chartContextProps.visualPropEditorDefinition(
+                                    this.chartModel,
+                                    payload.visualProps,
+                                    payload.chartConfigEditorDefinition,
+                                );
+                            return {
+                                ...validationResponse,
+                                visualPropEditorDefinition,
+                            };
+                        }
                     return validationResponse;
                 }
                 // this will never be true
@@ -553,6 +573,25 @@
                             payload.chartConfig,
                             this.chartModel,
                         );
+                    if (validationResponse.isValid) {
+                        const chartConfigEditorDefinition =
+                            this.chartContextProps.chartConfigEditorDefinition(
+                                this.chartModel,
+                                payload.chartConfig,
+                                payload.visualPropEditorDefinition,
+                            );
+                        const visualPropEditorDefinition =
+                            this.chartContextProps.visualPropEditorDefinition(
+                                this.chartModel,
+                                payload.visualPropEditorDefinition,
+                                payload.chartConfig,
+                            );
+                        return {
+                            ...validationResponse,
+                            chartConfigEditorDefinition,
+                            visualPropEditorDefinition,
+                        };
+                    }
                     return validationResponse;
                 }
                 // this will never be true
@@ -615,7 +654,7 @@
                         isValid: true,
                     };
                 } catch (error: unknown) {
                     console.log(
                         'ContextMenuCustomAction: payload recieved:',
                         payload,
                         'CustomActionCallbackStore:',
@@ -658,7 +697,7 @@
                         isValid: true,
                     };
                 } catch (error: unknown) {
                     console.log(
                         'AxisMenuCustomAction: payload recieved:',
                         payload,
                         'CustomActionCallbackStore:',
@@ -780,9 +819,9 @@
                 isConfigValid: isValid,
                 defaultChartConfig,
                 chartConfigEditorDefinition:
-                    this.chartContextProps.chartConfigEditorDefinition,
+                    this.chartContextProps.chartConfigEditorDefinition(this.chartModel, defaultChartConfig),
                 visualPropEditorDefinition:
-                    this.chartContextProps.visualPropEditorDefinition,
+                    this.chartContextProps.visualPropEditorDefinition(this.chartModel, defaultChartConfig),
             };
         };
 
@@ -810,7 +849,7 @@
             };
         }
 
         console.log(
             'ChartContext: Response:',
             event.data.eventType,
             response,

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.
@@ -144,6 +146,8 @@ export interface ChartModel {
 export type ValidationResponse = {
     isValid: boolean;
     validationErrorMessage?: string[];
+    chartConfigEditorDefinition?: ChartConfigEditorDefinition[],
+    visualPropEditorDefinition?: VisualPropEditorDefinition,
 };
 
 /**

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

@@ -266,6 +266,7 @@ export interface VisualPropsValidateEventPayload {
      * @version SDK: 0.1 | ThoughtSpot:
      */
     visualProps: VisualProps;
+    chartConfigEditorDefinition: ChartConfigEditorDefinition[] | undefined;
 }
 
 /**
@@ -279,6 +280,7 @@ export interface ChartConfigValidateEventPayload {
      * @version SDK: 0.1 | ThoughtSpot:
      */
     chartConfig: ChartConfig[];
+    visualPropEditorDefinition: VisualPropEditorDefinition | undefined;
 }
 
 /**