@sisense/sdk-ui 1.8.0 → 1.10.0

package/dist/types.d.ts

@@ -328,6 +328,14 @@ export interface PivotTableStyleOptions {
      * Boolean flag whether to apply background color to alternate columns
      */
     alternatingColumnsColor?: boolean;
+    /**
+     * Boolean flag whether to fill row members cells with background color
+     */
+    membersColor?: boolean;
+    /**
+     * Boolean flag whether to fill totals and subtotals cells with background color
+     */
+    totalsColor?: boolean;
     /**
      * Number of rows per page
      *
@@ -356,6 +364,10 @@ export interface PivotTableStyleOptions {
      * Boolean flag whether the height of the component should be automatically adjusted to fit the content
      */
     isAutoHeight?: boolean;
+    /**
+     * Manual height of each row (default is 25px)
+     */
+    rowHeight?: number;
 }
 /**
  * Common part of IndicatorStyleOptions for all types of indicator
@@ -561,7 +573,9 @@ export interface ThemeSettings {
     typography?: {
         /** Font family name to style component text */
         fontFamily?: string;
+        /** Primary text color */
         primaryTextColor?: string;
+        /** Secondary text color */
         secondaryTextColor?: string;
     };
     /** General theme settings */
@@ -575,6 +589,155 @@ export interface ThemeSettings {
         /** Hover color for primary buttons */
         primaryButtonHoverColor?: string;
     };
