@sisense/sdk-ui-vue 1.2.0 → 1.4.0

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

@@ -6,6 +6,7 @@ export { LineChart } from './line-chart';
 export { PieChart } from './pie-chart';
 export { ScatterChart } from './scatter-chart';
 export { Table } from './table';
+export { PivotTable } from './pivot-table';
 export { TreemapChart } from './treemap-chart';
 export { SunburstChart } from './sunburst-chart';
 export { PolarChart } from './polar-chart';

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

@@ -1,29 +1,40 @@
 import type { PropType } from 'vue';
 /**
- * A Vue component that wraps the IndicatorChart Preact component for use in Vue applications.
- * It maintains compatibility with Vue's reactivity system while preserving the functionality of the IndicatorChart.
+ * A Vue component that provides various options for displaying one or two numeric values as a number, gauge or ticker.
+ * See [Indicator](https://docs.sisense.com/main/SisenseLinux/indicator.htm) for more information.
  *
  * @example
  * Here's how you can use the IndicatorChart component in a Vue application:
  * ```vue
  * <template>
- *   <IndicatorChart :props="indicatorChartProps" />
+      <IndicatorChart
+        :dataOptions="indicatorChartProps.dataOptions"
+        :dataSet="indicatorChartProps.dataSet"
+        :filters="indicatorChartProps.filters"
+      />
  * </template>
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
- * import IndicatorChart from '@sisense/sdk-ui-vue/IndicatorChart';
+ * import {IndicatorChart, type IndicatorChartProps} from '@sisense/sdk-ui-vue';
  *
- * const indicatorChartProps = ref({
- *   // Configure your IndicatorChartProps here
- * });
+  const indicatorChartProps = ref<IndicatorChartProps>({
+    dataSet: DM.DataSource,
+    dataOptions: {
+      value: [{ column: measureTotalRevenue, sortType: 'sortDesc' }],
+    },
+    filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
+  });
  * </script>
  * ```
+ * <img src="media://indicator-chart-example-1.png" width="400px" />
+ * @param props - Indicator chart properties
+ * @returns Indicator Chart component
  */
 export declare const IndicatorChart: import("vue").DefineComponent<{
     dataOptions: PropType<import("@sisense/sdk-ui-preact").IndicatorChartDataOptions>;
     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").IndicatorStyleOptions | undefined>;
 }, (() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -31,7 +42,7 @@ export declare const IndicatorChart: 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").IndicatorChartDataOptions>;
     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").IndicatorStyleOptions | undefined>;
 }>>, {}, {}>;

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

@@ -7,23 +7,35 @@ import type { PropType } from 'vue';
  * Here's how you can use the LineChart component in a Vue application:
  * ```vue
  * <template>
- *   <LineChart :props="lineChartProps" />
+      <LineChart
+        :dataOptions="lineChartProps.dataOptions"
+        :dataSet="lineChartProps.dataSet"
+        :filters="lineChartProps.filters"
+      />
  * </template>
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
- * import LineChart from '@sisense/sdk-ui-vue/LineChart';
+ * import {LineChart, type LineChartProps} from '@sisense/sdk-ui-vue';
  *
- * const lineChartProps = ref({
- *   // Configure your LineChartProps here
- * });
- * </script>
+const lineChartProps = ref<LineChartProps>({
+  dataSet: DM.DataSource,
+  dataOptions: {
+    category: [dimProductName],
+    value: [{ column: measureTotalRevenue, sortType: 'sortDesc' }],
+    breakBy: [],
+  },
+  filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
+});
  * ```
+ * <img src="media://line-chart-example-1.png" width="800px" />
+ * @param props - Line chart properties
+ * @returns Line Chart component
  */
 export declare const LineChart: 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 +47,7 @@ export declare const LineChart: 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/pie-chart.d.ts

