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

package/src/types/common.types.ts

@@ -7,6 +7,30 @@
  */
 
 import { ChartColumn } from './answer-column.types';
+import { ChartConfigEditorDefinition } from './configurator.types';
+import { VisualPropEditorDefinition } from './visual-prop.types';
+
+/**
+ * Defines types of features for which font can be customised with Custom style config used in TS.
+ * @remarks
+ * Use chartFeatureToFontGuid to get the guid for the feature and get the font face from guid
+ * from customFontFaces
+ */
+
+export enum CustomizableChartFeature {
+    X_AXIS_LABEL,
+    X_AXIS_TITLE,
+    Y_AXIS_LABEL,
+    Y_AXIS_TITLE,
+    TOOLTIP,
+    SCATTER_CHART,
+    PIE_CHART,
+    LINE_CHART,
+    COLUMN_CHART,
+    BAR_CHART,
+    AREA_CHART,
+    TAIL_FEATURE,
+}
 
 /**
  * List of Columns for a dimension in the Custom Chart Config.
@@ -140,6 +164,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;
@@ -149,26 +179,63 @@ 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 object is defined by the visual prop types. See VisualPropEditorDefinition.
+ * If there is any local state specific to charts needs to be maintained on save answer, store it
+ * in VisualProps, with visualProps.clientState variable. The clientState variable should be a
+ * string, preferrably a result of JSON.stringify(<yourlocalClientState>).
+ * @remark
+ * only values stored in clientSate variable will be preserved on changing the
+ * visualPropeditorDefinition, any other variable store would not be preserved
  * @group Chart Model
  * @version SDK: 0.1 | ThoughtSpot:
  */
-export type VisualProps = JSON;
+export type VisualProps = unknown;
+
+/**
+ * Custom Font Faces type from TS.
+ *
+ */
+
+export type CustomFontFaces = {
+    guid: string;
+    family?: string;
+    format?: string;
+    url?: string;
+    weight?: string;
+    style?: string;
+    size?: string;
+    unicodeRange?: string;
+    variant?: string;
+    stretch?: string;
+    color?: string;
+};
+
+/**
+ * Used for Custom color pallete and Custom font for charts defined in Style customisations
+ * inside thoughtspot admin or developer section
+ *
+ */
 
-// Todo: this should be imported from the custom style config package.
-type CustomStylingConfig = any;
+export type ChartSdkCustomStylingConfig = {
+    appBackground?: {
+        color?: string;
+    };
+    appPanelColor?: {
+        color?: string;
+    };
+    chartColorPalettes?: Array<{ colors: Array<string> }>;
+    disableColorRotation?: boolean;
+    chartFeatureToFontGuid?: Record<CustomizableChartFeature, string>;
+    customFontFaces?: Array<CustomFontFaces>;
+};
 
 export interface AppConfig {
-    /**
-     * @hidden
-     */
-    styleConfig?: CustomStylingConfig;
+    styleConfig?: ChartSdkCustomStylingConfig;
 
     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
     };
@@ -195,4 +262,9 @@ export interface AppConfig {
      * @hidden
      */
     customCalendarConfig?: any; // this is to initialize custom calendar service
+
+    /**
+     * Unique identifier for the customer. This is used to identify the customer
+     */
+    customerId?: string;
 }

package/src/types/conditional-formatting.types.ts