+    /**
+     * Theme settings specific to the AI Chatbot component
+     *
+     * @internal
+     */
+    aiChat?: {
+        /** Background color of the chatbot */
+        backgroundColor?: string;
+        /** Text color of the chatbot */
+        primaryTextColor?: string;
+        /** Secondary text color of the chatbot */
+        secondaryTextColor?: string;
+        /** Primary font size for text in the chatbot */
+        primaryFontSize?: [fontSize: string, lineHeight: string];
+        /** Border of the chatbot */
+        border?: false | string;
+        /** Border radius of the chatbot */
+        borderRadius?: false | string;
+        /** Settings for the main chat body */
+        body?: {
+            /** Left padding of the chat body */
+            paddingLeft?: string;
+            /** Right padding of the chat body */
+            paddingRight?: string;
+            /** Top padding of the chat body */
+            paddingTop?: string;
+            /** Bottom padding of the chat body */
+            paddingBottom?: string;
+            /** Gap size between each message in the chat body */
+            gapBetweenMessages?: string;
+        };
+        /** Settings for the chat footer */
+        footer?: {
+            /** Left padding of the chat footer */
+            paddingLeft?: string;
+            /** Right padding of the chat footer */
+            paddingRight?: string;
+            /** Top padding of the chat footer */
+            paddingTop?: string;
+            /** Bottom padding of the chat footer */
+            paddingBottom?: string;
+        };
+        /** Settings for user chat messages */
+        userMessages?: {
+            /** Background color of user chat messages */
+            backgroundColor?: string;
+        };
+        /** Settings for system chat messages */
+        systemMessages?: {
+            /** Background color of system chat messages */
+            backgroundColor?: string;
+        };
+        /** Settings for the chatbot input */
+        input?: {
+            /** Background color of the input */
+            backgroundColor?: string;
+            /** Settings to be applied on input focus */
+            focus?: {
+                /** Outline color of the input */
+                outlineColor?: string;
+            };
+        };
+        /** Settings for the chatbot header */
+        header?: {
+            /** Background color of the chatbot header */
+            backgroundColor?: string;
+            /** Text color of the chatbot header */
+            textColor?: string;
+        };
+        /** Settings for chatbot dropup */
+        dropup?: {
+            /** Background color of the dropup */
+            backgroundColor?: string;
+            /** Box shadow of the dropup */
+            boxShadow?: string;
+            /** Border radius of the dropup */
+            borderRadius?: string;
+            /** Settings for the section headers of the dropup */
+            headers?: {
+                /** Text color of headers */
+                textColor?: string;
+                /** Settings to be applied on hover of the headers */
+                hover?: {
+                    /** Background color of headers on hover */
+                    backgroundColor?: string;
+                };
+            };
+            /** Settings for the dropup items */
+            items?: {
+                /** Text color of the dropup items */
+                textColor?: string;
+                /** Settings to be applied on hover of dropup items */
+                hover?: {
+                    /** Background color of dropup items on hover */
+                    backgroundColor?: string;
+                };
+            };
+        };
+        /** Settings for the chatbot suggestions */
+        suggestions?: {
+            /** Text color of the chatbot suggestions */
+            textColor?: string;
+            /** Background color of the chatbot suggestions */
+            backgroundColor?: string;
+            /** Border of the chatbot suggestions */
+            border?: string;
+            /** 2-color gradient to be applied on the border */
+            borderGradient?: [string, string] | null;
+            /** Border radius of the chatbot suggestions */
+            borderRadius?: string;
+            /** Setting to be applied on hover */
+            hover?: {
+                /** Background color of the chatbot suggestions on hover */
+                backgroundColor?: string;
+                /** Text color of the chatbot suggestions on hover */
+                textColor?: string;
+            };
+            /** 2-color gradient to be applied on suggestions loading animation */
+            loadingGradient?: [string, string];
+            /** Gap size between each suggestion item */
+            gap?: string;
+        };
+        /** Settings for the chatbot clickable messages */
+        clickableMessages?: {
+            /** Background color of the chatbot clickable messages */
+            backgroundColor?: string;
+            /** Text color of the chatbot clickable messages */
+            textColor?: string;
+            /** Border of the chatbot clickable messages */
+            border?: false | string;
+            /** Setting to be applied on hover */
+            hover?: {
+                /** Text color of the chatbot clickable messages on hover */
+                textColor?: string;
+                /** Background color of the chatbot clickable messages on hover */
+                backgroundColor?: string;
+            };
+        };
+        /** Settings for the chatbot icons */
+        icons?: {
+            /** Color of the chatbot icons */
+            color?: string;
+            /** Setting to be applied on hover */
+            hover?: {
+                /** Color of the chatbot icons on hover */
+                color?: string;
+            };
+        };
+    };
 }
 /**
  * Complete set of theme settings defining the look and feel of components.
@@ -649,11 +812,17 @@ export interface DashboardWidgetStyleOptions extends WidgetStyleOptions {
 /** Style settings defining the look and feel of ChartWidget */
 export type ChartWidgetStyleOptions = ChartStyleOptions & WidgetStyleOptions;
 /**
- * Style settings defining the look and feel of TableWidget}
+ * Style settings defining the look and feel of TableWidget
  *
  * @internal
  */
 export type TableWidgetStyleOptions = TableStyleOptions & WidgetStyleOptions;
+/**
+ * Style settings defining the look and feel of TableWidget
+ *
+ * @internal
+ */
+export type PivotTableWidgetStyleOptions = PivotTableStyleOptions & WidgetStyleOptions;
 /**
  * Runs type guard check for ThemeOid.
  *

package/dist/widgets/common/context-menu.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { ContextMenuProps } from '../../props';
 /**
  * Context menu of a Drilldown Widget
  *
  * @group Drilldown
  */
