@sisense/sdk-ui 2.12.0 → 2.13.0

package/dist/packages/sdk-ui/src/models/widget/widget-model-translator/tabber.d.ts

@@ -0,0 +1,21 @@
+import { GenericDataOptions, TabberButtonsWidgetStyleOptions } from '../../../types.js';
+import { Panel, WidgetDto } from '../../../widget-by-id/types.js';
+/**
+ * Processes officially supported tabber custom widgets (WidgetsTabber).
+ * Pure function that creates data and style options for the TabberButtonsWidget.
+ * Maps from DTO widget type ('WidgetsTabber') to CSDK widget type ('tabber-buttons').
+ *
+ * @param params - Parameters for processing tabber widget
+ * @returns Object containing fusion type, custom type, data options, style options, and custom options
+ */
+export declare const processTabberWidget: (params: {
+    panels: Panel[];
+    widgetDto: WidgetDto;
+    variantColors: string[];
+}) => {
+    fusionWidgetType: 'custom';
+    customWidgetType: 'tabber-buttons';
+    dataOptions: GenericDataOptions;
+    styleOptions: TabberButtonsWidgetStyleOptions;
+    customOptions: Record<string, any>;
+};

package/dist/packages/sdk-ui/src/models/widget/{widget-model-translator.d.ts → widget-model-translator/widget-model-translator.d.ts}

@@ -1,10 +1,10 @@
 import { JaqlDataSourceForDto } from '@sisense/sdk-data';
-import { AppSettings } from '../../app/settings/settings.js';
-import { ChartProps, ChartWidgetProps, CommonWidgetProps, CustomWidgetProps, PivotTableProps, PivotTableWidgetProps, TableProps, TableWidgetProps, TextWidgetProps, WidgetProps } from '../../props';
-import { ExecutePivotQueryParams, ExecuteQueryParams } from '../../query-execution';
-import { CompleteThemeSettings } from '../../types.js';
-import { WidgetDto } from '../../widget-by-id/types.js';
-import { WidgetModel } from './widget-model.js';
+import { AppSettings } from '../../../app/settings/settings.js';
+import { ChartProps, ChartWidgetProps, CommonWidgetProps, CustomWidgetProps, PivotTableProps, PivotTableWidgetProps, TableProps, TableWidgetProps, TextWidgetProps, WidgetProps } from '../../../props';
+import { ExecutePivotQueryParams, ExecuteQueryParams } from '../../../query-execution';
+import { CompleteThemeSettings } from '../../../types.js';
+import { WidgetDto } from '../../../widget-by-id/types.js';
+import { WidgetModel } from '../widget-model.js';
 /**
  * Translates a {@link WidgetModel} to the parameters for executing a query for the widget.
  *
@@ -92,16 +92,16 @@ export declare function toChartWidgetProps(widgetModel: WidgetModel): ChartWidge
  */
 export declare function toTableWidgetProps(widgetModel: WidgetModel): TableWidgetProps;
 /**
- * Translates a {@link WidgetModel} to the props for rendering a pivot table widget.
- *
- * @example
- * ```tsx
- * <PivotTableWidget {...widgetModelTranslator.toPivotTableWidgetProps(widgetModel)} />
- * ```
+   * Translates a {@link WidgetModel} to the props for rendering a pivot table widget.
+   *
+   * @example
+   * ```tsx
+   * <PivotTableWidget {...widgetModelTranslator.toPivotTableWidgetProps(widgetModel)} />
+   * ```
 
- * Note: this method is not supported for chart or table widgets.
- * Use {@link toChartWidgetProps} instead for getting props for the <ChartWidget> component.
- */
+   * Note: this method is not supported for chart or table widgets.
+   * Use {@link toChartWidgetProps} instead for getting props for the <ChartWidget> component.
+   */
 export declare function toPivotTableWidgetProps(widgetModel: WidgetModel): PivotTableWidgetProps;
 /**
  * Translates a {@link WidgetModel} to the props for rendering a text widget.

package/dist/packages/sdk-ui/src/models/widget/widget-model.d.ts

@@ -48,6 +48,12 @@ export interface WidgetModel {
      * Widget style options.
      */
     styleOptions: WidgetStyleOptions;
+    /**
+     * Custom widget options. Only present for custom widgets.
+     *
+     * Contains widget-specific configuration that doesn't fit into standard style or data options.
+     */
+    customOptions?: Record<string, any>;
     /**
      * Widget filters.
      */

package/dist/packages/sdk-ui/src/pivot-table/hooks/use-render-pivot.d.ts

@@ -20,11 +20,15 @@ type PivotRenderOptions = {
     onDataPointClick?: PivotTableDataPointEventHandler;
     /** Callback to handle data point context menu. */
     onDataPointContextMenu?: PivotTableDataPointEventHandler;
+    /** The page size */
+    pageSize: number;
+    /** Callback to handle page size. */
+    onPageSizeChange: (newPageSize: number) => void;
 };
 /**
  * A hook that renders the pivot table.
  */
