@sisense/sdk-ui-vue 1.4.1 → 1.6.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.
Files changed (41) hide show
  1. package/dist/index.js +87643 -82709
  2. package/dist/src/components/charts/area-chart.d.ts +8 -3
  3. package/dist/src/components/charts/areamap-chart.d.ts +10 -3
  4. package/dist/src/components/charts/bar-chart.d.ts +10 -5
  5. package/dist/src/components/charts/boxplot-chart.d.ts +10 -5
  6. package/dist/src/components/charts/chart.d.ts +29 -13
  7. package/dist/src/components/charts/column-chart.d.ts +9 -3
  8. package/dist/src/components/charts/funnel-chart.d.ts +10 -4
  9. package/dist/src/components/charts/index.d.ts +0 -3
  10. package/dist/src/components/charts/indicator-chart.d.ts +15 -10
  11. package/dist/src/components/charts/line-chart.d.ts +18 -13
  12. package/dist/src/components/charts/pie-chart.d.ts +16 -11
  13. package/dist/src/components/charts/pivot-table.d.ts +26 -13
  14. package/dist/src/components/charts/polar-chart.d.ts +17 -12
  15. package/dist/src/components/charts/scatter-chart.d.ts +16 -11
  16. package/dist/src/components/charts/scattermap-chart.d.ts +16 -11
  17. package/dist/src/components/charts/sunburst-chart.d.ts +19 -10
  18. package/dist/src/components/charts/table.d.ts +23 -8
  19. package/dist/src/components/charts/treemap-chart.d.ts +17 -12
  20. package/dist/src/components/context-menu.d.ts +1 -0
  21. package/dist/src/components/drilldown-breadcrumbs.d.ts +1 -0
  22. package/dist/src/components/drilldown-widget.d.ts +90 -0
  23. package/dist/src/components/filters/criteria-filter-tile.d.ts +2 -1
  24. package/dist/src/components/filters/date-range-filter-tile.d.ts +24 -15
  25. package/dist/src/components/filters/member-filter-tile.d.ts +23 -14
  26. package/dist/src/components/{charts → widgets}/chart-widget.d.ts +8 -4
  27. package/dist/src/components/{charts → widgets}/dashboard-widget.d.ts +5 -0
  28. package/dist/src/components/widgets/index.d.ts +3 -0
  29. package/dist/src/components/{charts → widgets}/table-widget.d.ts +4 -3
  30. package/dist/src/composables/use-execute-query-by-widget-id.d.ts +2 -0
  31. package/dist/src/composables/use-execute-query.d.ts +1 -0
  32. package/dist/src/composables/use-get-dashboard-model.d.ts +1 -0
  33. package/dist/src/composables/use-get-dashboard-models.d.ts +1 -0
  34. package/dist/src/composables/use-get-shared-formula.d.ts +1 -0
  35. package/dist/src/composables/use-get-widget-model.d.ts +1 -0
  36. package/dist/src/lib.d.ts +2 -0
  37. package/dist/src/providers/index.d.ts +1 -1
  38. package/dist/src/providers/sisense-context-provider.d.ts +28 -15
  39. package/dist/src/providers/theme-provider.d.ts +2 -0
  40. package/dist/src/sdk-ui-core-exports.d.ts +1 -1
  41. package/package.json +2 -1
@@ -23,24 +23,29 @@ import type { PropType } from 'vue';
23
23
  *
24
24
  * <script setup lang="ts">
25
25
  * import { ref } from 'vue';
26
+ * import { measureFactory, filterFactory } from '@sisense/sdk-data';
27
+ * import * as DM from '../assets/sample-retail-model';
26
28
  * import {ScatterChart, type ScatterChartProps} from '@sisense/sdk-ui-vue';
27
29
  *
