@sisense/sdk-ui-vue 1.5.0 → 1.6.0

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

@@ -4,7 +4,6 @@ import type { PropType } from 'vue';
  * 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
@@ -18,8 +17,12 @@ import type { PropType } from 'vue';
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
+ * import { measureFactory, filterFactory } from '@sisense/sdk-data';
+ * import * as DM from '../assets/sample-retail-model';
  * import {AreaChart, type AreaChartProps} from '@sisense/sdk-ui-vue';
  *
+ * const dimProductName = DM.DimProducts.ProductName;
+ * const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
  * const areaChartProps = ref<AreaChartProps>({
  *   dataSet: DM.DataSource,
  *   dataOptions: {
@@ -30,8 +33,10 @@ import type { PropType } from 'vue';
  *   filters: [],
  * });
  * ```
+ * <img src="media://vue-area-chart-example.png" width="800"/>
  * @param {AreaChartProps} - Area chart properties
  * @returns Area Chart component
+ * @group Charts
  */
 export declare const AreaChart: import("vue").DefineComponent<{
     dataOptions: PropType<import("@sisense/sdk-ui-preact").CartesianChartDataOptions>;

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

@@ -16,8 +16,13 @@ import type { PropType } from 'vue';
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
+ * import { measureFactory, filterFactory } from '@sisense/sdk-data';
+ * import * as DM from '../assets/sample-retail-model';
  * import {AreamapChart, type AreamapChartProps} from '@sisense/sdk-ui-vue';
- *
+
+ * const dimProductName = DM.DimProducts.ProductName;
+ * const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
+
   const areamapChartProps = ref<AreamapChartProps>({
     dataSet: DM.DataSource,
     dataOptions: {
@@ -28,8 +33,10 @@ import type { PropType } from 'vue';
   });
  * </script>
  * ```
+ * <img src="media://vue-areamap-chart-example.png" width="600px" />
  * @param props - Areamap chart properties
  * @returns Areamap Chart component
+ * @group Charts
  * @beta
  */
 export declare const AreamapChart: import("vue").DefineComponent<{

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

@@ -16,8 +16,12 @@ import type { PropType } from 'vue';
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
- * import {BarChart} from '@sisense/sdk-ui-vue';
- *
+ * import { measureFactory, filterFactory } from '@sisense/sdk-data';
+ * import * as DM from '../assets/sample-retail-model';
+ * import {BarChart,type BarChartProps} from '@sisense/sdk-ui-vue';
+
+ * const dimProductName = DM.DimProducts.ProductName;
+ * const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
   const barChartProps = ref<BarChartProps>({
     dataSet: DM.DataSource,
     dataOptions: {
@@ -29,9 +33,10 @@ import type { PropType } from 'vue';
   });
  * </script>
  * ```
- * <img src="media://bar-chart-example-1.png" width="800"/>
+ * <img src="media://vue-bar-chart-example.png" width="800"/>
  * @param props - Bar chart properties
  * @returns Bar Chart component
+ * @group Charts
  */
 export declare const BarChart: import("vue").DefineComponent<{
     /**

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

@@ -16,9 +16,13 @@ import type { PropType } from 'vue';
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
+ * import { measureFactory, filterFactory } from '@sisense/sdk-data';
+ * import * as DM from '../assets/sample-retail-model';
  * import {BoxplotChart, type BoxplotChartProps} from '@sisense/sdk-ui-vue';
- *
-  const boxplotChartProps = ref<BoxplotChartProps>({
+
+ * const dimProductName = DM.DimProducts.ProductName;
+ * const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
+ * const boxplotChartProps = ref<BoxplotChartProps>({
     dataSet: DM.DataSource,
     dataOptions: {
       category: [dimProductName],
@@ -29,9 +33,10 @@ import type { PropType } from 'vue';
     filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
   });
  * ```
- * <img src="media://boxplot-chart-example-1.png" width="600px" />
+ * <img src="media://vue-boxplot-chart-example.png" width="600px" />
  * @param props - Boxplot chart properties
  * @returns Boxplot Chart component
+ * @group Charts
  * @beta
  */
 export declare const BoxplotChart: import("vue").DefineComponent<{

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

@@ -16,16 +16,30 @@ import { type PropType } from 'vue';
  * const dimProductName = DM.DimProducts.ProductName;
  * const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
  *
- * const chartProps = ref<ChartProps>({
- *   chartType: 'bar',
- *   dataSet: DM.DataSource,
- *   dataOptions: {
- *     category: [dimProductName],
- *     value: [{ column: measureTotalRevenue, sortType: 'sortDesc' }],
- *     breakBy: [],
- *   },
- *   filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)]
- * });
+const chartProps = ref<ChartProps>({
+  chartType: 'bar',
+  dataSet: DM.DataSource,
+  dataOptions: {
+    category: [dimProductName],
+    value: [{ column: measureTotalRevenue, sortType: 'sortDesc' }],
+    breakBy: [],
+  },
+  filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
+  styleOptions: {
+    xAxis: {
+      title: {
+        text: 'Product Name',
+        enabled: true,
+      },
+    },
+    yAxis: {
+      title: {
+        text: 'Total Revenue',
+        enabled: true,
+      },
+    },
+  },
+});
  * </script>
  *
  * <template>
@@ -34,13 +48,15 @@ import { type PropType } from 'vue';
        :dataSet="chartProps.dataSet"
        :dataOptions="chartProps.dataOptions"
        :filters="chartProps.filters"
+       :styleOptions="chartProps.styleOptions"
      />
  * </template>
  * ```
  *
- * <img src="media://chart-local-data-example-1.png" width="800px" />
+ * <img src="media://vue-chart-example.png" width="800px" />
  * @param props - Chart properties
  * @returns Chart component representing a chart type as specified in `ChartProps.`{@link ChartProps.chartType | chartType}
+ * @group Charts
  */
 export declare const Chart: import("vue").DefineComponent<{
     chartType: PropType<import("@sisense/sdk-ui-preact").ChartType>;

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

@@ -17,8 +17,13 @@ import type { PropType } from 'vue';
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
+ * import { measureFactory, filterFactory } from '@sisense/sdk-data';
+ * import * as DM from '../assets/sample-retail-model';
  * import {ColumnChart, type ColumnChartProps} from '@sisense/sdk-ui-vue';
  *
+ * const dimProductName = DM.DimProducts.ProductName;
+ * const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
+
 const columnChartProps = ref<ColumnChartProps>({
   dataSet: DM.DataSource,
   dataOptions: {
@@ -29,9 +34,10 @@ const columnChartProps = ref<ColumnChartProps>({
   filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
 });
  * ```
- * <img src="media://column-chart-example-1.png" width="800"/>
+ * <img src="media://vue-column-chart-example.png" width="800"/>
  * @param props - Column chart properties
  * @returns Column Chart component
+ * @group Charts
  */
 export declare const ColumnChart: import("vue").DefineComponent<{
     dataOptions: PropType<import("@sisense/sdk-ui-preact").CartesianChartDataOptions>;

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

@@ -17,8 +17,13 @@ import type { PropType } from 'vue';
  * <script setup lang="ts">
  * import { ref } from 'vue';
  * import {FunnelChart, type FunnelChartProps} from '@sisense/sdk-ui-vue';
+ * import { measureFactory, filterFactory } from '@sisense/sdk-data';
+ * import * as DM from '../assets/sample-retail-model';
  *
-const funnelChartProps = ref<FunnelChartProps>({
+ * const dimProductName = DM.DimProducts.ProductName;
+ * const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
+ *
+ * const funnelChartProps = ref<FunnelChartProps>({
   dataSet: DM.DataSource,
   dataOptions: {
     category: [dimProductName],
@@ -28,11 +33,12 @@ const funnelChartProps = ref<FunnelChartProps>({
 });
  * </script>
  * ```
- * <img src="media://funnel-chart-example-1.png" width="800"/>
+ * <img src="media://vue-funnel-chart-example.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
+ * @group Charts
  */
 export declare const FunnelChart: import("vue").DefineComponent<{
     dataOptions: PropType<import("@sisense/sdk-ui-preact").CategoricalChartDataOptions>;

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

@@ -11,10 +11,7 @@ export { TreemapChart } from './treemap-chart';
 export { SunburstChart } from './sunburst-chart';
 export { PolarChart } from './polar-chart';
 export { IndicatorChart } from './indicator-chart';
-export { ChartWidget } from './chart-widget';
 export { Chart } from './chart';
-export { DashboardWidget } from './dashboard-widget';
-export { TableWidget } from './table-widget';
 export { BoxplotChart } from './boxplot-chart';
 export { AreamapChart } from './areamap-chart';
 export { ScattermapChart } from './scattermap-chart';

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

@@ -16,20 +16,25 @@ import type { PropType } from 'vue';
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
+ * import { measureFactory, filterFactory } from '@sisense/sdk-data';
+ * import * as DM from '../assets/sample-retail-model';
  * import {IndicatorChart, type IndicatorChartProps} from '@sisense/sdk-ui-vue';
- *
-  const indicatorChartProps = ref<IndicatorChartProps>({
-    dataSet: DM.DataSource,
+
+ * const dimProductName = DM.DimProducts.ProductName;
+ * const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
+   const indicatorChartProps = ref<IndicatorChartProps>({
+     dataSet: DM.DataSource,
     dataOptions: {
-      value: [{ column: measureTotalRevenue, sortType: 'sortDesc' }],
-    },
-    filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
-  });
+       value: [{ column: measureTotalRevenue, sortType: 'sortDesc' }],
+     },
+     filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
+   });
  * </script>
  * ```
- * <img src="media://indicator-chart-example-1.png" width="400px" />
+ * <img src="media://vue-indicator-chart-example.png" width="400px" />
  * @param props - Indicator chart properties
  * @returns Indicator Chart component
+ * @group Charts
  */
 export declare const IndicatorChart: import("vue").DefineComponent<{
     dataOptions: PropType<import("@sisense/sdk-ui-preact").IndicatorChartDataOptions>;

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

@@ -16,21 +16,26 @@ import type { PropType } from 'vue';
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
+ * import { measureFactory, filterFactory } from '@sisense/sdk-data';
+ * import * as DM from '../assets/sample-retail-model';
  * import {LineChart, type LineChartProps} from '@sisense/sdk-ui-vue';
- *
-const lineChartProps = ref<LineChartProps>({
-  dataSet: DM.DataSource,
-  dataOptions: {
-    category: [dimProductName],
-    value: [{ column: measureTotalRevenue, sortType: 'sortDesc' }],
-    breakBy: [],
-  },
-  filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
-});
+
+ * const dimProductName = DM.DimProducts.ProductName;
+ * const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
+ * 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" />
+ * <img src="media://vue-line-chart-example.png" width="800px" />
  * @param props - Line chart properties
  * @returns Line Chart component
+ * @group Charts
  */
 export declare const LineChart: import("vue").DefineComponent<{
     dataOptions: PropType<import("@sisense/sdk-ui-preact").CartesianChartDataOptions>;

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

@@ -17,20 +17,25 @@ import type { PropType } from 'vue';
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
+ * import { measureFactory, filterFactory } from '@sisense/sdk-data';
+ * import * as DM from '../assets/sample-retail-model';
  * import {PieChart,type PieChartProps} from '@sisense/sdk-ui-vue';
  *
-const pieChartProps = ref<PieChartProps>({
-  dataSet: DM.DataSource,
-  dataOptions: {
-    category: [dimProductName],
-    value: [{ column: measureTotalRevenue, sortType: 'sortDesc' }],
-  },
-  filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
-});
+ * const dimProductName = DM.DimProducts.ProductName;
+ * const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
+ * 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" />
+ * <img src="media://vue-pie-chart-example.png" width="800px" />
  * @param props - Pie chart properties
  * @returns Pie Chart component
+ * @group Charts
  */
 export declare const PieChart: import("vue").DefineComponent<{
     dataOptions: PropType<import("@sisense/sdk-ui-preact").CategoricalChartDataOptions>;

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

@@ -1,27 +1,40 @@
 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.
+ * A Vue component for Pivot table with pagination.
  *
  * @example
- * Here's how you can use the Table component in a Vue application:
+ * Here's how you can use the PivotTable component in a Vue application:
  * ```vue
  * <template>
- *   <Table :props="tableProps" />
+    <PivotTable :dataOptions="pivotTableProps.dataOptions" :dataSet="pivotTableProps.dataSet"
+        :styleOptions="pivotTableProps.styleOptions" :filters="pivotTableProps.filters" />
  * </template>
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
- * import Table from '@sisense/sdk-ui-vue/Table';
+ * import { measureFactory, filterFactory } from '@sisense/sdk-data';
+ * import * as DM from '../assets/sample-retail-model';
+ * import {PivotTable, type PivotTableProps} from '@sisense/sdk-ui-vue/Table';
  *
- * const tableProps = ref({
- *   // Define your TableProps configuration here
- * });
+ * 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)],
+});
  * </script>
  * ```
- *
+ * <img src="media://vue-pivot-table-example.png" width="800px" />
+ * @group Data Grids
  * @alpha
  */
 export declare const PivotTable: import("vue").DefineComponent<{

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

@@ -16,21 +16,26 @@ import { type PropType } from 'vue';
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
+ * import { measureFactory, filterFactory } from '@sisense/sdk-data';
+ * import * as DM from '../assets/sample-retail-model';
  * import {PolarChart,type PolarChartProps} from '@sisense/sdk-ui-vue';
  *
-const polarChartProps = ref<PolarChartProps>({
-  dataSet: DM.DataSource,
-  dataOptions: {
-    category: [dimProductName],
-    value: [{ column: measureTotalRevenue, sortType: 'sortDesc' }],
-    breakBy: [],
-  },
-  filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
-});
+ * const dimProductName = DM.DimProducts.ProductName;
+ * const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
+ * 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" />
+ * <img src="media://vue-polar-chart-example.png" width="600px" />
  * @param props - Polar chart properties
  * @returns Polar Chart component
+ * @group Charts
  */
 export declare const PolarChart: import("vue").DefineComponent<{
     dataOptions: PropType<import("@sisense/sdk-ui-preact").CartesianChartDataOptions>;

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

@@ -23,20 +23,25 @@ import type { PropType } from 'vue';
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
+ * import { measureFactory, filterFactory } from '@sisense/sdk-data';
+ * import * as DM from '../assets/sample-retail-model';
  * import {ScatterChart, type ScatterChartProps} from '@sisense/sdk-ui-vue';
  *
-const scatterChartProps = ref<ScatterChartProps>({
-  dataSet: DM.DataSource,
-  dataOptions: {
-    x: dimProductName,
-    y: measureTotalRevenue,
-  },
-  filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
-});
+ * const dimProductName = DM.DimProducts.ProductName;
+ * const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
+ * 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" />
+ * <img src="media://vue-scatter-chart-example.png" width="800px" />
  * @param props - Scatter chart properties
  * @returns Scatter Chart component
+ * @group Charts
  */
 export declare const ScatterChart: import("vue").DefineComponent<{
     dataOptions: PropType<import("@sisense/sdk-ui-preact").ScatterChartDataOptions>;

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

@@ -16,21 +16,26 @@ import type { PropType } from 'vue';
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
+ * import { measureFactory, filterFactory } from '@sisense/sdk-data';
+ * import * as DM from '../assets/sample-retail-model';
  * import {ScattermapChart,type ScattermapChartProps} from '@sisense/sdk-ui-vue';
  *
-const scattermapChartProps = ref<ScattermapChartProps>({
-  dataSet: DM.DataSource,
-  dataOptions: {
-    geo: [DM.DimCountries.CountryName],
-    size: { column: measureTotalRevenue, title: 'Total Revenue' },
-  },
-  filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
-});
+ * const dimProductName = DM.DimProducts.ProductName;
+ * const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
+ * 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" />
+ * <img src="media://vue-scattermap-chart-example.png" width="600px" />
  * @param props - Scattermap chart properties
  * @returns Scattermap Chart component
+ * @group Charts
  * @beta
  */
 export declare const ScattermapChart: import("vue").DefineComponent<{

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

@@ -16,17 +16,26 @@ import type { PropType } from 'vue';
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
+ * import { measureFactory, filterFactory } from '@sisense/sdk-data';
+ * import * as DM from '../assets/sample-retail-model';
  * import {SunburstChart,type SunburstChartProps} from '@sisense/sdk-ui-vue';
  *
-const sunburstChartProps = ref<SunburstChartProps>({
-  dataSet: DM.DataSource,
-  dataOptions: {
-    category: [dimProductName],
-    value: [{ column: measureTotalRevenue, sortType: 'sortDesc' }],
-  },
-  filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
-});
+ * const dimProductName = DM.DimProducts.ProductName;
+ * const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
+ * const sunburstChartProps = ref<SunburstChartProps>({
+    dataSet: DM.DataSource,
+    dataOptions: {
+      category: [dimProductName],
+      value: [{ column: measureTotalRevenue, sortType: 'sortDesc' }],
+    },
+    filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
+  });
  * ```
+ * <img src="media://vue-sunburst-chart-example.png" width="600px" />
+ * @param props - Sunburst Chart properties
+ * @returns Sunburst Chart component
+ * @group Charts
+ * @beta
  */
 export declare const SunburstChart: import("vue").DefineComponent<{
     dataOptions: PropType<import("@sisense/sdk-ui-preact").CategoricalChartDataOptions>;

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

@@ -6,21 +6,36 @@ import type { PropType } from 'vue';
  * Here's how you can use the Table component in a Vue application:
  * ```vue
  * <template>
- *   <Table :props="tableProps" />
+ *  <Table :dataOptions="tableProps.dataOptions" :dataSet="tableProps.dataSet"
+      :styleOptions="tableProps.styleOptions" :filters="tableProps.filters" />
  * </template>
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
- * import Table from '@sisense/sdk-ui-vue/Table';
+ * import { measureFactory, filterFactory } from '@sisense/sdk-data';
+ * import * as DM from '../assets/sample-retail-model';
+ * import { Table, type TableProps } from '@sisense/sdk-ui-vue';
  *
- * const tableProps = ref({
- *   // Define your TableProps configuration here
- * });
+ * const dimProductName = DM.DimProducts.ProductName;
+ * const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
+ *
+ *  const tableProps = ref<TableProps>({
+      dataSet: DM.DataSource,
+      dataOptions: {
+        columns: [dimProductName, measureTotalRevenue],
+      },
+      styleOptions: {
+        width: 800,
+        height: 500,
+      },
+      filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
+ *  });
  * </script>
  * ```
- * <img src="media://table-example-2.png" width="800px" />
+ * <img src="media://vue-table-example.png" width="800px" />
  * @param props - Table properties
  * @returns Table component
+ * @group Data Grids
  */
 export declare const Table: import("vue").DefineComponent<{
     dataOptions: PropType<import("@sisense/sdk-ui-preact").TableDataOptions>;

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

@@ -17,20 +17,25 @@ import type { PropType } from 'vue';
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
- * import TreemapChart from '@sisense/sdk-ui-vue/TreemapChart';
+ * import { measureFactory, filterFactory } from '@sisense/sdk-data';
+ * import * as DM from '../assets/sample-retail-model';
+ * import {TreemapChart, type TreemapChartProps} from '@sisense/sdk-ui-vue';
  *
-const treemapChartProps = ref<TreemapChartProps>({
-  dataSet: DM.DataSource,
-  dataOptions: {
-    category: [dimProductName],
-    value: [{ column: measureTotalRevenue, sortType: 'sortDesc' }],
-  },
-  filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
-});
+ * const dimProductName = DM.DimProducts.ProductName;
+ * const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
+ * 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" />
+ * <img src="media://vue-treemap-chart-example.png" width="600px" />
  * @param props - Treemap chart properties
  * @returns Treemap Chart component
+ * @group Charts
  */
 export declare const TreemapChart: import("vue").DefineComponent<{
     dataOptions: PropType<import("@sisense/sdk-ui-preact").CategoricalChartDataOptions>;

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

@@ -30,6 +30,7 @@ import type { PropType } from 'vue';
  * @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.
+ * @group Drilldown
  */
 export declare const ContextMenu: import("vue").DefineComponent<{
     closeContextMenu: PropType<() => void>;