-export declare function useRenderPivot({ pivotBuilder, dataOptions, styleOptions, themeSettings, size, onTotalHeightChange, onDataPointClick, onDataPointContextMenu, }: PivotRenderOptions): {
+export declare function useRenderPivot({ pivotBuilder, dataOptions, styleOptions, themeSettings, size, onTotalHeightChange, onDataPointClick, onDataPointContextMenu, pageSize, onPageSizeChange, }: PivotRenderOptions): {
     pivotElement: JSX.Element | null;
 };
 export {};

package/dist/packages/sdk-ui/src/props.d.ts

@@ -9,9 +9,10 @@ import { Hierarchy } from './models';
 import { type CustomDataCellFormatter, type CustomHeaderCellFormatter } from './pivot-table/formatters/types';
 import { ExecuteQueryParams, QueryByWidgetIdState } from './query-execution';
 import { ExecuteQueryResult } from './query-execution/types';
-import { AreamapDataPoint, AreamapStyleOptions, AreaRangeStyleOptions, AreaStyleOptions, BoxplotDataPoint, BoxplotStyleOptions, CalendarHeatmapDataPoint, CalendarHeatmapStyleOptions, CartesianChartDataOptions, CategoricalChartDataOptions, ChartDataOptions, ChartDataPoints, ChartStyleOptions, ChartType, ChartWidgetStyleOptions, CustomDrilldownResult, CustomWidgetStyleOptions, DataPoint, DrilldownOptions, DrilldownSelection, FunnelStyleOptions, GenericDataOptions, IndicatorDataPoint, IndicatorRenderOptions, IndicatorStyleOptions, LineStyleOptions, MenuAlignment, MenuItemSection, MenuPosition, PieStyleOptions, PivotTableDataPoint, PivotTableStyleOptions, PivotTableWidgetStyleOptions, PolarStyleOptions, RegularChartStyleOptions, RegularChartType, ScatterDataPoint, ScattermapDataPoint, ScattermapStyleOptions, ScatterStyleOptions, StackableStyleOptions, SunburstStyleOptions, TabberStyleProps, TableStyleOptions, TableWidgetStyleOptions, TabularChartStyleOptions, TextWidgetDataPoint, TextWidgetStyleOptions, ThemeOid, ThemeSettings, TreemapStyleOptions, WidgetByIdStyleOptions } from './types';
+import { AreamapDataPoint, AreamapStyleOptions, AreaRangeStyleOptions, AreaStyleOptions, BoxplotDataPoint, BoxplotStyleOptions, CalendarHeatmapDataPoint, CalendarHeatmapStyleOptions, CartesianChartDataOptions, CategoricalChartDataOptions, ChartDataOptions, ChartDataPoints, ChartStyleOptions, ChartType, ChartWidgetStyleOptions, CustomDrilldownResult, CustomWidgetStyleOptions, DataPoint, DrilldownOptions, DrilldownSelection, FunnelStyleOptions, GenericDataOptions, IndicatorDataPoint, IndicatorRenderOptions, IndicatorStyleOptions, LineStyleOptions, MenuAlignment, MenuItemSection, MenuPosition, PieStyleOptions, PivotTableDataPoint, PivotTableStyleOptions, PivotTableWidgetStyleOptions, PolarStyleOptions, RegularChartStyleOptions, RegularChartType, ScatterDataPoint, ScattermapDataPoint, ScattermapStyleOptions, ScatterStyleOptions, StackableStyleOptions, SunburstStyleOptions, TableStyleOptions, TableWidgetStyleOptions, TabularChartStyleOptions, TextWidgetDataPoint, TextWidgetStyleOptions, ThemeOid, ThemeSettings, TreemapStyleOptions, WidgetByIdStyleOptions } from './types';
 import { DistributiveOmit } from './utils/utility-types/distributive-omit';
 import { FiltersMergeStrategy } from './widget-by-id/types';
+export type { TabberButtonsWidgetProps } from './widgets/tabber/types';
 export type { MenuItemSection, HighchartsOptions };
 /**
  * Configurations and authentication for Sisense Context.
@@ -1419,6 +1420,12 @@ export interface CustomWidgetProps {
      * @category Widget
      */
     description?: string;
+    /**
+     * Specific options for the custom widget.
+     *
+     * @category Widget
+     */
+    customOptions?: Record<string, any>;
 }
 /**
  * A utility type that combines widget-specific properties (`BaseWidget`)
@@ -1721,25 +1728,6 @@ export interface DrilldownWidgetProps {
      */
     children: (customDrilldownResult: CustomDrilldownResult) => ReactNode;
 }
