@thoughtspot/ts-chart-sdk 0.0.2-alpha.1 → 0.0.2-alpha.11

package/src/test/test-conditional-formatting-utils.ts

@@ -0,0 +1,95 @@
+/**
+ * @file: Test Conditional Formatting Utils
+ *
+ * @author Yashvardhan Nehra <yashvardhan.nehra@thoughtspot.com>
+ *
+ * Copyright: ThoughtSpot Inc. 2023
+ */
+import {
+    BackgroundFormatTypes,
+    ConditionalFormattingComparisonTypes,
+    ConditionalMetric,
+    Operators,
+} from '../types/conditional-formatting.types';
+
+/**
+ * Creates a metric operator for conditional formatting.
+ *
+ * @param operator - The operator to use for the metric (e.g., LessThan, GreaterThan).
+ * @param lhsColumnId - (Optional) The ID of the left-hand side column.
+ * @param rhsColumnId - (Optional) The ID of the right-hand side column.
+ * @param comparisonParameterId - (Optional) The ID of the comparison parameter.
+ * @param comparisonType - The type of comparison to use (default is ValueBased).
+ * @returns A ConditionalMetric object configured with the specified parameters.
+ */
+export const createMetricOperator = (
+    operator: Operators,
+    lhsColumnId?: string,
+    rhsColumnId?: string,
+    comparisonParameterId?: string,
+    comparisonType = ConditionalFormattingComparisonTypes.ValueBased,
+): ConditionalMetric => {
+    return {
+        solidBackgroundAttrs: {
+            color: '#000',
+        },
+        backgroundFormatType: 'SOLID' as BackgroundFormatTypes,
+        operator,
+        value: '200',
+        plotAsBand: false,
+        comparisonParameterId,
+        comparisonType,
+        lhsColumnId,
+        rhsColumnId,
+    };
+};
+
+/**
+ * Creates a between metric operator for conditional formatting.
+ *
+ * @param operator - The operator to use for the metric (e.g., IsBetween).
+ * @param min - The minimum value for the range (default is 100).
+ * @param max - The maximum value for the range (default is 200).
+ * @returns A ConditionalMetric object configured with the specified parameters.
+ */
+export const createBetweenMetricOperator = (
+    operator: Operators,
+    min = 100,
+    max = 200,
+): ConditionalMetric => {
+    return {
+        backgroundFormatType: 'SOLID' as BackgroundFormatTypes,
+        solidBackgroundAttrs: {
+            color: '#000',
+        },
+        operator,
+        rangeValues: {
+            min,
+            max,
+        },
+        plotAsBand: false,
+        lhsColumnId: undefined,
+        rhsColumnId: undefined,
+        comparisonParameterId: undefined,
+        comparisonType: ConditionalFormattingComparisonTypes.ValueBased,
+    };
+};
+
+/**
+ * Creates an attribute operator for conditional formatting.
+ *
+ * @param operator - The operator to use for the attribute (e.g., Is, IsNot).
+ * @param comparisonType - (Optional) The type of comparison to use.
+ * @returns A ConditionalMetric object configured with the specified parameters.
+ */
+export const createAttributeOperator = (
+    operator: Operators,
+    comparisonType?: ConditionalFormattingComparisonTypes,
+): ConditionalMetric => {
+    return {
+        backgroundFormatType: 'SOLID' as BackgroundFormatTypes,
+        operator,
+        value: 'check attribute',
+        comparisonType,
+    };
+};

package/src/types/answer-column.types.ts

@@ -1,7 +1,21 @@
+import { ConditionalFormatting, Maybe } from './conditional-formatting.types';
+
 export enum ColumnType {
     UNKNOWN,
     MEASURE,
     ATTRIBUTE,
+    // Virtual columns that are measure name/value columns
+    VIRTUAL,
+}
+
+/**
+ * When the column is generated for the chart for creating views,
+ * on top of measure columns from the worksheet which are part of answer query.
+ */
+export enum ChartSpecificColumnType {
+    UNKNOWN,
+    MEASURE_NAMES,
+    MEASURE_VALUES,
 }
 
 /**
@@ -71,6 +85,51 @@ export enum CurrencyFormatType {
     ISO_CODE,
 }
 
+/**
+ * Type of aggregations applied on the column data
+ *
+ * @version SDK: 0.1 | ThoughtSpot:
+ */
+export enum ColumnAggregationType {
+    AGGREGATE,
+    AGGREGATE_DISTINCT,
+    APPROX_AGGR_DISTINCT,
+    APPROX_AGGR_DISTINCT_MERGE,
+    APPROX_COUNT_DISTINCT,
+    AVERAGE,
+    COUNT,
+    COUNT_DISTINCT,
+    CUMULATIVE_AVERAGE,
+    CUMULATIVE_COUNT,
+    CUMULATIVE_MAX,
+    CUMULATIVE_MIN,
+    CUMULATIVE_SUM,
+    GROWTH,
+    MAX,
+    MEDIAN,
+    MIN,
+    MOVING_AVERAGE,
+    MOVING_COUNT,
+    MOVING_MAX,
+    MOVING_MIN,
+    MOVING_SUM,
+    NONE,
+    PERCENTILE,
+    RANK,
+    RANK_PERCENTILE,
+    SQL_BOOL_AGGREGATE_OP,
+    SQL_DATE_AGGREGATE_OP,
+    SQL_DATE_TIME_AGGREGATE_OP,
+    SQL_DOUBLE_AGGREGATE_OP,
+    SQL_INT_AGGREGATE_OP,
+    SQL_STRING_AGGREGATE_OP,
+    SQL_TIME_AGGREGATE_OP,
+    STD_DEVIATION,
+    SUM,
+    TABLE_AGGR,
+    VARIANCE,
+}
+
 /**
  * Currency format for the column defined in the worksheet
  *
@@ -171,4 +230,43 @@ export interface ChartColumn {
      * @version SDK: 0.1 | ThoughtSpot:
      */
     format?: ColumnFormat;
+
+    /**
+     * Column Properties of the columns
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    columnProperties?: {
+        conditionalFormatting?: Maybe<ConditionalFormatting>;
+    };
+
+    /**
+     * Aggregation applied on the column data
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    aggregationType?: ColumnAggregationType;
+
+    /**
+     * Custom sort order defined for the column to sort charts in a specific order
+     * Defined in worksheet
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    customOrder?: Array<string>;
+
+    /**
+     * Guid of Custom calender for the column if defined in worksheet else null
+     *
+     * @version SDK: 0.1 | ThoughtSpot: sdcwdc
+     */
+    calenderGuid?: string;
+
+    /**
+     * Type of arbitrary column, can be measure names or measure values
+     * also, unknown if regular column
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    chartSpecificColumnType: ChartSpecificColumnType;
 }

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,21 +179,58 @@ 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;
 
-// Todo: this should be imported from the custom style config package.
-type CustomStylingConfig = any;
+/**
+ * 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
+ *
+ */
+
+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;
@@ -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

@@ -200,7 +200,8 @@ export interface InitializeEventResponsePayload {
      */
     visualPropEditorDefinition?: VisualPropEditorDefinition;
     /**
-     * Toggle native configurations supported by TS UI. Ex: column level number and conditional formatting.
+     * Toggle native configurations supported by TS UI. Ex: column level number and conditional
+     * formatting.
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */

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