28
- const scatterChartProps = ref<ScatterChartProps>({
29
- dataSet: DM.DataSource,
30
- dataOptions: {
31
- x: dimProductName,
32
- y: measureTotalRevenue,
33
- },
34
- filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
35
- });
30
+ * const dimProductName = DM.DimProducts.ProductName;
31
+ * const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
32
+ * const scatterChartProps = ref<ScatterChartProps>({
33
+ dataSet: DM.DataSource,
34
+ dataOptions: {
35
+ x: dimProductName,
36
+ y: measureTotalRevenue,
37
+ },
38
+ filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
39
+ });
36
40
  * ```
37
- * <img src="media://scatter-chart-example-1.png" width="800px" />
41
+ * <img src="media://vue-scatter-chart-example.png" width="800px" />
38
42
  * @param props - Scatter chart properties
39
43
  * @returns Scatter Chart component
44
+ * @group Charts
40
45
  */
41
46
  export declare const ScatterChart: import("vue").DefineComponent<{
42
47
  dataOptions: PropType<import("@sisense/sdk-ui-preact").ScatterChartDataOptions>;
43
- dataSet: PropType<string | import("@sisense/sdk-data").Data | undefined>;
48
+ dataSet: PropType<import("@sisense/sdk-data").DataSource | import("@sisense/sdk-data").Data | undefined>;
44
49
  filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
45
50
  highlights: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
46
51
  onBeforeRender: PropType<import("@sisense/sdk-ui-preact").BeforeRenderHandler | undefined>;
@@ -52,7 +57,7 @@ export declare const ScatterChart: import("vue").DefineComponent<{
52
57
  [key: string]: any;
53
58
  }>) | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
54
59
  dataOptions: PropType<import("@sisense/sdk-ui-preact").ScatterChartDataOptions>;
55
- dataSet: PropType<string | import("@sisense/sdk-data").Data | undefined>;
60
+ dataSet: PropType<import("@sisense/sdk-data").DataSource | import("@sisense/sdk-data").Data | undefined>;
56
61
  filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
57
62
  highlights: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
58
63
  onBeforeRender: PropType<import("@sisense/sdk-ui-preact").BeforeRenderHandler | undefined>;
@@ -16,26 +16,31 @@ import type { PropType } from 'vue';
16
16
  *
17
17
  * <script setup lang="ts">
18
18
  * import { ref } from 'vue';
19
+ * import { measureFactory, filterFactory } from '@sisense/sdk-data';
20
+ * import * as DM from '../assets/sample-retail-model';
19
21
  * import {ScattermapChart,type ScattermapChartProps} from '@sisense/sdk-ui-vue';
20
22
  *
21
- const scattermapChartProps = ref<ScattermapChartProps>({
22
- dataSet: DM.DataSource,
23
- dataOptions: {
24
- geo: [DM.DimCountries.CountryName],
25
- size: { column: measureTotalRevenue, title: 'Total Revenue' },
26
- },
27
- filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
28
- });
23
+ * const dimProductName = DM.DimProducts.ProductName;
24
+ * const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
25
+ * const scattermapChartProps = ref<ScattermapChartProps>({
26
+ dataSet: DM.DataSource,
27
+ dataOptions: {
28
+ geo: [DM.DimCountries.CountryName],
29
+ size: { column: measureTotalRevenue, title: 'Total Revenue' },
30
+ },
31
+ filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
32
+ });
29
33
  * </script>
30
34
  * ```
31
- * <img src="media://scattermap-chart-example-1.png" width="600px" />
35
+ * <img src="media://vue-scattermap-chart-example.png" width="600px" />
32
36
  * @param props - Scattermap chart properties
33
37
  * @returns Scattermap Chart component
38
+ * @group Charts
34
39
  * @beta
35
40
  */
36
41
  export declare const ScattermapChart: import("vue").DefineComponent<{
37
42
  dataOptions: PropType<import("@sisense/sdk-ui-preact").ScattermapChartDataOptions>;
38
- dataSet: PropType<string | import("@sisense/sdk-data").Data | undefined>;
43
+ dataSet: PropType<import("@sisense/sdk-data").DataSource | import("@sisense/sdk-data").Data | undefined>;
39
44
  filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
40
45
  highlights: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
41
46
  styleOptions: PropType<import("@sisense/sdk-ui-preact").ScattermapStyleOptions | undefined>;
@@ -44,7 +49,7 @@ export declare const ScattermapChart: import("vue").DefineComponent<{
44
49
  [key: string]: any;
45
50
  }>) | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
46
51
  dataOptions: PropType<import("@sisense/sdk-ui-preact").ScattermapChartDataOptions>;
47
- dataSet: PropType<string | import("@sisense/sdk-data").Data | undefined>;
52
+ dataSet: PropType<import("@sisense/sdk-data").DataSource | import("@sisense/sdk-data").Data | undefined>;
48
53
  filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
49
54
  highlights: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
50
55
  styleOptions: PropType<import("@sisense/sdk-ui-preact").ScattermapStyleOptions | undefined>;
@@ -16,21 +16,30 @@ import type { PropType } from 'vue';
16
16
  *
17
17
  * <script setup lang="ts">
18
18
  * import { ref } from 'vue';
19
+ * import { measureFactory, filterFactory } from '@sisense/sdk-data';
20
+ * import * as DM from '../assets/sample-retail-model';
19
21
  * import {SunburstChart,type SunburstChartProps} from '@sisense/sdk-ui-vue';
20
22
  *
