@thoughtspot/ts-chart-sdk 0.0.1-alpha.0 → 0.0.1-alpha.2

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

@@ -1,4 +1,5 @@
 import { VisualProps } from './common.types';
+import { Query } from './ts-to-chart-event.types';
 
 /**
  *
@@ -25,13 +26,24 @@ export enum ChartToTSEvent {
     RenderComplete = 'RenderComplete',
 
     /**
-     * Visual Props Update
+     * Visual props update
      */
     UpdateVisualProps = 'UpdateVisualProps',
+
+    /**
+     * TML events
+     */
+    GetTMLString = 'GetTMLString',
+    SetTMLString = 'SetTMLString',
+
+    /**
+     * Fetch data for custom query
+     */
+    GetDataForQuery = 'GetDataForQuery',
 }
 
 /**
- * This map defines the event type and its corresponding payload needed by event
+ * This map defines the event type and its corresponding payload needed by the event
  *
  * @version SDK: 0.1 | ThoughtSpot:
  * @group Chart to ThoughtSpot Events
@@ -42,55 +54,84 @@ export interface ChartToTSEventsPayloadMap {
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
-    [ChartToTSEvent.OpenContextMenu]: OpenContextMenuEventPayload;
+    [ChartToTSEvent.OpenContextMenu]: [OpenContextMenuEventPayload];
     /**
      * Trigger to close Context Menu
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
-    [ChartToTSEvent.CloseContextMenu]: null;
+    [ChartToTSEvent.CloseContextMenu]: [];
 
     /**
      * Trigger to notify the render start
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
-    [ChartToTSEvent.RenderStart]: null;
+    [ChartToTSEvent.RenderStart]: [];
     /**
      * Trigger to notify the render completion
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
-    [ChartToTSEvent.RenderComplete]: null;
+    [ChartToTSEvent.RenderComplete]: [];
     /**
      * Trigger to notify the render error
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
-    [ChartToTSEvent.RenderError]: RenderErrorEventPayload;
+    [ChartToTSEvent.RenderError]: [RenderErrorEventPayload];
     /**
      * Trigger to update the visual props
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
-    [ChartToTSEvent.UpdateVisualProps]: UpdateVisualPropsEventPayload;
+    [ChartToTSEvent.UpdateVisualProps]: [UpdateVisualPropsEventPayload];
+
+    /**
+     * Trigger to get the TML string
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    [ChartToTSEvent.GetTMLString]: [];
+    /**
+     * Trigger to set the TML string
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    [ChartToTSEvent.SetTMLString]: [SetTMLStringEventPayload];
+    /**
+     * Trigger to get the data for custom query
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    [ChartToTSEvent.GetDataForQuery]: [GetDataForQueryEventPayload];
 }
 
 /**
  *
  * @group Chart to ThoughtSpot Events
  */
-type UpdateVisualPropsEventPayload = VisualProps;
+interface UpdateVisualPropsEventPayload {
+    visualProps: VisualProps;
+}
+
+/**
+ *
+ * @group Chart to ThoughtSpot Events
+ */
+export interface SetTMLStringEventPayload {
+    // TML string to be set
+    tmlString: string;
+}
 
 /**
  * @group Chart to ThoughtSpot Events / Context Menu
  */
 // start - open context menu payload
 export interface PointVal {
-    // column id of the column associated with the value
+    // Column ID of the column associated with the value
     columnId: string;
-    // value of the point clicked on, mostly makes sense for attributes.
-    // this can be an array of values as well.
+    // Value of the point clicked on, mostly makes sense for attributes.
+    // This can be an array of values as well.
     value: any;
 }
 /**
@@ -106,16 +147,16 @@ export interface Point {
  * @group Chart to ThoughtSpot Events / Context Menu
  */
 export interface CustomAction {
-    id: string; // id of the action user defined
-    label: string; // developer should i18n this
-    icon: string; // icon string to show on the context/axis menu
+    id: string; // ID of the user-defined action
+    label: string; // Developer should i18n this
+    icon?: string; // Icon string to show on the context/axis menu
 
     /**
-     * This function will need to have a defined set of args.
-     * For e.g., pointClick Event, point details and chart model in case on context menu
-     * For axis menu, it would be different.
+     * This function will need to have a defined set of arguments.
+     * For example, pointClick Event, point details and chart model in case of context menu
+     * For Axis menu, it would be different.
      *
-     * Callback will be triggered via postMessage api contract.
+     * Callback will be triggered via postMessage API contract.
      */
     onClick: (...args: any[]) => void;
 }
