@sisense/sdk-ui-vue 1.2.0 → 1.4.0

package/dist/src/components/charts/area-chart.d.ts

@@ -1,29 +1,42 @@
 import type { PropType } from 'vue';
 /**
- * A Vue component that wraps the AreaChart Preact component for use in Vue applications.
- * It maintains compatibility with Vue's reactivity system while preserving the functionality of the AreaChart.
+ * A Vue component similar to a {@link LineChart},
+ * but with filled in areas under each line and an option to display them as stacked.
+ * More info on [Sisense Documentation page](https://docs.sisense.com/main/SisenseLinux/area-chart.htm).
  *
+ * <img src="media://area-chart-example-1.png" width="800"/>
  * @example
  * Here's how you can use the AreaChart component in a Vue application:
  * ```vue
  * <template>
- *   <AreaChart :props="areaChartProps" />
+ * <AreaChart
+      :dataOptions="areaChartProps.dataOptions"
+      :dataSet="areaChartProps.dataSet"
+      :filters="areaChartProps.filters"
+    />
  * </template>
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
- * import AreaChart from '@sisense/sdk-ui-vue/AreaChart';
+ * import {AreaChart, type AreaChartProps} from '@sisense/sdk-ui-vue';
  *
- * const areaChartProps = ref({
- *   // Configure your AreaChartProps here
+ * const areaChartProps = ref<AreaChartProps>({
+ *   dataSet: DM.DataSource,
+ *   dataOptions: {
+ *     category: [dimProductName],
+ *     value: [{ column: measureTotalRevenue, sortType: 'sortDesc' }],
+ *     breakBy: [],
+ *   },
+ *   filters: [],
  * });
- * </script>
  * ```
+ * @param {AreaChartProps} - Area chart properties
+ * @returns Area Chart component
  */
 export declare const AreaChart: import("vue").DefineComponent<{
     dataOptions: PropType<import("@sisense/sdk-ui-preact").CartesianChartDataOptions>;
     dataSet: PropType<string | import("@sisense/sdk-data").Data | undefined>;
-    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelation | undefined>;
+    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
     highlights: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
     onBeforeRender: PropType<import("@sisense/sdk-ui-preact").BeforeRenderHandler | undefined>;
     onDataPointClick: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | undefined>;
@@ -35,7 +48,7 @@ export declare const AreaChart: import("vue").DefineComponent<{
 }>) | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     dataOptions: PropType<import("@sisense/sdk-ui-preact").CartesianChartDataOptions>;
     dataSet: PropType<string | import("@sisense/sdk-data").Data | undefined>;
-    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelation | undefined>;
+    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
     highlights: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
     onBeforeRender: PropType<import("@sisense/sdk-ui-preact").BeforeRenderHandler | undefined>;
     onDataPointClick: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | undefined>;

package/dist/src/components/charts/areamap-chart.d.ts