21
- const sunburstChartProps = ref<SunburstChartProps>({
22
- dataSet: DM.DataSource,
23
- dataOptions: {
24
- category: [dimProductName],
25
- value: [{ column: measureTotalRevenue, sortType: 'sortDesc' }],
26
- },
27
- filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
28
- });
23
+ * const dimProductName = DM.DimProducts.ProductName;
24
+ * const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
25
+ * const sunburstChartProps = ref<SunburstChartProps>({
26
+ dataSet: DM.DataSource,
27
+ dataOptions: {
28
+ category: [dimProductName],
29
+ value: [{ column: measureTotalRevenue, sortType: 'sortDesc' }],
30
+ },
31
+ filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
32
+ });
29
33
  * ```
34
+ * <img src="media://vue-sunburst-chart-example.png" width="600px" />
35
+ * @param props - Sunburst Chart properties
36
+ * @returns Sunburst Chart component
37
+ * @group Charts
38
+ * @beta
30
39
  */
31
40
  export declare const SunburstChart: import("vue").DefineComponent<{
32
41
  dataOptions: PropType<import("@sisense/sdk-ui-preact").CategoricalChartDataOptions>;
33
- dataSet: PropType<string | import("@sisense/sdk-data").Data | undefined>;
42
+ dataSet: PropType<import("@sisense/sdk-data").DataSource | import("@sisense/sdk-data").Data | undefined>;
34
43
  filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
35
44
  highlights: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
36
45
  onBeforeRender: PropType<import("@sisense/sdk-ui-preact").BeforeRenderHandler | undefined>;
@@ -42,7 +51,7 @@ export declare const SunburstChart: import("vue").DefineComponent<{
42
51
  [key: string]: any;
43
52
  }>) | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
44
53
  dataOptions: PropType<import("@sisense/sdk-ui-preact").CategoricalChartDataOptions>;
45
- dataSet: PropType<string | import("@sisense/sdk-data").Data | undefined>;
54
+ dataSet: PropType<import("@sisense/sdk-data").DataSource | import("@sisense/sdk-data").Data | undefined>;
46
55
  filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
47
56
  highlights: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
48
57
  onBeforeRender: PropType<import("@sisense/sdk-ui-preact").BeforeRenderHandler | undefined>;
@@ -6,25 +6,40 @@ import type { PropType } from 'vue';
6
6
  * Here's how you can use the Table component in a Vue application:
7
7
  * ```vue
8
8
  * <template>
9
- * <Table :props="tableProps" />
9
+ * <Table :dataOptions="tableProps.dataOptions" :dataSet="tableProps.dataSet"
10
+ :styleOptions="tableProps.styleOptions" :filters="tableProps.filters" />
10
11
  * </template>
11
12
  *
12
13
  * <script setup lang="ts">
13
14
  * import { ref } from 'vue';
14
- * import Table from '@sisense/sdk-ui-vue/Table';
15
+ * import { measureFactory, filterFactory } from '@sisense/sdk-data';
16
+ * import * as DM from '../assets/sample-retail-model';
17
+ * import { Table, type TableProps } from '@sisense/sdk-ui-vue';
15
18
  *
16
- * const tableProps = ref({
17
- * // Define your TableProps configuration here
18
- * });
19
+ * const dimProductName = DM.DimProducts.ProductName;
20
+ * const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
21
+ *
22
+ * const tableProps = ref<TableProps>({
23
+ dataSet: DM.DataSource,
24
+ dataOptions: {
25
+ columns: [dimProductName, measureTotalRevenue],
26
+ },
27
+ styleOptions: {
28
+ width: 800,
29
+ height: 500,
30
+ },
31
+ filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
32
+ * });
19
33
  * </script>
