@thoughtspot/ts-chart-sdk 0.0.1-alpha.3 → 0.0.1-alpha.6

package/src/react/use-custom-chart-context.util.ts

@@ -0,0 +1,101 @@
+import _ from 'lodash';
+import { CustomChartContext } from '../main/custom-chart-context';
+import {
+    ChartToTSEvent,
+    ChartToTSEventsPayloadMap,
+} from '../types/chart-to-ts-event.types';
+import {
+    TSToChartEvent,
+    TSToChartEventsPayloadMap,
+} from '../types/ts-to-chart-event.types';
+import {
+    ChartToTSEventEmitters,
+    TSToChartEventListener,
+    TSToChartEventOffListener,
+} from './use-custom-chart-types';
+
+/**
+ *
+ * @param ctx Custom Chart Context
+ * @returns List of event emitters
+ */
+export const emitter = (ctx: CustomChartContext): ChartToTSEventEmitters => {
+    const validEvents = Object.keys(
+        ChartToTSEvent,
+    ) as (keyof ChartToTSEventsPayloadMap)[];
+    return validEvents.reduce((acc, eventKey) => {
+        const eventName = eventKey as keyof ChartToTSEventsPayloadMap;
+        const emitterKey = `emit${eventKey}` as keyof ChartToTSEventEmitters;
+
+        acc[emitterKey] = (
+            ...args: ChartToTSEventsPayloadMap[keyof ChartToTSEventsPayloadMap]
+        ): Promise<void> => {
+            if (!ctx || _.isEmpty(ctx)) {
+                console.log('Context is not initialized');
+                return Promise.reject(new Error('Context not initialized'));
+            }
+            return ctx.emitEvent(eventName, ...args);
+        };
+
+        return acc;
+    }, {} as ChartToTSEventEmitters);
+};
+
+/**
+ *
+ * @param ctx Custom Chart Context
+ * @returns List of event listeners
+ */
+export const eventListener = (
+    ctx: CustomChartContext,
+): TSToChartEventListener => {
+    const validEvents = Object.keys(
+        TSToChartEvent,
+    ) as (keyof TSToChartEventsPayloadMap)[];
+    return validEvents.reduce((acc, eventKey) => {
+        const eventName = eventKey as keyof TSToChartEventsPayloadMap;
+        const emitterKey = `setOn${eventKey}` as keyof TSToChartEventListener;
+
+        acc[emitterKey] = (
+            callbackFn: TSToChartEventsPayloadMap[keyof TSToChartEventsPayloadMap],
+        ): Promise<void> => {
+            if (!ctx || _.isEmpty(ctx)) {
+                console.log('Context is not initialized');
+                return Promise.reject(new Error('Context not initialized'));
+            }
+            ctx.on(eventName, callbackFn);
+            return Promise.resolve();
+        };
+
+        return acc;
+    }, {} as TSToChartEventListener);
+};
+
+/**
+ *
+ * @param ctx Custom Chart Context
+ * @returns List of event listeners
+ */
+export const eventOffListener = (
+    ctx: CustomChartContext,
+): TSToChartEventOffListener => {
+    const validEvents = Object.keys(
+        TSToChartEvent,
+    ) as (keyof TSToChartEventsPayloadMap)[];
+    return validEvents.reduce((acc, eventKey) => {
+        const eventName = eventKey as keyof TSToChartEventsPayloadMap;
+        const emitterKey =
+            `setOff${eventKey}` as keyof TSToChartEventOffListener;
+
+        acc[emitterKey] = (): Promise<void> => {
+            if (!ctx || _.isEmpty(ctx)) {
+                console.log('Context is not initialized');
+                return Promise.reject(new Error('Context not initialized'));
+            }
+            ctx.off(eventName);
+            return Promise.resolve();
+        };
+
+        return acc;
+    }, {} as TSToChartEventOffListener);
+};

package/src/react/use-custom-chart-types.ts