-export declare const ContextMenu: ({ position, closeContextMenu, itemSections, children, }: ContextMenuProps) => JSX.Element;
+export declare const ContextMenu: ({ position, closeContextMenu, itemSections, children, }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/widgets/common/drilldown-breadcrumbs/styled-buttons.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 export declare const StyledPrevButton: import("@emotion/styled").StyledComponent<import("@mui/material/IconButton").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "style" | "children" | "disabled" | "size" | "className" | "tabIndex" | "color" | "action" | "classes" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & {
+}, "children" | "style" | "disabled" | "size" | "className" | "tabIndex" | "color" | "action" | "classes" | "sx" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const StyledNextButton: import("@emotion/styled").StyledComponent<import("@mui/material/IconButton").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "style" | "children" | "disabled" | "size" | "className" | "tabIndex" | "color" | "action" | "classes" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & {
+}, "children" | "style" | "disabled" | "size" | "className" | "tabIndex" | "color" | "action" | "classes" | "sx" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/dist/widgets/common/widget-container.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+import { WidgetStyleOptions } from '../../types';
+interface WidgetContainerProps {
+    dataSetName?: string;
+    styleOptions?: WidgetStyleOptions;
+    title?: string;
+    description?: string;
+    topSlot?: ReactNode;
+    bottomSlot?: ReactNode;
+    children: ReactNode;
+    onRefresh?: () => void;
+}
+/** @internal */
+export declare const WidgetContainer: React.FC<WidgetContainerProps>;
+export {};

package/dist/widgets/common/widget-header-info-button.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { WidgetStyleOptions } from '../../types';
 export default function WidgetHeaderInfoButton({ title, description, styleOptions, onRefresh, }: {
     title?: string;
     description?: string;
     styleOptions?: WidgetStyleOptions['header'];
     onRefresh: () => void;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/widgets/drilldown-widget.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DrilldownWidgetProps } from '../props';
 /**
  * React component designed to add drilldown functionality to any type of chart.
@@ -29,10 +28,10 @@ import { DrilldownWidgetProps } from '../props';
  *
  * Additional drilldown examples:
  *
- * - [Detached Breadcrumbs](https://csdk-playground.sisense.com/?example=use-cases%2Fdrilldown-detached-breadcrumbs)
+ * - [Detached Breadcrumbs](https://www.sisense.com/platform/compose-sdk/playground/?example=use-cases%2Fdrilldown-detached-breadcrumbs)
  *
  * @param props - DrilldownWidget properties
  * @returns DrilldownWidget wrapper component
  * @group Drilldown
  */
-export declare const DrilldownWidget: ({ drilldownDimensions, initialDimension, config, children, }: DrilldownWidgetProps) => JSX.Element;
+export declare const DrilldownWidget: ({ drilldownDimensions, initialDimension, config, children, }: DrilldownWidgetProps) => import("react/jsx-runtime").JSX.Element;

package/dist/widgets/pivot-table-widget.d.ts

@@ -0,0 +1,22 @@
+import { type FunctionComponent } from 'react';
+import { PivotTableWidgetProps } from '../props';
+/**
+ * The PivotTableWidget component extending the PivotTable component to support widget style options.
+ *
+ * @example
+ * Example of using the `PivotTableWidget` component to
+ * plot a pivot table over the `Sample ECommerce` data source hosted in a Sisense instance.
+ * ```tsx
+ * <PivotTableWidget
+ *   dataSource={DM.DataSource}
+ *   dataOptions={{
+ *     rows: [DM.Category.Category],
+ *     values: [measureFactory.sum(DM.Commerce.Cost, 'Total Cost')]
+ *   }}
+ * />
+ * ```
+ * @param props - Pivot Table Widget properties
+ * @returns Widget component representing a pivot table
+ * @internal
+ */
+export declare const PivotTableWidget: FunctionComponent<PivotTableWidgetProps>;

package/package.json

@@ -11,7 +11,7 @@
     "Sisense",
     "Compose SDK"
   ],
-  "version": "1.8.0",
+  "version": "1.10.0",
   "type": "module",
   "exports": {
     ".": {
@@ -38,14 +38,15 @@
   "dependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "@mui/material": "^5.11.6",
-    "@sisense/sdk-common": "^1.8.0",
-    "@sisense/sdk-data": "^1.8.0",
-    "@sisense/sdk-pivot-client": "^1.8.0",
-    "@sisense/sdk-query-client": "^1.8.0",
-    "@sisense/sdk-rest-client": "^1.8.0",
-    "@sisense/sdk-tracking": "^1.8.0",
-    "@sisense/sisense-charts": "5.1.0-alpha-831b13b4.0",
+    "@mui/material": "^5.15.16",
+    "@mui/system": "^5.15.15",
+    "@sisense/sdk-common": "^1.10.0",
+    "@sisense/sdk-data": "^1.10.0",
+    "@sisense/sdk-pivot-client": "^1.10.0",
+    "@sisense/sdk-query-client": "^1.10.0",
+    "@sisense/sdk-rest-client": "^1.10.0",
+    "@sisense/sdk-tracking": "^1.10.0",
+    "@sisense/sisense-charts": "5.1.1",
     "@tanstack/react-query": "4.36.1",
     "classnames": "^2.3.2",
     "colorjs.io": "^0.4.3",
@@ -67,8 +68,7 @@
     "react-number-format": "^5.1.0",
     "ts-deepmerge": "6.0.2",
     "ts-essentials": "^9.3.0",
-    "whatwg-fetch": "^3.6.2",
-    "yaml": "^2.4.0"
+    "whatwg-fetch": "^3.6.2"
   },
   "scripts": {
     "dev": "vite",
@@ -93,7 +93,6 @@
   ],
   "devDependencies": {
     "@babel/preset-env": "^7.20.2",
-    "@monaco-editor/react": "^4.6.0",
     "@mui/icons-material": "^5.14.9",
     "@mui/x-data-grid": "^6.16.0",
     "@mui/x-data-grid-pro": "^6.16.0",
@@ -109,13 +108,13 @@
     "@swc-node/register": "^1.6.5",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.0.0",
-    "@types/fixed-data-table-2": "^0.8.8",
+    "@types/fixed-data-table-2": "^1.0.0",
     "@types/leaflet": "^1.9.8",
     "@types/lodash": "^4.14.194",
     "@types/proj4leaflet": "^1.0.10",
-    "@types/react": "18.2.0",
+    "@types/react": "18.3.1",
     "@types/react-datepicker": "^4.11.2",
-    "@types/react-dom": "18.2.0",
+    "@types/react-dom": "18.3.0",
     "@types/react-grid-layout": "^1.3.5",
     "@types/react-plotly.js": "^2.6.0",
     "@vitejs/plugin-react-swc": "^3.3.0",
@@ -124,21 +123,21 @@
     "canvas": "^2.11.2",
     "eslint": "^8.40.0",
     "jsdom": "^22.1.0",
-    "monaco-editor": "^0.45.0",
     "msw": "2.2.1",
     "plotly.js": "^2.25.2",
     "postcss": "^8.4.31",
     "prettier": "2.8.4",
-    "react": "18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-grid-layout": "^1.4.4",
     "react-json-view": "^1.21.3",
     "react-plotly.js": "^2.6.0",
+    "rollup-plugin-re": "^1.0.7",
     "sass": "1.58.3",
     "storybook": "7.0.24",
     "tailwindcss": "^3.3.1",
     "typescript": "4.8.4",
-    "vite": "4.1.4",
+    "vite": "5.2.10",
     "vite-plugin-checker": "^0.6.1",
     "vite-plugin-css-injected-by-js": "3.0.1",
     "vite-plugin-dts": "^2.3.0",

package/dist/ai/chat-style-provider.d.ts

@@ -1,22 +0,0 @@
-import { ReactNode } from 'react';
-export interface ChatStyle {
-    backgroundColor?: string;
-    primaryTextColor?: string;
-    secondaryTextColor?: string;
-    messageBackgroundColor?: string;
-    inputBackgroundColor?: string;
-    border?: false | string;
-    suggestions?: {
-        textColor?: string;
-        border?: string;
-        hoverBackgroundColor?: string;
-        loadingGradient?: [string, string];
-    };
-    iconColor?: string;
-}
-export type ChatStyleProviderProps = {
-    children: ReactNode;
-    value: ChatStyle;
-};
-export declare const useChatStyle: () => ChatStyle;
-export declare const ChatStyleProvider: ({ children, value }: ChatStyleProviderProps) => JSX.Element;

package/dist/ai/icons/magic-wand-icon.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export default function MagicWandIcon(): JSX.Element;

package/dist/ai/magic-wand-dropdown.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-export default function MagicWandDropdown({ questions, onSelection, isLoading, anchorEl, }: {
-    questions: string[];
-    onSelection: (question: string) => void;
-    isLoading: boolean;
-    anchorEl: Element | null;
-}): JSX.Element;

package/dist/ai/suggestions/suggestion-dropdown-item.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-type SuggestionDropdownItemProps = {
-    onClick: () => void;
-    text: string;
-};
-export default function SuggestionDropdownItem(props: SuggestionDropdownItemProps): JSX.Element;
-export {};

package/dist/ai/suggestions/suggestion-dropdown-list.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-export interface SuggestionDropdownListProps {
-    onSelect: (selection: string) => void;
-    suggestions: string[];
-    isLoading: boolean;
-}
-export default function SuggestionDropdownList(props: SuggestionDropdownListProps): JSX.Element;

package/dist/ai/translators/code-templates.d.ts

@@ -1,11 +0,0 @@
-import { CodeTemplates } from '../../ai/translators/types';
-/**
- * Code templates for different UI frameworks.
- *
- * A code template is made up of other code templates and placeholders.
- * This allows a code template to be reused in other code templates.
- * For example, a chart widget template can be reused in a dashboard template.
- *
- * @internal
- */
-export declare const CODE_TEMPLATES: CodeTemplates;

package/dist/ai/translators/generate-code.d.ts

@@ -1,9 +0,0 @@
-import { CodeTemplateKey, UiFramework } from '../../ai/translators/types';
-/**
- * Generates code from a template with the given data and UI framework.
- *
- * @param templateKey - the key of the template to use
- * @param data - the data to populate the template with
- * @param uiFramework - the UI framework for the generated code
- */
-export declare const generateCode: (templateKey: CodeTemplateKey, data: Record<string, string>, uiFramework?: UiFramework) => string;

package/dist/ai/translators/index.d.ts

@@ -1,4 +0,0 @@
-export * from './types';
-export { useGetDataSource } from './use-get-data-source';
-export { ModelTranslator } from './model-translator';
-export { QueryTranslator } from './query-translator';

package/dist/ai/translators/model-translator.d.ts

@@ -1,51 +0,0 @@
-import { ExpandedQueryModel, ChartWidgetModel, UiFramework } from '../../ai/translators/types';
-/**
- * A class that translates expanded query model to CSDK chart model and code.
- *
- * @internal
- */
-export declare class ModelTranslator {
-    queryModel: ExpandedQueryModel;
-    constructor(queryModel: ExpandedQueryModel);
-    /**
-     * Gets chart recommendations or default to table.
-     *
-     * @param chart - chart recommendations
-     * @returns chart recommendations or default to table
-     */
-    private getChartRecommendationsOrDefault;
-    /**
-     * Gets filters from metadata.
-     *
-     * @param metadata - metadata items
-     * @return array of Filter objects
-     */
-    private getFilters;
-    /**
-     * Splits metadata into columns and filters.
-     *
-     * @param metadata - metadata items
-     */
-    private splitMetadata;
-    /**
-     * Converts query model to chart.
-     *
-     * TODO Refactor Chatbot to use this method to render the chart
-     */
-    toChart(): ChartWidgetModel | undefined;
-    private stringifyDataSource;
-    private stringifyChartType;
-    private stringifyFilters;
-    private stringifyDataOptions;
-    private stringifyExtraImports;
-    private getChartWidgetCode;
-    private getTableWidgetCode;
-    /**
-     * Converts chart widget model to CSDK code.
-     *
-     * @param chartWidgetModel - chart widget model
-     * @param uiFramework - UI framework
-     * @returns CSDK code string of the UI framework
-     */
-    toCode(chartWidgetModel: ChartWidgetModel, uiFramework?: UiFramework): string;
-}