@@ -1,45 +1,51 @@
 import type { PropType } from 'vue';
 /**
- * A Vue component that wraps the AreamapChart Preact component for use in Vue applications.
- * It maintains compatibility with Vue's reactivity system while preserving the functionality of the AreamapChart.
+ * A Vue component for visualizing geographical data as polygons on a map.
+ * See [Areamap Chart](https://docs.sisense.com/main/SisenseLinux/area-map.htm) for more information.
  *
  * @example
  * Here's how you can use the AreamapChart component in a Vue application:
  * ```vue
  * <template>
- *   <AreamapChart :props="areamapChartProps" />
+    <AreamapChart
+      :dataOptions="areamapChartProps.dataOptions"
+      :dataSet="areamapChartProps.dataSet"
+      :filters="areamapChartProps.filters"
+    />
  * </template>
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
- * import AreamapChart from '@sisense/sdk-ui-vue/AreamapChart';
+ * import {AreamapChart, type AreamapChartProps} from '@sisense/sdk-ui-vue';
  *
- * const areamapChartProps = ref({
- *   // Configure your AreamapChartProps here
- * });
+  const areamapChartProps = ref<AreamapChartProps>({
+    dataSet: DM.DataSource,
+    dataOptions: {
+      geo: [DM.DimCountries.CountryName],
+      color: [{ column: measureTotalRevenue, title: 'Total Revenue' }],
+    },
+    filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
+  });
  * </script>
  * ```
+ * @param props - Areamap chart properties
+ * @returns Areamap Chart component
+ * @beta
  */
 export declare const AreamapChart: import("vue").DefineComponent<{
     dataOptions: PropType<import("@sisense/sdk-ui-preact").AreamapChartDataOptions>;
     dataSet: PropType<string | import("@sisense/sdk-data").Data | undefined>;
-    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelation | undefined>;
+    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
     highlights: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
     styleOptions: PropType<import("@sisense/sdk-ui-preact").AreamapStyleOptions | undefined>;
-    onBeforeRender: PropType<import("@sisense/sdk-ui-preact").BeforeRenderHandler | undefined>;
-    onDataPointClick: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | undefined>;
-    onDataPointContextMenu: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | undefined>;
-    onDataPointsSelected: PropType<import("@sisense/sdk-ui-preact").DataPointsEventHandler | undefined>;
+    onDataPointClick: PropType<import("@sisense/sdk-ui-preact").AreamapDataPointEventHandler | undefined>;
 }, (() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>) | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     dataOptions: PropType<import("@sisense/sdk-ui-preact").AreamapChartDataOptions>;
     dataSet: PropType<string | import("@sisense/sdk-data").Data | undefined>;
-    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelation | undefined>;
+    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
     highlights: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
     styleOptions: PropType<import("@sisense/sdk-ui-preact").AreamapStyleOptions | undefined>;
-    onBeforeRender: PropType<import("@sisense/sdk-ui-preact").BeforeRenderHandler | undefined>;
-    onDataPointClick: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | undefined>;
-    onDataPointContextMenu: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | undefined>;
-    onDataPointsSelected: PropType<import("@sisense/sdk-ui-preact").DataPointsEventHandler | undefined>;
+    onDataPointClick: PropType<import("@sisense/sdk-ui-preact").AreamapDataPointEventHandler | undefined>;
 }>>, {}, {}>;

package/dist/src/components/charts/bar-chart.d.ts

