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

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/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
  *
@@ -53,6 +107,12 @@ 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;
 }
 
 /**
@@ -206,6 +266,14 @@ export interface 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';
 }
 
 /**