@sisense/sdk-ui 1.7.2 → 1.8.0

package/dist/indicator-chart.d.ts

@@ -2,7 +2,6 @@
 import { IndicatorChartProps } from './props';
 /**
  * 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
  * An example of using the component to visualize the `Sample ECommerce` data source:

package/dist/line-chart.d.ts

@@ -2,26 +2,23 @@
 import { LineChartProps } from './props';
 /**
  * A React component displaying data as a series of points connected by a line. Used to show trends or changes over time.
- * See [Line Chart](https://docs.sisense.com/main/SisenseLinux/line-chart.htm) for more information.
  *
- * @example
- * An example of using the component to visualize the `Sample ECommerce` data source:
- * ```tsx
- * <LineChart
- *   dataSet={DM.DataSource}
- *   dataOptions={{
- *     category: [DM.Commerce.Date.Years],
- *     value: [measureFactory.sum(DM.Commerce.Revenue)],
- *     breakBy: [DM.Commerce.Gender],
- *   }}
- *   filters={[filterFactory.greaterThan(DM.Commerce.Revenue, 1000)]}
- *   onDataPointClick= {(point, nativeEvent) => {
- *     console.log('clicked', point, nativeEvent);
- *   }}
+ * ## Example
+ *
+ * Line chart displaying total revenue per quarter from the Sample ECommerce data model.
+ *
+ * <iframe
+ *  src='https://csdk-playground.sisense.com/?example=charts%2Fline-chart&mode=docs'
+ *  width=800
+ *  height=870
+ *  style='border:none;'
  * />
- * ```
  *
- * <img src="media://line-chart-example-1.png" width="800px" />
+ * Additional Line Chart examples:
+ *
+ * - [Curved Line Chart](https://csdk-playground.sisense.com/?example=charts%2Fline-chart-spline)
+ * - [Styled Line Chart](https://csdk-playground.sisense.com/?example=charts%2Fline-chart-styled)
+ *
  * @param props - Line chart properties
  * @returns Line Chart component
  * @group Charts

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

@@ -69,28 +69,23 @@ export type WidgetModelSuccessState = {
     status: 'success';
 };
 /**
- * React hook that retrieves an existing widget model from the Sisense instance.
+ * React hook that retrieves an existing widget model from a Fusion Embed instance.
+ *
+ * ## Example
+ *
+ * Retrieve a widget model and use it to populate a `Chart` component
+ *
+ * <iframe
+ *  src='https://csdk-playground.sisense.com/?example=fusion-assets%2Fuse-get-widget-model&mode=docs'
+ *  width=800
+ *  height=870
+ *  style='border:none;'
+ * />
+ *
+ * Additional `useGetWidgetModel` examples:
+ *
+ * - [Modify Chart Type](https://csdk-playground.sisense.com/?example=fusion-assets%2Fuse-get-widget-model-change-chart-type)
  *
- * @example
- * An example of retrieving an existing widget model from the Sisense instance:
- ```tsx
-  const { widget, isLoading, isError } = useGetWidgetModel({
-    dashboardOid: '6448665edac1920034bce7a8',
-    widgetOid: '6448665edac1920034bce7a8',
-  });
-  if (isLoading) {
-    return <div>Loading...</div>;
-  }
-  if (isError) {
-    return <div>Error</div>;
-  }
-  if (widget) {
-    return (
-      <Chart {...widget.getChartProps()} />
-    );
-  }
-  return null;
- ```
  * @param params - Parameters of the widget to be retrieved
  * @returns Widget load state that contains the status of the execution, the result widget model, or the error if one has occurred
  * @group Fusion Embed

package/dist/pie-chart.d.ts

@@ -3,25 +3,23 @@ import { PieChartProps } from './props';
 /**
  * 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.
  *
- * @example
- * An example of using the component to visualize the `Sample ECommerce` data source:
- * ```tsx
- * <PieChart
- *   dataSet={DM.DataSource}
- *   dataOptions={{
- *     category: [DM.Commerce.AgeRange],
- *     value: [measureFactory.sum(DM.Commerce.Revenue)],
- *   }}
- *   filters={[filterFactory.greaterThan(DM.Commerce.Revenue, 1000)]}
- *   onDataPointClick= {(point, nativeEvent) => {
- *     console.log('clicked', point, nativeEvent);
- *   }}
+ * ## Example
+ *
+ * Pie chart displaying total revenue per age range from the Sample ECommerce data model.
+ *
+ * <iframe
+ *  src='https://csdk-playground.sisense.com/?example=charts%2Fpie-chart&mode=docs'
+ *  width=800
+ *  height=870
+ *  style='border:none;'
  * />
- * ```
  *
- * <img src="media://pie-chart-example-1.png" width="600px" />
+ * Additional Pie Chart examples:
+ *
+ * - [Donut Pie Chart](https://csdk-playground.sisense.com/?example=charts%2Fpie-chart-donut)
+ * - [Ring Pie Chart](https://csdk-playground.sisense.com/?example=charts%2Fpie-chart-ring)
+ *
  * @param props - Pie chart properties
  * @returns Pie Chart component
  * @group Charts

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

@@ -1,9 +1,7 @@
 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.
+ * Pivot table with pagination.
  *
  * @example
  * (1) Example of PivotTable from the `Sample ECommerce` data model:
@@ -35,6 +33,48 @@ import { PivotTableProps } from '../props';
  *   styleOptions={{ width: 1000, height: 600, rowsPerPage: 50 }}
  * />
  * ```
+ *
+ * (2) Example of PivotTable with the predefined sorting configuration:
+ * - Sort "Condition" row by its values in Ascending order. This is equivalent to users clicking on the "Condition" row heading and hit Sort Ascending (A-Z)
+ * - Sort "Category" row by "Total Cost" values under the "columns" values of "Female" (for Gender) and "0-18" (for AgeRange) in Descending order.
+ * This is equivalent to users clicking on the "Total Cost" value heading under "Female" (for Gender) and "0-18" (for AgeRange) and sort "Category (Subtotals)" in Descending (9-1)
+ *
+ * ```tsx
+ * <PivotTable
+ *   dataSet={DM.DataSource}
+ *   dataOptions={{
+ *     rows: [
+ *       {
+ *         column: DM.Category.Category,
+ *         includeSubTotals: true,
+ *         sortType: {
+ *           direction: 'sortDesc',
+ *           by: {
+ *             valuesIndex: 0,
+ *             columnsMembersPath: ['Female', '0-18']
+ *           }
+ *         }
+ *       },
+ *       {
+ *         column: DM.Commerce.Condition,
+ *         sortType: {
+ *           direction: 'sortAsc'
+ *         }
+ *       },
+ *     ],
+ *     columns: [
+ *       DM.Commerce.Gender,
+ *       DM.Commerce.AgeRange
+ *     ],
+ *     values: [
+ *       measureFactory.sum(DM.Commerce.Cost, 'Total Cost'),
+ *       measureFactory.sum(DM.Commerce.Quantity, 'Total Quantity'),
+ *     ],
+ *   }}
+ * />
+ * ```
+ *
+ * <img src="media://pivot-sorting-example-1.png" width="800px" />
  * @param props - Pivot Table properties
  * @returns Pivot Table component
  * @group Data Grids

package/dist/polar-chart.d.ts

@@ -2,26 +2,23 @@
 import { PolarChartProps } from './props';
 /**
  * A React component comparing multiple categories/variables with a spacial perspective in a radial chart.
- * See [Polar Chart](https://docs.sisense.com/main/SisenseLinux/polar-chart.htm) for more information.
  *
- * @example
- * An example of using the component to visualize the `Sample ECommerce` data source:
- * ```tsx
- * <PolarChart
- *   dataSet={DM.DataSource}
- *   dataOptions={{
- *     category: [DM.Commerce.AgeRange],
- *     value: [measureFactory.sum(DM.Commerce.Revenue)],
- *     breakBy: [DM.Commerce.Gender],
- *   }}
- *   filters={[filterFactory.greaterThan(DM.Commerce.Revenue, 1000)]}
- *   onDataPointClick= {(point, nativeEvent) => {
- *     console.log('clicked', point, nativeEvent);
- *   }}
+ * ## Example
+ *
+ * Polar chart displaying total revenue per age range from the Sample ECommerce data model.
+ *
+ * <iframe
+ *  src='https://csdk-playground.sisense.com/?example=charts%2Fpolar-chart&mode=docs'
+ *  width=800
+ *  height=870
+ *  style='border:none;'
  * />
- * ```
  *
- * <img src="media://polar-chart-example-1.png" width="600px" />
+ * Additional Polar Chart examples:
+ *
+ * - [Area Polar Chart](https://csdk-playground.sisense.com/?example=charts%2Fpolar-chart-area)
+ * - [Line Polar Chart](https://csdk-playground.sisense.com/?example=charts%2Fpolar-chart-line)
+ *
  * @param props - Polar chart properties
  * @returns Polar Chart component
  * @group Charts

package/dist/props.d.ts

@@ -10,7 +10,13 @@ import { HookEnableParam } from './common/hooks/types';
 import { ExecuteQueryResult } from './query-execution/types';
 export type { MenuItemSection, HighchartsOptions };
 /**
- * Configurations for Sisense Context
+ * Configurations and authentication for Sisense Context.
+ *
+ * Use one of the following to authenticate:
+ *
+ * - {@link ssoEnabled}
+ * - {@link token}
+ * - {@link wat}
  */
 export interface SisenseContextProviderProps {
     /**
@@ -20,10 +26,9 @@ export interface SisenseContextProviderProps {
     /** URL of the Sisense environment the app connects to */
     url: string;
     /**
-     * [Single Sign-On](https://docs.sisense.com/main/SisenseLinux/using-single-sign-on-to-access-sisense.htm) toggle
+     * [Single Sign-On](https://docs.sisense.com/main/SisenseLinux/using-single-sign-on-to-access-sisense.htm) toggle.
      *
-     * This is used when user wants to use sso authentication. Default is false.
-     * If set to true, this will override any other authentication method.
+     * Set to `true` to use SSO authentication. When `true`, this overrides any other authentication methods. Defaults to `false`.
      *
      * @category Authentication
      */
@@ -31,16 +36,12 @@ export interface SisenseContextProviderProps {
     /**
      * Token for [bearer authentication](https://sisense.dev/guides/restApi/using-rest-api.html).
      *
-     * This is used only when basic username/password authentication is not specified.
-     *
      * @category Authentication
      */
     token?: string;
     /**
      * [Web Access Token](https://docs.sisense.com/main/SisenseLinux/using-web-access-token.htm).
      *
-     * This is used only when neither username, password, and token is specified.
-     *
      * @category Authentication
      */
     wat?: string;
@@ -111,13 +112,12 @@ export interface ExecuteQueryProps {
  *
  * Two options are supported:
  *
- * (1) `ThemeOid` -- Theme identifier as defined in the Sisense application (`Admin page` > `Look and Feel`).
- * See [Sisense documentation](https://docs.sisense.com/main/SisenseLinux/customizing-the-sisense-user-interface.htm)
- * for more details.
+ * (1) `ThemeSettings` -- Custom theme settings that override the default theme settings.
  *
  * OR
  *
- * (2) `ThemeSettings` -- Custom theme settings that override the default theme settings.
+ * (2) `ThemeOid` -- Theme identifier as defined in a Fusion Embed instance (**Admin > App Configuration > Look and Feel**).
+ * See [Customizing the Sisense User Interface](https://docs.sisense.com/main/SisenseLinux/customizing-the-sisense-user-interface.htm) for more details.
  */
 export type ThemeProviderProps = PropsWithChildren<{
     /**

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

@@ -3,35 +3,17 @@ import { ExecutePivotQueryParams, PivotQueryState } from './types';
  * React hook that executes a data query for a pivot table.
  * This approach is similar to React Query's `useQuery` hook.
  *
- * @example
- * ```tsx
- *   const { data, isLoading, isError } = useExecutePivotQuery({
- *     dataSource: DM.DataSource,
- *     rows: [
- *       { attribute: DM.Category.Category, includeSubTotals: true },
- *       { attribute: DM.Brand.Brand, includeSubTotals: true },
- *       DM.Commerce.Condition,
- *     ],
- *     columns: [DM.Commerce.Gender],
- *     values: [
- *       { measure: measures.sum(DM.Commerce.Revenue, 'Total Revenue'), totalsCalculation: 'sum' },
- *       { measure: measures.sum(DM.Commerce.Quantity, 'Total Quantity'), totalsCalculation: 'min' },
- *     ],
- *     grandTotals: {title: 'Grand Totals', rows: true, columns: true},
- *     filters: [filters.members(DM.Commerce.Gender, ['Female', 'Male'])],
- *   });
- *   if (isLoading) {
- *     return <div>Loading...</div>;
- *   }
- *   if (isError) {
- *     return <div>Error</div>;
- *   }
- *   if (data) {
- *     return <div>[Render pivot table with returned data]</div>;
- *   }
- *   return null;
- *  ```
- * See also hook {@link useExecuteQuery}, which execute a generic data query.
+ * ## Example
+ *
+ * Execute a pivot query on the Sample ECommerce data model and display the results in a table.
+ *
+ * <iframe
+ *  src='https://csdk-playground.sisense.com/?example=queries%2Fuse-execute-pivot-query&mode=docs'
+ *  width=800
+ *  height=870
+ *  style='border:none;'
+ * />
+ *
  * @param params - Parameters of the query
  * @returns Query state that contains the status of the query execution, the result data, or the error if any occurred
  * @group Queries

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

@@ -1,32 +1,25 @@
 import { ExecuteQueryParams, ExecuteQueryResult } from './types';
 /**
  * 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.
- *
- * @example
- ```tsx
-  const { data, isLoading, isError } = useExecuteQuery({
-    dataSource: DM.DataSource,
-    dimensions: [DM.Commerce.AgeRange],
-    measures: [measureFactory.sum(DM.Commerce.Revenue)],
-    filters: [filterFactory.greaterThan(DM.Commerce.Revenue, 1000)],
-  });
-  if (isLoading) {
-    return <div>Loading...</div>;
-  }
-  if (isError) {
-    return <div>Error</div>;
-  }
-  if (data) {
-    return <div>{`Total Rows: ${data.rows.length}`}</div>;
-  }
-  return null;
- ```
-
- * See also hook {@link useExecuteQueryByWidgetId}, which extracts data from an existing widget in the Sisense instance.
- *
- * See [this blog post]( https://www.sisense.com/blog/take-control-of-your-data-visualizations/) for examples
- * of using the hook to fetch data from Sisense for third-party charts.
+ *
+ * This approach, which offers an alternative to the {@link ExecuteQuery} component, is similar to React Query's `useQuery` hook.
+ *
+ * ## Example
+ *
+ * Execute a query to retrieve revenue per country per year from the Sample ECommerce data model. Then display the data in a table and column chart.
+ *
+ * <iframe
+ *  src='https://csdk-playground.sisense.com/?example=queries%2Fuse-execute-query-sorting&mode=docs'
+ *  width=800
+ *  height=870
+ *  style='border:none;'
+ * />
+ *
+ * Additional `useExecuteQuery()` examples:
+ *
+ * - [Query with Sorting](https://csdk-playground.sisense.com/?example=queries%2Fuse-execute-query-sorting)
+ * - [Take Control of Your Data Visualizations]( https://www.sisense.com/blog/take-control-of-your-data-visualizations/) blog post with examples of using the hook to fetch data to display in third-party charts.
+ *
  * @param params - Parameters of the query
  * @returns Query state that contains the status of the query execution, the result data, or the error if any occurred
  * @group Queries

package/dist/scatter-chart.d.ts

@@ -9,59 +9,21 @@ import { ScatterChartProps } from './props';
  * **Size**: An optional field represented by the size of the circles.
  * 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.
+ * ## Example
  *
- * @example
- * An example of using the component to visualize the `Sample ECommerce` data source.
+ * Scatter chart displaying total revenue per category, broken down by gender, from the Sample ECommerce data model.
  *
- * The chart shows top Categories by Total Revenue on the x-axis, and Total Quantity on the y-axis in logarithmic scale
- * with Gender breakdown by color and Total Cost encoded by the size of the bubbles.
- * ```tsx
- * <ScatterChart
- *   dataSet={DM.DataSource}
- *   filters={[filterFactory.greaterThan(DM.Commerce.Revenue, 10)]}
- *   dataOptions={{
- *     x: measureFactory.sum(DM.Commerce.Revenue),
- *     y: measureFactory.sum(DM.Commerce.Quantity),
- *     breakByPoint: DM.Category.Category,
- *     breakByColor: DM.Commerce.Gender,
- *     size: measureFactory.sum(DM.Commerce.Cost),
- *   }}
- *   styleOptions={{
- *     xAxis: {
- *       enabled: true,
- *       gridLines: true,
- *       isIntervalEnabled: false,
- *       labels: {
- *         enabled: true,
- *       },
- *       logarithmic: true,
- *       title: {
- *         enabled: true,
- *         text: 'Total Revenue',
- *       },
- *     },
- *     yAxis: {
- *       enabled: true,
- *       gridLines: true,
- *       isIntervalEnabled: false,
- *       labels: {
- *         enabled: true,
- *       },
- *       logarithmic: true,
- *       title: {
- *         enabled: true,
- *         text: 'Total Quantity',
- *       },
- *     },
- *   }}
- *   onDataPointClick={(point, nativeEvent) => {
- *     console.log('clicked', point, nativeEvent);
- *   }}
+ * <iframe
+ *  src='https://csdk-playground.sisense.com/?example=charts%2Fscatter-chart&mode=docs'
+ *  width=800
+ *  height=870
+ *  style='border:none;'
  * />
- * ```
  *
- * <img src="media://scatter-chart-example-1.png" width="800px" />
+ * Additional Scatter Chart examples:
+ *
+ * - [Bubble Scatter Chart](https://csdk-playground.sisense.com/?example=charts/scatter-chart-bubble)
+ *
  * @param props - Scatter chart properties
  * @returns Scatter Chart component
  * @group Charts

package/dist/scattermap-chart.d.ts

@@ -2,31 +2,18 @@
 import { ScattermapChartProps } from './props';
 /**
  * A React component that allows to visualize geographical data as data points on a map.
- * See [Scattermap Chart](https://docs.sisense.com/main/SisenseLinux/scatter-map.htm) for more information.
  *
- * @example
- * An example of using the component to visualize the `Sample ECommerce` data source:
- * ```tsx
- * <ScattermapChart
- *   dataSet={DM.DataSource}
- *   dataOptions={{
- *     locations: [DM.Country.Country],
- *     size: measureFactory.sum(DM.Commerce.Cost, 'Size by Cost'),
- *     colorBy: {
- *       column: measureFactory.sum(DM.Commerce.Revenue, 'Color by Revenue'),
- *       color: 'green'
- *     },
- *     details: DM.Category.Category,
- *   }}
- *   styleOptions={{
- *     markers: {
- *       fill: 'hollow-bold'
- *     }
- *   }}
+ * ## Example
+ *
+ * Scatter map chart displaying cost and revenue rank from the Sample ECommerce data model. The cost is indicated by size of each point and the revenue rank is indicated by the point's size.
+ *
+ * <iframe
+ *  src='https://csdk-playground.sisense.com/?example=charts%2Fmap-scatter&mode=docs'
+ *  width=1000
+ *  height=900
+ *  style='border:none;'
  * />
- * ```
  *
- * <img src="media://scattermap-chart-example-1.png" width="600px" />
  * @param props - Scattermap chart properties
  * @returns Scattermap Chart component
  * @group Charts

package/dist/sunburst-chart.d.ts

@@ -2,25 +2,20 @@
 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: [measureFactory.sum(DM.Commerce.Quantity)],
- *   }}
+ * ## Example
+ *
+ * Sunburst chart displaying total revenue, categorized by condition and age range, from the Sample ECommerce data model.
+ *
+ * <iframe
+ *  src='https://csdk-playground.sisense.com/?example=charts%2Fsunburst-chart&mode=docs'
+ *  width=800
+ *  height=870
+ *  style='border:none;'
  * />
- * ```
  *
- * <img src="media://sunburst-chart-example-1.png" width="600px" />
  * @param props - Sunburst chart properties
  * @returns Sunburst Chart component
  * @group Charts

package/dist/table/table.d.ts

@@ -3,47 +3,17 @@ import { TableProps } from '../props';
 /**
  * Table with aggregation and pagination.
  *
- * @example
- * (1) Example of Table of raw data from the `Sample ECommerce` data model:
+ * ## Example
  *
- * ```tsx
- * <Table
- *   dataSet={DM.DataSource}
- *   dataOptions={{
- *     columns: [
- *       DM.Commerce.AgeRange,
- *       DM.Commerce.Revenue,
- *       DM.Commerce.Cost,
- *       DM.Commerce.Quantity,
- *     ],
- *   }}
- *   styleOptions={{ width: 600, height: 750 }}
- * />
- * ```
- *
- * <img src="media://table-example-1.png" width="800px" />
- *
- * (2) Example of Table of aggregated data from the same data model:
+ * Table displaying year, condition, and total revenue from the Sample ECommerce data model.
  *
- * ```tsx
- * <Table
- *   dataSet={DM.DataSource}
- *   dataOptions={{
- *     columns: [
- *       DM.Commerce.AgeRange,
- *       measureFactory.sum(DM.Commerce.Revenue, 'Total Revenue'),
- *       measureFactory.sum(DM.Commerce.Cost, 'Total Cost'),
- *     ],
- *   }}
- *   styleOptions={{
- *     headersColor: true,
- *     alternatingColumnsColor: false,
- *     alternatingRowsColor: true,
- *   }}
+ * <iframe
+ *  src='https://csdk-playground.sisense.com/?example=tables%2Faggregated-table&mode=docs'
+ *  width=800
+ *  height=870
+ *  style='border:none;'
  * />
- * ```
  *
- * <img src="media://table-example-2.png" width="800px" />
  * @param props - Table properties
  * @returns Table component
  * @group Data Grids

package/dist/translation/resources/en.d.ts

@@ -32,6 +32,7 @@ export declare const translation: {
             onlyTabularWidgetsSupported: string;
         };
         unknownFilterInFilterRelations: string;
+        filterRelationsNotSupported: string;
     };
     errorBoxText: string;
     chartNoData: string;

package/dist/translation/resources/index.d.ts

@@ -36,6 +36,7 @@ export declare const resources: {
                 onlyTabularWidgetsSupported: string;
             };
             unknownFilterInFilterRelations: string;
+            filterRelationsNotSupported: string;
         };
         errorBoxText: string;
         chartNoData: string;
@@ -121,6 +122,7 @@ export declare const resources: {
                 onlyTabularWidgetsSupported: string;
             };
             unknownFilterInFilterRelations: string;
+            filterRelationsNotSupported: string;
         };
         errorBoxText: string;
         chartNoData: string;