@sisense/sdk-ui 2.16.1 → 2.18.0

package/dist/packages/sdk-ui/src/widget-by-id/types.d.ts

@@ -227,6 +227,7 @@ export type StatisticalModels = {
 export type PanelItem = {
     instanceid?: string;
     format?: {
+        continuous?: boolean;
         color?: PanelColorFormat;
         colorSecond?: PanelColorFormat;
         mask?: DatetimeMask | NumericMask;
@@ -574,15 +575,21 @@ export type TextWidgetDtoStyle = {
         textAlign: 'center';
     };
 };
+export type TabberWidgetDtoTab = {
+    displayWidgetIds: string[];
+    hideWidgetIds: string[];
+    title: string;
+};
+export type TabberWidgetDto = WidgetDto & {
+    style: TabberWidgetDtoStyle;
+} & {
+    tabs?: TabberWidgetDtoTab[];
+};
 /**
  * The data transfer object (DTO) containing info of a tabber widget style.
  */
 export type TabberWidgetDtoStyle = {
-    tabs: {
-        displayWidgetIds: string[];
-        hideWidgetIds: string[];
-        title: string;
-    }[];
+    tabs?: TabberWidgetDtoTab[];
     activeTab: string;
     descriptionColor: string;
     selectedBkgColor: string;
@@ -592,8 +599,28 @@ export type TabberWidgetDtoStyle = {
     showTitle: boolean;
     tabCornerRadius: 'SMALL' | 'MEDIUM' | 'LARGE' | 'NONE';
     tabsAlignment: 'LEFT' | 'CENTER' | 'RIGHT';
-    tabsInterval: 'SMALL' | 'MEDIUM' | 'LARGE';
-    tabsSize: 'SMALL' | 'MEDIUM' | 'LARGE';
+    /**
+     * The spacing interval between tabs.
+     * Can be a predefined size ('SMALL', 'MEDIUM', 'LARGE') or a number (treated as pixels).
+     *
+     * @example
+     * ```typescript
+     * tabsInterval: 'SMALL'
+     * tabsInterval: 16  // treated as 16px
+     * ```
+     */
+    tabsInterval: 'SMALL' | 'MEDIUM' | 'LARGE' | number;
+    /**
+     * The size of the tabs.
+     * Can be a predefined size ('SMALL', 'MEDIUM', 'LARGE') or a number (treated as pixels).
+     *
+     * @example
+     * ```typescript
+     * tabsSize: 'MEDIUM'
+     * tabsSize: 14  // treated as 14px
+     * ```
+     */
+    tabsSize: 'SMALL' | 'MEDIUM' | 'LARGE' | number;
     unselectedBkgColor: string;
     unselectedColor: string;
     useSelectedBkg: boolean;

package/dist/packages/sdk-ui/src/widgets/{chart-widget.d.ts → chart-widget/chart-widget.d.ts}

@@ -1,5 +1,5 @@
 import { type FunctionComponent } from 'react';
-import { ChartWidgetProps } from '../props';
+import { ChartWidgetProps } from '../../props';
 /**
  * The Chart Widget component extending the {@link Chart} component to support widget style options.
  * It can be used along with the {@link DrilldownWidget} component to support advanced data drilldown.

package/dist/packages/sdk-ui/src/widgets/chart-widget/index.d.ts

@@ -0,0 +1 @@
+export * from './chart-widget';

package/dist/packages/sdk-ui/src/widgets/{hooks/use-with-drilldown.d.ts → chart-widget/use-with-chart-widget-drilldown.d.ts}

@@ -1,12 +1,13 @@
 import { ChartWidgetProps } from '../../props.js';
 import { DrilldownSelection } from '../../types.js';
-type UseWithDrilldownParams = {
+type UseWithChartWidgetDrilldownParams = {
     propsToExtend: ChartWidgetProps;
     onDrilldownSelectionsChange?: (selections: DrilldownSelection[]) => void;
 };
-export declare const useWithDrilldown: ({ propsToExtend, onDrilldownSelectionsChange, }: UseWithDrilldownParams) => {
+type UseWithChartWidgetDrilldownResult = {
     propsWithDrilldown: ChartWidgetProps;
     isDrilldownEnabled: boolean;
-    breadcrumbs: import("react/jsx-runtime").JSX.Element;
+    breadcrumbs: JSX.Element;
 };
+export declare const useWithChartWidgetDrilldown: ({ propsToExtend, onDrilldownSelectionsChange, }: UseWithChartWidgetDrilldownParams) => UseWithChartWidgetDrilldownResult;
 export {};

package/dist/packages/sdk-ui/src/widgets/common/use-drilldown-core.d.ts

@@ -5,7 +5,7 @@ import { ChartDataPoint, DataPoint, DrilldownSelection, StyledColumn } from '../
 type UseDrilldownCoreParams = {
     drilldownPaths?: (Attribute | Hierarchy)[];
     initialDimension: Column | StyledColumn;
-    drilldownSelections?: DrilldownSelection[];
+    initialDrilldownSelections?: DrilldownSelection[];
     onDrilldownSelectionsChange?: (selections: DrilldownSelection[]) => void;
 };
 export declare const useDrilldownCore: (params: UseDrilldownCoreParams) => {

package/dist/packages/sdk-ui/src/widgets/hooks/use-drilldown.d.ts

@@ -5,7 +5,7 @@ import { Hierarchy } from '../../models';
 import { DataPoint, DrilldownSelection, MenuItemSection, MenuPosition, StyledColumn } from '../../types.js';
 type UseDrilldownParams = {
     initialDimension: Column | StyledColumn;
-    drilldownSelections?: DrilldownSelection[];
+    initialDrilldownSelections?: DrilldownSelection[];
     /**
      * todo: make it optional when we will have a public `MenuProvider`.
      * Without provided function, it should open internal menu with the help of `useMenu` hook
@@ -13,11 +13,12 @@ type UseDrilldownParams = {
     openMenu: OpenMenuFn;
     onDrilldownSelectionsChange?: (selections: DrilldownSelection[]) => void;
 };
-export declare const useDrilldown: ({ initialDimension, drilldownSelections, openMenu, onDrilldownSelectionsChange, }: UseDrilldownParams) => {
+export declare const useDrilldown: ({ initialDimension, initialDrilldownSelections, openMenu, onDrilldownSelectionsChange, }: UseDrilldownParams) => {
     drilldownDimension: Attribute;
+    drilldownSelections: DrilldownSelection[];
     drilldownFilters: import("@sisense/sdk-data").MembersFilter[];
     breadcrumbs: import("react/jsx-runtime").JSX.Element;
-    openDrilldownMenu: (position: MenuPosition, points: DataPoint[], availableDrilldownPaths?: (Attribute | Hierarchy)[]) => void;
+    openDrilldownMenu: (position: MenuPosition, points: DataPoint[], availableDrilldownPaths?: (Attribute | Hierarchy)[], onSelect?: ((nextDimension: Attribute, hierarchy?: Hierarchy) => void) | undefined) => void;
 };
 /** @internal */
 export declare function getSelectionTitleMenuItem(points: DataPoint[], drilldownDimension: Attribute): MenuItemSection;

package/dist/packages/sdk-ui/src/widgets/hooks/use-synced-drilldown-paths-manager.d.ts

@@ -0,0 +1,113 @@
+import { Attribute, DataSource } from '@sisense/sdk-data';
+import { Hierarchy, HierarchyId } from '../../models/hierarchy';
+/**
+ * States of synced drilldown paths.
+ */
+export type SyncedDrilldownPathsState = SyncedDrilldownPathsLoadingState | SyncedDrilldownPathsErrorState | SyncedDrilldownPathsSuccessState;
+/**
+ * State of synced drilldown paths that is loading.
+ */
+export type SyncedDrilldownPathsLoadingState = {
+    /** Whether the hierarchy models is loading */
+    isLoading: true;
+    /** Whether the hierarchy models load has failed */
+    isError: false;
+    /** Whether the hierarchy models load has succeeded */
+    isSuccess: false;
+    /** Error, if one occurred */
+    error: undefined;
+    /** Loading status */
+    status: 'loading';
+    /** Synced drilldown paths, if the load is in progress */
+    drilldownPaths: (Attribute | Hierarchy)[] | undefined;
+};
+/**
+ * State of a synced drilldown paths load that has failed.
+ */
+export type SyncedDrilldownPathsErrorState = {
+    /** Whether the hierarchy models is loading */
+    isLoading: false;
+    /** Whether the hierarchy models load has failed */
+    isError: true;
+    /** Whether the hierarchy models load has succeeded */
+    isSuccess: false;
+    /** Error, if one occurred */
+    error: Error;
+    /** Loading status */
+    status: 'error';
+    /** Synced drilldown paths, if the load failed */
+    drilldownPaths: undefined;
+};
+/**
+ * State of a synced drilldown paths load that has succeeded.
+ */
+export type SyncedDrilldownPathsSuccessState = {
+    /** Whether the hierarchy models is loading */
+    isLoading: false;
+    /** Whether the hierarchy models load has failed */
+    isError: false;
+    /** Whether the hierarchy models load has succeeded */
+    isSuccess: true;
+    /** Error, if one occurred */
+    error: undefined;
+    /** Loading status */
+    status: 'success';
+    /** Synced drilldown paths, if the load succeeded */
+    drilldownPaths: (Attribute | Hierarchy)[];
+};
+/**
+ * Parameters for synchronizing drilldown paths.
+ *
+ * @internal
+ */
+export interface SynchronizeParams {
+    /** The attribute/dimension for which to synchronize hierarchies */
+    attribute: Attribute;
+    /** The data source from which to retrieve hierarchies */
+    dataSource?: DataSource;
+    /** The drilldown paths to synchronize (can include Attribute, Hierarchy objects, or HierarchyId strings) */
+    drilldownPaths?: (Attribute | Hierarchy | HierarchyId)[];
+}
+/**
+ * Result returned by {@link useSyncedDrilldownPathsManager}.
+ */
+export type SyncedDrilldownPathsManagerResult = SyncedDrilldownPathsState & {
+    /**
+     * A function to synchronize drilldown paths that loads hierarchy IDs from the server
+     *
+     * @param params - Parameters for synchronization
+     * @returns Promise that resolves with the synchronized drilldown paths
+     */
+    synchronize: (params: SynchronizeParams) => Promise<(Attribute | Hierarchy)[]>;
+};
+/**
+ * Manages synchronization of drilldown paths with hierarchy data from a Fusion instance.
+ * It provides a `synchronize` function that can be called manually to trigger loading.
+ *
+ * It loads all hierarchies provided as hierarchy IDs, and optionally includes hierarchies
+ * that are marked as `alwaysIncluded` in a Fusion instance.
+ *
+ * @returns Synchronization function and loading state.
+ *
+ * @example
+ * ```tsx
+ * const { synchronize, isLoading, isError } = useSyncedDrilldownPathsManager();
+ *
+ * // Trigger synchronization manually
+ * const handleSync = async () => {
+ *   try {
+ *     const synchronizedPaths = await synchronize({
+ *       attribute: DM.Commerce.AgeRange,
+ *       drilldownPaths: ['hierarchy-id-1', 'hierarchy-id-2', DM.Commerce.Gender],
+ *       alwaysIncluded: true,
+ *     });
+ *     console.log('Synchronized paths:', synchronizedPaths);
+ *   } catch (error) {
+ *     console.error('Synchronization failed:', error);
+ *   }
+ * };
+ * ```
+ *
+ * @internal
+ */
+export declare function useSyncedDrilldownPathsManager(): SyncedDrilldownPathsManagerResult;

package/dist/packages/sdk-ui/src/widgets/hooks/{use-synced-hierarchies.d.ts → use-synced-drilldown-paths.d.ts}

@@ -7,7 +7,7 @@ import { Hierarchy, HierarchyId } from '../../models/hierarchy';
  *
  * @internal
  */
-export declare function useSyncedDrilldownPaths({ attribute, dataSource, drilldownPaths, enabled, }: {
+export declare function useSyncedDrilldownPaths(params: {
     attribute: Attribute;
     dataSource?: DataSource;
     drilldownPaths?: (Attribute | Hierarchy | HierarchyId)[];

package/dist/packages/sdk-ui/src/widgets/pivot-table-widget/index.d.ts

@@ -0,0 +1 @@
+export * from './pivot-table-widget';

package/dist/packages/sdk-ui/src/widgets/{pivot-table-widget.d.ts → pivot-table-widget/pivot-table-widget.d.ts}

@@ -1,5 +1,5 @@
 import { type FunctionComponent } from 'react';
-import { PivotTableWidgetProps } from '../props';
+import { PivotTableWidgetProps } from '../../props';
 /**
  * React component extending `PivotTable` to support widget style options.
  *
@@ -13,11 +13,29 @@ import { PivotTableWidgetProps } from '../props';
  *     rows: [DM.Category.Category],
  *     values: [measureFactory.sum(DM.Commerce.Cost, 'Total Cost')]
  *   }}
+ *   title="Pivot Table Widget Example"
+ *   styleOptions={{
+ *     spaceAround: 'Medium',
+ *     cornerRadius: 'Large',
+ *     shadow: 'Light',
+ *     border: true,
+ *     borderColor: '#e0e0e0',
+ *     backgroundColor: '#ffffff',
+ *     header: {
+ *       hidden: false,
+ *       titleTextColor: '#333333',
+ *       titleAlignment: 'Center',
+ *       dividerLine: true,
+ *       dividerLineColor: '#e0e0e0',
+ *       backgroundColor: '#f5f5f5'
+ *     }
+ *   }}
  * />
  * ```
+ * <img src="media://pivot-widget-example.png" width="800px" />
+ *
  * @param props - Pivot Table Widget properties
  * @returns Widget component representing a pivot table
  * @group Dashboards
- * @beta
  */
 export declare const PivotTableWidget: FunctionComponent<PivotTableWidgetProps>;

package/dist/packages/sdk-ui/src/widgets/pivot-table-widget/use-with-pivot-table-widget-drilldown.d.ts

@@ -0,0 +1,14 @@
+import { Attribute } from '@sisense/sdk-data';
+import { PivotTableWidgetProps } from '../../props.js';
+import { DataOptionLocation, DrilldownSelection } from '../../types.js';
+type UseWithPivotTableWidgetDrilldownParams = {
+    propsToExtend: PivotTableWidgetProps;
+    onDrilldownSelectionsChange?: (target: Attribute | DataOptionLocation, selections: DrilldownSelection[]) => void;
+};
+type UseWithPivotTableWidgetDrilldownResult = {
+    propsWithDrilldown: PivotTableWidgetProps;
+    isDrilldownEnabled: boolean;
+    breadcrumbs: JSX.Element;
+};
+export declare function useWithPivotTableWidgetDrilldown(params: UseWithPivotTableWidgetDrilldownParams): UseWithPivotTableWidgetDrilldownResult;
+export {};

package/dist/packages/sdk-ui/src/widgets/pivot-table-widget/utils.d.ts

@@ -0,0 +1,22 @@
+import { Attribute, Column } from '@sisense/sdk-data';
+import { PivotTableDataOptions } from '../../chart-data-options/types';
+import { DataOptionLocation, DrilldownSelection } from '../..';
+/**
+ * Gets the initial dimension location for pivot table drilldown.
+ *
+ * @param dataOptions - The data options of the pivot table.
+ * @param drilldownTarget - The target of the drilldown (Attribute or DataOptionLocation).
+ * @param drilldownSelections - The current drilldown selections.
+ * @returns The initial dimension location.
+ */
+export declare function getInitialDimensionLocation(dataOptions: PivotTableDataOptions, drilldownTarget: Attribute | DataOptionLocation, drilldownSelections: DrilldownSelection[]): DataOptionLocation | undefined;
+/**
+ * Checks if drilldown is applicable to a pivot table.
+ * Drilldown requires the pivot table to have at least one selectable attribute (row or column dimension).
+ */
+export declare function isDrilldownApplicableToPivot(dataOptions: PivotTableDataOptions): boolean;
+/**
+ * Applies a drilldown dimension to pivot table data options.
+ * Replaces the target dimension (first row or column that doesn't match the drilldown dimension).
+ */
+export declare function applyDrilldownDimensionToPivot(dataOptions: PivotTableDataOptions, drilldownDimensionLocation: DataOptionLocation, drilldownDimension: Column): PivotTableDataOptions;

package/dist/packages/sdk-ui/src/widgets/tabber/tabber-buttons-widget.d.ts

@@ -1,5 +1,23 @@
 import React from 'react';
-import { TabberButtonsWidgetProps } from './types';
+import { TabberButtonsWidgetProps, TabberButtonsWidgetStyleOptions } from './types';
+/**
+ * Converts tabsInterval value to CSS string.
+ * Pure function that handles predefined sizes and numbers (pixels).
+ *
+ * @param tabsInterval - The tabs interval value
+ * @returns CSS string representation of the interval
+ * @internal
+ */
+export declare function tabsIntervalToCss(tabsInterval: TabberButtonsWidgetStyleOptions['tabsInterval']): string;
+/**
+ * Converts tabsSize value to CSS string.
+ * Pure function that handles predefined sizes and numbers (pixels).
+ *
+ * @param tabsSize - The tabs size value
+ * @returns CSS string representation of the size
+ * @internal
+ */
+export declare function tabsSizeToCss(tabsSize: TabberButtonsWidgetStyleOptions['tabsSize']): string;
 /**
  * Visual representation of a Fusion's widget with tabber buttons
  * @param props - Tabber buttons widget props

package/dist/packages/sdk-ui/src/widgets/tabber/types.d.ts

@@ -37,13 +37,30 @@ export type TabberButtonsWidgetStyleOptions = {
      */
     tabsAlignment?: 'left' | 'center' | 'right';
     /**
-     * Spacing interval between tabs
+     * Spacing interval between tabs.
+     * Can be a predefined size ('small', 'medium', 'large') or a number (treated as pixels).
+     *
+     * @default 'medium'
+     *
+     * @example
+     * ```typescript
+     * tabsInterval: 'small'
+     * tabsInterval: 16  // treated as 16px
+     * ```
      */
-    tabsInterval?: 'small' | 'medium' | 'large';
+    tabsInterval?: 'small' | 'medium' | 'large' | number;
     /**
-     * Size of the tabs
-     */
-    tabsSize?: 'small' | 'medium' | 'large';
+     * Size of the tabs.
+     * Can be a predefined size ('small', 'medium', 'large') or a number (treated as pixels).
+     *
+     * @default 'medium'
+     * @example
+     * ```typescript
+     * tabsSize: 'medium'
+     * tabsSize: 14  // treated as 14px
+     * ```
+     */
+    tabsSize?: 'small' | 'medium' | 'large' | number;
     /**
      * Background color of unselected tabs
      */

package/dist/{types-Clbnx4mQ.cjs → types-BfWl5jz9.cjs}

@@ -1 +1 @@
-"use strict";const a=require("./execute-query-CB4XfUng.cjs");class s extends a.DimensionalElement{constructor(e,r){var i;super((i=e.jaql.title)!==null&&i!==void 0?i:"",r),this.__serializable="JaqlElement",this.expression=e.jaql.dim||e.jaql.formula,this.metadataItem=e,e.jaql.agg?this.aggregation=e.jaql.agg:delete this.aggregation,e.jaql.formula?this.formula=e.jaql.formula:delete this.formula,e.jaql.sort?this.sortType=a.getSortType(e.jaql.sort):delete this.sortType,this.skipValidation=!0}get id(){return this.expression}jaql(e){return e===!0?this.metadataItem.jaql:this.metadataItem}serialize(){const e=super.serialize();return e.metadataItem=this.metadataItem,e.type=this.type,e}}const l={text:a.MetadataTypes.TextAttribute,numeric:a.MetadataTypes.NumericAttribute,datetime:a.MetadataTypes.DateLevel},d=t=>t&&t.__serializable==="JaqlElement";function n(t){var e;return new s(t,(e=l[t.jaql.datatype])!==null&&e!==void 0?e:"numeric")}function o(t){const{jaql:e}=t;if(e.formula)return a.createCalculatedMeasureHelper(e);const r=a.getGranularityFromJaql(e);return"agg"in e&&e.dim&&e.datatype?a.createMeasureHelper({expression:e.dim,dataType:e.datatype,agg:e.agg||"",granularity:r,format:void 0,sort:e.sort,title:e.title,dataSource:e.datasource}):e.dim&&e.datatype?a.createAttributeHelper({expression:e.dim,dataType:e.datatype,granularity:r,sort:e.sort,title:e.title,panel:t.panel,dataSource:e.datasource}):n(t)}const u={jaql:{datasource:{title:"",type:"elasticube"},metadata:[]},queryTitle:"",chartRecommendations:{}},m={model:"",metadata:[],chart:{},queryTitle:""},c=t=>"widgetProps"in t,p=t=>"dashboardOid"in t&&"widgetOid"in t,g=t=>"dashboardProps"in t,y=t=>"dashboardOid"in t;exports.EMPTY_EXPANDED_QUERY_MODEL=u;exports.EMPTY_SIMPLE_QUERY_MODEL=m;exports.JaqlElement=s;exports.createDimensionalElementFromMetadataItem=o;exports.isByIdDashboardCodeParams=y;exports.isByIdWidgetCodeParams=p;exports.isClientSideDashboardCodeParams=g;exports.isClientSideWidgetCodeParams=c;exports.isJaqlElement=d;
+"use strict";const a=require("./execute-query-tRu-NooT.cjs");class s extends a.DimensionalElement{constructor(e,r){var i;super((i=e.jaql.title)!==null&&i!==void 0?i:"",r),this.__serializable="JaqlElement",this.expression=e.jaql.dim||e.jaql.formula,this.metadataItem=e,e.jaql.agg?this.aggregation=e.jaql.agg:delete this.aggregation,e.jaql.formula?this.formula=e.jaql.formula:delete this.formula,e.jaql.sort?this.sortType=a.getSortType(e.jaql.sort):delete this.sortType,this.skipValidation=!0}get id(){return this.expression}jaql(e){return e===!0?this.metadataItem.jaql:this.metadataItem}serialize(){const e=super.serialize();return e.metadataItem=this.metadataItem,e.type=this.type,e}}const l={text:a.MetadataTypes.TextAttribute,numeric:a.MetadataTypes.NumericAttribute,datetime:a.MetadataTypes.DateLevel},d=t=>t&&t.__serializable==="JaqlElement";function n(t){var e;return new s(t,(e=l[t.jaql.datatype])!==null&&e!==void 0?e:"numeric")}function o(t){const{jaql:e}=t;if(e.formula)return a.createCalculatedMeasureHelper(e);const r=a.getGranularityFromJaql(e);return"agg"in e&&e.dim&&e.datatype?a.createMeasureHelper({expression:e.dim,dataType:e.datatype,agg:e.agg||"",granularity:r,format:void 0,sort:e.sort,title:e.title,dataSource:e.datasource}):e.dim&&e.datatype?a.createAttributeHelper({expression:e.dim,dataType:e.datatype,granularity:r,sort:e.sort,title:e.title,panel:t.panel,dataSource:e.datasource}):n(t)}const u={jaql:{datasource:{title:"",type:"elasticube"},metadata:[]},queryTitle:"",chartRecommendations:{}},m={model:"",metadata:[],chart:{},queryTitle:""},c=t=>"widgetProps"in t,p=t=>"dashboardOid"in t&&"widgetOid"in t,g=t=>"dashboardProps"in t,y=t=>"dashboardOid"in t;exports.EMPTY_EXPANDED_QUERY_MODEL=u;exports.EMPTY_SIMPLE_QUERY_MODEL=m;exports.JaqlElement=s;exports.createDimensionalElementFromMetadataItem=o;exports.isByIdDashboardCodeParams=y;exports.isByIdWidgetCodeParams=p;exports.isClientSideDashboardCodeParams=g;exports.isClientSideWidgetCodeParams=c;exports.isJaqlElement=d;

package/dist/{types-D1mqt0Mg.js → types-CHqDjeeH.js}

@@ -1,4 +1,4 @@
-import { f as i, g as l, h as n, i as o, D as d, k as u, M as s } from "./execute-query-CFK2R_1S.js";
+import { f as i, g as l, h as n, i as o, D as d, k as u, M as s } from "./execute-query-CUf3Nz7H.js";
 class m extends d {
   constructor(e, t) {
     var r;