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

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,23 +149,26 @@ 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 {
+    /**
+     * @hidden
+     */
     styleConfig?: CustomStylingConfig;
 
     appOptions?: {
         isMobile?: boolean;
         isPrintMode?: boolean; // export mode on/off
-
+        isLiveboardContext?: boolean; // if chart renders in liveboard context
         // runtime configurations
         isDebugMode?: boolean; // enables debug mode for logging
     };
@@ -180,8 +180,19 @@ export interface AppConfig {
         sessionTimezone: string;
     };
 
+    /**
+     * App url for the custom chart application where the chart app is hosted.
+     * This helps the chart developer to access app artifacts relative to this url.
+     * There can be different build systems that developers may have used and different ways
+     * to host the same. This helps in resolving the same.
+     */
+    appUrl?: string;
+
     // Idea: we might be able to map this to data and ask user to read data in a
     // certain way the transformations for point during context menu operations
     // need to be explored
+    /**
+     * @hidden
+     */
     customCalendarConfig?: any; // this is to initialize custom calendar service
 }

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

@@ -1,4 +1,5 @@
 import { ChartColumn } from './answer-column.types';
+import { Point } from './chart-to-ts-event.types';
 import {
     AppConfig,
     ChartConfig,
@@ -11,7 +12,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 +22,10 @@ export enum TSToChartEvent {
      * @version SDK: 0.1 | ThoughtSpot:
      */
     Initialize = 'Initialize',
+    /**
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    InitializeComplete = 'InitializeComplete',
 
     /**
      * @version SDK: 0.1 | ThoughtSpot:
@@ -53,6 +58,16 @@ export enum TSToChartEvent {
      * @version SDK: 0.1 | ThoughtSpot:
      */
     VisualPropsUpdate = 'VisualPropsUpdate',
+    /**
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+
+    ContextMenuActionClick = 'ContextMenuActionClick',
+
+    /**
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    AxisMenuActionClick = 'AxisMenuActionClick',
 }
 
 /**
@@ -85,6 +100,8 @@ export interface TSToChartInternalEventsPayloadMap {
         payload: InitializeEventPayload,
     ) => InitializeEventResponsePayload;
 
+    [TSToChartEvent.InitializeComplete]: () => void;
+
     [TSToChartEvent.GetDataQuery]: (
         payload: GetDataQueryPayload,
     ) => GetDataQueryResponsePayload;
@@ -98,6 +115,14 @@ export interface TSToChartInternalEventsPayloadMap {
     ) => ValidationResponse;
 
     [TSToChartEvent.TriggerRenderChart]: () => void;
+
+    [TSToChartEvent.ContextMenuActionClick]: (
+        payload: ContextMenuCustomActionPayload,
+    ) => void;
+
+    [TSToChartEvent.AxisMenuActionClick]: (
+        payload: AxisMenuCustomActionPayload,
+    ) => void;
 }
 
 /**
@@ -113,7 +138,7 @@ export interface InitializeEventPayload {
     chartModel: ChartModel;
 
     /**
-     * Additional App Configuration
+     * Additional app configuration
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
@@ -121,13 +146,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.
      *
@@ -255,3 +280,54 @@ export interface ChartConfigValidateEventPayload {
      */
     chartConfig: ChartConfig[];
 }
+
+/**
+ * Custom action dispatched by context menu of the chart
+ *
+ * @group ThoughtSpot to Chart Events
+ * @version SDK: 0.1 | ThoughtSpot:
+ */
+export interface CustomContextMenuAction {
+    id: string;
+    clickedPoint: Point;
+    selectedPoints?: Point[];
+    event: Pick<PointerEvent, 'clientX' | 'clientY'>;
+}
+
+/**
+ *
+ * @group ThoughtSpot to Chart Events
+ */
+export interface ContextMenuCustomActionPayload {
+    /**
+     * Dispatched custom action from context menu
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    customAction: CustomContextMenuAction;
+}
+
+/**
+ * Custom action dispatched by axis menu of the chart
+ *
+ * @group ThoughtSpot to Chart Events
+ * @version SDK: 0.1 | ThoughtSpot:
+ */
+export interface CustomAxisMenuAction {
+    id: string;
+    columnIds: string[];
+    event: Pick<PointerEvent, 'clientX' | 'clientY'>;
+}
+
+/**
+ *
+ * @group ThoughtSpot to Chart Events
+ */
+export interface AxisMenuCustomActionPayload {
+    /**
+     * Dispatched custom action from context menu
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    customAction: CustomAxisMenuAction;
+}

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

@@ -8,6 +8,60 @@
  * Copyright: ThoughtSpot Inc. 2023
  */
 
+/**
+ * Configuration for input validation rules
+ */
+export interface InputValidation {
+    /**
+     * Determines if the input is required.
+     *
+     * @version SDK: 0.0.1-alpha.3 | ThoughtSpot:
+     */
+    required?: boolean;
+    /**
+     * Error message to display when input is required but not provided.
+     *
+     * @version SDK: 0.0.1-alpha.3 | ThoughtSpot:
+     */
+    requiredError?: string;
+    /**
+     * Regular expression pattern to validate the input against.
+     *
+     * @version SDK: 0.0.1-alpha.3 | ThoughtSpot:
+     */
+    regex?: string;
+    /**
+     * Error message to display when input doesn't match the regex pattern.
+     *
+     * @version SDK: 0.0.1-alpha.3 | ThoughtSpot:
+     */
+    regexError?: string;
+    /**
+     * Minimum length required for the input.
+     *
+     * @version SDK: 0.0.1-alpha.3 | ThoughtSpot:
+     */
+    minLength?: number;
+    /**
+     * Error message to display when input length is less than the required minimum.
+     *
+     * @version SDK: 0.0.1-alpha.3 | ThoughtSpot:
+     */
+    minLengthError?: string;
+    /**
+     * Range of values allowed for the input.
+     *
+     * @version SDK: 0.0.1-alpha.3 | ThoughtSpot:
+     */
+    range?: string;
+    /**
+     * Error message to display when input value is outside the allowed range.
+     *
+     * @version SDK: 0.0.1-alpha.3 | ThoughtSpot:
+     */
+    rangeError?: string;
+}
+
 /**
  * Text Form Element for the visual props editor
  *
@@ -16,7 +70,7 @@
 export interface TextInputFormDetail {
     type: 'text';
     /**
-     * key to store the value
+     * Key to store the value
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
@@ -35,7 +89,7 @@ export interface TextInputFormDetail {
      */
     password?: boolean;
     /**
-     * Allow multiline text
+     * Allows multiline text
      *
      * @default false
      * @version SDK: 0.1 | ThoughtSpot:
@@ -53,6 +107,79 @@ export interface TextInputFormDetail {
      * @version SDK: 0.1 | ThoughtSpot:
      */
     defaultValue?: string;
+    /**
+     * inputValidation config for input field
+     *
+     * @version SDK: 0.0.1-alpha.3 | ThoughtSpot:
+     */
+    inputValidation?: InputValidation;
+}
+
+/**
+ * Number Form Element for the visual props editor
+ *
+ * @group Visual Properties Editor
+ */
+export interface NumberInputFormDetail {
+    type: 'number';
+    /**
+     * Key to store the value
+     *
+     * @version SDK: 0.0.1-alpha.7 | ThoughtSpot:
+     */
+    key: string;
+    /**
+     * I18n'ed string to show on the form label
+     *
+     * @version SDK: 0.0.1-alpha.7 | ThoughtSpot:
+     */
+    label?: string;
+    /**
+     * Default value
+     *
+     * @version SDK: 0.0.1-alpha.7 | ThoughtSpot:
+     */
+    defaultValue?: number;
+    /**
+     * inputValidation config for input field
+     *
+     * @version SDK: 0.0.1-alpha.7 | ThoughtSpot:
+     */
+    inputValidation?: InputValidation;
+}
+
+/**
+ * Color Picker Form Element for the visual props editor
+ *
+ * @group Visual Properties Editor
+ */
+export interface ColorPickerFormDetail {
+    type: 'colorpicker';
+    /**
+     * Key to store the value
+     *
+     * @version SDK: 0.0.1-alpha.7 | ThoughtSpot:
+     */
+    key: string;
+    /**
+     * I18n'ed string to show on the form label
+     *
+     * @version SDK: 0.0.1-alpha.7 | ThoughtSpot:
+     */
+    label?: string;
+    /**
+     * Display selected color with font or with color only
+     *
+     * @default COLOR
+     * @version SDK: 0.0.1-alpha.7 | ThoughtSpot:
+     */
+    selectorType?: 'FONT' | 'COLOR';
+    /**
+     * Default value
+     *
+     * @version SDK: 0.0.1-alpha.7 | ThoughtSpot:
+     */
+    defaultValue?: string;
 }
 
 /**
@@ -63,7 +190,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 +217,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 +244,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 +262,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 +277,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 +295,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 +303,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,11 +328,19 @@ 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:
      */
     alignment?: 'row' | 'column';
+    /**
+     * Defines form layout in the view for the section.
+     * default will be 'accordion' for first section if nothing specified
+     * and will be 'none' for all nested section.
+     *
+     * @version SDK: 0.0.1-alpha.3 | ThoughtSpot:
+     */
+    layoutType?: 'accordion' | 'tab' | 'none';
 }
 
 /**
@@ -216,6 +351,8 @@ export interface Section {
 export type PropElement =
     | Section
     | TextInputFormDetail
+    | NumberInputFormDetail
+    | ColorPickerFormDetail
     | ToggleFormDetail
     | CheckboxFormDetail
     | RadioButtonFormDetail