@@ -0,0 +1,172 @@
+/**
+ * @file: Conditional Formatting Types
+ * @fileoverview All CF types for the Custom Chart implementations
+ * @author Yashvardhan Nehra <yashvardhan.nehra@thoughtspot.com>
+ *
+ * Copyright: ThoughtSpot Inc. 2023
+ */
+
+export type Maybe<T> = T | null;
+export type InputMaybe<T> = Maybe<T>;
+
+export type ConditionalFormatting = {
+    __typename?: 'ConditionalFormatting';
+    rows?: Maybe<Array<Maybe<ConditionalMetric>>>;
+};
+export type Scalars = {
+    ID: string;
+    String: string;
+    Boolean: boolean;
+    Int: number;
+    Float: number;
+    FileUpload: any;
+    GUID: string;
+    JSON: {
+        [key: string]: any;
+    };
+    JSONObject: any;
+    Long: any;
+};
+export declare enum BackgroundFormatTypes {
+    Gradient = 'GRADIENT',
+    Solid = 'SOLID',
+}
+export enum ConditionalFormattingComparisonTypes {
+    ColumnBased = 'COLUMN_BASED',
+    ParameterBased = 'PARAMETER_BASED',
+    ValueBased = 'VALUE_BASED',
+}
+export type FontAttrs = {
+    __typename?: 'FontAttrs';
+    bold?: Maybe<Scalars['Boolean']>;
+    color?: Maybe<Scalars['String']>;
+    italic?: Maybe<Scalars['Boolean']>;
+    strikeThrough?: Maybe<Scalars['Boolean']>;
+    underline?: Maybe<Scalars['Boolean']>;
+};
+export type GradientBackgroundAttrs = {
+    __typename?: 'GradientBackgroundAttrs';
+    backgroundFormatMidpoint?: Maybe<Scalars['Float']>;
+    backgroundFormatRange?: Maybe<Array<Maybe<Scalars['Float']>>>;
+    colors?: Maybe<Array<Maybe<Scalars['String']>>>;
+};
+export enum Operators {
+    Contains = 'CONTAINS',
+    DoesNotContain = 'DOES_NOT_CONTAIN',
+    EndsWith = 'ENDS_WITH',
+    EqualTo = 'EQUAL_TO',
+    GreaterThan = 'GREATER_THAN',
+    GreaterThanEqualTo = 'GREATER_THAN_EQUAL_TO',
+    Is = 'IS',
+    IsBetween = 'IS_BETWEEN',
+    IsEmpty = 'IS_EMPTY',
+    IsNot = 'IS_NOT',
+    IsNotEmpty = 'IS_NOT_EMPTY',
+    IsNotNull = 'IS_NOT_NULL',
+    IsNull = 'IS_NULL',
+    LessThan = 'LESS_THAN',
+    LessThanEqualTo = 'LESS_THAN_EQUAL_TO',
+    NotEqualTo = 'NOT_EQUAL_TO',
+    StartsWith = 'STARTS_WITH',
+}
+export type SolidBackgroundAttrs = {
+    __typename?: 'SolidBackgroundAttrs';
+    color?: Maybe<Scalars['String']>;
+};
+export type Range = {
+    __typename?: 'Range';
+    max?: Maybe<Scalars['Float']>;
+    min?: Maybe<Scalars['Float']>;
+};
+export type ConditionalMetric = {
+    __typename?: 'ConditionalMetric';
+    backgroundFormatType?: Maybe<BackgroundFormatTypes>;
+    comparisonParameterId?: Maybe<Scalars['String']>;
+    comparisonType?: Maybe<ConditionalFormattingComparisonTypes>;
+    fontProperties?: Maybe<FontAttrs>;
+    gradientBackgroundAttrs?: Maybe<GradientBackgroundAttrs>;
+    isHighlightRow?: Maybe<Scalars['Boolean']>;
+    lhsColumnId?: Maybe<Scalars['String']>;
+    operator?: Maybe<Operators>;
+    plotAsBand?: Maybe<Scalars['Boolean']>;
+    rangeValues?: Maybe<Range>;
+    rhsColumnId?: Maybe<Scalars['String']>;
+    solidBackgroundAttrs?: Maybe<SolidBackgroundAttrs>;
+    value?: Maybe<Scalars['String']>;
+};
+
+export type Parameter = {
+    __typename?: 'Parameter';
+    dataType: FalconDataType;
+    defaultValue: Scalars['String'];
+    description: Scalars['String'];
+    id: Scalars['GUID'];
+    name: Scalars['String'];
+    /** If not present, the parameter has not been overridden */
+    overrideValue?: Maybe<Scalars['String']>;
+    owner: ParameterOwnerInfo;
+    valueList?: Maybe<Array<ParameterValueListItem>>;
+    valueRange?: Maybe<ParameterValueRange>;
+    valueType: ParameterValueType;
+};
+
+export enum FalconDataType {
+    Bool = 'BOOL',
+    Char = 'CHAR',
+    Date = 'DATE',
+    DateTime = 'DATE_TIME',
+    Double = 'DOUBLE',
+    Float = 'FLOAT',
+    Int32 = 'INT32',
+    Int64 = 'INT64',
+    List = 'LIST',
+    ListBool = 'LIST_BOOL',
+    ListDate = 'LIST_DATE',
+    ListDateTime = 'LIST_DATE_TIME',
+    ListDouble = 'LIST_DOUBLE',
+    ListInt = 'LIST_INT',
+    ListString = 'LIST_STRING',
+    ListTime = 'LIST_TIME',
+    MaxType = 'MAX_TYPE',
+    Time = 'TIME',
+    Unknown = 'UNKNOWN',
+}
+export type ParameterOwnerInfo = {
+    __typename?: 'ParameterOwnerInfo';
+    id: Scalars['GUID'];
+    name: Scalars['String'];
+    type: ParameterOwnerType;
+};
+
+export enum ParameterOwnerType {
+    Answer = 'ANSWER',
+    Worksheet = 'WORKSHEET',
+}
+
+export type ParameterValueListItem = {
+    __typename?: 'ParameterValueListItem';
+    displayAs?: Maybe<Scalars['String']>;
+    value: Scalars['String'];
+};
+
+export type ParameterValueListItemInput = {
+    displayAs?: InputMaybe<Scalars['String']>;
+    value: Scalars['String'];
+};
+
+export type ParameterValueRange = {
+    __typename?: 'ParameterValueRange';
+    max?: Maybe<Scalars['Float']>;
+    min?: Maybe<Scalars['Float']>;
+};
+
+export type ParameterValueRangeInput = {
+    max?: InputMaybe<Scalars['Float']>;
+    min?: InputMaybe<Scalars['Float']>;
+};
+
+export enum ParameterValueType {
+    Any = 'ANY',
+    List = 'LIST',
+    Range = 'RANGE',
+}