@@ -1,29 +1,41 @@
 import type { PropType } from 'vue';
 /**
- * A Vue component that wraps the PieChart Preact component for use in Vue applications.
- * It maintains compatibility with Vue's reactivity system while preserving the functionality of the PieChart.
+ * A Vue component representing data in a circular graph with the data shown as slices of a whole,
+ * with each slice representing a proportion of the total.
+ * See [Pie Chart](https://docs.sisense.com/main/SisenseLinux/pie-chart.htm) for more information.
  *
  * @example
  * Here's how you can use the PieChart component in a Vue application:
  * ```vue
  * <template>
- *   <PieChart :props="pieChartProps" />
+      <PieChart
+        :dataOptions="pieChartProps.dataOptions"
+        :dataSet="pieChartProps.dataSet"
+        :filters="pieChartProps.filters"
+      />
  * </template>
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
- * import PieChart from '@sisense/sdk-ui-vue/PieChart';
+ * import {PieChart,type PieChartProps} from '@sisense/sdk-ui-vue';
  *
- * const pieChartProps = ref({
- *   // Configure your PieChartProps here
- * });
- * </script>
+const pieChartProps = ref<PieChartProps>({
+  dataSet: DM.DataSource,
+  dataOptions: {
+    category: [dimProductName],
+    value: [{ column: measureTotalRevenue, sortType: 'sortDesc' }],
+  },
+  filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
+});
  * ```
+* <img src="media://pie-chart-example-1.png" width="600px" />
+ * @param props - Pie chart properties
+ * @returns Pie Chart component
  */
 export declare const PieChart: 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 +47,7 @@ export declare const PieChart: 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>;

package/dist/src/components/charts/pivot-table.d.ts

@@ -0,0 +1,41 @@
+import type { PropType } from 'vue';
+/**
+ * TBU
+ * A Vue component that wraps the PivotTable Preact component for use in Vue applications.
+ * It provides a single 'props' prop to pass all the TableProps to the Table Preact component,
+ * enabling the use of the table within Vue's reactivity system.
+ *
+ * @example
+ * Here's how you can use the Table component in a Vue application:
+ * ```vue
+ * <template>
+ *   <Table :props="tableProps" />
+ * </template>
+ *
+ * <script setup lang="ts">
+ * import { ref } from 'vue';
+ * import Table from '@sisense/sdk-ui-vue/Table';
+ *
+ * const tableProps = ref({
+ *   // Define your TableProps configuration here
+ * });
+ * </script>
+ * ```
+ *
+ * @alpha
+ */
+export declare const PivotTable: import("vue").DefineComponent<{
+    dataOptions: PropType<import("@sisense/sdk-ui-preact").PivotTableDataOptions>;
+    dataSet: PropType<string | undefined>;
+    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
+    refreshCounter: PropType<number | undefined>;
+    styleOptions: PropType<import("@sisense/sdk-ui-preact").PivotTableStyleOptions | 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").PivotTableDataOptions>;
+    dataSet: PropType<string | undefined>;
+    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
+    refreshCounter: PropType<number | undefined>;
+    styleOptions: PropType<import("@sisense/sdk-ui-preact").PivotTableStyleOptions | undefined>;
+}>>, {}, {}>;

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

@@ -1,29 +1,41 @@
 import { type PropType } from 'vue';
 /**
- * A Vue component that wraps the PolarChart Preact component for use in Vue applications.
- * It maintains compatibility with Vue's reactivity system while preserving the functionality of the PolarChart.
+ * A Vue component comparing multiple categories/variables with a spacial perspective in a radial chart.
+ * See [Polar Chart](https://docs.sisense.com/main/SisenseLinux/polar-chart.htm) for more information.
  *
  * @example
  * Here's how you can use the PolarChart component in a Vue application:
  * ```vue
  * <template>
- *   <PolarChart :props="polarChartProps" />
+      <PolarChart
+        :dataOptions="polarChartProps.dataOptions"
+        :dataSet="polarChartProps.dataSet"
+        :filters="polarChartProps.filters"
+      />
  * </template>
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
- * import PolarChart from '@sisense/sdk-ui-vue/PolarChart';
+ * import {PolarChart,type PolarChartProps} from '@sisense/sdk-ui-vue';
  *
- * const polarChartProps = ref({
- *   // Configure your PolarChartProps here
- * });
- * </script>
+const polarChartProps = ref<PolarChartProps>({
+  dataSet: DM.DataSource,
+  dataOptions: {
+    category: [dimProductName],
+    value: [{ column: measureTotalRevenue, sortType: 'sortDesc' }],
+    breakBy: [],
+  },
+  filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
+});
  * ```
+ * <img src="media://polar-chart-example-1.png" width="600px" />
+ * @param props - Polar chart properties
+ * @returns Polar Chart component
  */
 export declare const PolarChart: 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 +47,7 @@ export declare const PolarChart: 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/scatter-chart.d.ts