@@ -0,0 +1,70 @@
+import React from 'react';
+import { ChartToTSEventsPayloadMap } from '../types/chart-to-ts-event.types';
+import { ChartModel } from '../types/common.types';
+import { TSToChartEventsPayloadMap } from '../types/ts-to-chart-event.types';
+
+/**
+ * For all events that we trigger from React Chart to TS Host,
+ * this enum provides the trigger functions for each event.
+ * All the trigger functions have a prefix of emit.
+ */
+export type ChartToTSEventEmitters = {
+    [key in keyof ChartToTSEventsPayloadMap as `emit${Capitalize<key>}`]: (
+        ...args: ChartToTSEventsPayloadMap[key]
+    ) => Promise<void>;
+};
+
+/**
+ * For all events that we trigger from TS Host to React Chart,
+ * this enum provides the event listener on functions for each external event listener.
+ * All the event listener functions have a prefix of on.
+ */
+export type TSToChartEventListener = {
+    [key in keyof TSToChartEventsPayloadMap as `setOn${Capitalize<key>}`]: (
+        args: TSToChartEventsPayloadMap[key],
+    ) => Promise<void>;
+};
+
+/**
+ * For all events that we trigger from TS Host to React Chart,
+ * this enum provides the event listener on functions for each external event listener.
+ * All the event listener functions have a prefix of on.
+ */
+export type TSToChartEventOffListener = {
+    [key in keyof TSToChartEventsPayloadMap as `setOff${Capitalize<key>}`]: () => Promise<void>;
+};
+
+export interface TSChartContextProps {
+    /**
+     * Child App which renders chart
+     * wrapper is used to control rendering of child app
+     */
+    children: React.ReactNode;
+}
+
+export interface ChartContextProps
+    extends ChartToTSEventEmitters,
+        TSToChartEventListener,
+        TSToChartEventOffListener {
+    /**
+     * decides if the chart context is initialzed
+     */
+    hasInitialized: boolean;
+    /**
+     * chart model to be used by client having
+     * config, data and visual props
+     */
+    chartModel: ChartModel | undefined;
+    /**
+     * For destroying current chart context
+     * @returns void
+     */
+    destroy: () => void;
+    /**
+     * Parent component wrapped around chart app
+     * for controlling re-rendering of chart
+     * @param children
+     * @returns React.JSX.Element
+     */
+    TSChartContext: ({ children }: TSChartContextProps) => React.JSX.Element;
+}

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

@@ -40,6 +40,16 @@ export enum ChartToTSEvent {
      * Fetch data for custom query
      */
     GetDataForQuery = 'GetDataForQuery',
+
+    /**
+     * Show Tooltip events
+     */
+    ShowToolTip = 'ShowToolTip',
+
+    /**
+     * Hide Tooltip events
+     */
+    HideToolTip = 'HideToolTip',
 }
 
 /**
@@ -104,13 +114,25 @@ export interface ChartToTSEventsPayloadMap {
      * @version SDK: 0.1 | ThoughtSpot:
      */
     [ChartToTSEvent.GetDataForQuery]: [GetDataForQueryEventPayload];
+    /**
+     * Trigger to update the visual props
+     *
+     * @version SDK: 0.0.1-alpha.4 | ThoughtSpot:
+     */
+    [ChartToTSEvent.ShowToolTip]: [ShowToolTipEventPayload];
+    /**
+     * Trigger to update the visual props
+     *
+     * @version SDK: 0.0.1-alpha.4 | ThoughtSpot:
+     */
+    [ChartToTSEvent.HideToolTip]: [];
 }
 
 /**
  *
  * @group Chart to ThoughtSpot Events
  */