@@ -125,17 +166,7 @@ export interface CustomAction {
  * @group Chart to ThoughtSpot Events
  */
 export interface OpenContextMenuEventPayload {
-    event: Pick<
-        PointerEvent,
-        | 'x'
-        | 'y'
-        | 'clientX'
-        | 'clientY'
-        | 'pageX'
-        | 'pageY'
-        | 'screenX'
-        | 'screenY'
-    >;
+    event: Pick<PointerEvent, 'clientX' | 'clientY'>;
     clickedPoint: Point;
     selectedPoints?: Point[];
     customActions?: CustomAction[];
@@ -150,6 +181,13 @@ interface RenderErrorEventPayload {
     error: any;
 }
 
+/**
+ * @group Chart to ThoughtSpot Events
+ */
+export interface GetDataForQueryEventPayload {
+    queries: Query[];
+}
+
 /**
  *
  * @group Chart to ThoughtSpot Events

package/src/types/common.types.ts

@@ -6,7 +6,7 @@
  * Copyright: ThoughtSpot Inc. 2023
  */
 
-import { ChartColumn, DataType } from './answer-column.types';
+import { ChartColumn } from './answer-column.types';
 
 /**
  * List of Columns for a dimension in the Custom Chart Config.
@@ -18,13 +18,13 @@ import { ChartColumn, DataType } from './answer-column.types';
  */
 export interface ChartConfigDimension {
     /**
-     * key fo the dimension in the chart config
+     * Key for the dimension in the chart config
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
     key: string;
     /**
-     * list of columns added for the dimension
+     * List of columns added for the dimension
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
@@ -40,8 +40,8 @@ export interface ChartConfigDimension {
  */
 export interface ChartConfig {
     /**
-     * key of the custom chart config defined in the chart config editor definition
-     * this is used to differentiate between different custom chart configurations
+     * Key of the custom chart config defined in the chart config editor definition
+     * This is used to differentiate between different custom chart configurations
      * within the same chart
      *
      * @version SDK: 0.1 | ThoughtSpot:
@@ -56,35 +56,32 @@ export interface ChartConfig {
 }
 
 /**
- * Data Array inteface to define each column data
+ * Data Points Array interface to define data for each row and column.
+ * Data is ordered as per the columns in the query and the rows are sorted
+ * as per the search query.
  *
  * @version SDK: 0.1 | ThoughtSpot:
  * @group Chart Model
  */
-export type DataArray = {
+export type DataPointsArray = {
     /**
-     * column id associated with the data array
+     * Array of column IDs ordered as per the data query
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
-    columnId: string;
-    /**
-     * type of data
-     *
-     * @version SDK: 0.1 | ThoughtSpot:
-     */
-    columnDataType: DataType;
+    columns: string[];
+
     /**
-     * The array of data values associated with the column
+     * Array of rows of data ordered by the columns
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
-    dataValue: any[];
+    dataValue: any[][];
 };
 
 /**
  * For each query defined by the user, a query data object is sent
- * in the following format
+ * in this format.
  *
  * @version SDK: 0.1 | ThoughtSpot:
  * @group Chart Model
@@ -95,21 +92,21 @@ export type QueryData = {
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
-    data: DataArray[];
+    data: DataPointsArray;
 
     /**
      * @hidden
      * @version SDK: 0.1 | ThoughtSpot:
      */
-    completionRatio: number;
+    completionRatio?: number;
     /**
      * @hidden
      * @version SDK: 0.1 | ThoughtSpot:
      */
-    samplingRatio: number;
+    samplingRatio?: number;
 
     /**
-     * number of rows of data fetched for the query
+     * Number of rows of data fetched for the query
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
@@ -130,7 +127,7 @@ export interface ChartModel {
      */
     columns: ChartColumn[];
     /**
-     * Array of Datasets for each query
+     * Array of datasets for each query
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
@@ -152,14 +149,14 @@ export type ValidationResponse = {
 /**
  * Custom Visual props is the stored metadata for the visual props definition
  * configured by the user in the visual prop editor
- * The JSON is defined by the visual prop types. See VisualPropEditorDefinition
+ * The JSON is defined by the visual prop types. See VisualPropEditorDefinition.
  *
  * @group Chart Model
  * @version SDK: 0.1 | ThoughtSpot:
  */
 export type VisualProps = JSON;
 
-// Todo: this should be imported from custom style config package.
+// Todo: this should be imported from the custom style config package.
 type CustomStylingConfig = any;
 
 export interface AppConfig {

package/src/types/configurator.types.ts

@@ -2,12 +2,12 @@
  * @file Column Configuration Definition
  * @fileoverview
  * Developers will use this to define the axis configuration that any
- * creator of the chart can use the define the expected chart configuration.
+ * creator of the chart can use it to define the expected chart configuration.
  *
  * This will also be validated with the overall expectation
  * of the chart developer using validate flow.
  *
- * Developer is expected to use this to be able to define the data queries
+ * Developers are expected to use this to define the data queries
  * required for the chart.
  * @author Chetan Agrawal <chetan.agrawal@thoughtspot.com>
  *
@@ -20,7 +20,7 @@
  */
 export interface ChartConfigSection {
     /**
-     * key to persist the columns
+     * Key to persist the columns
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
@@ -33,9 +33,9 @@ export interface ChartConfigSection {
     label: string;
 
     /**
-     * In the UI, the following values will only prevent from dropping unnecessary
-     * columns on the section config or prevent from opening a drop down in case of
-     * multiple queries. Validation is still expected to be done by developer.
+     * In the UI, the following values will only prevent dropping unnecessary
+     * columns on the section config or prevent users from opening a drop-down in case of
+     * multiple queries. Developers must validate this flow.
      */
 
     /**
@@ -76,7 +76,7 @@ export interface ChartConfigSection {
  */
 export interface ChartConfigEditorDefinition {
     /**
-     * key to store the chart config
+     * Key to store the chart config
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
@@ -94,7 +94,7 @@ export interface ChartConfigEditorDefinition {
      */
     descriptionText?: string;
     /**
-     * Following will define all the column sections for the chart config
+     * Defines all the column sections for the chart config
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */

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

@@ -11,7 +11,7 @@ import { ChartConfigEditorDefinition } from './configurator.types';
 import { VisualPropEditorDefinition } from './visual-prop.types';
 
 /**
- * All the events sent from TS application to Custom Chart App
+ * All the events sent from the ThoughtSpot application to Custom Chart App
  *
  * @version SDK: 0.1 | ThoughtSpot:
  * @group ThoughtSpot to Chart Events
@@ -21,6 +21,10 @@ export enum TSToChartEvent {
      * @version SDK: 0.1 | ThoughtSpot:
      */
     Initialize = 'Initialize',
+    /**
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    InitializeComplete = 'InitializeComplete',
 
     /**
      * @version SDK: 0.1 | ThoughtSpot:
@@ -85,6 +89,8 @@ export interface TSToChartInternalEventsPayloadMap {
         payload: InitializeEventPayload,
     ) => InitializeEventResponsePayload;
 
+    [TSToChartEvent.InitializeComplete]: () => void;
+
     [TSToChartEvent.GetDataQuery]: (
         payload: GetDataQueryPayload,
     ) => GetDataQueryResponsePayload;
@@ -113,7 +119,7 @@ export interface InitializeEventPayload {
     chartModel: ChartModel;
 
     /**
-     * Additional App Configuration
+     * Additional app configuration
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
@@ -121,13 +127,13 @@ export interface InitializeEventPayload {
 
     /**
      * This is a unique component id that the context should send in every
-     * post message payload. This helps in identifying between multiple app components.
+     * post message payload. This helps in identifying multiple app components.
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
     componentId: string;
     /**
-     * The host url of the parent to send the post message requests to.
+     * The host URL of the parent to send the post message requests to.
      * We cannot use the window.parent object details to fetch this.
      * Hence sending in init flow.
      *

package/src/types/visual-prop.types.ts

@@ -16,7 +16,7 @@
 export interface TextInputFormDetail {
     type: 'text';
     /**
-     * key to store the value
+     * Key to store the value
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
@@ -35,7 +35,7 @@ export interface TextInputFormDetail {
      */
     password?: boolean;
     /**
-     * Allow multiline text
+     * Allows multiline text
      *
      * @default false
      * @version SDK: 0.1 | ThoughtSpot:
@@ -63,7 +63,7 @@ export interface TextInputFormDetail {
 export interface ToggleFormDetail {
     type: 'toggle';
     /**
-     * key to store the value
+     * Key to store the value
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
@@ -90,7 +90,7 @@ export interface ToggleFormDetail {
 export interface CheckboxFormDetail {
     type: 'checkbox';
     /**
-     * key to store the value
+     * Key to store the value
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
@@ -117,7 +117,7 @@ export interface CheckboxFormDetail {
 export interface RadioButtonFormDetail {
     type: 'radio';
     /**
-     * key to store the value
+     * Key to store the value
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
@@ -135,7 +135,7 @@ export interface RadioButtonFormDetail {
      */
     defaultValue?: string;
     /**
-     * list fo values to select from
+     * List of values to select from
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
@@ -150,7 +150,7 @@ export interface RadioButtonFormDetail {
 export interface DropDownFormDetail {
     type: 'dropdown';
     /**
-     * key to store the value
+     * Key to store the value
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
@@ -168,7 +168,7 @@ export interface DropDownFormDetail {
      */
     defaultValue?: string;
     /**
-     * list fo values to select from
+     * List of values to select from
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
@@ -176,14 +176,14 @@ export interface DropDownFormDetail {
 }
 
 /**
- * Element to define sections of form for the visual props editor
+ * Element to define sections of the form for the visual props editor
  *
  * @group Visual Properties Editor
  */
 export interface Section {
     type: 'section';
     /**
-     * key to define & store the children's parent
+     * Key to define & store the children's parent
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
@@ -201,7 +201,7 @@ export interface Section {
      */
     children?: PropElement[];
     /**
-     * defines form alignment in the view for the section
+     * Defines form alignment in the view for the section
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */