@sisense/sdk-ui-vue 2.16.1 → 2.18.0

package/dist/packages/sdk-ui-vue/src/components/charts/pivot-table.d.ts

@@ -15,29 +15,38 @@ export { PivotTableProps };
  * <script setup lang="ts">
  * import { ref } from 'vue';
  * import { measureFactory, filterFactory } from '@sisense/sdk-data';
- * import * as DM from '../assets/sample-retail-model';
  * import { PivotTable, type PivotTableProps } from '@sisense/sdk-ui-vue';
+ * import * as DM from '../assets/sample-retail-model';
  *
+ * const dimCategoryName = DM.DimProducts.CategoryName;
+ * const dimColor = DM.DimProducts.Color;
  * const dimProductName = DM.DimProducts.ProductName;
  * const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
-const pivotTableProps = ref<PivotTableProps>({
-  dataSet: DM.DataSource,
-  dataOptions: {
-    rows: [dimProductName, dimColor],
-    columns: [dimCategoryName],
-    values: [measureTotalRevenue],
-  },
-  styleOptions: {
-    width: 1200,
-    height: 500,
-  },
-  filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 1000)],
-});
+ *
+ * const pivotTableProps = ref<PivotTableProps>({
+ *   dataSet: DM.DataSource,
+ *   dataOptions: {
+ *     rows: [dimProductName, dimColor],
+ *     columns: [dimCategoryName],
+ *     values: [measureTotalRevenue],
+ *   },
+ *   styleOptions: {
+ *     width: 1200,
+ *     height: 500,
+ *   },
+ *   filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 1000)],
+ * });
+ *
  * </script>
  * ```
  * <img src="media://vue-pivot-table-example.png" width="800px" />
+ *
+ * @remarks
+ * Configuration options can also be applied within the scope of a `<SisenseContextProvider>` to control the default behavior of PivotTable, by changing available settings within `appConfig.chartConfig.tabular.*`
+ *
+ * Follow the link to {@link AppConfig} for more details on the available settings.
+ *
  * @group Data Grids
- * @beta
  */
 export declare const PivotTable: import("vue").DefineComponent<{
     /**
@@ -75,6 +84,18 @@ export declare const PivotTable: import("vue").DefineComponent<{
      * @category Representation
      */
     styleOptions: PropType<import("@sisense/sdk-ui-preact").PivotTableStyleOptions | undefined>;
+    /**
+     * {@inheritDoc @sisense/sdk-ui!PivotTableProps.onDataPointClick}
+     *
+     * @category Callbacks
+     */
+    onDataPointClick: PropType<import("@sisense/sdk-ui-preact").PivotTableDataPointEventHandler | undefined>;
+    /**
+     * {@inheritDoc @sisense/sdk-ui!PivotTableProps.onDataPointContextMenu}
+     *
+     * @category Callbacks
+     */
+    onDataPointContextMenu: PropType<import("@sisense/sdk-ui-preact").PivotTableDataPointEventHandler | undefined>;
 }, (() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>) | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -113,4 +134,16 @@ export declare const PivotTable: import("vue").DefineComponent<{
      * @category Representation
      */
     styleOptions: PropType<import("@sisense/sdk-ui-preact").PivotTableStyleOptions | undefined>;
+    /**
+     * {@inheritDoc @sisense/sdk-ui!PivotTableProps.onDataPointClick}
+     *
+     * @category Callbacks
+     */
+    onDataPointClick: PropType<import("@sisense/sdk-ui-preact").PivotTableDataPointEventHandler | undefined>;
+    /**
+     * {@inheritDoc @sisense/sdk-ui!PivotTableProps.onDataPointContextMenu}
+     *
+     * @category Callbacks
+     */
+    onDataPointContextMenu: PropType<import("@sisense/sdk-ui-preact").PivotTableDataPointEventHandler | undefined>;
 }>>, {}, {}>;

package/dist/packages/sdk-ui-vue/src/components/widgets/pivot-table-widget.d.ts

@@ -9,15 +9,45 @@ export { PivotTableWidgetProps };
  * Here's how you can use the PivotTableWidget component in a Vue application:
  * ```vue
  * <template>