-interface UpdateVisualPropsEventPayload {
+export interface UpdateVisualPropsEventPayload {
     visualProps: VisualProps;
 }
 
@@ -173,10 +195,33 @@ export interface OpenContextMenuEventPayload {
 }
 // end - open context menu payload
 
+/**
+ * Payload for the event triggered to show a tooltip
+ */
+export interface ShowToolTipEventPayload {
+    /**
+     * The pointer event that triggered the tooltip display
+     * It includes the client's X and Y coordinates.
+     */
+    event: Pick<PointerEvent, 'clientX' | 'clientY'>;
+    /**
+     * Optional custom content to display in the tooltip.
+     */
+    customTooltipContent?: string[];
+    /**
+     * Information about the data point associated
+     * with the tooltip
+     * User can also include both point and customTooltipContent
+     * depending upon the requirement
+     */
+    point?: Point;
+}
+// end - tooltip payload
+
 /**
  * @group Chart to ThoughtSpot Events
  */
-interface RenderErrorEventPayload {
+export interface RenderErrorEventPayload {
     hasError: boolean;
     error: any;
 }

package/dist/ts-chart-sdk.d.ts

@@ -1,312 +0,0 @@
-// Generated by dts-bundle v0.7.3
-
-export interface ChartConfigDimension {
-    key: string;
-    columns: ChartColumn[];
-}
-export interface ChartConfig {
-    key: string;
-    dimensions: ChartConfigDimension[];
-}
-export type DataArray = {
-    columnId: string;
-    columnDataType: DataType;
-    dataValue: any[];
-};
-export type QueryData = {
-    data: DataArray[];
-    completionRatio: number;
-    samplingRatio: number;
-    totalRowCount: number;
-};
-export interface ChartModel {
-    columns: ChartColumn[];
-    data?: QueryData[];
-    sortInfo?: any;
-    visualProps?: VisualProps;
-    config: {
-        chartConfig?: ChartConfig[];
-    };
-}
-export type ValidationResponse = {
-    isValid: boolean;
-    validationErrorMessage?: string[];
-};
-export type VisualProps = JSON;
-type CustomStylingConfig = any;
-export interface AppConfig {
-    styleConfig?: CustomStylingConfig;
-    appOptions?: {
-        isMobile?: boolean;
-        isPrintMode?: boolean;
-        isDebugMode?: boolean;
-    };
-    localeOptions?: {
-        locale: string;
-        quarterStartMonth: string;
-        sessionTimezone: string;
-    };
-    customCalendarConfig?: any;
-}
-export {};
-
-export interface ChartConfigSection {
-    key: string;
-    label: string;
-    maxColumnCount?: number;
-    allowMeasureColumns?: boolean;
-    allowAttributeColumns?: boolean;
-    allowTimeSeriesColumns?: boolean;
-}
-export interface ChartConfigEditorDefinition {
-    key: string;
-    label?: string;
-    descriptionText?: string;
-    columnSections: ChartConfigSection[];
-}
-
-export interface TextInputFormDetail {
-    type: 'text';
-    key: string;
-    label?: string;
-    password?: boolean;
-    multiline?: boolean;
-    placeholder?: string;
-    defaultValue?: string;
-}
-export interface ToggleFormDetail {
-    type: 'toggle';
-    key: string;
-    label?: string;
-    defaultValue?: boolean;
-}
-export interface CheckboxFormDetail {
-    type: 'checkbox';
-    key: string;
-    label?: string;
-    defaultValue?: boolean;
-}
-export interface RadioButtonFormDetail {
-    type: 'radio';
-    key: string;
-    label?: string;
-    defaultValue?: string;
-    values: string[];
-}
-export interface DropDownFormDetail {
-    type: 'dropdown';
-    key: string;
-    label?: string;
-    defaultValue?: string;
-    values: string[];
-}
-export interface Section {
-    type: 'section';
-    key: string;
-    label?: string;
-    children?: PropElement[];
-    alignment?: 'row' | 'column';
-}
-export type PropElement = Section | TextInputFormDetail | ToggleFormDetail | CheckboxFormDetail | RadioButtonFormDetail | DropDownFormDetail;
-export interface VisualPropEditorDefinition {
-    elements: PropElement[];
-}
-
-export enum ColumnType {
-    UNKNOWN = 0,
-    MEASURE = 1,
-    ATTRIBUTE = 2
-}
-export enum DataType {
-    UNKNOWN = 0,
-    BOOL = 1,
-    CHAR = 2,
-    INT32 = 3,
-    INT64 = 4,
-    FLOAT = 5,
-    DOUBLE = 6,
-    DATE = 7,
-    DATE_TIME = 8,
-    TIME = 9,
-    MAX_TYPE = 10
-}
-export enum ColumnTimeBucket {
-    NO_BUCKET = 0,
-    DAILY = 1,
-    WEEKLY = 2,
-    MONTHLY = 3,
-    QUARTERLY = 4,
-    YEARLY = 5,
-    HOURLY = 6,
-    AUTO = 7,
-    HOUR_OF_DAY = 8,
-    DAY_OF_WEEK = 9,
-    DAY_OF_MONTH = 10,
-    DAY_OF_QUARTER = 11,
-    DAY_OF_YEAR = 12,
-    WEEK_OF_MONTH = 13,
-    WEEK_OF_QUARTER = 14,
-    WEEK_OF_YEAR = 15,
-    MONTH_OF_QUARTER = 16,
-    MONTH_OF_YEAR = 17,
-    QUARTER_OF_YEAR = 18
-}
-export enum FormatType {
-    NONE = 0,
-    PATTERN = 1,
-    PERCENTAGE = 2,
-    CURRENCY = 3
-}
-export enum CurrencyFormatType {
-    USER_LOCALE = 0,
-    COLUMN = 1,
-    ISO_CODE = 2
-}
-export interface CurrencyFormat {
-    type: CurrencyFormatType;
-    column: string;
-    isoCode: string;
-}
-export interface ColumnFormat {
-    type: FormatType;
-    pattern?: string;
-    currencyFormat?: CurrencyFormat;
-}
-export interface ChartColumn {
-    id: string;
-    name: string;
-    type: ColumnType;
-    timeBucket: ColumnTimeBucket;
-    dataType: DataType;
-    format?: ColumnFormat;
-}
-
-export enum ChartToTSEvent {
-    OpenContextMenu = "OpenContextMenu",
-    CloseContextMenu = "CloseContextMenu",
-    OpenAxisMenu = "OpenAxisMenu",
-    CloseAxisMenu = "CloseAxisMenu",
-    RenderStart = "RenderStart",
-    RenderError = "RenderError",
-    RenderComplete = "RenderComplete",
-    UpdateVisualProps = "UpdateVisualProps"
-}
-export interface ChartToTSEventsPayloadMap {
-    [ChartToTSEvent.OpenContextMenu]: OpenContextMenuEventPayload;
-    [ChartToTSEvent.CloseContextMenu]: null;
-    [ChartToTSEvent.RenderStart]: null;
-    [ChartToTSEvent.RenderComplete]: null;
-    [ChartToTSEvent.RenderError]: RenderErrorEventPayload;
-    [ChartToTSEvent.UpdateVisualProps]: UpdateVisualPropsEventPayload;
-}
-type UpdateVisualPropsEventPayload = VisualProps;
-export interface PointVal {
-    columnId: string;
-    value: any;
-}
-export interface Point {
-    tuple: PointVal[];
-}
-export interface CustomAction {
-    id: string;
-    label: string;
-    icon: string;
-    onClick: (...args: any[]) => void;
-}
-export interface OpenContextMenuEventPayload {
-    event: Pick<PointerEvent, 'x' | 'y' | 'clientX' | 'clientY' | 'pageX' | 'pageY' | 'screenX' | 'screenY'>;
-    clickedPoint: Point;
-    selectedPoints?: Point[];
-    customActions?: CustomAction[];
-}
-interface RenderErrorEventPayload {
-    hasError: boolean;
-    error: any;
-}
-export enum ErrorType {
-    MultipleContextsNotSupported = "MultipleContextsNotSupported"
-}
-export {};
-
-export enum TSToChartEvent {
-    Initialize = "Initialize",
-    GetDataQuery = "GetDataQuery",
-    ChartConfigValidate = "ChartConfigValidate",
-    ChartModelUpdate = "ChartModelUpdate",
-    DataUpdate = "DataUpdate",
-    TriggerRenderChart = "TriggerRenderChart",
-    VisualPropsValidate = "VisualPropsValidate",
-    VisualPropsUpdate = "VisualPropsUpdate"
-}
-export interface TSToChartEventsPayloadMap {
-    [TSToChartEvent.ChartModelUpdate]: (payload: ChartModelUpdateEventPayload) => void;
-    [TSToChartEvent.DataUpdate]: (payload: DataUpdateEventPayload) => void;
-    [TSToChartEvent.VisualPropsUpdate]: (payload: VisualPropsUpdateEventPayload) => void;
-}
-export interface TSToChartInternalEventsPayloadMap {
-    [TSToChartEvent.Initialize]: (payload: InitializeEventPayload) => InitializeEventResponsePayload;
-    [TSToChartEvent.GetDataQuery]: (payload: GetDataQueryPayload) => GetDataQueryResponsePayload;
-    [TSToChartEvent.ChartConfigValidate]: (payload: ChartConfigValidateEventPayload) => ValidationResponse;
-    [TSToChartEvent.VisualPropsValidate]: (payload: VisualPropsValidateEventPayload) => ValidationResponse;
-    [TSToChartEvent.TriggerRenderChart]: () => void;
-}
-export interface InitializeEventPayload {
-    chartModel: ChartModel;
-    appConfig?: AppConfig;
-    componentId: string;
-    hostUrl: string;
-}
-export interface InitializeEventResponsePayload {
-    isConfigValid: boolean;
-    defaultChartConfig: ChartConfig[];
-    chartConfigEditorDefinition?: ChartConfigEditorDefinition[];
-    visualPropEditorDefinition?: VisualPropEditorDefinition;
-}
-export interface GetDataQueryPayload {
-    config: ChartConfig[];
-}
-export interface Query {
-    queryColumns: ChartColumn[];
-    queryParams?: {
-        offset?: number;
-        size?: number;
-    };
-}
-export interface GetDataQueryResponsePayload {
-    queries: Query[];
-}
-export interface ChartModelUpdateEventPayload {
-    chartModel: ChartModel;
-}
-export interface DataUpdateEventPayload {
-    data: QueryData[];
-}
-export interface VisualPropsUpdateEventPayload {
-    visualProps: VisualProps;
-}
-export interface VisualPropsValidateEventPayload {
-    visualProps: VisualProps;
-}
-export interface ChartConfigValidateEventPayload {
-    chartConfig: ChartConfig[];
-}
-
-export type CustomChartContextProps = {
-    getDefaultChartConfig: (chartModel: ChartModel) => ChartConfig[];
-    getQueriesFromChartConfig: (chartConfig: ChartConfig[]) => Query[];
-    renderChart: (ctx: CustomChartContext) => Promise<void>;
-    validateConfig?: (updatedConfig: ChartConfig[], chartModel: ChartModel) => ValidationResponse;
-    validateVisualProps?: (updatedVisualProps: VisualProps, chartModel: ChartModel) => ValidationResponse;
-    chartConfigEditorDefinition?: ChartConfigEditorDefinition[];
-    visualPropEditorDefinition?: VisualPropEditorDefinition;
-};
-export class CustomChartContext {
-    constructor(chartContextProps: CustomChartContextProps);
-    initialize: () => Promise<void>;
-    on<T extends keyof TSToChartEventsPayloadMap>(eventType: T, callbackFn: TSToChartEventsPayloadMap[T]): void;
-    destroy(): void;
-    getChartModel: () => ChartModel;
-    emitEvent<T extends keyof ChartToTSEventsPayloadMap>(eventType: T, eventPayload: ChartToTSEventsPayloadMap[T]): Promise<any>;
-}
-export const getChartContext: (customChartConfig: CustomChartContextProps) => Promise<CustomChartContext>;
-