@sisense/sdk-ui-vue 1.3.0 → 1.4.0

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

@@ -1,24 +1,37 @@
 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>;

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

@@ -1,24 +1,36 @@
 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>;

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<{
     /**

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

@@ -1,24 +1,38 @@
 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>;

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>;
@@ -34,7 +65,7 @@ export declare const ChartWidget: import("vue").DefineComponent<{
     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").AreamapDataPointEventHandler | import("@sisense/sdk-ui-preact").BoxplotDataPointEventHandler | 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>;
@@ -56,7 +87,7 @@ export declare const ChartWidget: import("vue").DefineComponent<{
     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").AreamapDataPointEventHandler | import("@sisense/sdk-ui-preact").BoxplotDataPointEventHandler | 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>;

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,33 +24,22 @@ 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<{
@@ -60,7 +49,7 @@ export declare const Chart: import("vue").DefineComponent<{
     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").AreamapDataPointEventHandler | import("@sisense/sdk-ui-preact").BoxplotDataPointEventHandler | 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>;
@@ -74,7 +63,7 @@ export declare const Chart: import("vue").DefineComponent<{
     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").AreamapDataPointEventHandler | import("@sisense/sdk-ui-preact").BoxplotDataPointEventHandler | 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>;

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

@@ -1,24 +1,37 @@
 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>;

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,7 +34,7 @@ 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").AreamapDataPointEventHandler | import("@sisense/sdk-ui-preact").BoxplotDataPointEventHandler | 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>;
@@ -57,7 +57,7 @@ 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").AreamapDataPointEventHandler | import("@sisense/sdk-ui-preact").BoxplotDataPointEventHandler | 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>;

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

@@ -7,18 +7,32 @@ 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>;

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,24 +1,35 @@
 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>;

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

@@ -7,18 +7,30 @@ 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>;

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

@@ -1,24 +1,36 @@
 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>;