@sisense/sdk-ui-vue 1.17.0 → 1.18.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.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",
|