@sisense/sdk-ui 0.12.1 → 0.13.0

package/dist/no-results-overlay/images/index.d.ts

@@ -1,2 +1,2 @@
 import { ChartType, TableType } from '../../types';
-export declare function getNoResultOverlayImage(type: ChartType | TableType): string;
+export declare function getNoResultOverlayImage(type: ChartType | TableType): any;

package/dist/props.d.ts

@@ -1,5 +1,5 @@
 import { Attribute, Filter, Measure, DataSource, Data, QueryResultData } from '@sisense/sdk-data';
-import { ChartDataOptions, CartesianChartDataOptions, CategoricalChartDataOptions, ThemeSettings, PolarStyleOptions, PieStyleOptions, StackableStyleOptions, LineStyleOptions, AreaStyleOptions, FunnelStyleOptions, ScatterStyleOptions, StyleOptions, ChartType, IndicatorStyleOptions, DrilldownOptions, TableStyleOptions, ThemeOid, WidgetStyleOptions, TreemapStyleOptions, CustomDrilldownResult, MenuPosition, MenuItemSection } from './types';
+import { ChartDataOptions, CartesianChartDataOptions, CategoricalChartDataOptions, ThemeSettings, PolarStyleOptions, PieStyleOptions, StackableStyleOptions, LineStyleOptions, AreaStyleOptions, FunnelStyleOptions, ScatterStyleOptions, StyleOptions, ChartType, IndicatorStyleOptions, DrilldownOptions, TableStyleOptions, ThemeOid, WidgetStyleOptions, TreemapStyleOptions, CustomDrilldownResult, MenuPosition, MenuItemSection, SunburstStyleOptions } from './types';
 import { HighchartsOptions } from './chart-options-processor/chart-options-service';
 import { ComponentType, PropsWithChildren, ReactNode } from 'react';
 import { IndicatorDataOptions, ScatterChartDataOptions, TableDataOptions } from './chart-data-options/types';
@@ -9,7 +9,7 @@ import { ExecuteQueryParams } from './query-execution';
 import { FiltersMergeStrategy } from './dashboard-widget/types';
 export type { ScatterDataPointEventHandler, ScatterDataPointsEventHandler, DataPointEventHandler, DataPointsEventHandler, MenuItemSection, HighchartsOptions, };
 /**
- * Props for {@link SisenseContextProvider} component
+ * Configurations for Sisense Context
  */
 export interface SisenseContextProviderProps {
     /**
@@ -100,9 +100,13 @@ export interface ExecuteQueryProps {
     children?: (queryResult: QueryResultData) => ReactNode;
     /** Callback function that is evaluated when query results are ready */
     onDataChanged?: (data: QueryResultData) => void;
+    /**
+     * Sync or async callback that allows to modify the JAQL payload before it is sent to the server.
+     */
+    onBeforeQuery?: (jaql: any) => any | Promise<any>;
 }
 /**
- * Props for {@link ThemeProvider} component.
+ * Configurations for Theme.
  *
  * Two options are supported:
  *
@@ -138,7 +142,7 @@ export type ThemeProviderProps = PropsWithChildren<{
 export type BeforeRenderHandler = (
 /** Highcharts options */
 highchartsOptions: HighchartsOptions) => HighchartsOptions;