@@ -1,29 +1,47 @@
 import type { PropType } from 'vue';
 /**
- * A Vue component that wraps the ScatterChart Preact component for use in Vue applications.
- * It maintains compatibility with Vue's reactivity system while preserving the functionality of the ScatterChart.
+ * A Vue component displaying the distribution of two variables on an X-Axis, Y-Axis,
+ * and two additional fields of data that are shown as colored circles scattered across the chart.
+ *
+ * **Point**: A field that for each of its members a scatter point is drawn. The maximum amount of data points is 500.
+ *
+ * **Size**: An optional field represented by the size of the circles.
+ * If omitted, all scatter points are equal in size. If used, the circle sizes are relative to their values.
+ *
+ * See [Scatter Chart](https://docs.sisense.com/main/SisenseLinux/scatter-chart.htm) for more information.
  *
  * @example
  * Here's how you can use the ScatterChart component in a Vue application:
  * ```vue
  * <template>
- *   <ScatterChart :props="scatterChartProps" />
+      <ScatterChart
+        :dataOptions="scatterChartProps.dataOptions"
+        :dataSet="scatterChartProps.dataSet"
+        :filters="scatterChartProps.filters"
+      />
  * </template>
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
- * import ScatterChart from '@sisense/sdk-ui-vue/ScatterChart';
+ * import {ScatterChart, type ScatterChartProps} from '@sisense/sdk-ui-vue';
  *
- * const scatterChartProps = ref({
- *   // Configure your ScatterChartProps here
- * });
- * </script>
+const scatterChartProps = ref<ScatterChartProps>({
+  dataSet: DM.DataSource,
+  dataOptions: {
+    x: dimProductName,
+    y: measureTotalRevenue,
+  },
+  filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
+});
  * ```
+ * <img src="media://scatter-chart-example-1.png" width="800px" />
+ * @param props - Scatter chart properties
+ * @returns Scatter Chart component
  */
 export declare const ScatterChart: import("vue").DefineComponent<{
     dataOptions: PropType<import("@sisense/sdk-ui-preact").ScatterChartDataOptions>;
     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").ScatterDataPointEventHandler | undefined>;
@@ -35,7 +53,7 @@ export declare const ScatterChart: 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").ScatterChartDataOptions>;
     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").ScatterDataPointEventHandler | undefined>;

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

@@ -7,31 +7,46 @@ import type { PropType } from 'vue';
  * Here's how you can use the ScattermapChart component in a Vue application:
  * ```vue
  * <template>
- *   <ScattermapChart :props="ScattermapChartProps" />
+      <ScattermapChart
+        :dataOptions="scattermapChartProps.dataOptions"
+        :dataSet="scattermapChartProps.dataSet"
+        :filters="scattermapChartProps.filters"
+      />
  * </template>
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
- * import ScattermapChart from '@sisense/sdk-ui-vue/ScattermapChart';
+ * import {ScattermapChart,type ScattermapChartProps} from '@sisense/sdk-ui-vue';
  *
- * const ScattermapChartProps = ref({
- *   // Configure your ScattermapChartProps here
- * });
+const scattermapChartProps = ref<ScattermapChartProps>({
+  dataSet: DM.DataSource,
+  dataOptions: {
+    geo: [DM.DimCountries.CountryName],
+    size: { column: measureTotalRevenue, title: 'Total Revenue' },
+  },
+  filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
+});
  * </script>
  * ```
+ * <img src="media://scattermap-chart-example-1.png" width="600px" />
+ * @param props - Scattermap chart properties
+ * @returns Scattermap Chart component
+ * @beta
  */
 export declare const ScattermapChart: import("vue").DefineComponent<{
     dataOptions: PropType<import("@sisense/sdk-ui-preact").ScattermapChartDataOptions>;
     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").ScattermapStyleOptions | undefined>;
+    onDataPointClick: PropType<import("@sisense/sdk-ui-preact").ScattermapDataPointEventHandler | 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").ScattermapChartDataOptions>;
     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").ScattermapStyleOptions | undefined>;
+    onDataPointClick: PropType<import("@sisense/sdk-ui-preact").ScattermapDataPointEventHandler | undefined>;
 }>>, {}, {}>;

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

@@ -7,23 +7,31 @@ import type { PropType } from 'vue';
  * Here's how you can use the SunburstChart component in a Vue application:
  * ```vue
  * <template>
- *   <SunburstChart :props="sunburstChartProps" />
+    <SunburstChart
+      :dataOptions="sunburstChartProps.dataOptions"
+      :dataSet="sunburstChartProps.dataSet"
+      :filters="sunburstChartProps.filters"
+    />
  * </template>
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
- * import SunburstChart from '@sisense/sdk-ui-vue/SunburstChart';
+ * import {SunburstChart,type SunburstChartProps} from '@sisense/sdk-ui-vue';
  *
- * const sunburstChartProps = ref({
- *   // Configure your SunburstChartProps here
- * });
- * </script>
+const sunburstChartProps = ref<SunburstChartProps>({
+  dataSet: DM.DataSource,
+  dataOptions: {
+    category: [dimProductName],
+    value: [{ column: measureTotalRevenue, sortType: 'sortDesc' }],
+  },
+  filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
+});
  * ```
  */
 export declare const SunburstChart: 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 +43,7 @@ export declare const SunburstChart: 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>;

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

@@ -1,8 +1,7 @@
 /// <reference types="react" />
 import { type Prop } from 'vue';
 /**
- * A Vue component that wraps the TableWidget Preact component for use in Vue applications.
- * It uses a single 'props' prop to pass all TableWidgetProps to the TableWidgetPreact component.
+ * The TableWidget component extending the {@link Table} component to support widget style options.
  *
  * @example
  * Here's how you can use the TableWidget component in a Vue application:
@@ -20,13 +19,16 @@ import { type Prop } from 'vue';
  * });
  * </script>
  * ```
+ * @param props - Table Widget properties
+ * @returns Widget component representing a table
+ * @internal
  */
 export declare const TableWidget: import("vue").DefineComponent<{
     bottomSlot: Prop<import("react").ReactNode>;
     dataOptions: Prop<import("@sisense/sdk-ui-preact").TableDataOptions>;
     dataSource: Prop<string | undefined>;
     description: Prop<string | undefined>;
-    filters: Prop<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelation | undefined>;
+    filters: Prop<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
     styleOptions: Prop<import("@sisense/sdk-ui-preact").TableWidgetStyleOptions | undefined>;
     title: Prop<string | undefined>;
     topSlot: Prop<import("react").ReactNode>;
@@ -38,7 +40,7 @@ export declare const TableWidget: import("vue").DefineComponent<{
     dataOptions: Prop<import("@sisense/sdk-ui-preact").TableDataOptions>;
     dataSource: Prop<string | undefined>;
     description: Prop<string | undefined>;
-    filters: Prop<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelation | undefined>;
+    filters: Prop<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
     styleOptions: Prop<import("@sisense/sdk-ui-preact").TableWidgetStyleOptions | undefined>;
     title: Prop<string | undefined>;
     topSlot: Prop<import("react").ReactNode>;

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

@@ -1,8 +1,6 @@
 import type { PropType } from 'vue';
 /**
- * A Vue component that wraps the Table Preact component for use in Vue applications.
- * It provides a single 'props' prop to pass all the TableProps to the Table Preact component,
- * enabling the use of the table within Vue's reactivity system.
+ * Table with aggregation and pagination.
  *
  * @example
  * Here's how you can use the Table component in a Vue application:
@@ -20,11 +18,14 @@ import type { PropType } from 'vue';
  * });
  * </script>
  * ```
+ * <img src="media://table-example-2.png" width="800px" />
+ * @param props - Table properties
+ * @returns Table component
  */
 export declare const Table: import("vue").DefineComponent<{
     dataOptions: PropType<import("@sisense/sdk-ui-preact").TableDataOptions>;
     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>;
     refreshCounter: PropType<number | undefined>;
     styleOptions: PropType<import("@sisense/sdk-ui-preact").TableStyleOptions | undefined>;
 }, (() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -32,7 +33,7 @@ export declare const Table: 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").TableDataOptions>;
     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>;
     refreshCounter: PropType<number | undefined>;
     styleOptions: PropType<import("@sisense/sdk-ui-preact").TableStyleOptions | undefined>;
 }>>, {}, {}>;

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

@@ -1,29 +1,41 @@
 import type { PropType } from 'vue';
 /**
- * A Vue component that wraps the TreemapChart Preact component for use in Vue applications.
- * It maintains compatibility with Vue's reactivity system while preserving the functionality of the TreemapChart.
+ * A Vue component displaying hierarchical data in the form of nested rectangles.
+ * This type of chart can be used instead of a column chart for comparing a large number of categories and sub-categories.
+ * See [Treemap Chart](https://docs.sisense.com/main/SisenseLinux/treemap.htm) for more information.
  *
  * @example
  * Here's how you can use the TreemapChart component in a Vue application:
  * ```vue
  * <template>
- *   <TreemapChart :props="treemapChartProps" />
+      <TreemapChart
+        :dataOptions="treemapChartProps.dataOptions"
+        :dataSet="treemapChartProps.dataSet"
+        :filters="treemapChartProps.filters"
+      />
  * </template>
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
  * import TreemapChart from '@sisense/sdk-ui-vue/TreemapChart';
  *
- * const treemapChartProps = ref({
- *   // Configure your TreemapChartProps here
- * });
- * </script>
+const treemapChartProps = ref<TreemapChartProps>({
+  dataSet: DM.DataSource,
+  dataOptions: {
+    category: [dimProductName],
+    value: [{ column: measureTotalRevenue, sortType: 'sortDesc' }],
+  },
+  filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
+});
  * ```
+ * <img src="media://treemap-chart-example-1.png" width="600px" />
+ * @param props - Treemap chart properties
+ * @returns Treemap Chart component
  */
 export declare const TreemapChart: 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 +47,7 @@ export declare const TreemapChart: 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>;

package/dist/src/components/context-menu.d.ts

@@ -1,4 +1,36 @@
 import type { PropType } from 'vue';
+/**
+ * `ContextMenu` component from the `@sisense/sdk-ui-vue` package.
+ * This component provides a context menu that can be customized with different items and sections.
+ * It allows for flexible positioning and can be easily integrated into Vue applications.
+ *
+ * @example
+ * Here's how to use the `ContextMenu` component:
+ * ```vue
+ * <template>
+ *   <ContextMenu :closeContextMenu="closeMenu" :itemSections="sections" :position="menuPosition">
+ *   </ContextMenu>
+ * </template>
+ *
+ * <script>
+ * import { ref } from 'vue';
+ * import ContextMenu from './ContextMenu.vue';
+ *
+ * export default {
+ *   components: { ContextMenu },
+ *   setup() {
+ *     const sections = ref([...]);
+ *     const menuPosition = ref({ top: 0, left: 0 });
+ *     const closeMenu = () => {};
+ *    }
+ * };
+ * </script>
+ * ```
+ *
+ * @prop {Function} closeContextMenu - Function to close the context menu. It should be a function that sets the visibility of the context menu to false.
+ * @prop {Array} itemSections - An array of sections, each containing an array of items to be rendered in the context menu. Each item can be a string or an object specifying the item's properties.
+ * @prop {Object} position - An object specifying the position of the context menu. It should contain `top` and `left` properties to position the menu on the screen.
+ */
 export declare const ContextMenu: import("vue").DefineComponent<{
     closeContextMenu: PropType<() => void>;
     itemSections: PropType<import("@sisense/sdk-ui-preact").MenuItemSection[] | undefined>;