-/**
- * Tabber widget props designed to be a current state and is provided by use-tabber hook
- *
- * @internal
- */
-export type TabberWidgetExtraProps = {
-    onTabSelected: (tab: number) => void;
-    selectedTab: number;
-};
-/**
- * Tabber widget props
- *
- * @internal
- */
-export type TabberWidgetProps = {
-    styleOptions?: TabberStyleProps;
-    description?: string;
-    width?: string;
-} & TabberWidgetExtraProps;
 /**
  * Params of the {@link useGetSharedFormula} hook
  *

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

@@ -2,7 +2,6 @@ import { CSSProperties, ReactNode } from 'react';
 import type { Attribute, CalculatedMeasureColumn, Column, Measure, MeasureColumn, MembersFilter } from '@sisense/sdk-data';
 import { DeepRequired } from 'ts-essentials';
 import { Coordinates } from './charts/map-charts/scattermap/types';
-import { TabCornerRadius, TabInterval, TabSize } from './widgets/tabber-widget';
 import { Hierarchy, HierarchyId, StyledColumn, StyledMeasureColumn } from '.';
 import { HighchartsOptionsInternal } from './chart-options-processor/chart-options-service';
 import { AreaRangeSubtype, AreaSubtype, BoxplotSubtype, LineSubtype, PieSubtype, PolarSubtype, StackableSubtype } from './chart-options-processor/subtype-to-design-options';
@@ -14,6 +13,7 @@ import { AreamapChartType, BoxplotChartType, CalendarHeatmapChartType, Cartesian
 import { GeoDataElement, RawGeoDataElement } from './chart/restructured-charts/areamap-chart/types';
 import { CalendarDayOfWeek } from './chart/restructured-charts/highchart-based-charts/calendar-heatmap-chart/utils';
 import { DataPointsEventHandler } from './props';
+import { GradientColor } from './utils/gradient';
 import { SoftUnion } from './utils/utility-types';
 export type { SortDirection, PivotRowsSort } from '@sisense/sdk-data';
 export type { AppConfig } from './app/client-application';
@@ -24,6 +24,7 @@ export type { DataColorCondition, ConditionalDataColorOptions, DataColorOptions,
 export type { CartesianChartType, CategoricalChartType, ScatterChartType, IndicatorChartType, BoxplotChartType, ScattermapChartType, AreamapChartType, CalendarHeatmapChartType, TableType, TableChartType, AreaSubtype, AreaRangeSubtype, LineSubtype, PieSubtype, PolarSubtype, StackableSubtype, BoxplotSubtype, IndicatorComponents, ScatterMarkerSize, LegendPosition, GeoDataElement, RawGeoDataElement, Coordinates, RangeChartType, TableColorOptions, TextStyle, };
 export type { MonthOfYear, DayOfWeek, DateLevel } from './query/date-formats/apply-date-format';
 export type { IndicatorRenderOptions } from './charts/indicator/indicator-render-options';
+export type { TabberButtonsWidgetStyleOptions, TabberButtonsWidgetCustomOptions, } from './widgets/tabber/types';
 /**
  * @internal
  */