20
34
  * ```
21
- * <img src="media://table-example-2.png" width="800px" />
35
+ * <img src="media://vue-table-example.png" width="800px" />
22
36
  * @param props - Table properties
23
37
  * @returns Table component
38
+ * @group Data Grids
24
39
  */
25
40
  export declare const Table: import("vue").DefineComponent<{
26
41
  dataOptions: PropType<import("@sisense/sdk-ui-preact").TableDataOptions>;
27
- dataSet: PropType<string | import("@sisense/sdk-data").Data | undefined>;
42
+ dataSet: PropType<import("@sisense/sdk-data").DataSource | import("@sisense/sdk-data").Data | undefined>;
28
43
  filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
29
44
  refreshCounter: PropType<number | undefined>;
30
45
  styleOptions: PropType<import("@sisense/sdk-ui-preact").TableStyleOptions | undefined>;
@@ -32,7 +47,7 @@ export declare const Table: import("vue").DefineComponent<{
32
47
  [key: string]: any;
33
48
  }>) | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
34
49
  dataOptions: PropType<import("@sisense/sdk-ui-preact").TableDataOptions>;
35
- dataSet: PropType<string | import("@sisense/sdk-data").Data | undefined>;
50
+ dataSet: PropType<import("@sisense/sdk-data").DataSource | import("@sisense/sdk-data").Data | undefined>;
36
51
  filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
37
52
  refreshCounter: PropType<number | undefined>;
38
53
  styleOptions: PropType<import("@sisense/sdk-ui-preact").TableStyleOptions | undefined>;
@@ -17,24 +17,29 @@ import type { PropType } from 'vue';
17
17
  *
18
18
  * <script setup lang="ts">
19
19
  * import { ref } from 'vue';
20
- * import TreemapChart from '@sisense/sdk-ui-vue/TreemapChart';
20
+ * import { measureFactory, filterFactory } from '@sisense/sdk-data';
21
+ * import * as DM from '../assets/sample-retail-model';
22
+ * import {TreemapChart, type TreemapChartProps} from '@sisense/sdk-ui-vue';
21
23
  *
22
- const treemapChartProps = ref<TreemapChartProps>({
23
- dataSet: DM.DataSource,
24
- dataOptions: {
25
- category: [dimProductName],
26
- value: [{ column: measureTotalRevenue, sortType: 'sortDesc' }],
27
- },
28
- filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
29
- });
24
+ * const dimProductName = DM.DimProducts.ProductName;
25
+ * const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
26
+ * const treemapChartProps = ref<TreemapChartProps>({
27
+ dataSet: DM.DataSource,
28
+ dataOptions: {
29
+ category: [dimProductName],
30
+ value: [{ column: measureTotalRevenue, sortType: 'sortDesc' }],
31
+ },
32
+ filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
33
+ });
30
34
  * ```
31
- * <img src="media://treemap-chart-example-1.png" width="600px" />
35
+ * <img src="media://vue-treemap-chart-example.png" width="600px" />
32
36
  * @param props - Treemap chart properties
33
37
  * @returns Treemap Chart component
38
+ * @group Charts
34
39
  */
35
40
  export declare const TreemapChart: import("vue").DefineComponent<{
36
41
  dataOptions: PropType<import("@sisense/sdk-ui-preact").CategoricalChartDataOptions>;
37
- dataSet: PropType<string | import("@sisense/sdk-data").Data | undefined>;
42
+ dataSet: PropType<import("@sisense/sdk-data").DataSource | import("@sisense/sdk-data").Data | undefined>;
38
43
  filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
39
44
  highlights: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
40
45
  onBeforeRender: PropType<import("@sisense/sdk-ui-preact").BeforeRenderHandler | undefined>;
@@ -46,7 +51,7 @@ export declare const TreemapChart: import("vue").DefineComponent<{
46
51
  [key: string]: any;
47
52
  }>) | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
48
53
  dataOptions: PropType<import("@sisense/sdk-ui-preact").CategoricalChartDataOptions>;
49
- dataSet: PropType<string | import("@sisense/sdk-data").Data | undefined>;
54
+ dataSet: PropType<import("@sisense/sdk-data").DataSource | import("@sisense/sdk-data").Data | undefined>;
50
55
  filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
51
56
  highlights: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
52
57
  onBeforeRender: PropType<import("@sisense/sdk-ui-preact").BeforeRenderHandler | undefined>;
@@ -30,6 +30,7 @@ import type { PropType } from 'vue';
30
30
  * @prop {Function} closeContextMenu - Function to close the context menu. It should be a function that sets the visibility of the context menu to false.
31
31
  * @prop {Array} itemSections - An array of sections, each containing an array of items to be rendered in the context menu. Each item can be a string or an object specifying the item's properties.
32
32
  * @prop {Object} position - An object specifying the position of the context menu. It should contain `top` and `left` properties to position the menu on the screen.
33
+ * @group Drilldown
33
34
  */