@@ -1,24 +1,37 @@
 import type { PropType } from 'vue';
 /**
- * A Vue component that wraps the BarChart Preact component for use in Vue applications.
- * It maintains compatibility with Vue's reactivity system while preserving the functionality of the BarChart.
- *
+ * A Vue component representing categorical data with horizontal rectangular bars,
+ * whose lengths are proportional to the values that they represent.
+ * See [Bar Chart](https://docs.sisense.com/main/SisenseLinux/bar-chart.htm) for more information.
  * @example
  * Here's how you can use the BarChart component in a Vue application:
  * ```vue
  * <template>
- *   <BarChart :props="barChartProps" />
+    <BarChart
+      :dataOptions="barChartProps.dataOptions"
+      :dataSet="barChartProps.dataSet"
+      :filters="barChartProps.filters"
+    />
  * </template>
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
- * import BarChart from '@sisense/sdk-ui-vue/BarChart';
+ * import {BarChart} from '@sisense/sdk-ui-vue';
  *
- * const barChartProps = ref({
- *   // Configure your BarChartProps here
- * });
+  const barChartProps = ref<BarChartProps>({
+    dataSet: DM.DataSource,
+    dataOptions: {
+      category: [dimProductName],
+      value: [{ column: measureTotalRevenue, sortType: 'sortDesc' }],
+      breakBy: [],
+    },
+    filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
+  });
  * </script>
  * ```
+ * <img src="media://bar-chart-example-1.png" width="800"/>
+ * @param props - Bar chart properties
+ * @returns Bar Chart component
  */
 export declare const BarChart: import("vue").DefineComponent<{
     /**
@@ -27,7 +40,7 @@ export declare const BarChart: import("vue").DefineComponent<{
      */
     dataOptions: PropType<import("@sisense/sdk-ui-preact").CartesianChartDataOptions>;
     dataSet: PropType<string | import("@sisense/sdk-data").Data | undefined>;
-    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelation | undefined>;
+    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
     highlights: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
     onBeforeRender: PropType<import("@sisense/sdk-ui-preact").BeforeRenderHandler | undefined>;
     onDataPointClick: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | undefined>;
@@ -43,7 +56,7 @@ export declare const BarChart: import("vue").DefineComponent<{
      */
     dataOptions: PropType<import("@sisense/sdk-ui-preact").CartesianChartDataOptions>;
     dataSet: PropType<string | import("@sisense/sdk-data").Data | undefined>;
-    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelation | undefined>;
+    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
     highlights: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
     onBeforeRender: PropType<import("@sisense/sdk-ui-preact").BeforeRenderHandler | undefined>;
     onDataPointClick: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | undefined>;

package/dist/src/components/charts/boxplot-chart.d.ts

@@ -1,45 +1,59 @@
 import type { PropType } from 'vue';
 /**
- * A Vue component that wraps the BoxplotChart Preact component for use in Vue applications.
- * It maintains compatibility with Vue's reactivity system while preserving the functionality of the BoxplotChart.
- *
+ * A Vue component representing data in a way that visually describes the distribution, variability,
+ * and center of a data set along an axis.
+ * See [Boxplot Chart](https://docs.sisense.com/main/SisenseLinux/box-and-whisker-plot.htm) for more information.
  * @example
  * Here's how you can use the BoxplotChart component in a Vue application:
  * ```vue
  * <template>
- *   <BoxplotChart :props="boxplotChartProps" />
+    <BoxplotChart
+        :dataOptions="boxplotChartProps.dataOptions"
+        :dataSet="boxplotChartProps.dataSet"
+        :filters="boxplotChartProps.filters"
+      />
  * </template>
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
- * import BoxplotChart from '@sisense/sdk-ui-vue/BoxplotChart';
+ * import {BoxplotChart, type BoxplotChartProps} from '@sisense/sdk-ui-vue';
  *
- * const boxplotChartProps = ref({
- *   // Configure your BoxplotChartProps here
- * });
- * </script>
+  const boxplotChartProps = ref<BoxplotChartProps>({
+    dataSet: DM.DataSource,
+    dataOptions: {
+      category: [dimProductName],
+      value: [DM.Fact_Sale_orders.OrderRevenue],
+      boxType: 'iqr',
+      outliersEnabled: true,
+    },
+    filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
+  });
  * ```
+ * <img src="media://boxplot-chart-example-1.png" width="600px" />
+ * @param props - Boxplot chart properties
+ * @returns Boxplot Chart component
+ * @beta
  */
 export declare const BoxplotChart: import("vue").DefineComponent<{
     dataOptions: PropType<import("@sisense/sdk-ui-preact").BoxplotChartDataOptions | import("@sisense/sdk-ui-preact").BoxplotChartCustomDataOptions>;
     dataSet: PropType<string | import("@sisense/sdk-data").Data | undefined>;
-    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelation | undefined>;
+    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
     highlights: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
     styleOptions: PropType<import("@sisense/sdk-ui-preact").BoxplotStyleOptions | undefined>;
     onBeforeRender: PropType<import("@sisense/sdk-ui-preact").BeforeRenderHandler | undefined>;
-    onDataPointClick: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | undefined>;
-    onDataPointContextMenu: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | undefined>;
+    onDataPointClick: PropType<import("@sisense/sdk-ui-preact").BoxplotDataPointEventHandler | undefined>;
+    onDataPointContextMenu: PropType<import("@sisense/sdk-ui-preact").BoxplotDataPointEventHandler | undefined>;
     onDataPointsSelected: PropType<import("@sisense/sdk-ui-preact").DataPointsEventHandler | undefined>;
 }, (() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>) | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     dataOptions: PropType<import("@sisense/sdk-ui-preact").BoxplotChartDataOptions | import("@sisense/sdk-ui-preact").BoxplotChartCustomDataOptions>;
     dataSet: PropType<string | import("@sisense/sdk-data").Data | undefined>;
-    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelation | undefined>;
+    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
     highlights: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
     styleOptions: PropType<import("@sisense/sdk-ui-preact").BoxplotStyleOptions | undefined>;
     onBeforeRender: PropType<import("@sisense/sdk-ui-preact").BeforeRenderHandler | undefined>;
-    onDataPointClick: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | undefined>;
-    onDataPointContextMenu: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | undefined>;
+    onDataPointClick: PropType<import("@sisense/sdk-ui-preact").BoxplotDataPointEventHandler | undefined>;
+    onDataPointContextMenu: PropType<import("@sisense/sdk-ui-preact").BoxplotDataPointEventHandler | undefined>;
     onDataPointsSelected: PropType<import("@sisense/sdk-ui-preact").DataPointsEventHandler | undefined>;
 }>>, {}, {}>;

package/dist/src/components/charts/chart-widget.d.ts

@@ -1,25 +1,56 @@
 /// <reference types="react" />
 import type { PropType } from 'vue';
 /**
- * A Vue component that wraps the ChartWidget Preact component for use in Vue applications.
- * It maintains compatibility with Vue's reactivity system while preserving the functionality of the ChartWidget.
- *
+ * The Chart Widget component extending the {@link Chart} component to support widget style options.
+ * It can be used along with the {@link DrilldownWidget} component to support advanced data drilldown.
  * @example
  * Here's how you can use the ChartWidget component in a Vue application:
  * ```vue
  * <template>
- *   <ChartWidget :props="chartWidgetProps" />
+    <DrilldownWidget :drilldownDimensions="drilldownDimensions" :initialDimension="dimProductName">
+      <template
+        #chart="{ drilldownFilters, drilldownDimension, onDataPointsSelected, onContextMenu }"
+      >
+        <ChartWidget
+          chart-type="bar"
+          v-bind:filters="drilldownFilters"
+          :dataOptions="{
+            ...chartProps.dataOptions,
+            category: [drilldownDimension],
+          }"
+          :highlight-selection-disabled="true"
+          :dataSet="chartProps.dataSet"
+          :style="chartProps.styleOptions"
+          :on-data-points-selected="(dataPoints:any,event:any) => {
+          onDataPointsSelected(dataPoints);
+          onContextMenu({ left: event.clientX, top: event.clientY });
+        }"
+          :on-data-point-click="(dataPoint:any,event:any) => {
+          onDataPointsSelected([dataPoint]);
+          onContextMenu({ left: event.clientX, top: event.clientY });
+        }"
+          :on-data-point-context-menu="(dataPoint:any,event:any) => {
+          onDataPointsSelected([dataPoint]);
+          onContextMenu({ left: event.clientX, top: event.clientY });
+        }"
+        />
+      </template>
+    </DrilldownWidget>
  * </template>
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
- * import ChartWidget from '@sisense/sdk-ui-vue/ChartWidget';
+ * import {ChartWidget} from '@sisense/sdk-ui-vue';
  *
  * const chartWidgetProps = ref({
  *   // Configure your ChartWidgetProps here
  * });
  * </script>
  * ```
+ * <img src="media://chart-widget-with-drilldown-example-1.png" width="800px" />
+ * @param props - ChartWidget properties
+ * @returns ChartWidget component representing a chart type as specified in `ChartWidgetProps.`{@link ChartWidgetProps.chartType | chartType}
+
  */
 export declare const ChartWidget: import("vue").DefineComponent<{
     bottomSlot: PropType<import("react").ReactNode>;
@@ -29,13 +60,13 @@ export declare const ChartWidget: import("vue").DefineComponent<{
     dataSource: PropType<string | undefined>;
     description: PropType<string | undefined>;
     drilldownOptions: PropType<import("@sisense/sdk-ui-preact").DrilldownOptions | undefined>;
-    filters: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
+    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
     highlightSelectionDisabled: PropType<boolean | undefined>;
     highlights: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
     onBeforeRender: PropType<import("@sisense/sdk-ui-preact").BeforeRenderHandler | undefined>;
     onContextMenuClose: PropType<(() => void) | undefined>;
-    onDataPointClick: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointEventHandler | undefined>;
-    onDataPointContextMenu: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointEventHandler | undefined>;
+    onDataPointClick: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | import("@sisense/sdk-ui-preact").AreamapDataPointEventHandler | import("@sisense/sdk-ui-preact").BoxplotDataPointEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointEventHandler | import("@sisense/sdk-ui-preact").ScattermapDataPointEventHandler | undefined>;
+    onDataPointContextMenu: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | import("@sisense/sdk-ui-preact").BoxplotDataPointEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointEventHandler | undefined>;
     onDataPointsSelected: PropType<import("@sisense/sdk-ui-preact").DataPointsEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointsEventHandler | undefined>;
     styleOptions: PropType<import("@sisense/sdk-ui-preact").ChartWidgetStyleOptions | undefined>;
     title: PropType<string | undefined>;
@@ -51,13 +82,13 @@ export declare const ChartWidget: import("vue").DefineComponent<{
     dataSource: PropType<string | undefined>;
     description: PropType<string | undefined>;
     drilldownOptions: PropType<import("@sisense/sdk-ui-preact").DrilldownOptions | undefined>;
-    filters: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
+    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
     highlightSelectionDisabled: PropType<boolean | undefined>;
     highlights: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
     onBeforeRender: PropType<import("@sisense/sdk-ui-preact").BeforeRenderHandler | undefined>;
     onContextMenuClose: PropType<(() => void) | undefined>;
-    onDataPointClick: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointEventHandler | undefined>;
-    onDataPointContextMenu: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointEventHandler | undefined>;
+    onDataPointClick: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | import("@sisense/sdk-ui-preact").AreamapDataPointEventHandler | import("@sisense/sdk-ui-preact").BoxplotDataPointEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointEventHandler | import("@sisense/sdk-ui-preact").ScattermapDataPointEventHandler | undefined>;
+    onDataPointContextMenu: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | import("@sisense/sdk-ui-preact").BoxplotDataPointEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointEventHandler | undefined>;
     onDataPointsSelected: PropType<import("@sisense/sdk-ui-preact").DataPointsEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointsEventHandler | undefined>;
     styleOptions: PropType<import("@sisense/sdk-ui-preact").ChartWidgetStyleOptions | undefined>;
     title: PropType<string | undefined>;

package/dist/src/components/charts/chart.d.ts

@@ -8,7 +8,7 @@ import { type PropType } from 'vue';
  * ```tsx
  * <script setup lang="ts">
  * import { Chart } from '@sisense/sdk-ui-vue';
- * import type { ChartProps } from '@sisense/sdk-ui';
+ * import type { ChartProps } from '@sisense/sdk-ui-vue';
  * import * as DM from '../assets/sample-retail-model';
  * import { measureFactory, filterFactory } from '@sisense/sdk-data';
  * import { ref } from 'vue';
@@ -24,44 +24,33 @@ import { type PropType } from 'vue';
  *     value: [{ column: measureTotalRevenue, sortType: 'sortDesc' }],
  *     breakBy: [],
  *   },
- *   filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
- *   styleOptions: {
- *     width: 800,
- *     height: 500,
- *     xAxis: {
- *       title: {
- *         text: 'Product Name',
- *         enabled: true,
- *       },
- *     },
- *     yAxis: {
- *       title: {
- *         text: 'Total Revenue',
- *         enabled: true,
- *       },
- *     },
- *   },
+ *   filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)]
  * });
  * </script>
  *
  * <template>
- *   <Chart :props="chartProps" />
+     <Chart
+       :chartType="chartProps.chartType"
+       :dataSet="chartProps.dataSet"
+       :dataOptions="chartProps.dataOptions"
+       :filters="chartProps.filters"
+     />
  * </template>
  * ```
  *
- * <img src="media://vue-chart-data-source-example-1.png" width="800px" />
- *
+ * <img src="media://chart-local-data-example-1.png" width="800px" />
+ * @param props - Chart properties
  * @returns Chart component representing a chart type as specified in `ChartProps.`{@link ChartProps.chartType | chartType}
  */
 export declare const Chart: import("vue").DefineComponent<{
     chartType: PropType<import("@sisense/sdk-ui-preact").ChartType>;
     dataOptions: PropType<import("@sisense/sdk-ui-preact").ChartDataOptions>;
     dataSet: PropType<string | import("@sisense/sdk-data").Data | undefined>;
-    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelation | undefined>;
+    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
     highlights: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
     onBeforeRender: PropType<import("@sisense/sdk-ui-preact").BeforeRenderHandler | undefined>;
-    onDataPointClick: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointEventHandler | undefined>;
-    onDataPointContextMenu: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointEventHandler | undefined>;
+    onDataPointClick: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | import("@sisense/sdk-ui-preact").AreamapDataPointEventHandler | import("@sisense/sdk-ui-preact").BoxplotDataPointEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointEventHandler | import("@sisense/sdk-ui-preact").ScattermapDataPointEventHandler | undefined>;
+    onDataPointContextMenu: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | import("@sisense/sdk-ui-preact").BoxplotDataPointEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointEventHandler | undefined>;
     onDataPointsSelected: PropType<import("@sisense/sdk-ui-preact").DataPointsEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointsEventHandler | undefined>;
     styleOptions: PropType<import("@sisense/sdk-ui-preact").ChartStyleOptions | undefined>;
     refreshCounter: PropType<number | undefined>;
@@ -71,11 +60,11 @@ export declare const Chart: import("vue").DefineComponent<{
     chartType: PropType<import("@sisense/sdk-ui-preact").ChartType>;
     dataOptions: PropType<import("@sisense/sdk-ui-preact").ChartDataOptions>;
     dataSet: PropType<string | import("@sisense/sdk-data").Data | undefined>;
-    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelation | undefined>;
+    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
     highlights: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
     onBeforeRender: PropType<import("@sisense/sdk-ui-preact").BeforeRenderHandler | undefined>;
-    onDataPointClick: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointEventHandler | undefined>;
-    onDataPointContextMenu: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointEventHandler | undefined>;
+    onDataPointClick: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | import("@sisense/sdk-ui-preact").AreamapDataPointEventHandler | import("@sisense/sdk-ui-preact").BoxplotDataPointEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointEventHandler | import("@sisense/sdk-ui-preact").ScattermapDataPointEventHandler | undefined>;
+    onDataPointContextMenu: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | import("@sisense/sdk-ui-preact").BoxplotDataPointEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointEventHandler | undefined>;
     onDataPointsSelected: PropType<import("@sisense/sdk-ui-preact").DataPointsEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointsEventHandler | undefined>;
     styleOptions: PropType<import("@sisense/sdk-ui-preact").ChartStyleOptions | undefined>;
     refreshCounter: PropType<number | undefined>;

package/dist/src/components/charts/column-chart.d.ts

@@ -1,29 +1,42 @@
 import type { PropType } from 'vue';
 /**
- * A Vue component that wraps the ColumnChart Preact component for use in Vue applications.
- * It maintains compatibility with Vue's reactivity system while preserving the functionality of the ColumnChart.
+ * A Vue component representing categorical data with vertical rectangular bars
+ * whose heights are proportional to the values that they represent.
+ * See [Column Chart](https://docs.sisense.com/main/SisenseLinux/column-chart.htm) for more information.
  *
  * @example
  * Here's how you can use the ColumnChart component in a Vue application:
  * ```vue
  * <template>
- *   <ColumnChart :props="ColumnChartProps" />
+      <ColumnChart
+        :dataOptions="columnChartProps.dataOptions"
+        :dataSet="columnChartProps.dataSet"
+        :filters="columnChartProps.filters"
+      />
  * </template>
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
- * import ColumnChart from '@sisense/sdk-ui-vue/ColumnChart';
+ * import {ColumnChart, type ColumnChartProps} from '@sisense/sdk-ui-vue';
  *
- * const columnChartProps = ref({
- *   // Configure your ColumnChartProps here
- * });
- * </script>
+const columnChartProps = ref<ColumnChartProps>({
+  dataSet: DM.DataSource,
+  dataOptions: {
+    category: [dimProductName],
+    value: [{ column: measureTotalRevenue, sortType: 'sortDesc' }],
+    breakBy: [],
+  },
+  filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
+});
  * ```
+ * <img src="media://column-chart-example-1.png" width="800"/>
+ * @param props - Column chart properties
+ * @returns Column Chart component
  */
 export declare const ColumnChart: import("vue").DefineComponent<{
     dataOptions: PropType<import("@sisense/sdk-ui-preact").CartesianChartDataOptions>;
     dataSet: PropType<string | import("@sisense/sdk-data").Data | undefined>;
-    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelation | undefined>;
+    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
     highlights: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
     onBeforeRender: PropType<import("@sisense/sdk-ui-preact").BeforeRenderHandler | undefined>;
     onDataPointClick: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | undefined>;
@@ -35,7 +48,7 @@ export declare const ColumnChart: import("vue").DefineComponent<{
 }>) | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     dataOptions: PropType<import("@sisense/sdk-ui-preact").CartesianChartDataOptions>;
     dataSet: PropType<string | import("@sisense/sdk-data").Data | undefined>;
-    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelation | undefined>;
+    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
     highlights: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
     onBeforeRender: PropType<import("@sisense/sdk-ui-preact").BeforeRenderHandler | undefined>;
     onDataPointClick: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | undefined>;

package/dist/src/components/charts/dashboard-widget.d.ts

@@ -1,23 +1,23 @@
 /// <reference types="react" />
 import type { PropType } from 'vue';
 /**
- * A Vue component that wraps the DashboardWidget Preact component for use in Vue applications.
- * It maintains compatibility with Vue's reactivity system while preserving the functionality of the DashboardWidget.
+ * The Dashboard Widget component, which is a thin wrapper on the {@link ChartWidget} component,
+ * used to render a widget created in the Sisense instance.
  *
  * @example
  * Here's how you can use the DashboardWidget component in a Vue application:
  * ```vue
  * <template>
- *   <DashboardWidget :props="dashboardWidgetProps" />
+ *    <DashboardWidget
+ *      widgetOid="64473e07dac1920034bce77f"
+ *      dashboardOid="6441e728dac1920034bce737"
+ *    />
  * </template>
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
- * import DashboardWidget from '@sisense/sdk-ui-vue/DashboardWidget';
+ * import {DashboardWidget} from '@sisense/sdk-ui-vue';
  *
- * const dashboardWidgetProps = ref({
- *   // Configure your DashboardWidgetProps here
- * });
  * </script>
  * ```
  */
@@ -34,8 +34,8 @@ export declare const DashboardWidget: import("vue").DefineComponent<{
     includeDashboardFilters: PropType<boolean | undefined>;
     onBeforeRender: PropType<import("@sisense/sdk-ui-preact").BeforeRenderHandler | undefined>;
     onContextMenuClose: PropType<(() => void) | undefined>;
-    onDataPointClick: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointEventHandler | undefined>;
-    onDataPointContextMenu: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointEventHandler | undefined>;
+    onDataPointClick: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | import("@sisense/sdk-ui-preact").AreamapDataPointEventHandler | import("@sisense/sdk-ui-preact").BoxplotDataPointEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointEventHandler | import("@sisense/sdk-ui-preact").ScattermapDataPointEventHandler | undefined>;
+    onDataPointContextMenu: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | import("@sisense/sdk-ui-preact").BoxplotDataPointEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointEventHandler | undefined>;
     onDataPointsSelected: PropType<import("@sisense/sdk-ui-preact").DataPointsEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointsEventHandler | undefined>;
     styleOptions: PropType<import("@sisense/sdk-ui-preact").DashboardWidgetStyleOptions | undefined>;
     title: PropType<string | undefined>;
@@ -57,8 +57,8 @@ export declare const DashboardWidget: import("vue").DefineComponent<{
     includeDashboardFilters: PropType<boolean | undefined>;
     onBeforeRender: PropType<import("@sisense/sdk-ui-preact").BeforeRenderHandler | undefined>;
     onContextMenuClose: PropType<(() => void) | undefined>;
-    onDataPointClick: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointEventHandler | undefined>;
-    onDataPointContextMenu: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointEventHandler | undefined>;
+    onDataPointClick: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | import("@sisense/sdk-ui-preact").AreamapDataPointEventHandler | import("@sisense/sdk-ui-preact").BoxplotDataPointEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointEventHandler | import("@sisense/sdk-ui-preact").ScattermapDataPointEventHandler | undefined>;
+    onDataPointContextMenu: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | import("@sisense/sdk-ui-preact").BoxplotDataPointEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointEventHandler | undefined>;
     onDataPointsSelected: PropType<import("@sisense/sdk-ui-preact").DataPointsEventHandler | import("@sisense/sdk-ui-preact").ScatterDataPointsEventHandler | undefined>;
     styleOptions: PropType<import("@sisense/sdk-ui-preact").DashboardWidgetStyleOptions | undefined>;
     title: PropType<string | undefined>;

package/dist/src/components/charts/funnel-chart.d.ts

@@ -7,23 +7,37 @@ import type { PropType } from 'vue';
  * Here's how you can use the FunnelChart component in a Vue application:
  * ```vue
  * <template>
- *   <FunnelChart :props="funnelChartProps" />
+    <FunnelChart
+      :dataOptions="funnelChartProps.dataOptions"
+      :dataSet="funnelChartProps.dataSet"
+      :filters="funnelChartProps.filters"
+    />
  * </template>
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
- * import FunnelChart from '@sisense/sdk-ui-vue/FunnelChart';
+ * import {FunnelChart, type FunnelChartProps} from '@sisense/sdk-ui-vue';
  *
- * const funnelChartProps = ref({
- *   // Configure your FunnelChartProps here
- * });
+const funnelChartProps = ref<FunnelChartProps>({
+  dataSet: DM.DataSource,
+  dataOptions: {
+    category: [dimProductName],
+    value: [{ column: measureTotalRevenue, sortType: 'sortDesc' }],
+  },
+  filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
+});
  * </script>
  * ```
+ * <img src="media://funnel-chart-example-1.png" width="800"/>
+ *
+ * Note that the chart sorts the measure, `Unique Users`, in descending order by default.
+ * @param props - Funnel chart properties
+ * @returns Funnel Chart component
  */
 export declare const FunnelChart: import("vue").DefineComponent<{
     dataOptions: PropType<import("@sisense/sdk-ui-preact").CategoricalChartDataOptions>;
     dataSet: PropType<string | import("@sisense/sdk-data").Data | undefined>;
-    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelation | undefined>;
+    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
     highlights: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
     onBeforeRender: PropType<import("@sisense/sdk-ui-preact").BeforeRenderHandler | undefined>;
     onDataPointClick: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | undefined>;
@@ -35,7 +49,7 @@ export declare const FunnelChart: import("vue").DefineComponent<{
 }>) | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     dataOptions: PropType<import("@sisense/sdk-ui-preact").CategoricalChartDataOptions>;
     dataSet: PropType<string | import("@sisense/sdk-data").Data | undefined>;
-    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelation | undefined>;
+    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
     highlights: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
     onBeforeRender: PropType<import("@sisense/sdk-ui-preact").BeforeRenderHandler | undefined>;
     onDataPointClick: PropType<import("@sisense/sdk-ui-preact").DataPointEventHandler | undefined>;