@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.
- package/dist/index.js +87643 -82709
- package/dist/src/components/charts/area-chart.d.ts +8 -3
- package/dist/src/components/charts/areamap-chart.d.ts +10 -3
- package/dist/src/components/charts/bar-chart.d.ts +10 -5
- package/dist/src/components/charts/boxplot-chart.d.ts +10 -5
- package/dist/src/components/charts/chart.d.ts +29 -13
- package/dist/src/components/charts/column-chart.d.ts +9 -3
- package/dist/src/components/charts/funnel-chart.d.ts +10 -4
- package/dist/src/components/charts/index.d.ts +0 -3
- package/dist/src/components/charts/indicator-chart.d.ts +15 -10
- package/dist/src/components/charts/line-chart.d.ts +18 -13
- package/dist/src/components/charts/pie-chart.d.ts +16 -11
- package/dist/src/components/charts/pivot-table.d.ts +26 -13
- package/dist/src/components/charts/polar-chart.d.ts +17 -12
- package/dist/src/components/charts/scatter-chart.d.ts +16 -11
- package/dist/src/components/charts/scattermap-chart.d.ts +16 -11
- package/dist/src/components/charts/sunburst-chart.d.ts +19 -10
- package/dist/src/components/charts/table.d.ts +23 -8
- package/dist/src/components/charts/treemap-chart.d.ts +17 -12
- package/dist/src/components/context-menu.d.ts +1 -0
- package/dist/src/components/drilldown-breadcrumbs.d.ts +1 -0
- package/dist/src/components/drilldown-widget.d.ts +90 -0
- package/dist/src/components/filters/criteria-filter-tile.d.ts +2 -1
- package/dist/src/components/filters/date-range-filter-tile.d.ts +24 -15
- package/dist/src/components/filters/member-filter-tile.d.ts +23 -14
- package/dist/src/components/{charts → widgets}/chart-widget.d.ts +8 -4
- package/dist/src/components/{charts → widgets}/dashboard-widget.d.ts +5 -0
- package/dist/src/components/widgets/index.d.ts +3 -0
- package/dist/src/components/{charts → widgets}/table-widget.d.ts +4 -3
- package/dist/src/composables/use-execute-query-by-widget-id.d.ts +2 -0
- package/dist/src/composables/use-execute-query.d.ts +1 -0
- package/dist/src/composables/use-get-dashboard-model.d.ts +1 -0
- package/dist/src/composables/use-get-dashboard-models.d.ts +1 -0
- package/dist/src/composables/use-get-shared-formula.d.ts +1 -0
- package/dist/src/composables/use-get-widget-model.d.ts +1 -0
- package/dist/src/lib.d.ts +2 -0
- package/dist/src/providers/index.d.ts +1 -1
- package/dist/src/providers/sisense-context-provider.d.ts +28 -15
- package/dist/src/providers/theme-provider.d.ts +2 -0
- package/dist/src/sdk-ui-core-exports.d.ts +1 -1
- 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
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
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
|
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<
|
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<
|
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
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
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
|
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<
|
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<
|
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
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
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<
|
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<
|
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
|
-
*
|
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
|
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
|
17
|
-
*
|
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
|
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<
|
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<
|
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
|
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
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
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
|
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<
|
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<
|
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
|
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
|
-
*
|
10
|
-
*
|
11
|
-
*
|
12
|
-
*
|
13
|
-
*
|
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
|
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.
|
23
|
-
* filter:
|
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<
|
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<
|
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
|
-
*
|
12
|
-
*
|
13
|
-
*
|
14
|
-
*
|
15
|
-
*
|
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
|
21
|
+
* import {MemberFilterTile, type MemberFilterTileProps} from '@sisense/sdk-ui-vue';
|
22
22
|
*
|
23
|
-
* const
|
24
|
-
*
|
25
|
-
*
|
26
|
-
*
|
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<
|
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<
|
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<
|
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<
|
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>;
|
@@ -1,7 +1,7 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
import { type Prop } from 'vue';
|
3
3
|
/**
|
4
|
-
* The TableWidget component extending the
|
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<
|
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<
|
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>;
|