@sisense/sdk-ui-vue 1.17.0 → 1.18.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.cjs +442 -379
- package/dist/index.js +56285 -53588
- package/dist/src/components/charts/area-chart.d.ts +1 -1
- package/dist/src/components/charts/area-range-chart.d.ts +1 -1
- package/dist/src/components/charts/areamap-chart.d.ts +1 -1
- package/dist/src/components/charts/bar-chart.d.ts +1 -1
- package/dist/src/components/charts/boxplot-chart.d.ts +1 -1
- package/dist/src/components/charts/column-chart.d.ts +1 -1
- package/dist/src/components/charts/funnel-chart.d.ts +1 -1
- package/dist/src/components/charts/indicator-chart.d.ts +1 -1
- package/dist/src/components/charts/line-chart.d.ts +1 -1
- package/dist/src/components/charts/pie-chart.d.ts +1 -1
- package/dist/src/components/charts/pivot-table.d.ts +1 -1
- package/dist/src/components/charts/polar-chart.d.ts +1 -1
- package/dist/src/components/charts/scatter-chart.d.ts +1 -1
- package/dist/src/components/charts/scattermap-chart.d.ts +1 -1
- package/dist/src/components/charts/sunburst-chart.d.ts +1 -1
- package/dist/src/components/charts/treemap-chart.d.ts +1 -1
- package/dist/src/components/drilldown-widget.d.ts +32 -32
- package/dist/src/components/filters/criteria-filter-tile.d.ts +2 -2
- package/dist/src/components/filters/date-range-filter-tile.d.ts +1 -1
- package/dist/src/components/filters/member-filter-tile.d.ts +2 -2
- package/dist/src/components/widgets/chart-widget.d.ts +1 -1
- package/dist/src/components/widgets/dashboard-widget.d.ts +1 -1
- package/dist/src/composables/use-execute-query-by-widget-id.d.ts +1 -1
- package/dist/src/composables/use-execute-query.d.ts +1 -1
- package/dist/src/composables/use-get-dashboard-model.d.ts +18 -8
- package/dist/src/composables/use-get-dashboard-models.d.ts +1 -1
- package/dist/src/composables/use-get-shared-formula.d.ts +1 -1
- package/dist/src/composables/use-get-widget-model.d.ts +10 -11
- package/dist/src/composables/use-tracking.d.ts +3 -2
- package/dist/src/providers/theme-provider.d.ts +20 -0
- package/package.json +4 -4
@@ -18,7 +18,7 @@ import type { PropType } from 'vue';
|
|
18
18
|
* import { ref } from 'vue';
|
19
19
|
* import { measureFactory, filterFactory } from '@sisense/sdk-data';
|
20
20
|
* import * as DM from '../assets/sample-retail-model';
|
21
|
-
* import {AreaChart, type AreaChartProps} from '@sisense/sdk-ui-vue';
|
21
|
+
* import { AreaChart, type AreaChartProps } from '@sisense/sdk-ui-vue';
|
22
22
|
*
|
23
23
|
* const dimProductName = DM.DimProducts.ProductName;
|
24
24
|
* const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
|
@@ -19,7 +19,7 @@ import type { PropType } from 'vue';
|
|
19
19
|
* import { ref } from 'vue';
|
20
20
|
* import { measureFactory } from '@sisense/sdk-data';
|
21
21
|
* import * as DM from '../assets/sample-retail-model';
|
22
|
-
* import {AreaRangeChart, type AreaRangeChartProps} from '@sisense/sdk-ui-vue';
|
22
|
+
* import { AreaRangeChart, type AreaRangeChartProps } from '@sisense/sdk-ui-vue';
|
23
23
|
*
|
24
24
|
* const dimProductName = DM.DimProducts.ProductName;
|
25
25
|
* const areaRangeChartProps = ref<AreaRangeChartProps>({
|
@@ -17,7 +17,7 @@ import type { PropType } from 'vue';
|
|
17
17
|
* import { ref } from 'vue';
|
18
18
|
* import { measureFactory, filterFactory } from '@sisense/sdk-data';
|
19
19
|
* import * as DM from '../assets/sample-retail-model';
|
20
|
-
* import {AreamapChart, type AreamapChartProps} from '@sisense/sdk-ui-vue';
|
20
|
+
* import { AreamapChart, type AreamapChartProps } from '@sisense/sdk-ui-vue';
|
21
21
|
|
22
22
|
* const dimProductName = DM.DimProducts.ProductName;
|
23
23
|
* const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
|
@@ -18,7 +18,7 @@ import type { PropType } from 'vue';
|
|
18
18
|
* import { ref } from 'vue';
|
19
19
|
* import { measureFactory, filterFactory } from '@sisense/sdk-data';
|
20
20
|
* import * as DM from '../assets/sample-retail-model';
|
21
|
-
* import {BarChart,type BarChartProps} from '@sisense/sdk-ui-vue';
|
21
|
+
* import { BarChart,type BarChartProps } from '@sisense/sdk-ui-vue';
|
22
22
|
|
23
23
|
* const dimProductName = DM.DimProducts.ProductName;
|
24
24
|
* const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
|
@@ -18,7 +18,7 @@ import type { PropType } from 'vue';
|
|
18
18
|
* import { ref } from 'vue';
|
19
19
|
* import { measureFactory, filterFactory } from '@sisense/sdk-data';
|
20
20
|
* import * as DM from '../assets/sample-retail-model';
|
21
|
-
* import {BoxplotChart, type BoxplotChartProps} from '@sisense/sdk-ui-vue';
|
21
|
+
* import { BoxplotChart, type BoxplotChartProps } from '@sisense/sdk-ui-vue';
|
22
22
|
|
23
23
|
* const dimProductName = DM.DimProducts.ProductName;
|
24
24
|
* const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
|
@@ -18,7 +18,7 @@ import type { PropType } from 'vue';
|
|
18
18
|
* import { ref } from 'vue';
|
19
19
|
* import { measureFactory, filterFactory } from '@sisense/sdk-data';
|
20
20
|
* import * as DM from '../assets/sample-retail-model';
|
21
|
-
* import {ColumnChart, type ColumnChartProps} from '@sisense/sdk-ui-vue';
|
21
|
+
* import { ColumnChart, type ColumnChartProps } from '@sisense/sdk-ui-vue';
|
22
22
|
*
|
23
23
|
* const dimProductName = DM.DimProducts.ProductName;
|
24
24
|
* const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
|
@@ -16,7 +16,7 @@ import type { PropType } from 'vue';
|
|
16
16
|
*
|
17
17
|
* <script setup lang="ts">
|
18
18
|
* import { ref } from 'vue';
|
19
|
-
* import {FunnelChart, type FunnelChartProps} from '@sisense/sdk-ui-vue';
|
19
|
+
* import { FunnelChart, type FunnelChartProps } from '@sisense/sdk-ui-vue';
|
20
20
|
* import { measureFactory, filterFactory } from '@sisense/sdk-data';
|
21
21
|
* import * as DM from '../assets/sample-retail-model';
|
22
22
|
*
|
@@ -17,7 +17,7 @@ import type { PropType } from 'vue';
|
|
17
17
|
* import { ref } from 'vue';
|
18
18
|
* import { measureFactory, filterFactory } from '@sisense/sdk-data';
|
19
19
|
* import * as DM from '../assets/sample-retail-model';
|
20
|
-
* import {IndicatorChart, type IndicatorChartProps} from '@sisense/sdk-ui-vue';
|
20
|
+
* import { IndicatorChart, type IndicatorChartProps } from '@sisense/sdk-ui-vue';
|
21
21
|
|
22
22
|
* const dimProductName = DM.DimProducts.ProductName;
|
23
23
|
* const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
|
@@ -18,7 +18,7 @@ import type { PropType } from 'vue';
|
|
18
18
|
* import { ref } from 'vue';
|
19
19
|
* import { measureFactory, filterFactory } from '@sisense/sdk-data';
|
20
20
|
* import * as DM from '../assets/sample-retail-model';
|
21
|
-
* import {LineChart, type LineChartProps} from '@sisense/sdk-ui-vue';
|
21
|
+
* import { LineChart, type LineChartProps } from '@sisense/sdk-ui-vue';
|
22
22
|
|
23
23
|
* const dimProductName = DM.DimProducts.ProductName;
|
24
24
|
* const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
|
@@ -18,7 +18,7 @@ import type { PropType } from 'vue';
|
|
18
18
|
* import { ref } from 'vue';
|
19
19
|
* import { measureFactory, filterFactory } from '@sisense/sdk-data';
|
20
20
|
* import * as DM from '../assets/sample-retail-model';
|
21
|
-
* import {PieChart,type PieChartProps} from '@sisense/sdk-ui-vue';
|
21
|
+
* import { PieChart,type PieChartProps } from '@sisense/sdk-ui-vue';
|
22
22
|
*
|
23
23
|
* const dimProductName = DM.DimProducts.ProductName;
|
24
24
|
* const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
|
@@ -14,7 +14,7 @@ import type { PropType } from 'vue';
|
|
14
14
|
* import { ref } from 'vue';
|
15
15
|
* import { measureFactory, filterFactory } from '@sisense/sdk-data';
|
16
16
|
* import * as DM from '../assets/sample-retail-model';
|
17
|
-
* import {PivotTable, type PivotTableProps} from '@sisense/sdk-ui-vue/Table';
|
17
|
+
* import { PivotTable, type PivotTableProps } from '@sisense/sdk-ui-vue/Table';
|
18
18
|
*
|
19
19
|
* const dimProductName = DM.DimProducts.ProductName;
|
20
20
|
* const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
|
@@ -17,7 +17,7 @@ import { type PropType } from 'vue';
|
|
17
17
|
* import { ref } from 'vue';
|
18
18
|
* import { measureFactory, filterFactory } from '@sisense/sdk-data';
|
19
19
|
* import * as DM from '../assets/sample-retail-model';
|
20
|
-
* import {PolarChart,type PolarChartProps} from '@sisense/sdk-ui-vue';
|
20
|
+
* import { PolarChart,type PolarChartProps } from '@sisense/sdk-ui-vue';
|
21
21
|
*
|
22
22
|
* const dimProductName = DM.DimProducts.ProductName;
|
23
23
|
* const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
|
@@ -23,7 +23,7 @@ import type { PropType } from 'vue';
|
|
23
23
|
* import { ref } from 'vue';
|
24
24
|
* import { measureFactory, filterFactory } from '@sisense/sdk-data';
|
25
25
|
* import * as DM from '../assets/sample-retail-model';
|
26
|
-
* import {ScatterChart, type ScatterChartProps} from '@sisense/sdk-ui-vue';
|
26
|
+
* import { ScatterChart, type ScatterChartProps } from '@sisense/sdk-ui-vue';
|
27
27
|
*
|
28
28
|
* const dimProductName = DM.DimProducts.ProductName;
|
29
29
|
* const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
|
@@ -18,7 +18,7 @@ import type { PropType } from 'vue';
|
|
18
18
|
* import { ref } from 'vue';
|
19
19
|
* import { measureFactory, filterFactory } from '@sisense/sdk-data';
|
20
20
|
* import * as DM from '../assets/sample-retail-model';
|
21
|
-
* import {ScattermapChart,type ScattermapChartProps} from '@sisense/sdk-ui-vue';
|
21
|
+
* import { ScattermapChart,type ScattermapChartProps } from '@sisense/sdk-ui-vue';
|
22
22
|
*
|
23
23
|
* const dimProductName = DM.DimProducts.ProductName;
|
24
24
|
* const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
|
@@ -18,7 +18,7 @@ import type { PropType } from 'vue';
|
|
18
18
|
* import { ref } from 'vue';
|
19
19
|
* import { measureFactory, filterFactory } from '@sisense/sdk-data';
|
20
20
|
* import * as DM from '../assets/sample-retail-model';
|
21
|
-
* import {SunburstChart,type SunburstChartProps} from '@sisense/sdk-ui-vue';
|
21
|
+
* import { SunburstChart,type SunburstChartProps } from '@sisense/sdk-ui-vue';
|
22
22
|
*
|
23
23
|
* const dimProductName = DM.DimProducts.ProductName;
|
24
24
|
* const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
|
@@ -19,7 +19,7 @@ import type { PropType } from 'vue';
|
|
19
19
|
* import { ref } from 'vue';
|
20
20
|
* import { measureFactory, filterFactory } from '@sisense/sdk-data';
|
21
21
|
* import * as DM from '../assets/sample-retail-model';
|
22
|
-
* import {TreemapChart, type TreemapChartProps} from '@sisense/sdk-ui-vue';
|
22
|
+
* import { TreemapChart, type TreemapChartProps } from '@sisense/sdk-ui-vue';
|
23
23
|
*
|
24
24
|
* const dimProductName = DM.DimProducts.ProductName;
|
25
25
|
* const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
|
@@ -24,38 +24,38 @@ export type DrilldownWidgetConfig = {
|
|
24
24
|
* Here's how to use the `DrilldownWidget` component:
|
25
25
|
* ```vue
|
26
26
|
* <template>
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
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
59
|
* </template>
|
60
60
|
*
|
61
61
|
* <script>
|
@@ -18,7 +18,7 @@ import type { PropType } from 'vue';
|
|
18
18
|
*
|
19
19
|
* <script setup lang="ts">
|
20
20
|
* import { ref } from 'vue';
|
21
|
-
* import {CriteriaFilterTile} from '@sisense/sdk-ui-vue';
|
21
|
+
* import { CriteriaFilterTile } from '@sisense/sdk-ui-vue';
|
22
22
|
* import { filterFactory } from '@sisense/sdk-data';
|
23
23
|
*
|
24
24
|
* const criteriaFilterTileProps = ref({
|
@@ -31,7 +31,7 @@ import type { PropType } from 'vue';
|
|
31
31
|
* }
|
32
32
|
* </script>
|
33
33
|
* ```
|
34
|
-
* <img src="media://vue-criteria-filter-tile-example.png" width="
|
34
|
+
* <img src="media://vue-criteria-filter-tile-example.png" width="600px" />
|
35
35
|
* @param props - Criteria filter tile props
|
36
36
|
* @returns Criteria filter tile component
|
37
37
|
* @group Filter Tiles
|
@@ -17,7 +17,7 @@ import type { PropType } from 'vue';
|
|
17
17
|
*
|
18
18
|
* <script setup lang="ts">
|
19
19
|
* import { ref } from 'vue';
|
20
|
-
* import {CriteriaFilterTile, type DateRangeFilterTileProps} from '@sisense/sdk-ui-vue';
|
20
|
+
* import { CriteriaFilterTile, type DateRangeFilterTileProps } from '@sisense/sdk-ui-vue';
|
21
21
|
* import { filterFactory } from '@sisense/sdk-data';
|
22
22
|
* import * as DM from '../assets/sample-retail-model';
|
23
23
|
*
|
@@ -18,7 +18,7 @@ import type { PropType } from 'vue';
|
|
18
18
|
*
|
19
19
|
* <script setup lang="ts">
|
20
20
|
* import { ref } from 'vue';
|
21
|
-
* import {MemberFilterTile, type MemberFilterTileProps} from '@sisense/sdk-ui-vue';
|
21
|
+
* import { MemberFilterTile, type MemberFilterTileProps } from '@sisense/sdk-ui-vue';
|
22
22
|
*
|
23
23
|
* const memberFilterValue = ref<Filter | null>(null);
|
24
24
|
*
|
@@ -35,7 +35,7 @@ import type { PropType } from 'vue';
|
|
35
35
|
*
|
36
36
|
* </script>
|
37
37
|
* ```
|
38
|
-
* <img src="media://vue-member-filter-tile-example.png" width="
|
38
|
+
* <img src="media://vue-member-filter-tile-example.png" width="600px" />
|
39
39
|
* @param props - MemberFilterTile props
|
40
40
|
* @returns MemberFilterTile component
|
41
41
|
* @group Filter Tiles
|
@@ -42,7 +42,7 @@ import type { PropType } from 'vue';
|
|
42
42
|
* import { ref } from 'vue';
|
43
43
|
* import { measureFactory, filterFactory } from '@sisense/sdk-data';
|
44
44
|
* import * as DM from '../assets/sample-retail-model';
|
45
|
-
* import {ChartWidget} from '@sisense/sdk-ui-vue';
|
45
|
+
* import { ChartWidget } from '@sisense/sdk-ui-vue';
|
46
46
|
|
47
47
|
* const dimProductName = DM.DimProducts.ProductName;
|
48
48
|
* const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
|
@@ -17,7 +17,7 @@ import type { MaybeRefOrWithRefs } from '../types';
|
|
17
17
|
* ```vue
|
18
18
|
* <script setup>
|
19
19
|
* import { ref } from 'vue';
|
20
|
-
* import { useExecuteQueryByWidgetId } from '
|
20
|
+
* import { useExecuteQueryByWidgetId } from '@sisense/sdk-ui-vue';
|
21
21
|
*
|
22
22
|
* const widgetId = ref('your_widget_id_here');
|
23
23
|
* const filters = ref([...]); // Define filters if necessary
|
@@ -16,7 +16,7 @@ import type { MaybeRefOrWithRefs } from '../types';
|
|
16
16
|
* ```vue
|
17
17
|
* <script setup>
|
18
18
|
* import { ref } from 'vue';
|
19
|
-
* import { useExecuteQuery } from '
|
19
|
+
* import { useExecuteQuery } from '@sisense/sdk-ui-vue';
|
20
20
|
*
|
21
21
|
* const dataSource = ref('your_data_source_id');
|
22
22
|
* // Set up other query parameters as needed (dimensions, measures, filters, etc.)
|
@@ -16,16 +16,26 @@ import type { GetDashboardModelParams } from '@sisense/sdk-ui-preact';
|
|
16
16
|
* @example
|
17
17
|
* How to use `useGetDashboardModel` within a Vue component to fetch and display a Sisense dashboard:
|
18
18
|
* ```vue
|
19
|
-
* <
|
20
|
-
*
|
21
|
-
*
|
19
|
+
* <template>
|
20
|
+
* <Dashboard
|
21
|
+
* v-if="dashboard"
|
22
|
+
* :title="dashboard.title"
|
23
|
+
* :layout="dashboard.layout"
|
24
|
+
* :widgets="dashboard.widgets"
|
25
|
+
* :filters="dashboard.filters"
|
26
|
+
* :defaultDataSource="dashboard.dataSource"
|
27
|
+
* :widgetFilterOptions="dashboard.widgetFilterOptions"
|
28
|
+
* :styleOptions="dashboard.styleOptions"
|
29
|
+
* />
|
30
|
+
* </template>
|
22
31
|
*
|
23
|
-
*
|
24
|
-
*
|
32
|
+
* <script setup lang="ts">
|
33
|
+
* import { DashboardById, useGetDashboardModel } from '@sisense/sdk-ui-vue';
|
25
34
|
*
|
26
|
-
* const {
|
27
|
-
*
|
28
|
-
*
|
35
|
+
* const { dashboard } = useGetDashboardModel({
|
36
|
+
* dashboardOid: '6441e728dac1920034bce737',
|
37
|
+
* includeWidgets: true,
|
38
|
+
* includeFilters: true,
|
29
39
|
* });
|
30
40
|
* </script>
|
31
41
|
* ```
|
@@ -17,7 +17,7 @@ import type { MaybeRefOrWithRefs } from '../types';
|
|
17
17
|
* ```vue
|
18
18
|
* <script setup>
|
19
19
|
* import { ref } from 'vue';
|
20
|
-
* import { useGetDashboardModels } from '
|
20
|
+
* import { useGetDashboardModels } from '@sisense/sdk-ui-vue';
|
21
21
|
*
|
22
22
|
* const params = ref({
|
23
23
|
* // Define your parameters here, such as pagination settings, filters, etc.
|
@@ -15,7 +15,7 @@ import type { MaybeRefOrWithRefs } from '../types';
|
|
15
15
|
* ```vue
|
16
16
|
* <script setup>
|
17
17
|
* import { ref } from 'vue';
|
18
|
-
* import { useGetSharedFormula } from '
|
18
|
+
* import { useGetSharedFormula } from '@sisense/sdk-ui-vue';
|
19
19
|
*
|
20
20
|
* // To fetch by OID
|
21
21
|
* const paramsByOid = ref({
|
@@ -13,20 +13,19 @@ import type { MaybeRefOrWithRefs } from '../types';
|
|
13
13
|
* precise and dynamic fetching of widget models based on application needs.
|
14
14
|
*
|
15
15
|
* @example
|
16
|
-
*
|
17
|
-
* ```vue
|
18
|
-
* <script setup>
|
19
|
-
* import { ref } from 'vue';
|
20
|
-
* import { useGetWidgetModel } from './composables/useGetWidgetModel';
|
21
|
-
*
|
22
|
-
* const dashboardOid = ref('your_dashboard_oid');
|
23
|
-
* const widgetOid = ref('your_widget_oid');
|
16
|
+
* Retrieve a widget model and use it to populate a `Chart` component:
|
24
17
|
*
|
25
|
-
*
|
26
|
-
*
|
27
|
-
*
|
18
|
+
* ```vue
|
19
|
+
* <script setup lang="ts">
|
20
|
+
* import { Chart, useGetWidgetModel } from '@sisense/sdk-ui-vue';
|
21
|
+
* const { data: widget } = useGetWidgetModel({
|
22
|
+
* dashboardOid: 'your_dashboard_oid',
|
23
|
+
* widgetOid: 'your_widget_oid',
|
28
24
|
* });
|
29
25
|
* </script>
|
26
|
+
* <template>
|
27
|
+
* <Chart v-if="widget" v-bind="widget.getChartProps()" />
|
28
|
+
* </template>
|
30
29
|
* ```
|
31
30
|
*
|
32
31
|
* The composable returns an object with reactive properties that represent the state of the widget model fetch operation:
|
@@ -1,5 +1,4 @@
|
|
1
1
|
/**
|
2
|
-
* @internal
|
3
2
|
* A Vue composable function `useTracking` designed to track the usage of hooks within Vue applications
|
4
3
|
* using the Sisense SDK. It sends tracking information to the server whenever a specified hook is used,
|
5
4
|
* helping in the analysis and optimization of application performance and usage patterns. This composable
|
@@ -11,7 +10,7 @@
|
|
11
10
|
* @example
|
12
11
|
* How to use `useTracking` to track the usage of a custom hook:
|
13
12
|
* ```javascript
|
14
|
-
* import { useTracking } from '
|
13
|
+
* import { useTracking } from '@sisense/sdk-ui-vue';
|
15
14
|
*
|
16
15
|
* // Example hook that utilizes useTracking for monitoring its usage
|
17
16
|
* export const useCustomHook = () => {
|
@@ -33,6 +32,8 @@
|
|
33
32
|
* This internal utility composable is essential for maintaining insights into the usage of custom hooks
|
34
33
|
* within applications leveraging the Sisense SDK, enabling developers and analysts to understand and optimize
|
35
34
|
* hook interactions and performance.
|
35
|
+
*
|
36
|
+
* @internal
|
36
37
|
*/
|
37
38
|
export declare const useTracking: (hookName: string) => {
|
38
39
|
hasTrackedRef: import("vue").Ref<boolean>;
|
@@ -51,6 +51,12 @@ export declare const getThemeContext: () => Ref<{
|
|
51
51
|
dividerLineWidth: number;
|
52
52
|
dividerLineColor: string;
|
53
53
|
};
|
54
|
+
filter: {
|
55
|
+
panel: {
|
56
|
+
titleColor: string;
|
57
|
+
backgroundColor: string;
|
58
|
+
};
|
59
|
+
};
|
54
60
|
aiChat: {
|
55
61
|
backgroundColor: string;
|
56
62
|
primaryTextColor: string;
|
@@ -201,6 +207,12 @@ export declare const createThemeContextConnector: (themeSettings?: CompleteTheme
|
|
201
207
|
dividerLineWidth: number;
|
202
208
|
dividerLineColor: string;
|
203
209
|
};
|
210
|
+
filter: {
|
211
|
+
panel: {
|
212
|
+
titleColor: string;
|
213
|
+
backgroundColor: string;
|
214
|
+
};
|
215
|
+
};
|
204
216
|
aiChat: {
|
205
217
|
backgroundColor: string;
|
206
218
|
primaryTextColor: string;
|
@@ -348,6 +360,12 @@ export declare const createThemeContextConnector: (themeSettings?: CompleteTheme
|
|
348
360
|
dividerLineWidth: number;
|
349
361
|
dividerLineColor: string;
|
350
362
|
};
|
363
|
+
filter: {
|
364
|
+
panel: {
|
365
|
+
titleColor: string;
|
366
|
+
backgroundColor: string;
|
367
|
+
};
|
368
|
+
};
|
351
369
|
aiChat: {
|
352
370
|
backgroundColor: string;
|
353
371
|
primaryTextColor: string;
|
@@ -495,12 +513,14 @@ export declare const createThemeContextConnector: (themeSettings?: CompleteTheme
|
|
495
513
|
* ```
|
496
514
|
*
|
497
515
|
* Indicator chart with custom theme settings:
|
516
|
+
*
|
498
517
|
* <img src="media://indicator-chart-example-2.png" width="400px" />
|
499
518
|
*
|
500
519
|
*
|
501
520
|
* For comparison, indicator chart with default theme settings:
|
502
521
|
*
|
503
522
|
* <img src="media://indicator-chart-example-1.png" width="400px" />
|
523
|
+
*
|
504
524
|
* @see {@link ThemeSettings} and {@link IndicatorChart}
|
505
525
|
* @param props - Theme provider props
|
506
526
|
* @returns A Theme Provider component * @prop {Object | String} theme - Theme settings object for custom themes or a string identifier to fetch theme settings. When provided as an object, it merges with the default theme settings. When provided as a string, it attempts to fetch theme settings using the provided ID.
|
package/package.json
CHANGED
@@ -11,7 +11,7 @@
|
|
11
11
|
"Sisense",
|
12
12
|
"Compose SDK"
|
13
13
|
],
|
14
|
-
"version": "1.
|
14
|
+
"version": "1.18.0",
|
15
15
|
"type": "module",
|
16
16
|
"main": "./dist/index.cjs",
|
17
17
|
"module": "./dist/index.js",
|
@@ -42,14 +42,14 @@
|
|
42
42
|
"format:check": "prettier --check ."
|
43
43
|
},
|
44
44
|
"dependencies": {
|
45
|
-
"@sisense/sdk-ui-preact": "^1.
|
45
|
+
"@sisense/sdk-ui-preact": "^1.18.0",
|
46
46
|
"deepmerge": "^4.3.1",
|
47
|
-
"lodash": "^4.17.21",
|
47
|
+
"lodash-es": "^4.17.21",
|
48
48
|
"vue": "^3.3.2"
|
49
49
|
},
|
50
50
|
"devDependencies": {
|
51
51
|
"@rushstack/eslint-patch": "^1.2.0",
|
52
|
-
"@types/lodash": "^4.
|
52
|
+
"@types/lodash-es": "^4.17.12",
|
53
53
|
"@types/node": "^18.14.2",
|
54
54
|
"@vitejs/plugin-vue": "^4.0.0",
|
55
55
|
"@vue/eslint-config-prettier": "^7.1.0",
|