- *   <PivotTableWidget :props="pivotTableWidgetProps" />
+ *   <PivotTableWidget
+ *      :dataSource="pivotTableWidgetProps.dataSource"
+ *      :filters="pivotTableWidgetProps.filters"
+ *      :dataOptions="pivotTableWidgetProps.dataOptions"
+ *      :styleOptions="pivotTableWidgetProps.styleOptions"
+ *      :title="pivotTableWidgetProps.title"
+ *   />
  * </template>
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
- * import { PivotTableWidget } from '@sisense/sdk-ui-vue';
+ * import { measureFactory } from '@sisense/sdk-data';
+ * import { PivotTableWidget, type PivotTableWidgetProps } from '@sisense/sdk-ui-vue';
+ * import * as DM from '../assets/sample-ecommerce-model';
  *
- * const pivotTableWidgetProps = ref({
- *   // Configure your PivotTableWidget here
+ * const pivotTableWidgetProps = ref<PivotTableWidgetProps>({
+ *   dataSource: DM.DataSource,
+ *   dataOptions: {
+ *     rows: [DM.Category.Category],
+ *     values: [measureFactory.sum(DM.Commerce.Cost, 'Total Cost')],
+ *   },
+ *   filters: [],
+ *   title: 'Pivot Table Widget Example',
+ *   styleOptions: {
+ *     spaceAround: 'Medium',
+ *     cornerRadius: 'Large',
+ *     shadow: 'Light',
+ *     border: true,
+ *     borderColor: '#e0e0e0',
+ *     backgroundColor: '#ffffff',
+ *     header: {
+ *       hidden: false,
+ *       titleTextColor: '#333333',
+ *       titleAlignment: 'Center',
+ *       dividerLine: true,
+ *       dividerLineColor: '#e0e0e0',
+ *       backgroundColor: '#f5f5f5',
+ *     },
+ *   },
  * });
  * </script>
  * ```
@@ -25,7 +55,6 @@ export { PivotTableWidgetProps };
  * @param props - Pivot Table Widget properties
  * @returns Widget component representing a pivot table
  * @group Dashboards
- * @beta
  */
 export declare const PivotTableWidget: import("vue").DefineComponent<{
     /**
@@ -61,6 +90,12 @@ export declare const PivotTableWidget: import("vue").DefineComponent<{
      * @category Widget
      */
     styleOptions: PropType<import("@sisense/sdk-ui-preact").PivotTableWidgetStyleOptions | undefined>;
+    /**
+     * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.drilldownOptions}
+     *
+     * @category Widget
+     */
+    drilldownOptions: PropType<import("@sisense/sdk-ui-preact").PivotTableDrilldownOptions | undefined>;
     /**
      * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.title}
      *
@@ -91,14 +126,12 @@ export declare const PivotTableWidget: import("vue").DefineComponent<{
      * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.onDataPointClick}
      *
      * @category Callbacks
-     * @internal
      */
     onDataPointClick: PropType<import("@sisense/sdk-ui-preact").PivotTableDataPointEventHandler | undefined>;
     /**
      * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.onDataPointContextMenu}
      *
      * @category Callbacks
-     * @internal
      */
     onDataPointContextMenu: PropType<import("@sisense/sdk-ui-preact").PivotTableDataPointEventHandler | undefined>;
     /**
@@ -151,6 +184,12 @@ export declare const PivotTableWidget: import("vue").DefineComponent<{
      * @category Widget
      */
     styleOptions: PropType<import("@sisense/sdk-ui-preact").PivotTableWidgetStyleOptions | undefined>;
+    /**
+     * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.drilldownOptions}
+     *
+     * @category Widget
+     */
+    drilldownOptions: PropType<import("@sisense/sdk-ui-preact").PivotTableDrilldownOptions | undefined>;
     /**
      * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.title}
      *
@@ -181,14 +220,12 @@ export declare const PivotTableWidget: import("vue").DefineComponent<{
      * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.onDataPointClick}
      *
      * @category Callbacks
-     * @internal
      */
     onDataPointClick: PropType<import("@sisense/sdk-ui-preact").PivotTableDataPointEventHandler | undefined>;
     /**
      * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.onDataPointContextMenu}
      *
      * @category Callbacks
-     * @internal
      */
     onDataPointContextMenu: PropType<import("@sisense/sdk-ui-preact").PivotTableDataPointEventHandler | undefined>;
     /**

package/dist/packages/sdk-ui-vue/src/components/widgets/widget-by-id.d.ts

@@ -52,7 +52,7 @@ export declare const WidgetById: import("vue").DefineComponent<{
      */
     description: PropType<string | undefined>;
     /** @internal */
-    drilldownOptions: PropType<import("@sisense/sdk-ui-preact").DrilldownOptions | undefined>;
+    drilldownOptions: PropType<import("@sisense/sdk-ui-preact").PivotTableDrilldownOptions | import("@sisense/sdk-ui-preact").DrilldownOptions | undefined>;
     /**
      * {@inheritDoc @sisense/sdk-ui!WidgetByIdProps.filters}
      *
@@ -163,7 +163,7 @@ export declare const WidgetById: import("vue").DefineComponent<{
      */
     description: PropType<string | undefined>;
     /** @internal */
-    drilldownOptions: PropType<import("@sisense/sdk-ui-preact").DrilldownOptions | undefined>;
+    drilldownOptions: PropType<import("@sisense/sdk-ui-preact").PivotTableDrilldownOptions | import("@sisense/sdk-ui-preact").DrilldownOptions | undefined>;
     /**
      * {@inheritDoc @sisense/sdk-ui!WidgetByIdProps.filters}
      *

package/dist/packages/sdk-ui-vue/src/components/widgets/widget.d.ts

@@ -113,7 +113,7 @@ export declare const Widget: import("vue").DefineComponent<{
      *
      * @category Widget
      */
-    drilldownOptions: PropType<import("@sisense/sdk-ui-preact").DrilldownOptions | undefined>;
+    drilldownOptions: PropType<import("@sisense/sdk-ui-preact").PivotTableDrilldownOptions | import("@sisense/sdk-ui-preact").DrilldownOptions | undefined>;
     /**
      * {@inheritDoc @sisense/sdk-ui!ChartWidgetProps.title}
      *
@@ -157,7 +157,7 @@ export declare const Widget: import("vue").DefineComponent<{
      *
      * @category Callbacks
      */
-    onDataPointClick: PropType<import("@sisense/sdk-ui-preact").PivotTableDataPointEventHandler | import("@sisense/sdk-ui-preact").TextWidgetDataPointEventHandler | import("@sisense/sdk-ui-preact").DataPointEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointEventHandler | import("@sisense/sdk-ui-preact").AreamapDataPointEventHandler | import("@sisense/sdk-ui-preact").BoxplotDataPointEventHandler | import("@sisense/sdk-ui-preact").ScattermapDataPointEventHandler | import("@sisense/sdk-ui-preact").IndicatorDataPointEventHandler | import("@sisense/sdk-ui-preact").CalendarHeatmapDataPointEventHandler | undefined>;
+    onDataPointClick: PropType<import("@sisense/sdk-ui-preact").PivotTableDataPointEventHandler | import("@sisense/sdk-ui-preact").DataPointEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointEventHandler | import("@sisense/sdk-ui-preact").AreamapDataPointEventHandler | import("@sisense/sdk-ui-preact").BoxplotDataPointEventHandler | import("@sisense/sdk-ui-preact").ScattermapDataPointEventHandler | import("@sisense/sdk-ui-preact").IndicatorDataPointEventHandler | import("@sisense/sdk-ui-preact").CalendarHeatmapDataPointEventHandler | import("@sisense/sdk-ui-preact").TextWidgetDataPointEventHandler | undefined>;
     /**
      * {@inheritDoc @sisense/sdk-ui!ChartWidgetProps.onDataPointContextMenu}
      *
@@ -238,7 +238,7 @@ export declare const Widget: import("vue").DefineComponent<{
      *
      * @category Widget
      */
-    drilldownOptions: PropType<import("@sisense/sdk-ui-preact").DrilldownOptions | undefined>;
+    drilldownOptions: PropType<import("@sisense/sdk-ui-preact").PivotTableDrilldownOptions | import("@sisense/sdk-ui-preact").DrilldownOptions | undefined>;
     /**
      * {@inheritDoc @sisense/sdk-ui!ChartWidgetProps.title}
      *
@@ -282,7 +282,7 @@ export declare const Widget: import("vue").DefineComponent<{
      *
      * @category Callbacks
      */
-    onDataPointClick: PropType<import("@sisense/sdk-ui-preact").PivotTableDataPointEventHandler | import("@sisense/sdk-ui-preact").TextWidgetDataPointEventHandler | import("@sisense/sdk-ui-preact").DataPointEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointEventHandler | import("@sisense/sdk-ui-preact").AreamapDataPointEventHandler | import("@sisense/sdk-ui-preact").BoxplotDataPointEventHandler | import("@sisense/sdk-ui-preact").ScattermapDataPointEventHandler | import("@sisense/sdk-ui-preact").IndicatorDataPointEventHandler | import("@sisense/sdk-ui-preact").CalendarHeatmapDataPointEventHandler | undefined>;
+    onDataPointClick: PropType<import("@sisense/sdk-ui-preact").PivotTableDataPointEventHandler | import("@sisense/sdk-ui-preact").DataPointEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointEventHandler | import("@sisense/sdk-ui-preact").AreamapDataPointEventHandler | import("@sisense/sdk-ui-preact").BoxplotDataPointEventHandler | import("@sisense/sdk-ui-preact").ScattermapDataPointEventHandler | import("@sisense/sdk-ui-preact").IndicatorDataPointEventHandler | import("@sisense/sdk-ui-preact").CalendarHeatmapDataPointEventHandler | import("@sisense/sdk-ui-preact").TextWidgetDataPointEventHandler | undefined>;
     /**
      * {@inheritDoc @sisense/sdk-ui!ChartWidgetProps.onDataPointContextMenu}
      *

package/dist/packages/sdk-ui-vue/src/composables/index.d.ts

@@ -12,5 +12,6 @@ export { useGetHierarchyModels } from './use-get-hierarchy-models.js';
 export { useFetch } from './use-fetch.js';
 export { useCustomWidgets, type CustomWidgetComponent, type CustomWidgetComponentProps, type GenericDataOptions, } from './use-custom-widgets.js';
 export { useComposedDashboard, type ComposableDashboardProps } from './use-composed-dashboard.js';
+export { useJtdWidget } from './use-jtd-widget.js';
 export type { UseFetchOptions } from './use-fetch.js';
 export type { GetFilterMembersParams, GetFilterMembersData, FilterMembersState, FilterMembersLoadingState, FilterMembersErrorState, FilterMembersSuccessState, } from './use-get-filter-members.js';

package/dist/packages/sdk-ui-vue/src/composables/use-jtd-widget.d.ts

@@ -0,0 +1,85 @@
+import { type JumpToDashboardConfig, type JumpToDashboardConfigForPivot, type WidgetProps } from '@sisense/sdk-ui-preact';
+import { type Ref } from 'vue';
+import type { MaybeRef, MaybeRefOrWithRefs } from '../types';
+/**
+ * Composable to add Jump To Dashboard (JTD) functionality to individual Widget components.
+ *
+ * Jump To Dashboard (JTD) allows users to navigate from one dashboard to another when interacting with widgets,
+ * such as clicking on chart data points or using context menus. This composable is particularly useful when rendering
+ * Widget components directly (not through a Dashboard component), but you still want JTD navigation functionality.
+ *
+ * For widgets that are part of a dashboard, consider using `applyJtdConfig` or `applyJtdConfigs` instead,
+ * as they apply JTD configuration at the dashboard level rather than individual widget level.
+ *
+ * Note: dashboard-only 'includeDashboardFilters' is not supported and would just be ignored, since we do not have a dashboard in the current context.
+ *
+ * @example
+ * Basic JTD configuration with right-click navigation.
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue';
+ * import { Widget, useJtdWidget } from '@sisense/sdk-ui-vue';
+ *
+ * const myWidgetProps = ref({
+ *   id: 'widget-1',
+ *   widgetType: 'chart',
+ *   dataSource: 'Sample ECommerce',
+ *   // ... other widget props
+ * });
+ *
+ * const jtdConfig = {
+ *   targets: [{ id: 'dashboard-1', caption: 'Sales Dashboard' }],
+ *   interaction: {
+ *     triggerMethod: 'rightclick',
+ *     captionPrefix: 'Jump to'
+ *   }
+ * };
+ *
+ * const widgetWithJtd = useJtdWidget(myWidgetProps, jtdConfig);
+ * </script>
+ *
+ * <template>
+ *   <Widget v-bind="widgetWithJtd" />
+ * </template>
+ * ```
+ *
+ * @example
+ * JTD configuration with multiple targets and custom styling.
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue';
+ * import { Widget, useJtdWidget } from '@sisense/sdk-ui-vue';
+ *
+ * const chartProps = ref({ ... });
+ *
+ * const jtdConfig = {
+ *   enabled: true,
+ *   targets: [
+ *     { id: 'sales-dashboard', caption: 'Sales Analysis' },
+ *     { id: 'marketing-dashboard', caption: 'Marketing Insights' }
+ *   ],
+ *   interaction: {
+ *     triggerMethod: 'click',
+ *     captionPrefix: 'Navigate to',
+ *     showIcon: true
+ *   },
+ *   filtering: {
+ *     mergeWithTargetFilters: true,
+ *     includeWidgetFilters: true
+ *   }
+ * };
+ *
+ * const widgetWithJtd = useJtdWidget(chartProps, jtdConfig);
+ * </script>
+ *
+ * <template>
+ *   <Widget v-bind="widgetWithJtd" />
+ * </template>
+ * ```
+ *
+ * @param widgetProps - Widget properties to enhance with JTD functionality (can be a ref or plain object)
+ * @param config - Jump To Dashboard configuration
+ * @returns Computed ref containing enhanced widget props with JTD navigation capabilities
+ * @group Dashboards
+ */
+export declare const useJtdWidget: (widgetProps: MaybeRef<WidgetProps | null>, config: MaybeRefOrWithRefs<JumpToDashboardConfig | JumpToDashboardConfigForPivot>) => Ref<WidgetProps | null>;

package/dist/packages/sdk-ui-vue/src/sdk-ui-core-exports.d.ts

@@ -1,2 +1,2 @@
 export { boxWhiskerProcessResult, extractDimensionsAndMeasures } from '@sisense/sdk-ui-preact';
-export type { ChartType, CartesianChartType, CategoricalChartType, ScatterChartType, IndicatorChartType, BoxplotChartType, CalendarHeatmapChartType, ScattermapChartType, AreamapChartType, TableType, AreaSubtype, LineSubtype, PieSubtype, PolarSubtype, StackableSubtype, BoxplotSubtype, CalendarHeatmapSubtype, WidgetType, CartesianWidgetType, CategoricalWidgetType, TabularWidgetType, ExecuteQueryByWidgetIdParams, ExecuteQueryParams, GetWidgetModelParams, GetSharedFormulaParams, GetDashboardModelParams, UseGetSharedFormulaParams, GetDashboardModelsParams, GetHierarchyModelsParams, ChartDataOptions, CartesianChartDataOptions, CategoricalChartDataOptions, ScatterChartDataOptions, IndicatorChartDataOptions, BoxplotChartDataOptions, BoxplotChartCustomDataOptions, CalendarHeatmapChartDataOptions, ScattermapChartDataOptions, AreamapChartDataOptions, TableDataOptions, PivotTableDataOptions, WidgetDataOptions, NumberFormatConfig, DecimalScale, DataColorCondition, ConditionalDataColorOptions, DataColorOptions, RangeDataColorOptions, UniformDataColorOptions, ValueToColorMap, MultiColumnValueToColorMap, SortDirection, BoxWhiskerType, ScattermapLocationLevel, StyledColumn, StyledMeasureColumn, PivotRowsSort, ChartStyleOptions, LineStyleOptions, AreaStyleOptions, StackableStyleOptions, PieStyleOptions, FunnelStyleOptions, PolarStyleOptions, IndicatorStyleOptions, NumericSimpleIndicatorStyleOptions, NumericBarIndicatorStyleOptions, GaugeIndicatorStyleOptions, ScatterStyleOptions, TreemapStyleOptions, StreamgraphStyleOptions, SunburstStyleOptions, BoxplotStyleOptions, CalendarHeatmapStyleOptions, ScattermapStyleOptions, AreamapStyleOptions, ChartWidgetStyleOptions, WidgetStyleOptions, WidgetByIdStyleOptions, TableStyleOptions, PivotTableStyleOptions, AreaRangeStyleOptions, DataLimits, Legend, Markers, Labels, IndicatorComponents, ScatterMarkerSize, LineWidth, LineOptions, DashStyle, EndCapType, AxisLabel, Convolution, SeriesLabels, X2Title, ScattermapMarkers, CalendarHeatmapViewType, WidgetModel, DashboardModel, BeforeRenderHandler, DataPoint, ScatterDataPoint, HighchartsOptions, BoxplotDataPoint, CalendarHeatmapDataPoint, CalendarDayOfWeek, IndicatorBeforeRenderHandler, IndicatorRenderOptions, DashboardLayoutOptions, WidgetsPanelLayout, WidgetsPanelColumnLayout, WidgetId, WidgetsOptions, AppConfig, DateConfig, MenuItemSection, MonthOfYear, DayOfWeek, DateLevel, ThemeOid, GetDashboardModelOptions, GetDashboardModelsOptions, SeriesChartType, MenuPosition, ThemeSettings, Color, ColorPaletteTheme, Navigator, DrilldownOptions, DrilldownSelection, Member, FilterVariant, TranslationConfig, } from '@sisense/sdk-ui-preact';
+export type { ChartType, CartesianChartType, CategoricalChartType, ScatterChartType, IndicatorChartType, BoxplotChartType, CalendarHeatmapChartType, ScattermapChartType, AreamapChartType, TableType, AreaSubtype, LineSubtype, PieSubtype, PolarSubtype, StackableSubtype, BoxplotSubtype, CalendarHeatmapSubtype, WidgetType, CartesianWidgetType, CategoricalWidgetType, TabularWidgetType, ExecuteQueryByWidgetIdParams, ExecuteQueryParams, GetWidgetModelParams, GetSharedFormulaParams, GetDashboardModelParams, UseGetSharedFormulaParams, GetDashboardModelsParams, GetHierarchyModelsParams, ChartDataOptions, CartesianChartDataOptions, CategoricalChartDataOptions, ScatterChartDataOptions, IndicatorChartDataOptions, BoxplotChartDataOptions, BoxplotChartCustomDataOptions, CalendarHeatmapChartDataOptions, ScattermapChartDataOptions, AreamapChartDataOptions, TableDataOptions, PivotTableDataOptions, WidgetDataOptions, NumberFormatConfig, DecimalScale, DataColorCondition, ConditionalDataColorOptions, DataColorOptions, RangeDataColorOptions, UniformDataColorOptions, ValueToColorMap, MultiColumnValueToColorMap, SortDirection, BoxWhiskerType, ScattermapLocationLevel, StyledColumn, StyledMeasureColumn, PivotRowsSort, DataOptionLocation, ChartStyleOptions, LineStyleOptions, AreaStyleOptions, StackableStyleOptions, PieStyleOptions, FunnelStyleOptions, PolarStyleOptions, IndicatorStyleOptions, NumericSimpleIndicatorStyleOptions, NumericBarIndicatorStyleOptions, GaugeIndicatorStyleOptions, ScatterStyleOptions, TreemapStyleOptions, StreamgraphStyleOptions, SunburstStyleOptions, BoxplotStyleOptions, CalendarHeatmapStyleOptions, ScattermapStyleOptions, AreamapStyleOptions, ChartWidgetStyleOptions, WidgetStyleOptions, WidgetByIdStyleOptions, TableStyleOptions, PivotTableStyleOptions, AreaRangeStyleOptions, DataLimits, Legend, Markers, Labels, IndicatorComponents, ScatterMarkerSize, LineWidth, LineOptions, DashStyle, EndCapType, AxisLabel, Convolution, SeriesLabels, X2Title, ScattermapMarkers, CalendarHeatmapViewType, WidgetModel, DashboardModel, BeforeRenderHandler, DataPoint, ScatterDataPoint, HighchartsOptions, BoxplotDataPoint, CalendarHeatmapDataPoint, CalendarDayOfWeek, IndicatorBeforeRenderHandler, IndicatorRenderOptions, DashboardLayoutOptions, WidgetsPanelLayout, WidgetsPanelColumnLayout, WidgetId, JumpToDashboardConfig, JumpToDashboardConfigForPivot, WidgetsOptions, AppConfig, DateConfig, MenuItemSection, MonthOfYear, DayOfWeek, DateLevel, ThemeOid, GetDashboardModelOptions, GetDashboardModelsOptions, SeriesChartType, MenuPosition, ThemeSettings, Color, ColorPaletteTheme, Navigator, DrilldownOptions, DrilldownSelection, PivotTableDrilldownOptions, PivotTableSelectableDrilldownOptions, PivotTableNonSelectableDrilldownOptions, Member, FilterVariant, TranslationConfig, } from '@sisense/sdk-ui-preact';

package/dist/packages/sdk-ui-vue/src/utilities/widget-model-translator.d.ts

@@ -1,6 +1,6 @@
 import { type ExecutePivotQueryParams, type ExecuteQueryParams, type PivotTableWidgetProps, type TextWidgetProps, type WidgetModel } from '@sisense/sdk-ui-preact';
 import type { ChartProps, PivotTableProps, TableProps } from '../components/charts';
-import type { ChartWidgetProps } from '../components/widgets';
+import type { ChartWidgetProps, WidgetProps } from '../components/widgets';
 /**
  * Translates a {@link WidgetModel} to the parameters for executing a query for the widget.
  *
@@ -245,3 +245,28 @@ const textWidgetProps = computed(() =>
  * Use {@link toPivotTableWidgetProps} instead for getting props for the pivot table widget.
  */
 export declare function toTextWidgetProps(widgetModel: WidgetModel): TextWidgetProps;
+/**
+ * Translates {@link WidgetModel} to {@link WidgetProps}.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { widgetModelTranslator, useGetWidgetModel, Widget } from '@sisense/sdk-ui-vue';
+ * import { computed } from 'vue';
+ *
+ * const { data: widgetModel } = useGetWidgetModel({
+ *   dashboardOid: 'your-dashboard-oid',
+ *   widgetOid: 'your-widget-oid',
+ * });
+ *
+ * const widgetProps = computed(() =>
+ *   widgetModel.value ? widgetModelTranslator.toWidgetProps(widgetModel.value) : null,
+ * );
+ * </script>
+ *
+ * <template>
+ *   <Widget v-if="widgetProps" v-bind="widgetProps" />
+ * </template>
+ * ```
+ */
+export declare function toWidgetProps(widgetModel: WidgetModel): WidgetProps;