@sisense/sdk-ui 1.3.0 → 1.4.0

package/dist/indicator-canvas.d.ts

@@ -3,7 +3,7 @@ import { type FunctionComponent } from 'react';
 import { IndicatorChartData } from './chart-data/types';
 import { IndicatorChartDesignOptions } from './chart-options-processor/translations/design-options';
 import { ChartData } from './chart-data/types';
-import { ChartDesignOptions } from './chart-options-processor/translations/types';
+import { DesignOptions } from './chart-options-processor/translations/types';
 import { ThemeSettings } from './types';
 interface Props {
     chartData: IndicatorChartData;
@@ -17,5 +17,5 @@ interface Props {
 export declare const IndicatorCanvas: FunctionComponent<Props>;
 export declare const isIndicatorChartData: (chartData: ChartData) => chartData is IndicatorChartData;
 export declare const isIndicatorChartDataOptionsInternal: (dataOptions: ChartDataOptionsInternal) => dataOptions is IndicatorChartDataOptionsInternal;
-export declare const isIndicatorDesignOptions: (designOptions: ChartDesignOptions) => designOptions is IndicatorChartDesignOptions;
+export declare const isIndicatorDesignOptions: (designOptions: DesignOptions) => designOptions is IndicatorChartDesignOptions;
 export {};

package/dist/models/dashboard/use-get-dashboard-model.d.ts

@@ -1,3 +1,4 @@
+import { DataState } from '../../common/hooks/data-load-state-reducer';
 import { type DashboardModel } from './types';
 import { GetDashboardModelOptions } from './get-dashboard-model';
 import { HookEnableParam } from '../../common/hooks/types';
@@ -103,3 +104,10 @@ export declare const useGetDashboardModel: (params: GetDashboardModelParams) =>
  * @internal
  */
 export declare function useGetDashboardModelInternal(params: GetDashboardModelParams): DashboardModelState;
+/**
+ * Translates the data state to the dashboard model state.
+ *
+ * @internal
+ * @param dataState - The data state to be translated
+ */
+export declare function translateToDashboardResponse(dataState: DataState<DashboardModel>): DashboardModelState;

package/dist/models/dashboard/use-get-dashboard-models.d.ts

@@ -1,3 +1,4 @@
+import { DataState } from '../../common/hooks/data-load-state-reducer.js';
 import { type DashboardModel } from './types.js';
 import { HookEnableParam } from '../../common/hooks/types.js';
 import { GetDashboardModelsOptions } from './get-dashboard-models.js';
@@ -88,3 +89,8 @@ export declare const useGetDashboardModels: (params?: GetDashboardModelsParams |
  * @internal
  */
 export declare function useGetDashboardModelsInternal(params?: GetDashboardModelsParams): DashboardModelsState;
+/**
+ * @internal
+ * Translates the data state to a dashboard models state.
+ **/
+export declare function translateToDashboardsResponse(dataState: DataState<DashboardModel[]>): DashboardModelsState;

package/dist/pivot-table/index.d.ts

@@ -0,0 +1 @@
+export { PivotTable } from './pivot-table';

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { PivotTableProps } from '../props';
+/**
+ * Pivot Table with pagination.
+ *
+ * See [Pivot Tables](https://docs.sisense.com/main/SisenseLinux/pivot.htm) for more information.
+ *
+ * @example
+ * (1) Example of PivotTable from the `Sample ECommerce` data model:
+ *
+ * ```tsx
+ * <PivotTable
+ *   dataSet={DM.DataSource}
+ *   dataOptions={{
+ *     rows: [
+ *       { column: DM.Category.Category, includeSubTotals: true },
+ *       { column: DM.Commerce.AgeRange, includeSubTotals: true },
+ *       DM.Commerce.Condition,
+ *     ],
+ *     columns: [{ column: DM.Commerce.Gender, includeSubTotals: true }],
+ *     values: [
+ *       {
+ *         column: measureFactory.sum(DM.Commerce.Cost, 'Total Cost'),
+ *         dataBars: true,
+ *         totalsCalculation: 'sum',
+ *       },
+ *       {
+ *         column: measureFactory.sum(DM.Commerce.Revenue, 'Total Revenue'),
+ *         totalsCalculation: 'sum',
+ *       },
+ *     ],
+ *     grandTotals: { title: 'Grand Total', rows: true, columns: true },
+ *   }}
+ *   filters={[filterFactory.members(DM.Commerce.Gender, ['Female', 'Male'])]}
+ *   styleOptions={{ width: 1000, height: 600, rowsPerPage: 50 }}
+ * />
+ * ```
+ * @param props - Pivot Table properties
+ * @returns Pivot Table component
+ * @alpha
+ */
+export declare const PivotTable: React.FunctionComponent<PivotTableProps>;

package/dist/pivot-table/use-get-pivot-table-query.d.ts

@@ -0,0 +1,14 @@
+import { PivotTableProps } from '../props';
+import { JaqlRequest } from '@sisense/sdk-pivot-client';
+/**
+ * A hook that returns the JAQL request object from pivot table props.
+ *
+ * @internal
+ */
+export declare const useGetPivotTableQuery: ({ dataSet, dataOptions, filters }: PivotTableProps) => {
+    isLoading: boolean;
+    isSuccess: boolean;
+    isError: boolean;
+    error: Error | undefined;
+    jaql: JaqlRequest | null;
+};

package/dist/props.d.ts

@@ -1,8 +1,8 @@
 import { Attribute, Filter, Measure, DataSource, Data, QueryResultData, FilterRelations } from '@sisense/sdk-data';
-import { ChartDataOptions, CartesianChartDataOptions, CategoricalChartDataOptions, ThemeSettings, PolarStyleOptions, PieStyleOptions, StackableStyleOptions, LineStyleOptions, AreaStyleOptions, FunnelStyleOptions, ScatterStyleOptions, ChartStyleOptions, ChartType, IndicatorStyleOptions, DrilldownOptions, TableStyleOptions, ThemeOid, TreemapStyleOptions, CustomDrilldownResult, MenuPosition, MenuItemSection, SunburstStyleOptions, ChartWidgetStyleOptions, TableWidgetStyleOptions, DashboardWidgetStyleOptions, BoxplotStyleOptions, ScattermapStyleOptions, AreamapStyleOptions, DataPoint, ScatterDataPoint, AreamapDataPoint, BoxplotDataPoint, ChartDataPoints } from './types';
+import { ChartDataOptions, CartesianChartDataOptions, CategoricalChartDataOptions, ThemeSettings, PolarStyleOptions, PieStyleOptions, StackableStyleOptions, LineStyleOptions, AreaStyleOptions, FunnelStyleOptions, ScatterStyleOptions, ChartStyleOptions, ChartType, IndicatorStyleOptions, DrilldownOptions, TableStyleOptions, ThemeOid, TreemapStyleOptions, CustomDrilldownResult, MenuPosition, MenuItemSection, SunburstStyleOptions, ChartWidgetStyleOptions, TableWidgetStyleOptions, DashboardWidgetStyleOptions, BoxplotStyleOptions, ScattermapStyleOptions, AreamapStyleOptions, DataPoint, ScatterDataPoint, AreamapDataPoint, BoxplotDataPoint, ChartDataPoints, ScattermapDataPoint, PivotTableStyleOptions } from './types';
 import { HighchartsOptions } from './chart-options-processor/chart-options-service';
 import { ComponentType, PropsWithChildren, ReactNode } from 'react';
-import { IndicatorChartDataOptions, BoxplotChartCustomDataOptions, BoxplotChartDataOptions, ScatterChartDataOptions, TableDataOptions, ScattermapChartDataOptions, AreamapChartDataOptions } from './chart-data-options/types';
+import { IndicatorChartDataOptions, BoxplotChartCustomDataOptions, BoxplotChartDataOptions, ScatterChartDataOptions, TableDataOptions, ScattermapChartDataOptions, AreamapChartDataOptions, PivotTableDataOptions } from './chart-data-options/types';
 import { AppConfig } from './app/client-application';
 import { ExecuteQueryParams, QueryByWidgetIdState, QueryState } from './query-execution';
 import { FiltersMergeStrategy } from './dashboard-widget/types';
@@ -199,6 +199,14 @@ export type AreamapDataPointEventHandler = (
 point: AreamapDataPoint, 
 /** Native MouseEvent */
 nativeEvent: MouseEvent) => void;
+/**
+ * Click handler for when a data point on Scattermap is clicked.
+ */
+export type ScattermapDataPointEventHandler = (
+/** Data point that was clicked */
+point: ScattermapDataPoint, 
+/** Native MouseEvent */
+nativeEvent: MouseEvent) => void;
 /**
  * Click handler for when a data point on Boxplot is clicked.
  */
@@ -278,6 +286,18 @@ interface AreamapChartEventProps {
      */
     onDataPointClick?: AreamapDataPointEventHandler;
 }
+/**
+ * Event props for Scattermap chart which uses ScattermapDataPoint type
+ * to describe data points for events.
+ */
+interface ScattermapChartEventProps {
+    /**
+     * Click handler callback for a data point
+     *
+     * @category Callbacks
+     */
+    onDataPointClick?: ScattermapDataPointEventHandler;
+}
 /**
  * Event props for Boxplot chart which uses BoxplotDataPoint type
  * to describe data points for events.
@@ -352,7 +372,7 @@ interface ChartEventProps extends HighchartsBasedChartEventProps {
      *
      * @category Callbacks
      */
-    onDataPointClick?: DataPointEventHandler | ScatterDataPointEventHandler | AreamapDataPointEventHandler | BoxplotDataPointEventHandler;
+    onDataPointClick?: DataPointEventHandler | ScatterDataPointEventHandler | AreamapDataPointEventHandler | BoxplotDataPointEventHandler | ScattermapDataPointEventHandler;
     /**
      * Context menu handler callback for a data point
      *
@@ -553,6 +573,44 @@ export interface TableProps {
      */
     refreshCounter?: number;
 }
+/**
+ * Props of the {@link PivotTable} component.
+ */
+export interface PivotTableProps {
+    /**
+     * Data source name (as a `string`) - e.g. `Sample ECommerce`.
+     *
+     * If not specified, the component will use the `defaultDataSource` specified in the parent Sisense Context.
+     *
+     * @category Data
+     */
+    dataSet?: DataSource;
+    /**
+     * Configurations for how to interpret and present the data passed to the component
+     *
+     * @category Representation
+     */
+    dataOptions: PivotTableDataOptions;
+    /**
+     * Filters that will slice query results
+     *
+     * @category Data
+     */
+    filters?: Filter[] | FilterRelations;
+    /**
+     * Configurations that define functional style of the various table elements
+     *
+     * @category Representation
+     */
+    styleOptions?: PivotTableStyleOptions;
+    /**
+     * Used to force a refresh of the table from outside the table component
+     * Since added to dependencies of useEffect, will trigger a query execution
+     *
+     * @internal
+     */
+    refreshCounter?: number;
+}
 /**
  * Props of the {@link ScatterChart} component.
  */
@@ -908,7 +966,7 @@ export interface BoxplotChartProps extends BaseChartProps, BoxplotChartEventProp
 /**
  * Props of the {@link ScattermapChart} component.
  */
-export interface ScattermapChartProps extends BaseChartProps {
+export interface ScattermapChartProps extends BaseChartProps, ScattermapChartEventProps {
     /**
      * Configurations for how to interpret and present the data passed to the chart
      *

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

@@ -9,7 +9,7 @@ interface Props {
     chartType: ChartType;
     chartData: ChartData;
     chartDataOptions: ChartDataOptionsInternal;
-    designOptions: ChartDesignOptions;
+    chartDesignOptions: ChartDesignOptions;
     themeSettings?: CompleteThemeSettings;
     onDataPointClick?: SisenseChartDataPointEventHandler;
     onDataPointContextMenu?: SisenseChartDataPointEventHandler;
@@ -19,5 +19,5 @@ interface Props {
 /**
  * @internal
  */
-export declare const SisenseChart: ({ chartType, chartData, chartDataOptions, designOptions, themeSettings, onDataPointClick, onDataPointContextMenu, onDataPointsSelected, onBeforeRender, }: Props) => JSX.Element | null;
+export declare const SisenseChart: ({ chartType, chartData, chartDataOptions, chartDesignOptions, themeSettings, onDataPointClick, onDataPointContextMenu, onDataPointsSelected, onBeforeRender, }: Props) => JSX.Element | null;
 export {};

package/dist/types.d.ts

@@ -9,6 +9,7 @@ import { CartesianChartType, ScatterChartType, CategoricalChartType, IndicatorCh
 import { DataPointsEventHandler } from './props';
 import { LegendPosition } from './chart-options-processor/translations/legend-section';
 import { GeoDataElement, RawGeoDataElement } from './chart-data/types';
+import { Coordinates } from './charts/map-charts/scattermap/types';
 export type { AppConfig } from './app/client-application';
 export type { DateConfig } from './query/date-formats';
 export type { CartesianChartDataOptions, CategoricalChartDataOptions, ChartDataOptions, ScatterChartDataOptions, IndicatorChartDataOptions, StyledColumn, StyledMeasureColumn, } from './chart-data-options/types';
@@ -312,6 +313,49 @@ export interface TableStyleOptions {
      */
     height?: number;
 }
+/** Configuration options that define functional style of the various elements of {@link PivotTable} */
+export interface PivotTableStyleOptions {
+    /**
+     * Boolean flag whether to fill header cells with background color
+     */
+    headersColor?: boolean;
+    /**
+     * Boolean flag whether to apply background color to alternate rows.
+     */
+    alternatingRowsColor?: boolean;
+    /**
+     * Boolean flag whether to apply background color to alternate columns
+     */
+    alternatingColumnsColor?: boolean;
+    /**
+     * Number of rows per page
+     *
+     * Default value is 25
+     *
+     */
+    rowsPerPage?: number;
+    /**
+     * Total width of the component, which is considered in the following order of priority:
+     *
+     * 1. Value passed to this property (in pixels)
+     * 2. Width of the container wrapping this component
+     * 3. Default value of 400px
+     *
+     */
+    width?: number;
+    /**
+     * Total height of the component, which is considered in the following order of priority:
+     *
+     * 1. Value passed to this property (in pixels).
+     * 2. Height of the container wrapping this component
+     * 3. Default value of 500px (for component without header) or 525px (for component with header).
+     */
+    height?: number;
+    /**
+     * Boolean flag whether the height of the component should be automatically adjusted to fit the content
+     */
+    isAutoHeight?: boolean;
+}
 /**
  * Common part of IndicatorStyleOptions for all types of indicator
  *
@@ -447,37 +491,37 @@ export type NumberFormatConfig = {
     /**
      * Supported formats
      */
-    name: 'Numbers' | 'Currency' | 'Percent';
+    name?: 'Numbers' | 'Currency' | 'Percent';
     /**
      * The number of decimal places
      */
-    decimalScale: DecimalScale;
+    decimalScale?: DecimalScale;
     /**
      * Boolean flag whether to show an abbreviation
      * for a number greater than or equal one trillion - e.g. 1T
      */
-    trillion: boolean;
+    trillion?: boolean;
     /**
      * Boolean flag whether to show an abbreviation
      * for a number greater than or equal one billion - e.g. 1B
      */
-    billion: boolean;
+    billion?: boolean;
     /**
      * Boolean flag whether to show an abbreviation
      * for a number greater than or equal one million - e.g. 1M
      */
-    million: boolean;
+    million?: boolean;
     /**
      * Boolean flag whether to show an abbreviation
      * for a number greater than or equal one thousand - e.g. 1K
      */
-    kilo: boolean;
+    kilo?: boolean;
     /**
      * Boolean flag whether the thousand separator is shown
      *
      * If true, show the thousand separator, e.g. `1,000`. Otherwise, show `1000`
      */
-    thousandSeparator: boolean;
+    thousandSeparator?: boolean;
     /**
      * Boolean flag whether `symbol` is shown in front of or after the number
      *
@@ -485,12 +529,18 @@ export type NumberFormatConfig = {
      *
      * If false, append `symbol` after the number, e.g. show `1000¥` when `symbol` is `¥`.
      */
-    prefix: boolean;
+    prefix?: boolean;
     /**
      * Symbol to show in front of or after the number depending on the value of `prefix`.
      */
-    symbol: string;
+    symbol?: string;
 };
+/**
+ * {@link NumberFormatConfig} with all props required
+ *
+ * @internal
+ */
+export type CompleteNumberFormatConfig = Required<NumberFormatConfig>;
 /** Identifier of a theme as defined in the Sisense instance. */
 export type ThemeOid = string;
 /** Theme settings defining the look and feel of components. */
@@ -642,11 +692,13 @@ export type ChartDataPoints = DataPoint[] | ScatterDataPoint[] | BoxplotDataPoin
 export type ChartDataPoint = DataPoint | ScatterDataPoint | BoxplotDataPoint | AreamapDataPoint;
 /**
  * Abstract data point in a chart that based on Highcharts.
+ *
  * @internal
  */
 export type HighchartsBasedChartDataPoint = DataPoint | ScatterDataPoint | BoxplotDataPoint;
 /**
  * Abstract event handler for data point click event
+ *
  * @internal
  */
 export type ChartDataPointEventHandler = (point: ChartDataPoint, nativeEvent: PointerEvent | MouseEvent) => void;
@@ -690,6 +742,19 @@ export type BoxplotDataPoint = {
  * Data point in an Areamap chart.
  */
 export type AreamapDataPoint = GeoDataElement;
+/**
+ * Data point in an Scattermap chart.
+ */
+export type ScattermapDataPoint = {
+    /** Location name displayed on marker */
+    displayName: string;
+    /** Array with categories strings used for location definition */
+    categories: string[];
+    /** Numeric measure value */
+    value: number;
+    /** Location coordinates */
+    coordinates: Coordinates;
+};
 /**
  * This is the minimum definition of Highcharts
  * events, Series, and Point that we require. As

package/dist/utils/utility-types.d.ts

@@ -40,4 +40,16 @@ type PickTypeOf<T, K extends string | number | symbol> = K extends AllKeys<T> ?
  * Abstract object with any unknown values
  */
 export type AnyObject = Record<string, any>;
+/**
+ * Allows you to make a property of an object required.
+ * @example
+ * type T = {
+ *   a: string;
+ *   b?: number;
+ *   c?: boolean;
+ * };
+ *
+ * type TRequiredB = WithRequiredProp<T, 'b'>; // { a: string; b: number; c?: boolean; }
+ */
+export type WithRequiredProp<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;
 export {};

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" | "size" | "color" | "disabled" | "className" | "tabIndex" | "classes" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & {
+}, "style" | "children" | "disabled" | "size" | "className" | "tabIndex" | "color" | "action" | "classes" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "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" | "size" | "color" | "disabled" | "className" | "tabIndex" | "classes" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & {
+}, "style" | "children" | "disabled" | "size" | "className" | "tabIndex" | "color" | "action" | "classes" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/dist/widgets/common/drilldown.d.ts

@@ -30,7 +30,7 @@ export declare const useDrilldown: (dataOptions: ChartDataOptions, drilldownOpti
         outliersEnabled?: boolean | undefined;
     } | {
         category: (import("@sisense/sdk-data").Column | import("../../types").StyledColumn | undefined)[];
-        value: (import("@sisense/sdk-data").Column | import("../../types").StyledColumn | import("@sisense/sdk-data").MeasureColumn | import("@sisense/sdk-data").CalculatedMeasureColumn | import("../../types").StyledMeasureColumn)[];
+        value: (import("@sisense/sdk-data").Column | import("@sisense/sdk-data").MeasureColumn | import("@sisense/sdk-data").CalculatedMeasureColumn | import("../../types").StyledMeasureColumn | import("../../types").StyledColumn)[];
         outliers?: [import("@sisense/sdk-data").Column | import("../../types").StyledColumn] | undefined;
         valueTitle: string;
     };