@@ -120,7 +121,7 @@ export type SeriesLabels = {
     rotation?: number;
     /**
      * Boolean flag that defines if value should be shown in series labels
-     * (if not specified, value will be shown by default)
+     * (if not specified, default is determined by chart type)
      */
     showValue?: boolean;
     /**
@@ -128,6 +129,11 @@ export type SeriesLabels = {
      * (only applicable for subtypes that support percentage, like "stacked100")
      */
     showPercentage?: boolean;
+    /**
+     * Boolean flag that defines if percentage should be shown with decimals
+     * (will work only if `showPercentage` is `true`)
+     */
+    showPercentDecimals?: boolean;
     /**
      * Text to be shown before the series labels
      */
@@ -155,11 +161,11 @@ export type SeriesLabels = {
     /**
      * Background color of the labels. `auto` uses the same color as the data point
      */
-    backgroundColor?: 'auto' | string;
+    backgroundColor?: 'auto' | string | GradientColor;
     /**
      * Color of the labels border
      */
-    borderColor?: string;
+    borderColor?: string | GradientColor;
     /**
      * Border radius in pixels applied to the labels border, if visible
      *
@@ -235,11 +241,11 @@ export type TotalLabels = {
     /**
      * Background color of the labels. `auto` uses the same color as the data point
      */
-    backgroundColor?: 'auto' | string;
+    backgroundColor?: 'auto' | string | GradientColor;
     /**
      * Color of the labels border
      */
-    borderColor?: string;
+    borderColor?: string | GradientColor;
     /**
      * Border radius in pixels applied to the labels border, if visible
      *
@@ -365,11 +371,11 @@ export type LegendOptions = {
     /** Padding inside the legend, in pixels */
     padding?: number;
     /** Background color of the legend */
-    backgroundColor?: string;
+    backgroundColor?: string | GradientColor;
     /** Width of the legend border in pixels */
     borderWidth?: number;
     /** Color of the legend border */
-    borderColor?: string;
+    borderColor?: string | GradientColor;
     /**
      * Border radius in pixels applied to the legend border, if visible.
      *
@@ -659,17 +665,57 @@ export interface StackableStyleOptions extends BaseStyleOptions, BaseAxisStyleOp
         borderRadius?: number | string;
     };
 }
+/**
+ * Configuration for percentage labels
+ * Percentage labels are shown on top of series slices
+ */
+export type PiePercentageLabels = {
+    /**
+     * Boolean flag that defines if percentage label should be shown
+     */
+    enabled: boolean;
+    /**
+     * Boolean flag that defines if percentage label should be shown with decimals
+     */
+    showDecimals?: boolean;
+};
+export type PieSeriesLabels = Omit<SeriesLabels, 'showPercentage' | 'showPercentDecimals' | 'alignInside' | 'align' | 'verticalAlign'> & {
+    /**
+     * Boolean flag that defines if the category should be shown
+     * @default `true`
+     */
+    showCategory?: boolean;
+    /**
+     * Configuration for percentage labels
+     * Percentage labels are shown on top of series slices
+     * Styling from series labels are not applied to percentage labels
+     */
+    percentageLabels?: PiePercentageLabels;
+    /**
+     * Styling for labels text
+     */
+    textStyle?: Omit<TextStyle, 'pointerEvents' | 'textOverflow'>;
+};
 /** Configuration options that define functional style of the various elements of Pie chart */
-export interface PieStyleOptions extends Omit<BaseStyleOptions, 'seriesLabels'> {
+export interface PieStyleOptions extends BaseStyleOptions {
     /**
      * Configuration that defines the ability of the Pie chart to collapse (convolve) and
      * hide part of the data under the single category "Others".
      */
     convolution?: Convolution;
-    /** Configuration that defines behavior of data labels on Pie chart */
+    /**
+     * Configuration that defines behavior of data labels on Pie chart
+     *
+     * @deprecated
+     * Use seriesLabels instead
+     */
     labels?: Labels;
     /** Subtype of Pie chart*/
     subtype?: PieSubtype;
+    /**
+     * Configuration for series labels - titles/names identifying data series in a chart
+     */
+    seriesLabels?: PieSeriesLabels;
 }
 /** Configuration options that define functional style of the various elements of FunnelChart */
 export interface FunnelStyleOptions extends Omit<BaseStyleOptions, 'seriesLabels'> {
@@ -875,6 +921,7 @@ export interface ScatterStyleOptions extends Omit<BaseStyleOptions, 'seriesLabel
     /** Subtype of ScatterChart*/
     subtype?: never;
     markerSize?: ScatterMarkerSize;
+    seriesLabels?: Omit<SeriesLabels, 'showValue' | 'showPercentage' | 'showPercentDecimals'>;
 }
 /** Configuration options that define functional style of the various elements of TreemapChart */
 export interface TreemapStyleOptions extends Omit<BaseStyleOptions, 'seriesLabels'> {
@@ -2358,59 +2405,6 @@ export type TranslationConfig = {
      */
     customTranslations?: CustomTranslationObject[];
 };
-/**
- * Single Tabber Widget tab object without styling
- *
- * @internal
- */
-export type TabberTab = {
-    displayWidgetIds: string[];
-    title: string;
-};
-/**
- * Tabber widget DTO style property
- *
- * @internal
- */
-export type TabberDtoStyle = Partial<TabberStyleProps> & {
-    activeTab?: string;
-};
-/**
- * Configuration options that define style of the various elements of the Tabber component.
- *
- * @internal
- */
-export type TabberStyleOptions = {
-    descriptionColor: string;
-    selectedBkgColor: string;
-    selectedColor: string;
-    showDescription: boolean;
-    showSeparators: boolean;
-    showTitle: boolean;
-    tabCornerRadius: TabCornerRadius;
-    tabsAlignment: string;
-    tabsInterval: TabInterval;
-    tabsSize: TabSize;
-    unselectedBkgColor: string;
-    unselectedColor: string;
-    useSelectedBkg: boolean;
-    useUnselectedBkg: boolean;
-};
-/**
- * Configuration options that defined tabber look and feel, including tabs and active tab.
- *
- * @internal
- */
-export type TabberStyleProps = TabberStyleOptions & TabberConfig;
-/**
- * Tabber business logic configuration
- *
- * @internal
- */
-export type TabberConfig = {
-    tabs: TabberTab[];
-    activeTab: number;
-};
 /** @internal */
 export type CustomContextProviderProps<P> = SoftUnion<{
     context: P;