package/src/types/configurator.types.ts

@@ -14,6 +14,8 @@
  * Copyright: ThoughtSpot Inc. 2023
  */
 
+import { CustomChartContext } from '../main/custom-chart-context';
+import { ChartModel } from './common.types';
 /**
  *
  * @group Chart Configuration Editor
@@ -68,6 +70,20 @@ export interface ChartConfigSection {
      * @version SDK: 0.1 | ThoughtSpot:
      */
     allowTimeSeriesColumns?: boolean;
+    /**
+     * Allow measure name Column on the Section
+     *
+     * @default true
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    allowMeasureNameColumn?: boolean;
+    /**
+     * Allow measure value Column on the Section
+     *
+     * @default true
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    allowMeasureValueColumn?: boolean;
 }
 
 /**
@@ -100,3 +116,8 @@ export interface ChartConfigEditorDefinition {
      */
     columnSections: ChartConfigSection[];
 }
+
+export type ConfigEditorDefinitionSetter = (
+    currentState: ChartModel,
+    ctx: CustomChartContext,
+) => ChartConfigEditorDefinition[];

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

@@ -1,3 +1,4 @@
+import { AllowedConfigurations } from '../main/custom-chart-context';
 import { ChartColumn } from './answer-column.types';
 import { Point } from './chart-to-ts-event.types';
 import {
@@ -159,6 +160,13 @@ export interface InitializeEventPayload {
      * @version SDK: 0.1 | ThoughtSpot:
      */
     hostUrl: string;
+    /**
+     * The selector of the container element where the chart will be rendered. Used for internal
+     * charts, external custom charts mostly have their own DOM.
+     *
+     * @version SDK: 0.2 | ThoughtSpot:
+     */
+    containerElSelector: string;
 }
 
 /**
@@ -191,6 +199,13 @@ export interface InitializeEventResponsePayload {
      * @version SDK: 0.1 | ThoughtSpot:
      */
     visualPropEditorDefinition?: VisualPropEditorDefinition;
+    /**
+     * Toggle native configurations supported by TS UI. Ex: column level number and conditional
+     * formatting.
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    allowedConfigurations?: AllowedConfigurations;
 }
 
 /**

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

@@ -8,6 +8,8 @@
  * Copyright: ThoughtSpot Inc. 2023
  */
 
+import { CustomChartContext } from '../main/custom-chart-context';
+import { ChartModel } from './common.types';
 /**
  * Configuration for input validation rules
  */
@@ -373,6 +375,11 @@ export interface VisualPropEditorDefinition {
     elements: PropElement[];
 }
 
+export type VisualEditorDefinitionSetter = (
+    currentState: ChartModel,
+    ctx: CustomChartContext,
+) => VisualPropEditorDefinition;
+
 /**
  * Example config to be able to store config in the following keys
  * 1. range.xaxis.min