34
35
  export declare const ContextMenu: import("vue").DefineComponent<{
35
36
  closeContextMenu: PropType<() => void>;
@@ -39,6 +39,7 @@ import type { PropType } from 'vue';
39
39
  * @prop {Object} currentDimension - Object representing the current dimension in the drilldown path.
40
40
  * @prop {Function} sliceDrilldownSelections - Function to slice the drilldown selections up to a certain index, allowing the user to navigate back in the drilldown path.
41
41
  * @prop {Object} filtersDisplayValues - Object mapping the internal filter values to human-readable display values, enhancing the usability of the breadcrumbs.
42
+ * @group Drilldown
42
43
  */
43
44
  export declare const DrilldownBreadcrumbs: import("vue").DefineComponent<{
44
45
  clearDrilldownSelections: PropType<() => void>;
@@ -5,6 +5,96 @@ export type DrilldownWidgetConfig = {
5
5
  breadcrumbsComponent?: Component;
6
6
  contextMenuComponent?: (props: ContextMenuProps) => Component;
7
7
  };
8
+ /**
9
+ * Vue component designed to add drilldown functionality to any type of chart
10
+ *
11
+ * It acts as a wrapper around a given chart component, enhancing it with drilldown capabilities
12
+ *
13
+ * The widget offers several features including:
14
+ * - A context menu for initiating drilldown actions (can be provided as a custom component)
15
+ * - Breadcrumbs that not only allow for drilldown selection slicing but also
16
+ * provide an option to clear the selection (can be provided as a custom component)
17
+ * - Filters specifically created for drilldown operation
18
+ * - An option to navigate to the next drilldown dimension
19
+ *
20
+ * When an `initialDimension` is specified, the `drilldownDimension` will automatically inherit its value,
21
+ * even before any points on the chart are selected.
22
+ * This allows for complete control over the chart's dimensions to be handed over to the DrilldownWidget
23
+ * @example
24
+ * Here's how to use the `DrilldownWidget` component:
25
+ * ```vue
26
+ * <template>
27
+ <DrilldownWidget
28
+ :drilldownDimensions="drilldownDimensions"
29
+ :initialDimension="dimProductName"
30
+ >
31
+ <template
32
+ #chart="{ drilldownFilters, drilldownDimension, onDataPointsSelected, onContextMenu }"
33
+ >
34
+ <ChartWidget
35
+ chart-type="bar"
36
+ v-bind:filters="drilldownFilters"
37
+ :dataOptions="{
38
+ ...chartProps.dataOptions,
39
+ category: [drilldownDimension],
40
+ }"
41
+ :highlight-selection-disabled="true"
42
+ :dataSet="chartProps.dataSet"
43
+ :style="chartProps.styleOptions"
44
+ :on-data-points-selected="(dataPoints: any, event: any) => {
45
+ onDataPointsSelected(dataPoints);
46
+ onContextMenu({ left: event.clientX, top: event.clientY });
47
+ }"
48
+ :on-data-point-click="(dataPoint: any, event: any) => {
49
+ onDataPointsSelected([dataPoint]);
50
+ onContextMenu({ left: event.clientX, top: event.clientY });
51
+ }"
52
+ :on-data-point-context-menu="(dataPoint: any, event: any) => {
53
+ onDataPointsSelected([dataPoint]);
54
+ onContextMenu({ left: event.clientX, top: event.clientY });
55
+ }"
56
+ />
57
+ </template>
58
+ </DrilldownWidget>
59
+ * </template>
60
+ *
61
+ * <script>
62
+ * import { ref } from 'vue';
63
+ * import { DrilldownWidget } from '@sisense/sdk-ui-vue';
64
+ *
65
+ * const chartProps = ref<ChartProps>({
66
+ chartType: 'bar',
67
+ dataSet: DM.DataSource,
68
+ dataOptions: {
69
+ category: [dimProductName],
70
+ value: [{ column: measureTotalRevenue, sortType: 'sortDesc' }],
71
+ breakBy: [],
72
+ },
73
+ filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
74
+ styleOptions: {
75
+ xAxis: {
76
+ title: {
77
+ text: 'Product Name',
78
+ enabled: true,
79
+ },
80
+ },
81
+ yAxis: {
82
+ title: {
83
+ text: 'Total Revenue',
84
+ enabled: true,
85
+ },
86
+ },
87
+ },
88
+ });
89
+ * const drilldownDimensions = [DM.DimCountries.CountryName, DM.DimProducts.ProductName];
90
+ * const dimProductName = DM.DimProducts.ProductName;
91
+ * </script>
92
+ * ```
93
+ * <img src="media://vue-drilldown-widget-example.png" width="800px" />
94
+ * @param props - DrilldownWidget properties
95
+ * @returns DrilldownWidget wrapper component
96
+ * @group Drilldown
97
+ */
8
98
  export declare const DrilldownWidgetTs: import("vue").DefineComponent<{
9
99
  config: {
10
100
  type: PropType<DrilldownWidgetConfig>;
@@ -31,9 +31,10 @@ import type { PropType } from 'vue';
31
31
  * }
32
32
  * </script>
33
33
  * ```
34
- * <img src="media://criteria-filter-tile-example-1.png" width="300px" />
34
+ * <img src="media://vue-criteria-filter-tile-example.png" width="300px" />
35
35
  * @param props - Criteria filter tile props
36
36
  * @returns Criteria filter tile component
37
+ * @group Filter Tiles
37
38
  */
38
39
  export declare const CriteriaFilterTile: import("vue").DefineComponent<{
39
40
  arrangement: PropType<import("@sisense/sdk-ui-preact").FilterVariant | undefined>;
@@ -6,32 +6,41 @@ import type { PropType } from 'vue';
6
6
  * Vue example of configuring the date min max values and handling onChange event.
7
7
  * ```vue
8
8
  * <template>
9
- * <DateRangeFilterTile
10
- * :title="dateRangeFilterTileProps.title"
11
- * :attribute="dateRangeFilterTileProps.attribute"
12
- * :filter="dateRangeFilterTileProps.filter"
13
- * :onChange="onChange" />
9
+ * <DateRangeFilterTile
10
+ * :title="dateRangeFilter.title"
11
+ * :datasource="dateRangeFilter.dataSource"
12
+ * :attribute="dateRangeFilter.attribute"
13
+ * :filter="dateRangeFilter.filter"
14
+ * :onChange="dateRangeFilter.onChange"
15
+ * />
14
16
  * </template>
15
17
  *
16
18
  * <script setup lang="ts">
17
19
  * import { ref } from 'vue';
18
- * import {CriteriaFilterTile} from '@sisense/sdk-ui-vue';
20
+ * import {CriteriaFilterTile, type DateRangeFilterTileProps} from '@sisense/sdk-ui-vue';
21
+ * import { filterFactory } from '@sisense/sdk-data';
22
+ * import * as DM from '../assets/sample-retail-model';
19
23
  *
20
- * const dateRangeFilterTileProps = ref({
24
+ * const dateRangeFilterValue = ref<Filter | null>(filterFactory.dateRange(DM.DimDate.Date.Years));
25
+ *
26
+ * const dateRangeFilter = ref<DateRangeFilterTileProps>({
21
27
  * title: 'Date Range',
22
- * attribute: DM.Commerce.Date.Years,
23
- * filter: filterFactory.dateRange(DM.Commerce.Date.Years),
28
+ * attribute: DM.DimDate.Date.Years,
29
+ * filter: dateRangeFilterValue.value!,
30
+ * onChange(filter) {
31
+ * dateRangeFilterValue.value = filter;
32
+ * },
24
33
  * });
25
- *
26
- * const onChange = (filter: Filter) => {
27
- * ...
28
- * }
29
34
  * </script>
30
35
  * ```
36
+ * <img src="media://vue-date-range-filter-tile-example.png" width="800px" />
37
+ * @param props - MemberFilterTile props
38
+ * @returns MemberFilterTile component
39
+ * @group Filter Tiles
31
40
  */
32
41
  export declare const DateRangeFilterTile: import("vue").DefineComponent<{
33
42
  attribute: PropType<import("@sisense/sdk-data").LevelAttribute>;
34
- datasource: PropType<string | undefined>;
43
+ datasource: PropType<import("@sisense/sdk-data").DataSource | undefined>;
35
44
  earliestDate: PropType<string | undefined>;
36
45
  filter: PropType<import("@sisense/sdk-data").Filter>;
37
46
  lastDate: PropType<string | undefined>;
@@ -42,7 +51,7 @@ export declare const DateRangeFilterTile: import("vue").DefineComponent<{
42
51
  [key: string]: any;
43
52
  }>) | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
44
53
  attribute: PropType<import("@sisense/sdk-data").LevelAttribute>;
45
- datasource: PropType<string | undefined>;
54
+ datasource: PropType<import("@sisense/sdk-data").DataSource | undefined>;
46
55
  earliestDate: PropType<string | undefined>;
47
56
  filter: PropType<import("@sisense/sdk-data").Filter>;
48
57
  lastDate: PropType<string | undefined>;
@@ -8,32 +8,41 @@ import type { PropType } from 'vue';
8
8
  * Below is an example for filtering countries in the `Country` dimension of the `Sample ECommerce` data model.
9
9
  * ```vue
10
10
  * <template>
11
- * <MemberFilterTile
12
- * :title="memberFilterTileProps.title"
13
- * :attribute="memberFilterTileProps.attribute"
14
- * :filter="memberFilterTileProps.filter"
15
- * :onChange={setCountryFilter}
16
- * />
11
+ * <MemberFilterTile
12
+ * :attribute="memberFilter.attribute"
13
+ * :onChange="memberFilter.onChange"
14
+ * :dataSource="memberFilter.dataSource"
15
+ * :title="memberFilter.title"
16
+ * />
17
17
  * </template>
18
18
  *
19
19
  * <script setup lang="ts">
20
20
  * import { ref } from 'vue';
21
- * import MemberFilterTile from '@sisense/sdk-ui-vue/MemberFilterTile';
21
+ * import {MemberFilterTile, type MemberFilterTileProps} from '@sisense/sdk-ui-vue';
22
22
  *
23
- * const memberFilterTileProps = ref({
24
- * title: 'Country',
25
- * attribute: DM.Country.Country,
26
- * filter: countryFilter,
23
+ * const memberFilterValue = ref<Filter | null>(null);
24
+ *
25
+ * const memberFilter = ref<MemberFilterTileProps>({
26
+ * dataSource: DM.DataSource,
27
+ * title: 'Member Filter',
28
+ * attribute: DM.DimProducts.ProductName,
29
+ * filter: memberFilterValue.value,
30
+ * onChange(filter) {
31
+ * memberFilterValue.value = filter;
32
+ * },
27
33
  * });
28
34
  *
29
- * const setCountryFilter = (filter: Filter | null) => {...}
30
35
  *
31
36
  * </script>
32
37
  * ```
38
+ * <img src="media://vue-member-filter-tile-example.png" width="300px" />
39
+ * @param props - MemberFilterTile props
40
+ * @returns MemberFilterTile component
41
+ * @group Filter Tiles
33
42
  */
34
43
  export declare const MemberFilterTile: import("vue").DefineComponent<{
35
44
  attribute: PropType<import("@sisense/sdk-data").Attribute>;
36
- dataSource: PropType<string | undefined>;
45
+ dataSource: PropType<import("@sisense/sdk-data").DataSource | undefined>;
37
46
  filter: PropType<import("@sisense/sdk-data").Filter | null>;
38
47
  onChange: PropType<(filter: import("@sisense/sdk-data").Filter | null) => void>;
39
48
  parentFilters: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
@@ -42,7 +51,7 @@ export declare const MemberFilterTile: import("vue").DefineComponent<{
42
51
  [key: string]: any;
43
52
  }>) | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
44
53
  attribute: PropType<import("@sisense/sdk-data").Attribute>;
45
- dataSource: PropType<string | undefined>;
54
+ dataSource: PropType<import("@sisense/sdk-data").DataSource | undefined>;
46
55
  filter: PropType<import("@sisense/sdk-data").Filter | null>;
47
56
  onChange: PropType<(filter: import("@sisense/sdk-data").Filter | null) => void>;
48
57
  parentFilters: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
@@ -40,8 +40,12 @@ import type { PropType } from 'vue';
40
40
  *
41
41
  * <script setup lang="ts">
42
42
  * import { ref } from 'vue';
43
+ * import { measureFactory, filterFactory } from '@sisense/sdk-data';
44
+ * import * as DM from '../assets/sample-retail-model';
43
45
  * import {ChartWidget} from '@sisense/sdk-ui-vue';
44
- *
46
+
47
+ * const dimProductName = DM.DimProducts.ProductName;
48
+ * const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
45
49
  * const chartWidgetProps = ref({
46
50
  * // Configure your ChartWidgetProps here
47
51
  * });
@@ -50,14 +54,14 @@ import type { PropType } from 'vue';
50
54
  * <img src="media://chart-widget-with-drilldown-example-1.png" width="800px" />
51
55
  * @param props - ChartWidget properties
52
56
  * @returns ChartWidget component representing a chart type as specified in `ChartWidgetProps.`{@link ChartWidgetProps.chartType | chartType}
53
-
57
+ * @group Chart Utilities
54
58
  */
55
59
  export declare const ChartWidget: import("vue").DefineComponent<{
56
60
  bottomSlot: PropType<import("react").ReactNode>;
57
61
  chartType: PropType<import("@sisense/sdk-ui-preact").ChartType>;
58
62
  contextMenuItems: PropType<import("@sisense/sdk-ui-preact").MenuItemSection[] | undefined>;
59
63
  dataOptions: PropType<import("@sisense/sdk-ui-preact").ChartDataOptions>;
60
- dataSource: PropType<string | undefined>;
64
+ dataSource: PropType<import("@sisense/sdk-data").DataSource | undefined>;
61
65
  description: PropType<string | undefined>;
62
66
  drilldownOptions: PropType<import("@sisense/sdk-ui-preact").DrilldownOptions | undefined>;
63
67
  filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
@@ -79,7 +83,7 @@ export declare const ChartWidget: import("vue").DefineComponent<{
79
83
  chartType: PropType<import("@sisense/sdk-ui-preact").ChartType>;
80
84
  contextMenuItems: PropType<import("@sisense/sdk-ui-preact").MenuItemSection[] | undefined>;
81
85
  dataOptions: PropType<import("@sisense/sdk-ui-preact").ChartDataOptions>;
82
- dataSource: PropType<string | undefined>;
86
+ dataSource: PropType<import("@sisense/sdk-data").DataSource | undefined>;
83
87
  description: PropType<string | undefined>;
84
88
  drilldownOptions: PropType<import("@sisense/sdk-ui-preact").DrilldownOptions | undefined>;
85
89
  filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
@@ -20,6 +20,7 @@ import type { PropType } from 'vue';
20
20
  *
21
21
  * </script>
22
22
  * ```
23
+ * @group Fusion Assets
23
24
  */
24
25
  export declare const DashboardWidget: import("vue").DefineComponent<{
25
26
  bottomSlot: PropType<import("react").ReactNode>;
@@ -28,9 +29,11 @@ export declare const DashboardWidget: import("vue").DefineComponent<{
28
29
  description: PropType<string | undefined>;
29
30
  drilldownOptions: PropType<import("@sisense/sdk-ui-preact").DrilldownOptions | undefined>;
30
31
  filters: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
32
+ /** {@inheritDoc ExecuteQueryByWidgetIdParams.filtersMergeStrategy} */
31
33
  filtersMergeStrategy: PropType<"widgetFirst" | "codeFirst" | "codeOnly" | undefined>;
32
34
  highlightSelectionDisabled: PropType<boolean | undefined>;
33
35
  highlights: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
36
+ /** {@inheritDoc ExecuteQueryByWidgetIdParams.includeDashboardFilters} */
34
37
  includeDashboardFilters: PropType<boolean | undefined>;
35
38
  onBeforeRender: PropType<import("@sisense/sdk-ui-preact").BeforeRenderHandler | undefined>;
36
39
  onContextMenuClose: PropType<(() => void) | undefined>;
@@ -51,9 +54,11 @@ export declare const DashboardWidget: import("vue").DefineComponent<{
51
54
  description: PropType<string | undefined>;
52
55
  drilldownOptions: PropType<import("@sisense/sdk-ui-preact").DrilldownOptions | undefined>;
53
56
  filters: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
57
+ /** {@inheritDoc ExecuteQueryByWidgetIdParams.filtersMergeStrategy} */
54
58
  filtersMergeStrategy: PropType<"widgetFirst" | "codeFirst" | "codeOnly" | undefined>;
55
59
  highlightSelectionDisabled: PropType<boolean | undefined>;
56
60
  highlights: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
61
+ /** {@inheritDoc ExecuteQueryByWidgetIdParams.includeDashboardFilters} */
57
62
  includeDashboardFilters: PropType<boolean | undefined>;
58
63
  onBeforeRender: PropType<import("@sisense/sdk-ui-preact").BeforeRenderHandler | undefined>;
59
64
  onContextMenuClose: PropType<(() => void) | undefined>;
@@ -0,0 +1,3 @@
1
+ export { ChartWidget } from './chart-widget';
2
+ export { DashboardWidget } from './dashboard-widget';
3
+ export { TableWidget } from './table-widget';
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import { type Prop } from 'vue';
3
3
  /**
4
- * The TableWidget component extending the {@link Table} component to support widget style options.
4
+ * The TableWidget component extending the Table component to support widget style options.
5
5
  *
6
6
  * @example
7
7
  * Here's how you can use the TableWidget component in a Vue application:
@@ -19,6 +19,7 @@ import { type Prop } from 'vue';
19
19
  * });
20
20
  * </script>
21
21
  * ```
22
+ * <img src="media://vue-table-widget-example.png" width="600px" />
22
23
  * @param props - Table Widget properties
23
24
  * @returns Widget component representing a table
24
25
  * @internal
@@ -26,7 +27,7 @@ import { type Prop } from 'vue';
26
27
  export declare const TableWidget: import("vue").DefineComponent<{
27
28
  bottomSlot: Prop<import("react").ReactNode>;
28
29
  dataOptions: Prop<import("@sisense/sdk-ui-preact").TableDataOptions>;
29
- dataSource: Prop<string | undefined>;
30
+ dataSource: Prop<import("@sisense/sdk-data").DataSource | undefined>;
30
31
  description: Prop<string | undefined>;
31
32
  filters: Prop<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
32
33
  styleOptions: Prop<import("@sisense/sdk-ui-preact").TableWidgetStyleOptions | undefined>;
@@ -38,7 +39,7 @@ export declare const TableWidget: import("vue").DefineComponent<{
38
39
  }>) | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
39
40
  bottomSlot: Prop<import("react").ReactNode>;
40
41
  dataOptions: Prop<import("@sisense/sdk-ui-preact").TableDataOptions>;
41
- dataSource: Prop<string | undefined>;
42
+ dataSource: Prop<import("@sisense/sdk-data").DataSource | undefined>;
42
43
  description: Prop<string | undefined>;
43
44
  filters: Prop<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
44
45
  styleOptions: Prop<import("@sisense/sdk-ui-preact").TableWidgetStyleOptions | undefined>;