@sisense/sdk-ui 0.13.0 → 0.14.0

package/dist/indicator-chart.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { IndicatorChartProps } from './props';
 /**
- * A React component that displays a single value.
+ * A React component that provides various options for displaying one or two numeric values as a number, gauge or ticker.
  * See [Indicator](https://docs.sisense.com/main/SisenseLinux/indicator.htm) for more information.
  *
  * @example

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

@@ -97,3 +97,8 @@ export type DashboardModelSuccessState = {
  * @returns Dashboard load state that contains the status of the execution, the result dashboard model, or the error if any
  */
 export declare const useGetDashboardModel: (params: GetDashboardModelParams) => DashboardModelState;
+/**
+ * {@link useGetDashboardModel} without tracking to be used inside other hooks or components in Compose SDK.
+ * @internal
+ */
+export declare function useGetDashboardModelInternal(params: GetDashboardModelParams): DashboardModelState;

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

@@ -81,4 +81,9 @@ export type DashboardModelsSuccessState = {
  * @param params - Parameters of the dashboards to be retrieved
  * @returns Load state that contains the status of the execution, the result dashboards, or the error if any
  */
-export declare const useGetDashboardModels: (params?: GetDashboardModelsParams) => DashboardModelsState;
+export declare const useGetDashboardModels: (params?: GetDashboardModelsParams | undefined) => DashboardModelsState;
+/**
+ * {@link useGetDashboardModels} without tracking to be used inside other hooks or components in Compose SDK.
+ * @internal
+ */
+export declare function useGetDashboardModelsInternal(params?: GetDashboardModelsParams): DashboardModelsState;

package/dist/pie-chart.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { PieChartProps } from './props';
 /**
- * A React component representing data in circular graph with the data shown as slices of a whole,
+ * A React component representing data in a circular graph with the data shown as slices of a whole,
  * with each slice representing a proportion of the total.
  * See [Pie Chart](https://docs.sisense.com/main/SisenseLinux/pie-chart.htm) for more information.
  *

package/dist/props.d.ts

@@ -73,7 +73,7 @@ export interface ExecuteQueryProps {
     /**
      * Data source the query is run against - e.g. `Sample ECommerce`
      *
-     * If not specified, the query will use the `defaultDataSource` specified in the parent {@link SisenseContextProvider} component.
+     * If not specified, the query will use the `defaultDataSource` specified in the parent Sisense Context.
      */
     dataSource?: DataSource;
     /** Dimensions of the query */
@@ -102,6 +102,14 @@ export interface ExecuteQueryProps {
     onDataChanged?: (data: QueryResultData) => void;
     /**
      * Sync or async callback that allows to modify the JAQL payload before it is sent to the server.
+     *
+     * **Note:** wrap this function in `useCallback` hook to avoid triggering query execution on each render.
+     * ```tsx
+     * const onBeforeQuery = useCallback((jaql) => {
+     *   // modify jaql here
+     *   return jaql;
+     * }, []);
+     * ```
      */
     onBeforeQuery?: (jaql: any) => any | Promise<any>;
 }
@@ -165,7 +173,7 @@ interface BaseChartEventProps {
      * Before render handler callback that allows adjusting
      * detail chart options prior to render
      *
-     * This callback is not yet supported for {@link IndicatorChart}
+     * This callback is not yet supported for Indicator Chart
      *
      * @category Callbacks
      */
@@ -221,7 +229,7 @@ export interface BaseChartProps {
      * Data set for this component, which supports two options:
      *
      * (1) Data source name (as a `string`) - e.g. `Sample ECommerce`. Under the hood,
-     * the chart will have an internal {@link ExecuteQuery} connect to the data source
+     * the chart will have an internal query connect to the data source
      * and load the data as specified in {@link dataOptions}, {@link filters}, and {@link highlights}.
      *
      * OR
@@ -233,7 +241,7 @@ export interface BaseChartProps {
      * with user-provided data.
      *
      * If neither option is specified,
-     * the chart will use the `defaultDataSource` specified in the parent {@link SisenseContextProvider} component.
+     * the chart will use the `defaultDataSource` specified in the parent Sisense Context.
      *
      *
      * @category Data
@@ -493,6 +501,12 @@ export interface DashboardWidgetProps extends Omit<ChartWidgetProps, 'dataSource
      * @category Data
      */
     filtersMergeStrategy?: FiltersMergeStrategy;
+    /**
+     * {@inheritDoc ExecuteQueryByWidgetIdProps.includeDashboardFilters}
+     *
+     * @category Data
+     */
+    includeDashboardFilters?: boolean;
     /**
      * Title of the widget
      *
@@ -555,7 +569,7 @@ export interface ChartWidgetProps extends BaseChartEventProps {
     /**
      * Data source the query is run against - e.g. `Sample ECommerce`
      *
-     * If not specified, the query will use the `defaultDataSource` specified in the parent {@link SisenseContextProvider} component.
+     * If not specified, the query will use the `defaultDataSource` specified in the parent Sisense Context.
      *
      * @category Data
      */
@@ -646,7 +660,7 @@ export interface ChartWidgetProps extends BaseChartEventProps {
     /**
      * Boolean flag whether selecting data points triggers highlight filter of the selected data
      *
-     * Recommended to turn on when the ChartWidget is enhanced with data drilldown by {@link DrilldownWidget}
+     * Recommended to turn on when the Chart Widget component is enhanced with data drilldown by the Drilldown Widget component
      *
      * If not specified, the default value is `false`
      *
@@ -663,7 +677,7 @@ export interface TableWidgetProps {
     /**
      * Data source the query is run against - e.g. `Sample ECommerce`
      *
-     * If not specified, the query will use the `defaultDataSource` specified in the parent {@link SisenseContextProvider} component.
+     * If not specified, the query will use the `defaultDataSource` specified in the parent Sisense Context.
      *
      * @category Data
      */
@@ -738,7 +752,7 @@ export interface ExecuteQueryByWidgetIdProps {
     /** {@inheritDoc ExecuteQueryProps.offset} */
     offset?: number;
     /**
-     * Strategy for merging the existing widget filters with the filters provided via the `filters` prop:
+     * Strategy for merging the existing widget filters (including highlights) with the filters provided via the `filters` and `highlights` props:
      *
      * - `widgetFirst` - prioritizes the widget filters over the provided filters in case of filter conflicts by certain attributes.
      * - `codeFirst` - prioritizes the provided filters over the widget filters in case of filter conflicts by certain attributes.
@@ -747,12 +761,26 @@ export interface ExecuteQueryByWidgetIdProps {
      * If not specified, the default strategy is `codeFirst`.
      */
     filtersMergeStrategy?: FiltersMergeStrategy;
+    /**
+     * Boolean flag whether to include dashboard filters in the widget's `filters` and `highlights`
+     *
+     * If not specified, the default value is `false`.
+     */
+    includeDashboardFilters?: boolean;
     /** Function as child component that is called to render the query results */
     children?: (queryResult: QueryResultData, queryParams: ExecuteQueryParams) => ReactNode;
     /** Callback function that is evaluated when query results are ready */
     onDataChanged?: (data: QueryResultData, queryParams: ExecuteQueryParams) => void;
     /**
      * Sync or async callback that allows to modify the JAQL payload before it is sent to the server.
+     *
+     * **Note:** wrap this function in `useCallback` hook to avoid triggering query execution on each render.
+     * ```tsx
+     * const onBeforeQuery = useCallback((jaql) => {
+     *   // modify jaql here
+     *   return jaql;
+     * }, []);
+     * ```
      */
     onBeforeQuery?: (jaql: any) => any | Promise<any>;
 }

package/dist/query-execution/use-execute-query-by-widget-id.d.ts

@@ -1,8 +1,8 @@
 import { type Filter } from '@sisense/sdk-data';
-import { ExecuteQueryParams } from './index.js';
-import { QueryState } from './query-state-reducer.js';
-import { FiltersMergeStrategy } from '../dashboard-widget/types.js';
-import { ClientApplication } from '../app/client-application.js';
+import { ExecuteQueryParams } from './';
+import { QueryState } from './query-state-reducer';
+import { FiltersMergeStrategy } from '../dashboard-widget/types';
+import { ClientApplication } from '../app/client-application';
 /**
  * Parameters for {@link useExecuteQueryByWidgetId} hook.
  */
@@ -21,8 +21,16 @@ export interface ExecuteQueryByWidgetIdParams {
     offset?: number;
     /** {@inheritDoc ExecuteQueryByWidgetIdProps.filtersMergeStrategy} */
     filtersMergeStrategy?: FiltersMergeStrategy;
+    /** {@inheritDoc ExecuteQueryByWidgetIdProps.includeDashboardFilters} */
+    includeDashboardFilters?: boolean;
     /** {@inheritDoc ExecuteQueryByWidgetIdProps.onBeforeQuery} */
     onBeforeQuery?: (jaql: any) => any | Promise<any>;
+    /**
+     * Boolean flag to control if query is executed
+     *
+     * If not specified, the default value is `true`
+     */
+    enabled?: boolean;
 }
 export type QueryByWidgetIdState = QueryState & {
     /** Query parameters constructed over the widget */
@@ -57,6 +65,11 @@ export type QueryByWidgetIdState = QueryState & {
  * @returns Query state that contains the status of the query execution, the result data, the constructed query parameters, or the error if any occurred
  */
 export declare const useExecuteQueryByWidgetId: (params: ExecuteQueryByWidgetIdParams) => QueryByWidgetIdState;
+/**
+ * {@link useExecuteQueryByWidgetId} without tracking to be used inside other hooks or components in Compose SDK.
+ * @internal
+ */
+export declare function useExecuteQueryByWidgetIdInternal(params: ExecuteQueryByWidgetIdParams): QueryByWidgetIdState;
 /**
  * Checks if the parameters have changed by deep comparison.
  *
@@ -65,7 +78,7 @@ export declare const useExecuteQueryByWidgetId: (params: ExecuteQueryByWidgetIdP
  */
 export declare function isParamsChanged(prevParams: ExecuteQueryByWidgetIdParams | undefined, newParams: ExecuteQueryByWidgetIdParams): boolean;
 /** @internal */
-export declare function executeQueryByWidgetId({ widgetOid, dashboardOid, filters, highlights, filtersMergeStrategy, count, offset, app, onBeforeQuery, }: ExecuteQueryByWidgetIdParams & {
+export declare function executeQueryByWidgetId({ widgetOid, dashboardOid, filters, highlights, filtersMergeStrategy, count, offset, includeDashboardFilters, app, onBeforeQuery, }: ExecuteQueryByWidgetIdParams & {
     app: ClientApplication;
 }): Promise<{
     data: import("@sisense/sdk-data").QueryResultData;

package/dist/query-execution/use-execute-query.d.ts

@@ -3,11 +3,11 @@ import { QueryState } from './query-state-reducer';
 /**
  * Parameters for {@link useExecuteQuery} hook.
  */
-export type ExecuteQueryParams = {
+export interface ExecuteQueryParams {
     /**
      * Data source the query is run against - e.g. `Sample ECommerce`
      *
-     * If not specified, the query will use the `defaultDataSource` specified in the parent {@link SisenseContextProvider} component.
+     * If not specified, the query will use the `defaultDataSource` specified in the parent Sisense Context.
      */
     dataSource?: DataSource;
     /** Dimensions of the query */
@@ -28,11 +28,9 @@ export type ExecuteQueryParams = {
      * If not specified, the default value is `true`
      */
     enabled?: boolean;
-    /**
-     * Sync or async callback that allows to modify the JAQL payload before it is sent to the server.
-     */
+    /** {@inheritDoc ExecuteQueryProps.onBeforeQuery} */
     onBeforeQuery?: (jaql: any) => any | Promise<any>;
-};
+}
 /**
  * React hook that executes a data query.
  * This approach, which offers an alternative to {@link ExecuteQuery} component, is similar to React Query's `useQuery` hook.
@@ -65,3 +63,9 @@ export type ExecuteQueryParams = {
  * @returns Query state that contains the status of the query execution, the result data, or the error if any occurred
  */
 export declare const useExecuteQuery: (params: ExecuteQueryParams) => QueryState;
+/**
+ * {@link useExecuteQuery} without tracking to be used inside other hooks or components in Compose SDK.
+ *
+ * @internal
+ */
+export declare function useExecuteQueryInternal(params: ExecuteQueryParams): QueryState;

package/dist/scatter-chart.d.ts

@@ -7,7 +7,7 @@ import { ScatterChartProps } from './props';
  * **Point**: A field that for each of its members a scatter point is drawn. The maximum amount of data points is 500.
  *
  * **Size**: An optional field represented by the size of the circles.
- * If omitted, all scatter points are equal in size. If used, the circle size is relative to their value.
+ * If omitted, all scatter points are equal in size. If used, the circle sizes are relative to their values.
  *
  * See [Scatter Chart](https://docs.sisense.com/main/SisenseLinux/scatter-chart.htm) for more information.
  *

package/dist/treemap-chart.d.ts

@@ -2,8 +2,7 @@
 import { TreemapChartProps } from './props';
 /**
  * A React component displaying hierarchical data in the form of nested rectangles.
- * This type of chart can be used in different scenarios, for example,
- * instead of a column chart if you have to compare too many categories and sub-categories.
+ * This type of chart can be used instead of a column chart for comparing a large number of categories and sub-categories.
  * See [Treemap Chart](https://docs.sisense.com/main/SisenseLinux/treemap.htm) for more information.
  *
  * @example

package/dist/types.d.ts

@@ -377,9 +377,13 @@ export interface SunburstStyleOptions extends BaseStyleOptions {
  */
 export type StyleOptions = LineStyleOptions | AreaStyleOptions | StackableStyleOptions | PieStyleOptions | FunnelStyleOptions | PolarStyleOptions | IndicatorStyleOptions | ScatterStyleOptions | TreemapStyleOptions | SunburstStyleOptions;
 /** Mapping of each of the chart value series to colors. */
-export type ValueToColorMap = Record<string, string>;
-/** Mapping of each of the chart value series to colors. */
-export type ValueToColorMultiColumnsMap = Record<string, Record<string, string>>;
+export type ValueToColorMap = {
+    [value: string]: string;
+};
+/** Mapping of each of the chart columns with mapping of each value series to colors. */
+export type MultiColumnValueToColorMap = {
+    [columnName: string]: ValueToColorMap;
+};
 /**
  * Chart type of one of the supported chart families
  */

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

@@ -1,8 +1,8 @@
 import { type FunctionComponent } from 'react';
 import { ChartWidgetProps } from '../props';
 /**
- * The Chart Widget component extending the {@link Chart} component to support advanced BI
- * capabilities such as drilldown.
+ * 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.
  *
  * @example
  * Example of using the `ChartWidget` component to

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

@@ -22,7 +22,7 @@ export declare const useDrilldown: (dataOptions: ChartDataOptions, drilldownOpti
     } | {
         category: (import("@sisense/sdk-data").Column | import("../../types").StyledColumn)[];
         value: (import("@sisense/sdk-data").MeasureColumn | import("@sisense/sdk-data").CalculatedMeasureColumn | import("../../types").StyledMeasureColumn)[];
-        seriesToColorMap?: import("../../types").ValueToColorMap | undefined;
+        seriesToColorMap?: import("../../types").ValueToColorMap | import("../../types").MultiColumnValueToColorMap | undefined;
     };
     selectDrilldown: (points: DataPoint[], nextDimension: Attribute) => void;
     sliceDrilldownSelections: (i: number) => void;

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

@@ -1,8 +1,7 @@
 import { type FunctionComponent } from 'react';
 import { TableWidgetProps } from '../props';
 /**
- * The TableWidget component extending the {@link Table} component to support advanced BI
- * capabilities such as header.
+ * The TableWidget component extending the {@link Table} component to support widget style options.
  *
  * @example
  * Example of using the `Widget` component to

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sisense/sdk-ui",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "type": "module",
   "exports": "./dist/index.js",
   "main": "./dist/index.js",
@@ -12,10 +12,11 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/material": "^5.11.6",
-    "@sisense/sdk-common": "^0.13.0",
-    "@sisense/sdk-data": "^0.13.0",
-    "@sisense/sdk-query-client": "^0.13.0",
-    "@sisense/sdk-rest-client": "^0.13.0",
+    "@sisense/sdk-common": "^0.14.0",
+    "@sisense/sdk-data": "^0.14.0",
+    "@sisense/sdk-query-client": "^0.14.0",
+    "@sisense/sdk-rest-client": "^0.14.0",
+    "@sisense/sdk-tracking": "^0.14.0",
     "@sisense/sisense-charts": "5.1.0-alpha-04052758.0",
     "classnames": "^2.3.2",
     "colorjs.io": "^0.4.3",
@@ -31,6 +32,7 @@
     "react-datepicker": "^4.16.0",
     "react-i18next": "^13.2.2",
     "react-number-format": "^5.1.0",
+    "react-query": "^3.39.3",
     "ts-deepmerge": "6.0.2",
     "ts-essentials": "^9.3.0",
     "whatwg-fetch": "^3.6.2"
@@ -60,7 +62,6 @@
     "@babel/preset-env": "^7.20.2",
     "@mui/icons-material": "^5.14.9",
     "@mui/x-data-grid": "^6.16.0",
-    "@mui/x-data-grid-generator": "^6.16.0",
     "@mui/x-data-grid-pro": "^6.16.0",
     "@storybook/addon-actions": "7.0.24",
     "@storybook/addon-docs": "7.0.24",