-interface ChartEventProps {
+interface BaseChartEventProps {
     /**
      * Click handler callback for a data point
      *
@@ -167,7 +171,7 @@ interface ChartEventProps {
      */
     onBeforeRender?: BeforeRenderHandler;
 }
-interface CartesianChartEventProps extends ChartEventProps {
+interface ChartEventProps extends BaseChartEventProps {
     /**
      * Click handler callback for a data point
      *
@@ -187,7 +191,7 @@ interface CartesianChartEventProps extends ChartEventProps {
      */
     onDataPointsSelected?: DataPointsEventHandler;
 }
-interface ScatterChartEventProps extends ChartEventProps {
+interface ScatterChartEventProps extends BaseChartEventProps {
     /**
      * Click handler callback for a data point
      *
@@ -214,7 +218,7 @@ interface ScatterChartEventProps extends ChartEventProps {
  */
 export interface BaseChartProps {
     /**
-     * Data set for this chart, which supports two options:
+     * 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
@@ -222,7 +226,7 @@ export interface BaseChartProps {
      *
      * OR
      *
-     * (2) Explicit {@link @sisense/sdk-data!Data}, which is made up of
+     * (2) Explicit {@link @sisense/sdk-data!Data | Data}, which is made up of
      * an array of {@link @sisense/sdk-data!Column | columns}
      * and a two-dimensional array of data {@link @sisense/sdk-data!Cell | cells}.
      * This allows the chart component to be used
@@ -251,7 +255,7 @@ export interface BaseChartProps {
 /**
  * Props shared across {@link Chart} components.
  */
-export interface ChartProps extends BaseChartProps, ChartEventProps {
+export interface ChartProps extends BaseChartProps, BaseChartEventProps {
     /**
      * Default chart type of each series.
      *
@@ -281,7 +285,7 @@ export interface ChartProps extends BaseChartProps, ChartEventProps {
 /**
  * Props of the {@link AreaChart} component.
  */
-export interface AreaChartProps extends BaseChartProps, CartesianChartEventProps {
+export interface AreaChartProps extends BaseChartProps, ChartEventProps {
     /**
      * Configurations for how to interpret and present data passed to the chart.
      *
@@ -298,7 +302,7 @@ export interface AreaChartProps extends BaseChartProps, CartesianChartEventProps
 /**
  * Props of the {@link BarChart} component.
  */
-export interface BarChartProps extends BaseChartProps, CartesianChartEventProps {
+export interface BarChartProps extends BaseChartProps, ChartEventProps {
     /**
      * Configurations for how to interpret and present the data passed to the chart
      *
@@ -315,7 +319,7 @@ export interface BarChartProps extends BaseChartProps, CartesianChartEventProps
 /**
  * Props of the {@link ColumnChart} component.
  */
-export interface ColumnChartProps extends BaseChartProps, CartesianChartEventProps {
+export interface ColumnChartProps extends BaseChartProps, ChartEventProps {
     /**
      * Configurations for how to interpret and present the data passed to the chart
      *
@@ -332,7 +336,7 @@ export interface ColumnChartProps extends BaseChartProps, CartesianChartEventPro
 /**
  * Props of the {@link FunnelChart} component.
  */
-export interface FunnelChartProps extends BaseChartProps, CartesianChartEventProps {
+export interface FunnelChartProps extends BaseChartProps, ChartEventProps {
     /**
      * Configurations for how to interpret and present the data passed to the chart
      *
@@ -349,7 +353,7 @@ export interface FunnelChartProps extends BaseChartProps, CartesianChartEventPro
 /**
  * Props of the {@link LineChart} component.
  */
-export interface LineChartProps extends BaseChartProps, CartesianChartEventProps {
+export interface LineChartProps extends BaseChartProps, ChartEventProps {
     /**
      * Configurations for how to interpret and present data passed to the chart.
      *
@@ -366,7 +370,7 @@ export interface LineChartProps extends BaseChartProps, CartesianChartEventProps
 /**
  * Props of the {@link PieChart} component.
  */
-export interface PieChartProps extends BaseChartProps, CartesianChartEventProps {
+export interface PieChartProps extends BaseChartProps, ChartEventProps {
     /**
      * Configurations for how to interpret and present the data passed to the chart
      *
@@ -383,7 +387,7 @@ export interface PieChartProps extends BaseChartProps, CartesianChartEventProps
 /**
  * Props of the {@link PolarChart} component.
  */
-export interface PolarChartProps extends BaseChartProps, CartesianChartEventProps {
+export interface PolarChartProps extends BaseChartProps, ChartEventProps {
     /** Configurations for how to interpret and present the data passed to the chart */
     dataOptions: CartesianChartDataOptions;
     /** Configuration that define functional style of the various chart elements */
@@ -403,31 +407,16 @@ export interface IndicatorChartProps extends BaseChartProps {
  */
 export interface TableProps {
     /**
-     * Data set for this chart, 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
-     * and load the data as specified in {@link dataOptions} and {@link filters}.
-     *
-     * OR
-     *
-     * (2) Explicit {@link @sisense/sdk-data!Data}, which is made up of
-     * an array of {@link @sisense/sdk-data!Column | columns}
-     * and a two-dimensional array of data {@link @sisense/sdk-data!Cell | cells}.
-     * This allows the chart component to be used
-     * with user-provided data.
-     *
-     * If neither option is specified,
-     * the chart will use the `defaultDataSource` specified in the parent {@link SisenseContextProvider} component.
+     * {@inheritDoc ChartProps.dataSet}
      *
      *
      * @category Data
      */
     dataSet?: DataSource | Data;
     /**
-     * Configurations for how to interpret and present the data passed to the chart
+     * Configurations for how to interpret and present the data passed to the component
      *
-     * @category Chart
+     * @category Representation
      */
     dataOptions: TableDataOptions;
     /**
@@ -437,9 +426,9 @@ export interface TableProps {
      */
     filters?: Filter[];
     /**
-     * Configurations that define functional style of the various chart elements
+     * Configurations that define functional style of the various table elements
      *
-     * @category Chart
+     * @category Representation
      */
     styleOptions?: TableStyleOptions;
     /**
@@ -471,7 +460,7 @@ export interface ScatterChartProps extends BaseChartProps, ScatterChartEventProp
  * Props for the {@link DashboardWidget} component
  *
  */
-export interface DashboardWidgetProps extends Omit<ChartWidgetProps, 'dataSource' | 'dataOptions' | 'chartType' | 'styleOptions'>, ChartEventProps {
+export interface DashboardWidgetProps extends Omit<ChartWidgetProps, 'dataSource' | 'dataOptions' | 'chartType' | 'styleOptions'>, BaseChartEventProps {
     /**
      * Identifier of the widget
      *
@@ -562,7 +551,7 @@ export interface DashboardWidgetProps extends Omit<ChartWidgetProps, 'dataSource
  * Props for the {@link ChartWidget} component
  *
  */
-export interface ChartWidgetProps extends ChartEventProps {
+export interface ChartWidgetProps extends BaseChartEventProps {
     /**
      * Data source the query is run against - e.g. `Sample ECommerce`
      *
@@ -610,6 +599,7 @@ export interface ChartWidgetProps extends ChartEventProps {
     /**
      * List of categories to allow drilldowns on
      *
+     * @deprecated Use {@link DrilldownWidget} instead
      * @category Widget
      */
     drilldownOptions?: DrilldownOptions;
@@ -653,6 +643,16 @@ export interface ChartWidgetProps extends ChartEventProps {
      * @category Widget
      */
     description?: string;
+    /**
+     * 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}
+     *
+     * If not specified, the default value is `false`
+     *
+     * @category Widget
+     */
+    highlightSelectionDisabled?: boolean;
 }
 /**
  * Props for the {@link TableWidget} component
@@ -751,11 +751,15 @@ export interface ExecuteQueryByWidgetIdProps {
     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.
+     */
+    onBeforeQuery?: (jaql: any) => any | Promise<any>;
 }
 /**
  * Props of the {@link TreemapChart} component.
  */
-export interface TreemapChartProps extends BaseChartProps, CartesianChartEventProps {
+export interface TreemapChartProps extends BaseChartProps, ChartEventProps {
     /**
      * Configurations for how to interpret and present the data passed to the chart
      *
@@ -769,6 +773,23 @@ export interface TreemapChartProps extends BaseChartProps, CartesianChartEventPr
      */
     styleOptions?: TreemapStyleOptions;
 }
+/**
+ * Props of the {@link SunburstChart} component.
+ */
+export interface SunburstChartProps extends BaseChartProps, ChartEventProps {
+    /**
+     * Configurations for how to interpret and present the data passed to the chart
+     *
+     * @category Chart
+     */
+    dataOptions: CategoricalChartDataOptions;
+    /**
+     * Configuration that define functional style of the various chart elements
+     *
+     * @category Chart
+     */
+    styleOptions?: SunburstStyleOptions;
+}
 /**
  * Props for {@link ContextMenu} component.
  */

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

@@ -1,8 +1,19 @@
-import { Attribute, DataSource, Filter, Measure, QueryResultData } from '@sisense/sdk-data';
+import { Attribute, QueryResultData } from '@sisense/sdk-data';
+import type { QueryDescription as InternalQueryDescription, QueryExecutionConfig } from '@sisense/sdk-query-client';
 import { ClientApplication } from '../app/client-application';
+/**
+ * All the properties that fully describe a query you want to send.
+ *
+ * We use "dimensions" it public interface because the term is closer to the query and charting
+ * as used in the industry (Sisense included).
+ * internally, "dimensions" are represented by attributes as the latter is closer to the data model.
+ */
+export type QueryDescription = Partial<Omit<InternalQueryDescription, 'attributes'>> & {
+    dimensions?: Attribute[];
+};
 /** @internal */
 export declare const QUERY_DEFAULT_LIMIT = 20000;
 /** @internal */
 export declare const QUERY_DEFAULT_OFFSET = 0;
 /** @internal */
-export declare const executeQuery: (dataSource: DataSource | undefined, dimensions: Attribute[] | undefined, measures: Measure[] | undefined, filters: Filter[] | undefined, highlights: Filter[] | undefined, app: ClientApplication, count?: number, offset?: number) => Promise<QueryResultData>;
+export declare const executeQuery: (queryDescription: QueryDescription, app: ClientApplication, executionConfig?: QueryExecutionConfig) => Promise<QueryResultData>;

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

@@ -21,6 +21,8 @@ export interface ExecuteQueryByWidgetIdParams {
     offset?: number;
     /** {@inheritDoc ExecuteQueryByWidgetIdProps.filtersMergeStrategy} */
     filtersMergeStrategy?: FiltersMergeStrategy;
+    /** {@inheritDoc ExecuteQueryByWidgetIdProps.onBeforeQuery} */
+    onBeforeQuery?: (jaql: any) => any | Promise<any>;
 }
 export type QueryByWidgetIdState = QueryState & {
     /** Query parameters constructed over the widget */
@@ -63,7 +65,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, }: ExecuteQueryByWidgetIdParams & {
+export declare function executeQueryByWidgetId({ widgetOid, dashboardOid, filters, highlights, filtersMergeStrategy, count, offset, app, onBeforeQuery, }: ExecuteQueryByWidgetIdParams & {
     app: ClientApplication;
 }): Promise<{
     data: import("@sisense/sdk-data").QueryResultData;

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

@@ -28,6 +28,10 @@ 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.
+     */
+    onBeforeQuery?: (jaql: any) => any | Promise<any>;
 };
 /**
  * React hook that executes a data query.

package/dist/sunburst-chart.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { SunburstChartProps } from './props';
+/**
+ * A React component displaying hierarchical data in the form of nested circle slices.
+ * This type of chart can be used in different scenarios, for example, to compare both categories and sub-categories.
+ * See [Sunburst Chart](https://docs.sisense.com/main/SisenseLinux/sunburst-widget.htm) for more information.
+ *
+ * @example
+ * An example of using the component to visualize the `Sample ECommerce` data source:
+ * ```tsx
+ * <SunburstChart
+ *   dataSet={DM.DataSource}
+ *   dataOptions={{
+ *     category: [
+ *        DM.Commerce.Сondition,
+ *        DM.Commerce.Date.Years
+ *      ],
+ *     value: [measures.sum(DM.Commerce.Quantity)],
+ *   }}
+ * />
+ * ```
+ *
+ * <img src="media://sunburst-chart-example-1.png" width="600px" />
+ * @param props - Sunburst chart properties
+ * @returns Sunburst Chart component
+ */
+export declare const SunburstChart: import("react").FunctionComponent<SunburstChartProps>;

package/dist/theme-provider/theme-provider.d.ts

@@ -38,7 +38,7 @@ export declare const useThemeContext: () => {
  * For comparison, indicator chart with default theme settings:
  *
  * <img src="media://indicator-chart-example-1.png" width="400px" />
- * @see {@link ThemeSettings}, {@link getDefaultThemeSettings}, {@link IndicatorChart}
+ * @see {@link ThemeSettings} and {@link IndicatorChart}
  * @param props - Theme provider props
  * @returns A Theme Provider component
  */

package/dist/types.d.ts

@@ -356,12 +356,30 @@ export interface TreemapStyleOptions extends BaseStyleOptions {
         mode?: 'value' | 'contribution';
     };
 }
+/** Configuration options that define functional style of the various elements of {@link SunburstChart} */
+export interface SunburstStyleOptions extends BaseStyleOptions {
+    /** Labels options object */
+    labels?: {
+        /** Array with single label options objects (order of items relative to dataOptions.category) */
+        category?: {
+            /** Define visibility of label */
+            enabled?: boolean;
+        }[];
+    };
+    /** Tooltip options object */
+    tooltip?: {
+        /** Define mode of data showing */
+        mode?: 'value' | 'contribution';
+    };
+}
 /**
  * Configuration options that define functional style of the various elements of chart.
  */
-export type StyleOptions = LineStyleOptions | AreaStyleOptions | StackableStyleOptions | PieStyleOptions | FunnelStyleOptions | PolarStyleOptions | IndicatorStyleOptions | ScatterStyleOptions | TreemapStyleOptions;
+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>>;
 /**
  * Chart type of one of the supported chart families
  */

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

@@ -0,0 +1,30 @@
+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.
+ *
+ * @example
+ * Example of using the `ChartWidget` component to
+ * plot a bar chart of the `Sample ECommerce` data source hosted in a Sisense instance.
+ * Drill-down capability is enabled.
+ * ```tsx
+ * <ChartWidget
+ *   dataSource={DM.DataSource}
+ *   chartType="bar"
+ *   dataOptions={{
+ *     category: [DM.Category.Category],
+ *     value: [measures.sum(DM.Commerce.Revenue)],
+ *     breakBy: [],
+ *   }}
+ *   drilldownOptions={{
+ *     drilldownDimensions: [DM.Commerce.AgeRange, DM.Commerce.Gender, DM.Commerce.Condition],
+ *   }}
+ * />
+ * ```
+ *
+ * <img src="media://chart-widget-with-drilldown-example-1.png" width="800px" />
+ * @param props - ChartWidget properties
+ * @returns ChartWidget component representing a chart type as specified in `ChartWidgetProps.`{@link ChartWidgetProps.chartType}
+ */
+export declare const ChartWidgetDeprecated: FunctionComponent<ChartWidgetProps>;

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

@@ -7,7 +7,6 @@ import { ChartWidgetProps } from '../props';
  * @example
  * Example of using the `ChartWidget` component to
  * plot a bar chart of the `Sample ECommerce` data source hosted in a Sisense instance.
- * Drill-down capability is enabled.
  * ```tsx
  * <ChartWidget
  *   dataSource={DM.DataSource}
@@ -17,14 +16,11 @@ import { ChartWidgetProps } from '../props';
  *     value: [measures.sum(DM.Commerce.Revenue)],
  *     breakBy: [],
  *   }}
- *   drilldownOptions={{
- *     drilldownDimensions: [DM.Commerce.AgeRange, DM.Commerce.Gender, DM.Commerce.Condition],
- *   }}
  * />
  * ```
  *
  * <img src="media://chart-widget-with-drilldown-example-1.png" width="800px" />
  * @param props - ChartWidget properties
- * @returns ChartWidget component representing a chart type as specified in `ChartWidgetProps.`{@link ChartWidgetProps.chartType}
+ * @returns ChartWidget component representing a chart type as specified in `ChartWidgetProps.`{@link ChartWidgetProps.chartType | chartType}
  */
 export declare const ChartWidget: FunctionComponent<ChartWidgetProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sisense/sdk-ui",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "type": "module",
   "exports": "./dist/index.js",
   "main": "./dist/index.js",
@@ -12,10 +12,10 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/material": "^5.11.6",
-    "@sisense/sdk-common": "^0.12.1",
-    "@sisense/sdk-data": "^0.12.1",
-    "@sisense/sdk-query-client": "^0.12.1",
-    "@sisense/sdk-rest-client": "^0.12.1",
+    "@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/sisense-charts": "5.1.0-alpha-04052758.0",
     "classnames": "^2.3.2",
     "colorjs.io": "^0.4.3",