@sisense/sdk-ui 1.7.1 → 1.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ai/ai-disclaimer.d.ts +2 -0
- package/dist/ai/chat-config.d.ts +8 -0
- package/dist/ai/chat-style-provider.d.ts +7 -0
- package/dist/ai/messages/chat-welcome-message.d.ts +2 -0
- package/dist/ai/messages/clickable-message.d.ts +9 -0
- package/dist/ai/messages/feedback-wrapper.d.ts +2 -2
- package/dist/ai/messages/insights-message.d.ts +5 -5
- package/dist/ai/messages/text-message.d.ts +1 -2
- package/dist/ai/translators/model-translator.d.ts +1 -0
- package/dist/ai/translators/query-translator.d.ts +16 -1
- package/dist/ai/translators/translate-filters-to-code.d.ts +2 -0
- package/dist/ai/translators/translate-props-to-code.d.ts +1 -1
- package/dist/ai/translators/utils.d.ts +10 -0
- package/dist/ai.js +2893 -2697
- package/dist/api/rest-api.d.ts +4 -1
- package/dist/app/client-application.d.ts +11 -0
- package/dist/area-chart.d.ts +14 -18
- package/dist/areamap-chart.d.ts +13 -15
- package/dist/bar-chart.d.ts +13 -18
- package/dist/boxplot-chart.d.ts +11 -25
- package/dist/chart/chart.d.ts +8 -66
- package/dist/chart-data/cartesian-data.d.ts +1 -1
- package/dist/chart-data/chart-data-service.d.ts +1 -2
- package/dist/chart-data/data-coloring/types.d.ts +1 -7
- package/dist/chart-data-options/types.d.ts +5 -3
- package/dist/chart-options-processor/theme-option-service.d.ts +2 -1
- package/dist/column-chart.d.ts +15 -18
- package/dist/common/icons/exclamation-mark-icon.d.ts +4 -0
- package/dist/dashboard-widget/dashboard-widget.d.ts +10 -7
- package/dist/dashboard-widget/translate-widget-data-options.d.ts +1 -1
- package/dist/dashboard-widget/translate-widget-filters.d.ts +22 -14
- package/dist/dashboard-widget/types.d.ts +2 -2
- package/dist/dashboard-widget/utils.d.ts +2 -2
- package/dist/formulas/use-get-shared-formula.d.ts +3 -3
- package/dist/funnel-chart.d.ts +9 -36
- package/dist/index.d.ts +1 -2
- package/dist/index.js +1793 -1790
- package/dist/indicator-chart.d.ts +0 -1
- package/dist/line-chart.d.ts +14 -17
- package/dist/models/widget/use-get-widget-model.d.ts +16 -21
- package/dist/pie-chart.d.ts +14 -16
- package/dist/pivot-table/pivot-table.d.ts +43 -3
- package/dist/polar-chart.d.ts +14 -17
- package/dist/props.d.ts +12 -12
- package/dist/query-execution/use-execute-pivot-query.d.ts +11 -29
- package/dist/query-execution/use-execute-query.d.ts +19 -26
- package/dist/scatter-chart.d.ts +11 -49
- package/dist/scattermap-chart.d.ts +9 -22
- package/dist/sunburst-chart.d.ts +10 -15
- package/dist/table/table.d.ts +7 -37
- package/dist/theme-provider/index.d.ts +1 -0
- package/dist/theme-provider/theme-context.d.ts +14 -0
- package/dist/theme-provider/theme-provider.d.ts +0 -13
- package/dist/translation/resources/en.d.ts +2 -0
- package/dist/translation/resources/index.d.ts +4 -0
- package/dist/treemap-chart.d.ts +10 -21
- package/dist/types.d.ts +3 -4
- package/dist/{useQuery-a7ee8c12.js → useQuery-cb11e76c.js} +22697 -22384
- package/dist/widgets/common/drilldown.d.ts +1 -20
- package/dist/widgets/drilldown-widget.d.ts +21 -33
- package/package.json +7 -7
- package/dist/ai/chat-intro-blurb.d.ts +0 -4
- package/dist/ai/icons/loading-dots-gif-base64.d.ts +0 -2
- package/dist/common/icons/yellow-exclamation-mark-icon.d.ts +0 -2
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
import { IndicatorChartProps } from './props';
|
|
3
3
|
/**
|
|
4
4
|
* A React component that provides various options for displaying one or two numeric values as a number, gauge or ticker.
|
|
5
|
-
* See [Indicator](https://docs.sisense.com/main/SisenseLinux/indicator.htm) for more information.
|
|
6
5
|
*
|
|
7
6
|
* @example
|
|
8
7
|
* An example of using the component to visualize the `Sample ECommerce` data source:
|
package/dist/line-chart.d.ts
CHANGED
|
@@ -2,26 +2,23 @@
|
|
|
2
2
|
import { LineChartProps } from './props';
|
|
3
3
|
/**
|
|
4
4
|
* A React component displaying data as a series of points connected by a line. Used to show trends or changes over time.
|
|
5
|
-
* See [Line Chart](https://docs.sisense.com/main/SisenseLinux/line-chart.htm) for more information.
|
|
6
5
|
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
* }}
|
|
17
|
-
* filters={[filterFactory.greaterThan(DM.Commerce.Revenue, 1000)]}
|
|
18
|
-
* onDataPointClick= {(point, nativeEvent) => {
|
|
19
|
-
* console.log('clicked', point, nativeEvent);
|
|
20
|
-
* }}
|
|
6
|
+
* ## Example
|
|
7
|
+
*
|
|
8
|
+
* Line chart displaying total revenue per quarter from the Sample ECommerce data model.
|
|
9
|
+
*
|
|
10
|
+
* <iframe
|
|
11
|
+
* src='https://csdk-playground.sisense.com/?example=charts%2Fline-chart&mode=docs'
|
|
12
|
+
* width=800
|
|
13
|
+
* height=870
|
|
14
|
+
* style='border:none;'
|
|
21
15
|
* />
|
|
22
|
-
* ```
|
|
23
16
|
*
|
|
24
|
-
*
|
|
17
|
+
* Additional Line Chart examples:
|
|
18
|
+
*
|
|
19
|
+
* - [Curved Line Chart](https://csdk-playground.sisense.com/?example=charts%2Fline-chart-spline)
|
|
20
|
+
* - [Styled Line Chart](https://csdk-playground.sisense.com/?example=charts%2Fline-chart-styled)
|
|
21
|
+
*
|
|
25
22
|
* @param props - Line chart properties
|
|
26
23
|
* @returns Line Chart component
|
|
27
24
|
* @group Charts
|
|
@@ -69,28 +69,23 @@ export type WidgetModelSuccessState = {
|
|
|
69
69
|
status: 'success';
|
|
70
70
|
};
|
|
71
71
|
/**
|
|
72
|
-
* React hook that retrieves an existing widget model from
|
|
72
|
+
* React hook that retrieves an existing widget model from a Fusion Embed instance.
|
|
73
|
+
*
|
|
74
|
+
* ## Example
|
|
75
|
+
*
|
|
76
|
+
* Retrieve a widget model and use it to populate a `Chart` component
|
|
77
|
+
*
|
|
78
|
+
* <iframe
|
|
79
|
+
* src='https://csdk-playground.sisense.com/?example=fusion-assets%2Fuse-get-widget-model&mode=docs'
|
|
80
|
+
* width=800
|
|
81
|
+
* height=870
|
|
82
|
+
* style='border:none;'
|
|
83
|
+
* />
|
|
84
|
+
*
|
|
85
|
+
* Additional `useGetWidgetModel` examples:
|
|
86
|
+
*
|
|
87
|
+
* - [Modify Chart Type](https://csdk-playground.sisense.com/?example=fusion-assets%2Fuse-get-widget-model-change-chart-type)
|
|
73
88
|
*
|
|
74
|
-
* @example
|
|
75
|
-
* An example of retrieving an existing widget model from the Sisense instance:
|
|
76
|
-
```tsx
|
|
77
|
-
const { widget, isLoading, isError } = useGetWidgetModel({
|
|
78
|
-
dashboardOid: '6448665edac1920034bce7a8',
|
|
79
|
-
widgetOid: '6448665edac1920034bce7a8',
|
|
80
|
-
});
|
|
81
|
-
if (isLoading) {
|
|
82
|
-
return <div>Loading...</div>;
|
|
83
|
-
}
|
|
84
|
-
if (isError) {
|
|
85
|
-
return <div>Error</div>;
|
|
86
|
-
}
|
|
87
|
-
if (widget) {
|
|
88
|
-
return (
|
|
89
|
-
<Chart {...widget.getChartProps()} />
|
|
90
|
-
);
|
|
91
|
-
}
|
|
92
|
-
return null;
|
|
93
|
-
```
|
|
94
89
|
* @param params - Parameters of the widget to be retrieved
|
|
95
90
|
* @returns Widget load state that contains the status of the execution, the result widget model, or the error if one has occurred
|
|
96
91
|
* @group Fusion Embed
|
package/dist/pie-chart.d.ts
CHANGED
|
@@ -3,25 +3,23 @@ import { PieChartProps } from './props';
|
|
|
3
3
|
/**
|
|
4
4
|
* A React component representing data in a circular graph with the data shown as slices of a whole,
|
|
5
5
|
* with each slice representing a proportion of the total.
|
|
6
|
-
* See [Pie Chart](https://docs.sisense.com/main/SisenseLinux/pie-chart.htm) for more information.
|
|
7
6
|
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
* filters={[filterFactory.greaterThan(DM.Commerce.Revenue, 1000)]}
|
|
18
|
-
* onDataPointClick= {(point, nativeEvent) => {
|
|
19
|
-
* console.log('clicked', point, nativeEvent);
|
|
20
|
-
* }}
|
|
7
|
+
* ## Example
|
|
8
|
+
*
|
|
9
|
+
* Pie chart displaying total revenue per age range from the Sample ECommerce data model.
|
|
10
|
+
*
|
|
11
|
+
* <iframe
|
|
12
|
+
* src='https://csdk-playground.sisense.com/?example=charts%2Fpie-chart&mode=docs'
|
|
13
|
+
* width=800
|
|
14
|
+
* height=870
|
|
15
|
+
* style='border:none;'
|
|
21
16
|
* />
|
|
22
|
-
* ```
|
|
23
17
|
*
|
|
24
|
-
*
|
|
18
|
+
* Additional Pie Chart examples:
|
|
19
|
+
*
|
|
20
|
+
* - [Donut Pie Chart](https://csdk-playground.sisense.com/?example=charts%2Fpie-chart-donut)
|
|
21
|
+
* - [Ring Pie Chart](https://csdk-playground.sisense.com/?example=charts%2Fpie-chart-ring)
|
|
22
|
+
*
|
|
25
23
|
* @param props - Pie chart properties
|
|
26
24
|
* @returns Pie Chart component
|
|
27
25
|
* @group Charts
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { PivotTableProps } from '../props';
|
|
3
3
|
/**
|
|
4
|
-
* Pivot
|
|
5
|
-
*
|
|
6
|
-
* See [Pivot Tables](https://docs.sisense.com/main/SisenseLinux/pivot.htm) for more information.
|
|
4
|
+
* Pivot table with pagination.
|
|
7
5
|
*
|
|
8
6
|
* @example
|
|
9
7
|
* (1) Example of PivotTable from the `Sample ECommerce` data model:
|
|
@@ -35,6 +33,48 @@ import { PivotTableProps } from '../props';
|
|
|
35
33
|
* styleOptions={{ width: 1000, height: 600, rowsPerPage: 50 }}
|
|
36
34
|
* />
|
|
37
35
|
* ```
|
|
36
|
+
*
|
|
37
|
+
* (2) Example of PivotTable with the predefined sorting configuration:
|
|
38
|
+
* - 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)
|
|
39
|
+
* - Sort "Category" row by "Total Cost" values under the "columns" values of "Female" (for Gender) and "0-18" (for AgeRange) in Descending order.
|
|
40
|
+
* 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)
|
|
41
|
+
*
|
|
42
|
+
* ```tsx
|
|
43
|
+
* <PivotTable
|
|
44
|
+
* dataSet={DM.DataSource}
|
|
45
|
+
* dataOptions={{
|
|
46
|
+
* rows: [
|
|
47
|
+
* {
|
|
48
|
+
* column: DM.Category.Category,
|
|
49
|
+
* includeSubTotals: true,
|
|
50
|
+
* sortType: {
|
|
51
|
+
* direction: 'sortDesc',
|
|
52
|
+
* by: {
|
|
53
|
+
* valuesIndex: 0,
|
|
54
|
+
* columnsMembersPath: ['Female', '0-18']
|
|
55
|
+
* }
|
|
56
|
+
* }
|
|
57
|
+
* },
|
|
58
|
+
* {
|
|
59
|
+
* column: DM.Commerce.Condition,
|
|
60
|
+
* sortType: {
|
|
61
|
+
* direction: 'sortAsc'
|
|
62
|
+
* }
|
|
63
|
+
* },
|
|
64
|
+
* ],
|
|
65
|
+
* columns: [
|
|
66
|
+
* DM.Commerce.Gender,
|
|
67
|
+
* DM.Commerce.AgeRange
|
|
68
|
+
* ],
|
|
69
|
+
* values: [
|
|
70
|
+
* measureFactory.sum(DM.Commerce.Cost, 'Total Cost'),
|
|
71
|
+
* measureFactory.sum(DM.Commerce.Quantity, 'Total Quantity'),
|
|
72
|
+
* ],
|
|
73
|
+
* }}
|
|
74
|
+
* />
|
|
75
|
+
* ```
|
|
76
|
+
*
|
|
77
|
+
* <img src="media://pivot-sorting-example-1.png" width="800px" />
|
|
38
78
|
* @param props - Pivot Table properties
|
|
39
79
|
* @returns Pivot Table component
|
|
40
80
|
* @group Data Grids
|
package/dist/polar-chart.d.ts
CHANGED
|
@@ -2,26 +2,23 @@
|
|
|
2
2
|
import { PolarChartProps } from './props';
|
|
3
3
|
/**
|
|
4
4
|
* A React component comparing multiple categories/variables with a spacial perspective in a radial chart.
|
|
5
|
-
* See [Polar Chart](https://docs.sisense.com/main/SisenseLinux/polar-chart.htm) for more information.
|
|
6
5
|
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
* }}
|
|
17
|
-
* filters={[filterFactory.greaterThan(DM.Commerce.Revenue, 1000)]}
|
|
18
|
-
* onDataPointClick= {(point, nativeEvent) => {
|
|
19
|
-
* console.log('clicked', point, nativeEvent);
|
|
20
|
-
* }}
|
|
6
|
+
* ## Example
|
|
7
|
+
*
|
|
8
|
+
* Polar chart displaying total revenue per age range from the Sample ECommerce data model.
|
|
9
|
+
*
|
|
10
|
+
* <iframe
|
|
11
|
+
* src='https://csdk-playground.sisense.com/?example=charts%2Fpolar-chart&mode=docs'
|
|
12
|
+
* width=800
|
|
13
|
+
* height=870
|
|
14
|
+
* style='border:none;'
|
|
21
15
|
* />
|
|
22
|
-
* ```
|
|
23
16
|
*
|
|
24
|
-
*
|
|
17
|
+
* Additional Polar Chart examples:
|
|
18
|
+
*
|
|
19
|
+
* - [Area Polar Chart](https://csdk-playground.sisense.com/?example=charts%2Fpolar-chart-area)
|
|
20
|
+
* - [Line Polar Chart](https://csdk-playground.sisense.com/?example=charts%2Fpolar-chart-line)
|
|
21
|
+
*
|
|
25
22
|
* @param props - Polar chart properties
|
|
26
23
|
* @returns Polar Chart component
|
|
27
24
|
* @group Charts
|
package/dist/props.d.ts
CHANGED
|
@@ -10,7 +10,13 @@ import { HookEnableParam } from './common/hooks/types';
|
|
|
10
10
|
import { ExecuteQueryResult } from './query-execution/types';
|
|
11
11
|
export type { MenuItemSection, HighchartsOptions };
|
|
12
12
|
/**
|
|
13
|
-
* Configurations for Sisense Context
|
|
13
|
+
* Configurations and authentication for Sisense Context.
|
|
14
|
+
*
|
|
15
|
+
* Use one of the following to authenticate:
|
|
16
|
+
*
|
|
17
|
+
* - {@link ssoEnabled}
|
|
18
|
+
* - {@link token}
|
|
19
|
+
* - {@link wat}
|
|
14
20
|
*/
|
|
15
21
|
export interface SisenseContextProviderProps {
|
|
16
22
|
/**
|
|
@@ -20,10 +26,9 @@ export interface SisenseContextProviderProps {
|
|
|
20
26
|
/** URL of the Sisense environment the app connects to */
|
|
21
27
|
url: string;
|
|
22
28
|
/**
|
|
23
|
-
* [Single Sign-On](https://docs.sisense.com/main/SisenseLinux/using-single-sign-on-to-access-sisense.htm) toggle
|
|
29
|
+
* [Single Sign-On](https://docs.sisense.com/main/SisenseLinux/using-single-sign-on-to-access-sisense.htm) toggle.
|
|
24
30
|
*
|
|
25
|
-
*
|
|
26
|
-
* If set to true, this will override any other authentication method.
|
|
31
|
+
* Set to `true` to use SSO authentication. When `true`, this overrides any other authentication methods. Defaults to `false`.
|
|
27
32
|
*
|
|
28
33
|
* @category Authentication
|
|
29
34
|
*/
|
|
@@ -31,16 +36,12 @@ export interface SisenseContextProviderProps {
|
|
|
31
36
|
/**
|
|
32
37
|
* Token for [bearer authentication](https://sisense.dev/guides/restApi/using-rest-api.html).
|
|
33
38
|
*
|
|
34
|
-
* This is used only when basic username/password authentication is not specified.
|
|
35
|
-
*
|
|
36
39
|
* @category Authentication
|
|
37
40
|
*/
|
|
38
41
|
token?: string;
|
|
39
42
|
/**
|
|
40
43
|
* [Web Access Token](https://docs.sisense.com/main/SisenseLinux/using-web-access-token.htm).
|
|
41
44
|
*
|
|
42
|
-
* This is used only when neither username, password, and token is specified.
|
|
43
|
-
*
|
|
44
45
|
* @category Authentication
|
|
45
46
|
*/
|
|
46
47
|
wat?: string;
|
|
@@ -111,13 +112,12 @@ export interface ExecuteQueryProps {
|
|
|
111
112
|
*
|
|
112
113
|
* Two options are supported:
|
|
113
114
|
*
|
|
114
|
-
* (1) `
|
|
115
|
-
* See [Sisense documentation](https://docs.sisense.com/main/SisenseLinux/customizing-the-sisense-user-interface.htm)
|
|
116
|
-
* for more details.
|
|
115
|
+
* (1) `ThemeSettings` -- Custom theme settings that override the default theme settings.
|
|
117
116
|
*
|
|
118
117
|
* OR
|
|
119
118
|
*
|
|
120
|
-
* (2) `
|
|
119
|
+
* (2) `ThemeOid` -- Theme identifier as defined in a Fusion Embed instance (**Admin > App Configuration > Look and Feel**).
|
|
120
|
+
* See [Customizing the Sisense User Interface](https://docs.sisense.com/main/SisenseLinux/customizing-the-sisense-user-interface.htm) for more details.
|
|
121
121
|
*/
|
|
122
122
|
export type ThemeProviderProps = PropsWithChildren<{
|
|
123
123
|
/**
|
|
@@ -3,35 +3,17 @@ import { ExecutePivotQueryParams, PivotQueryState } from './types';
|
|
|
3
3
|
* React hook that executes a data query for a pivot table.
|
|
4
4
|
* This approach is similar to React Query's `useQuery` hook.
|
|
5
5
|
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
* { measure: measures.sum(DM.Commerce.Revenue, 'Total Revenue'), totalsCalculation: 'sum' },
|
|
18
|
-
* { measure: measures.sum(DM.Commerce.Quantity, 'Total Quantity'), totalsCalculation: 'min' },
|
|
19
|
-
* ],
|
|
20
|
-
* grandTotals: {title: 'Grand Totals', rows: true, columns: true},
|
|
21
|
-
* filters: [filters.members(DM.Commerce.Gender, ['Female', 'Male'])],
|
|
22
|
-
* });
|
|
23
|
-
* if (isLoading) {
|
|
24
|
-
* return <div>Loading...</div>;
|
|
25
|
-
* }
|
|
26
|
-
* if (isError) {
|
|
27
|
-
* return <div>Error</div>;
|
|
28
|
-
* }
|
|
29
|
-
* if (data) {
|
|
30
|
-
* return <div>[Render pivot table with returned data]</div>;
|
|
31
|
-
* }
|
|
32
|
-
* return null;
|
|
33
|
-
* ```
|
|
34
|
-
* See also hook {@link useExecuteQuery}, which execute a generic data query.
|
|
6
|
+
* ## Example
|
|
7
|
+
*
|
|
8
|
+
* Execute a pivot query on the Sample ECommerce data model and display the results in a table.
|
|
9
|
+
*
|
|
10
|
+
* <iframe
|
|
11
|
+
* src='https://csdk-playground.sisense.com/?example=queries%2Fuse-execute-pivot-query&mode=docs'
|
|
12
|
+
* width=800
|
|
13
|
+
* height=870
|
|
14
|
+
* style='border:none;'
|
|
15
|
+
* />
|
|
16
|
+
*
|
|
35
17
|
* @param params - Parameters of the query
|
|
36
18
|
* @returns Query state that contains the status of the query execution, the result data, or the error if any occurred
|
|
37
19
|
* @group Queries
|
|
@@ -1,32 +1,25 @@
|
|
|
1
1
|
import { ExecuteQueryParams, ExecuteQueryResult } from './types';
|
|
2
2
|
/**
|
|
3
3
|
* React hook that executes a data query.
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
return null;
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
* See also hook {@link useExecuteQueryByWidgetId}, which extracts data from an existing widget in the Sisense instance.
|
|
27
|
-
*
|
|
28
|
-
* See [this blog post]( https://www.sisense.com/blog/take-control-of-your-data-visualizations/) for examples
|
|
29
|
-
* of using the hook to fetch data from Sisense for third-party charts.
|
|
4
|
+
*
|
|
5
|
+
* This approach, which offers an alternative to the {@link ExecuteQuery} component, is similar to React Query's `useQuery` hook.
|
|
6
|
+
*
|
|
7
|
+
* ## Example
|
|
8
|
+
*
|
|
9
|
+
* 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.
|
|
10
|
+
*
|
|
11
|
+
* <iframe
|
|
12
|
+
* src='https://csdk-playground.sisense.com/?example=queries%2Fuse-execute-query-sorting&mode=docs'
|
|
13
|
+
* width=800
|
|
14
|
+
* height=870
|
|
15
|
+
* style='border:none;'
|
|
16
|
+
* />
|
|
17
|
+
*
|
|
18
|
+
* Additional `useExecuteQuery()` examples:
|
|
19
|
+
*
|
|
20
|
+
* - [Query with Sorting](https://csdk-playground.sisense.com/?example=queries%2Fuse-execute-query-sorting)
|
|
21
|
+
* - [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.
|
|
22
|
+
*
|
|
30
23
|
* @param params - Parameters of the query
|
|
31
24
|
* @returns Query state that contains the status of the query execution, the result data, or the error if any occurred
|
|
32
25
|
* @group Queries
|
package/dist/scatter-chart.d.ts
CHANGED
|
@@ -9,59 +9,21 @@ import { ScatterChartProps } from './props';
|
|
|
9
9
|
* **Size**: An optional field represented by the size of the circles.
|
|
10
10
|
* If omitted, all scatter points are equal in size. If used, the circle sizes are relative to their values.
|
|
11
11
|
*
|
|
12
|
-
*
|
|
12
|
+
* ## Example
|
|
13
13
|
*
|
|
14
|
-
*
|
|
15
|
-
* An example of using the component to visualize the `Sample ECommerce` data source.
|
|
14
|
+
* Scatter chart displaying total revenue per category, broken down by gender, from the Sample ECommerce data model.
|
|
16
15
|
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
* filters={[filterFactory.greaterThan(DM.Commerce.Revenue, 10)]}
|
|
23
|
-
* dataOptions={{
|
|
24
|
-
* x: measureFactory.sum(DM.Commerce.Revenue),
|
|
25
|
-
* y: measureFactory.sum(DM.Commerce.Quantity),
|
|
26
|
-
* breakByPoint: DM.Category.Category,
|
|
27
|
-
* breakByColor: DM.Commerce.Gender,
|
|
28
|
-
* size: measureFactory.sum(DM.Commerce.Cost),
|
|
29
|
-
* }}
|
|
30
|
-
* styleOptions={{
|
|
31
|
-
* xAxis: {
|
|
32
|
-
* enabled: true,
|
|
33
|
-
* gridLines: true,
|
|
34
|
-
* isIntervalEnabled: false,
|
|
35
|
-
* labels: {
|
|
36
|
-
* enabled: true,
|
|
37
|
-
* },
|
|
38
|
-
* logarithmic: true,
|
|
39
|
-
* title: {
|
|
40
|
-
* enabled: true,
|
|
41
|
-
* text: 'Total Revenue',
|
|
42
|
-
* },
|
|
43
|
-
* },
|
|
44
|
-
* yAxis: {
|
|
45
|
-
* enabled: true,
|
|
46
|
-
* gridLines: true,
|
|
47
|
-
* isIntervalEnabled: false,
|
|
48
|
-
* labels: {
|
|
49
|
-
* enabled: true,
|
|
50
|
-
* },
|
|
51
|
-
* logarithmic: true,
|
|
52
|
-
* title: {
|
|
53
|
-
* enabled: true,
|
|
54
|
-
* text: 'Total Quantity',
|
|
55
|
-
* },
|
|
56
|
-
* },
|
|
57
|
-
* }}
|
|
58
|
-
* onDataPointClick={(point, nativeEvent) => {
|
|
59
|
-
* console.log('clicked', point, nativeEvent);
|
|
60
|
-
* }}
|
|
16
|
+
* <iframe
|
|
17
|
+
* src='https://csdk-playground.sisense.com/?example=charts%2Fscatter-chart&mode=docs'
|
|
18
|
+
* width=800
|
|
19
|
+
* height=870
|
|
20
|
+
* style='border:none;'
|
|
61
21
|
* />
|
|
62
|
-
* ```
|
|
63
22
|
*
|
|
64
|
-
*
|
|
23
|
+
* Additional Scatter Chart examples:
|
|
24
|
+
*
|
|
25
|
+
* - [Bubble Scatter Chart](https://csdk-playground.sisense.com/?example=charts/scatter-chart-bubble)
|
|
26
|
+
*
|
|
65
27
|
* @param props - Scatter chart properties
|
|
66
28
|
* @returns Scatter Chart component
|
|
67
29
|
* @group Charts
|
|
@@ -2,31 +2,18 @@
|
|
|
2
2
|
import { ScattermapChartProps } from './props';
|
|
3
3
|
/**
|
|
4
4
|
* A React component that allows to visualize geographical data as data points on a map.
|
|
5
|
-
* See [Scattermap Chart](https://docs.sisense.com/main/SisenseLinux/scatter-map.htm) for more information.
|
|
6
5
|
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
* column: measureFactory.sum(DM.Commerce.Revenue, 'Color by Revenue'),
|
|
17
|
-
* color: 'green'
|
|
18
|
-
* },
|
|
19
|
-
* details: DM.Category.Category,
|
|
20
|
-
* }}
|
|
21
|
-
* styleOptions={{
|
|
22
|
-
* markers: {
|
|
23
|
-
* fill: 'hollow-bold'
|
|
24
|
-
* }
|
|
25
|
-
* }}
|
|
6
|
+
* ## Example
|
|
7
|
+
*
|
|
8
|
+
* 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.
|
|
9
|
+
*
|
|
10
|
+
* <iframe
|
|
11
|
+
* src='https://csdk-playground.sisense.com/?example=charts%2Fmap-scatter&mode=docs'
|
|
12
|
+
* width=1000
|
|
13
|
+
* height=900
|
|
14
|
+
* style='border:none;'
|
|
26
15
|
* />
|
|
27
|
-
* ```
|
|
28
16
|
*
|
|
29
|
-
* <img src="media://scattermap-chart-example-1.png" width="600px" />
|
|
30
17
|
* @param props - Scattermap chart properties
|
|
31
18
|
* @returns Scattermap Chart component
|
|
32
19
|
* @group Charts
|
package/dist/sunburst-chart.d.ts
CHANGED
|
@@ -2,25 +2,20 @@
|
|
|
2
2
|
import { SunburstChartProps } from './props';
|
|
3
3
|
/**
|
|
4
4
|
* A React component displaying hierarchical data in the form of nested circle slices.
|
|
5
|
+
*
|
|
5
6
|
* This type of chart can be used in different scenarios, for example, to compare both categories and sub-categories.
|
|
6
|
-
* See [Sunburst Chart](https://docs.sisense.com/main/SisenseLinux/sunburst-widget.htm) for more information.
|
|
7
7
|
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
* ],
|
|
18
|
-
* value: [measureFactory.sum(DM.Commerce.Quantity)],
|
|
19
|
-
* }}
|
|
8
|
+
* ## Example
|
|
9
|
+
*
|
|
10
|
+
* Sunburst chart displaying total revenue, categorized by condition and age range, from the Sample ECommerce data model.
|
|
11
|
+
*
|
|
12
|
+
* <iframe
|
|
13
|
+
* src='https://csdk-playground.sisense.com/?example=charts%2Fsunburst-chart&mode=docs'
|
|
14
|
+
* width=800
|
|
15
|
+
* height=870
|
|
16
|
+
* style='border:none;'
|
|
20
17
|
* />
|
|
21
|
-
* ```
|
|
22
18
|
*
|
|
23
|
-
* <img src="media://sunburst-chart-example-1.png" width="600px" />
|
|
24
19
|
* @param props - Sunburst chart properties
|
|
25
20
|
* @returns Sunburst Chart component
|
|
26
21
|
* @group Charts
|
package/dist/table/table.d.ts
CHANGED
|
@@ -3,47 +3,17 @@ import { TableProps } from '../props';
|
|
|
3
3
|
/**
|
|
4
4
|
* Table with aggregation and pagination.
|
|
5
5
|
*
|
|
6
|
-
*
|
|
7
|
-
* (1) Example of Table of raw data from the `Sample ECommerce` data model:
|
|
6
|
+
* ## Example
|
|
8
7
|
*
|
|
9
|
-
*
|
|
10
|
-
* <Table
|
|
11
|
-
* dataSet={DM.DataSource}
|
|
12
|
-
* dataOptions={{
|
|
13
|
-
* columns: [
|
|
14
|
-
* DM.Commerce.AgeRange,
|
|
15
|
-
* DM.Commerce.Revenue,
|
|
16
|
-
* DM.Commerce.Cost,
|
|
17
|
-
* DM.Commerce.Quantity,
|
|
18
|
-
* ],
|
|
19
|
-
* }}
|
|
20
|
-
* styleOptions={{ width: 600, height: 750 }}
|
|
21
|
-
* />
|
|
22
|
-
* ```
|
|
23
|
-
*
|
|
24
|
-
* <img src="media://table-example-1.png" width="800px" />
|
|
25
|
-
*
|
|
26
|
-
* (2) Example of Table of aggregated data from the same data model:
|
|
8
|
+
* Table displaying year, condition, and total revenue from the Sample ECommerce data model.
|
|
27
9
|
*
|
|
28
|
-
*
|
|
29
|
-
*
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
* DM.Commerce.AgeRange,
|
|
34
|
-
* measureFactory.sum(DM.Commerce.Revenue, 'Total Revenue'),
|
|
35
|
-
* measureFactory.sum(DM.Commerce.Cost, 'Total Cost'),
|
|
36
|
-
* ],
|
|
37
|
-
* }}
|
|
38
|
-
* styleOptions={{
|
|
39
|
-
* headersColor: true,
|
|
40
|
-
* alternatingColumnsColor: false,
|
|
41
|
-
* alternatingRowsColor: true,
|
|
42
|
-
* }}
|
|
10
|
+
* <iframe
|
|
11
|
+
* src='https://csdk-playground.sisense.com/?example=tables%2Faggregated-table&mode=docs'
|
|
12
|
+
* width=800
|
|
13
|
+
* height=870
|
|
14
|
+
* style='border:none;'
|
|
43
15
|
* />
|
|
44
|
-
* ```
|
|
45
16
|
*
|
|
46
|
-
* <img src="media://table-example-2.png" width="800px" />
|
|
47
17
|
* @param props - Table properties
|
|
48
18
|
* @returns Table component
|
|
49
19
|
* @group Data Grids
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { CompleteThemeSettings } from '../types';
|
|
3
|
+
export declare const ThemeContext: import("react").Context<{
|
|
4
|
+
themeSettings: CompleteThemeSettings;
|
|
5
|
+
}>;
|
|
6
|
+
/**
|
|
7
|
+
* Hook to get the current theme settings.
|
|
8
|
+
*
|
|
9
|
+
* @returns The current theme settings
|
|
10
|
+
* @internal
|
|
11
|
+
*/
|
|
12
|
+
export declare const useThemeContext: () => {
|
|
13
|
+
themeSettings: CompleteThemeSettings;
|
|
14
|
+
};
|
|
@@ -1,18 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { ThemeProviderProps } from '../props';
|
|
3
|
-
import { CompleteThemeSettings } from '../types';
|
|
4
|
-
export declare const ThemeContext: import("react").Context<{
|
|
5
|
-
themeSettings: CompleteThemeSettings;
|
|
6
|
-
}>;
|
|
7
|
-
/**
|
|
8
|
-
* Hook to get the current theme settings.
|
|
9
|
-
*
|
|
10
|
-
* @returns The current theme settings
|
|
11
|
-
* @internal
|
|
12
|
-
*/
|
|
13
|
-
export declare const useThemeContext: () => {
|
|
14
|
-
themeSettings: CompleteThemeSettings;
|
|
15
|
-
};
|
|
16
3
|
/**
|
|
17
4
|
* Theme provider, which allows you to adjust the look and feel of child components.
|
|
18
5
|
*
|
|
@@ -6,6 +6,7 @@ export declare const translation: {
|
|
|
6
6
|
chartNoSisenseContext: string;
|
|
7
7
|
dashboardWidgetNoSisenseContext: string;
|
|
8
8
|
dashboardWidgetInvalidIdentifiers: string;
|
|
9
|
+
dashboardWidgetsInvalidIdentifiers: string;
|
|
9
10
|
executeQueryNoSisenseContext: string;
|
|
10
11
|
executeQueryNoDataSource: string;
|
|
11
12
|
dataOptions: {
|
|
@@ -31,6 +32,7 @@ export declare const translation: {
|
|
|
31
32
|
onlyTabularWidgetsSupported: string;
|
|
32
33
|
};
|
|
33
34
|
unknownFilterInFilterRelations: string;
|
|
35
|
+
filterRelationsNotSupported: string;
|
|
34
36
|
};
|
|
35
37
|
errorBoxText: string;
|
|
36
38
|
chartNoData: string;
|