@sisense/sdk-ui-vue 1.4.1 → 1.6.0

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

@@ -23,24 +23,29 @@ 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>;
-    dataSet: PropType<string | import("@sisense/sdk-data").Data | undefined>;
+    dataSet: PropType<import("@sisense/sdk-data").DataSource | import("@sisense/sdk-data").Data | 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>;
@@ -52,7 +57,7 @@ export declare const ScatterChart: import("vue").DefineComponent<{
     [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").ScatterChartDataOptions>;
-    dataSet: PropType<string | import("@sisense/sdk-data").Data | undefined>;
+    dataSet: PropType<import("@sisense/sdk-data").DataSource | import("@sisense/sdk-data").Data | 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>;

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

@@ -16,26 +16,31 @@ 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<{
     dataOptions: PropType<import("@sisense/sdk-ui-preact").ScattermapChartDataOptions>;
-    dataSet: PropType<string | import("@sisense/sdk-data").Data | undefined>;
+    dataSet: PropType<import("@sisense/sdk-data").DataSource | import("@sisense/sdk-data").Data | 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>;
@@ -44,7 +49,7 @@ export declare const ScattermapChart: import("vue").DefineComponent<{
     [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>;
+    dataSet: PropType<import("@sisense/sdk-data").DataSource | import("@sisense/sdk-data").Data | 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>;

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

@@ -16,21 +16,30 @@ 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>;
-    dataSet: PropType<string | import("@sisense/sdk-data").Data | undefined>;
+    dataSet: PropType<import("@sisense/sdk-data").DataSource | import("@sisense/sdk-data").Data | 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>;
@@ -42,7 +51,7 @@ export declare const SunburstChart: import("vue").DefineComponent<{
     [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").CategoricalChartDataOptions>;
-    dataSet: PropType<string | import("@sisense/sdk-data").Data | undefined>;
+    dataSet: PropType<import("@sisense/sdk-data").DataSource | import("@sisense/sdk-data").Data | 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>;

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

@@ -6,25 +6,40 @@ 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>;
-    dataSet: PropType<string | import("@sisense/sdk-data").Data | undefined>;
+    dataSet: PropType<import("@sisense/sdk-data").DataSource | import("@sisense/sdk-data").Data | 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>;
@@ -32,7 +47,7 @@ export declare const Table: import("vue").DefineComponent<{
     [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").TableDataOptions>;
-    dataSet: PropType<string | import("@sisense/sdk-data").Data | undefined>;
+    dataSet: PropType<import("@sisense/sdk-data").DataSource | import("@sisense/sdk-data").Data | 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

@@ -17,24 +17,29 @@ 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>;
-    dataSet: PropType<string | import("@sisense/sdk-data").Data | undefined>;
+    dataSet: PropType<import("@sisense/sdk-data").DataSource | import("@sisense/sdk-data").Data | 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>;
@@ -46,7 +51,7 @@ export declare const TreemapChart: import("vue").DefineComponent<{
     [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").CategoricalChartDataOptions>;
-    dataSet: PropType<string | import("@sisense/sdk-data").Data | undefined>;
+    dataSet: PropType<import("@sisense/sdk-data").DataSource | import("@sisense/sdk-data").Data | 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>;

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>;

package/dist/src/components/drilldown-breadcrumbs.d.ts

@@ -39,6 +39,7 @@ import type { PropType } from 'vue';
  * @prop {Object} currentDimension - Object representing the current dimension in the drilldown path.
  * @prop {Function} sliceDrilldownSelections - Function to slice the drilldown selections up to a certain index, allowing the user to navigate back in the drilldown path.
  * @prop {Object} filtersDisplayValues - Object mapping the internal filter values to human-readable display values, enhancing the usability of the breadcrumbs.
+ * @group Drilldown
  */
 export declare const DrilldownBreadcrumbs: import("vue").DefineComponent<{
     clearDrilldownSelections: PropType<() => void>;

package/dist/src/components/drilldown-widget.d.ts

@@ -5,6 +5,96 @@ export type DrilldownWidgetConfig = {
     breadcrumbsComponent?: Component;
     contextMenuComponent?: (props: ContextMenuProps) => Component;
 };
+/**
+ * Vue component designed to add drilldown functionality to any type of chart
+ *
+ * It acts as a wrapper around a given chart component, enhancing it with drilldown capabilities
+ *
+ * The widget offers several features including:
+ * - A context menu for initiating drilldown actions (can be provided as a custom component)
+ * - Breadcrumbs that not only allow for drilldown selection slicing but also
+ * provide an option to clear the selection (can be provided as a custom component)
+ * - Filters specifically created for drilldown operation
+ * - An option to navigate to the next drilldown dimension
+ *
+ * When an `initialDimension` is specified, the `drilldownDimension` will automatically inherit its value,
+ * even before any points on the chart are selected.
+ * This allows for complete control over the chart's dimensions to be handed over to the DrilldownWidget
+ * @example
+ * Here's how to use the `DrilldownWidget` component:
+ * ```vue
+ * <template>
+        <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>
+ * import { ref } from 'vue';
+ * import { DrilldownWidget } from '@sisense/sdk-ui-vue';
+ *
+ * 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,
+      },
+    },
+  },
+});
+ * const drilldownDimensions = [DM.DimCountries.CountryName, DM.DimProducts.ProductName];
+ * const dimProductName = DM.DimProducts.ProductName;
+ * </script>
+ * ```
+ * <img src="media://vue-drilldown-widget-example.png" width="800px" />
+ * @param props - DrilldownWidget properties
+ * @returns DrilldownWidget wrapper component
+ * @group Drilldown
+ */
 export declare const DrilldownWidgetTs: import("vue").DefineComponent<{
     config: {
         type: PropType<DrilldownWidgetConfig>;

package/dist/src/components/filters/criteria-filter-tile.d.ts

@@ -31,9 +31,10 @@ import type { PropType } from 'vue';
  * }
  * </script>
  * ```
- * <img src="media://criteria-filter-tile-example-1.png" width="300px" />
+ * <img src="media://vue-criteria-filter-tile-example.png" width="300px" />
  * @param props - Criteria filter tile props
  * @returns Criteria filter tile component
+ * @group Filter Tiles
  */
 export declare const CriteriaFilterTile: import("vue").DefineComponent<{
     arrangement: PropType<import("@sisense/sdk-ui-preact").FilterVariant | undefined>;

package/dist/src/components/filters/date-range-filter-tile.d.ts

@@ -6,32 +6,41 @@ import type { PropType } from 'vue';
  * Vue example of configuring the date min max values and handling onChange event.
  * ```vue
  * <template>
- *   <DateRangeFilterTile
- *     :title="dateRangeFilterTileProps.title"
- *     :attribute="dateRangeFilterTileProps.attribute"
- *     :filter="dateRangeFilterTileProps.filter"
- *     :onChange="onChange" />
+ *         <DateRangeFilterTile
+ *           :title="dateRangeFilter.title"
+ *           :datasource="dateRangeFilter.dataSource"
+ *           :attribute="dateRangeFilter.attribute"
+ *           :filter="dateRangeFilter.filter"
+ *           :onChange="dateRangeFilter.onChange"
+ *         />
  * </template>
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
- * import {CriteriaFilterTile} from '@sisense/sdk-ui-vue';
+ * import {CriteriaFilterTile, type DateRangeFilterTileProps} from '@sisense/sdk-ui-vue';
+ * import { filterFactory } from '@sisense/sdk-data';
+ * import * as DM from '../assets/sample-retail-model';
  *
- * const dateRangeFilterTileProps = ref({
+ * const dateRangeFilterValue = ref<Filter | null>(filterFactory.dateRange(DM.DimDate.Date.Years));
+ *
+ * const dateRangeFilter = ref<DateRangeFilterTileProps>({
  *   title: 'Date Range',
- *   attribute: DM.Commerce.Date.Years,
- *   filter: filterFactory.dateRange(DM.Commerce.Date.Years),
+ *   attribute: DM.DimDate.Date.Years,
+ *   filter: dateRangeFilterValue.value!,
+ *   onChange(filter) {
+ *     dateRangeFilterValue.value = filter;
+ *   },
  * });
- *
- * const onChange = (filter: Filter) => {
- *  ...
- * }
  * </script>
  * ```
+ * <img src="media://vue-date-range-filter-tile-example.png" width="800px" />
+ * @param props - MemberFilterTile props
+ * @returns MemberFilterTile component
+ * @group Filter Tiles
  */
 export declare const DateRangeFilterTile: import("vue").DefineComponent<{
     attribute: PropType<import("@sisense/sdk-data").LevelAttribute>;
-    datasource: PropType<string | undefined>;
+    datasource: PropType<import("@sisense/sdk-data").DataSource | undefined>;
     earliestDate: PropType<string | undefined>;
     filter: PropType<import("@sisense/sdk-data").Filter>;
     lastDate: PropType<string | undefined>;
@@ -42,7 +51,7 @@ export declare const DateRangeFilterTile: import("vue").DefineComponent<{
     [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<{
     attribute: PropType<import("@sisense/sdk-data").LevelAttribute>;
-    datasource: PropType<string | undefined>;
+    datasource: PropType<import("@sisense/sdk-data").DataSource | undefined>;
     earliestDate: PropType<string | undefined>;
     filter: PropType<import("@sisense/sdk-data").Filter>;
     lastDate: PropType<string | undefined>;

package/dist/src/components/filters/member-filter-tile.d.ts

@@ -8,32 +8,41 @@ import type { PropType } from 'vue';
  * Below is an example for filtering countries in the `Country` dimension of the `Sample ECommerce` data model.
  * ```vue
  * <template>
- * <MemberFilterTile
- *   :title="memberFilterTileProps.title"
- *   :attribute="memberFilterTileProps.attribute"
- *   :filter="memberFilterTileProps.filter"
- *   :onChange={setCountryFilter}
- * />
+ *       <MemberFilterTile
+ *         :attribute="memberFilter.attribute"
+ *         :onChange="memberFilter.onChange"
+ *         :dataSource="memberFilter.dataSource"
+ *         :title="memberFilter.title"
+ *       />
  * </template>
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
- * import MemberFilterTile from '@sisense/sdk-ui-vue/MemberFilterTile';
+ * import {MemberFilterTile, type MemberFilterTileProps} from '@sisense/sdk-ui-vue';
  *
- * const memberFilterTileProps = ref({
- *   title: 'Country',
- *   attribute: DM.Country.Country,
- *   filter: countryFilter,
+ * const memberFilterValue = ref<Filter | null>(null);
+ *
+ * const memberFilter = ref<MemberFilterTileProps>({
+ *   dataSource: DM.DataSource,
+ *   title: 'Member Filter',
+ *   attribute: DM.DimProducts.ProductName,
+ *   filter: memberFilterValue.value,
+ *   onChange(filter) {
+ *     memberFilterValue.value = filter;
+ *   },
  * });
  *
- * const setCountryFilter = (filter: Filter | null) => {...}
  *
  * </script>
  * ```
+ * <img src="media://vue-member-filter-tile-example.png" width="300px" />
+ * @param props - MemberFilterTile props
+ * @returns MemberFilterTile component
+ * @group Filter Tiles
  */
 export declare const MemberFilterTile: import("vue").DefineComponent<{
     attribute: PropType<import("@sisense/sdk-data").Attribute>;
-    dataSource: PropType<string | undefined>;
+    dataSource: PropType<import("@sisense/sdk-data").DataSource | undefined>;
     filter: PropType<import("@sisense/sdk-data").Filter | null>;
     onChange: PropType<(filter: import("@sisense/sdk-data").Filter | null) => void>;
     parentFilters: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
@@ -42,7 +51,7 @@ export declare const MemberFilterTile: import("vue").DefineComponent<{
     [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<{
     attribute: PropType<import("@sisense/sdk-data").Attribute>;
-    dataSource: PropType<string | undefined>;
+    dataSource: PropType<import("@sisense/sdk-data").DataSource | undefined>;
     filter: PropType<import("@sisense/sdk-data").Filter | null>;
     onChange: PropType<(filter: import("@sisense/sdk-data").Filter | null) => void>;
     parentFilters: PropType<import("@sisense/sdk-data").Filter[] | undefined>;

package/dist/src/components/{charts → widgets}/chart-widget.d.ts

@@ -40,8 +40,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 {ChartWidget} from '@sisense/sdk-ui-vue';
- *
+
+ * const dimProductName = DM.DimProducts.ProductName;
+ * const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
  * const chartWidgetProps = ref({
  *   // Configure your ChartWidgetProps here
  * });
@@ -50,14 +54,14 @@ import type { PropType } from 'vue';
  * <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}
-
+ * @group Chart Utilities
  */
 export declare const ChartWidget: import("vue").DefineComponent<{
     bottomSlot: PropType<import("react").ReactNode>;
     chartType: PropType<import("@sisense/sdk-ui-preact").ChartType>;
     contextMenuItems: PropType<import("@sisense/sdk-ui-preact").MenuItemSection[] | undefined>;
     dataOptions: PropType<import("@sisense/sdk-ui-preact").ChartDataOptions>;
-    dataSource: PropType<string | undefined>;
+    dataSource: PropType<import("@sisense/sdk-data").DataSource | undefined>;
     description: PropType<string | undefined>;
     drilldownOptions: PropType<import("@sisense/sdk-ui-preact").DrilldownOptions | undefined>;
     filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
@@ -79,7 +83,7 @@ export declare const ChartWidget: import("vue").DefineComponent<{
     chartType: PropType<import("@sisense/sdk-ui-preact").ChartType>;
     contextMenuItems: PropType<import("@sisense/sdk-ui-preact").MenuItemSection[] | undefined>;
     dataOptions: PropType<import("@sisense/sdk-ui-preact").ChartDataOptions>;
-    dataSource: PropType<string | undefined>;
+    dataSource: PropType<import("@sisense/sdk-data").DataSource | undefined>;
     description: PropType<string | undefined>;
     drilldownOptions: PropType<import("@sisense/sdk-ui-preact").DrilldownOptions | undefined>;
     filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;

package/dist/src/components/{charts → widgets}/dashboard-widget.d.ts

@@ -20,6 +20,7 @@ import type { PropType } from 'vue';
  *
  * </script>
  * ```
+ * @group Fusion Assets
  */
 export declare const DashboardWidget: import("vue").DefineComponent<{
     bottomSlot: PropType<import("react").ReactNode>;
@@ -28,9 +29,11 @@ export declare const DashboardWidget: import("vue").DefineComponent<{
     description: PropType<string | undefined>;
     drilldownOptions: PropType<import("@sisense/sdk-ui-preact").DrilldownOptions | undefined>;
     filters: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
+    /** {@inheritDoc ExecuteQueryByWidgetIdParams.filtersMergeStrategy} */
     filtersMergeStrategy: PropType<"widgetFirst" | "codeFirst" | "codeOnly" | undefined>;
     highlightSelectionDisabled: PropType<boolean | undefined>;
     highlights: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
+    /** {@inheritDoc ExecuteQueryByWidgetIdParams.includeDashboardFilters} */
     includeDashboardFilters: PropType<boolean | undefined>;
     onBeforeRender: PropType<import("@sisense/sdk-ui-preact").BeforeRenderHandler | undefined>;
     onContextMenuClose: PropType<(() => void) | undefined>;
@@ -51,9 +54,11 @@ export declare const DashboardWidget: import("vue").DefineComponent<{
     description: PropType<string | undefined>;
     drilldownOptions: PropType<import("@sisense/sdk-ui-preact").DrilldownOptions | undefined>;
     filters: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
+    /** {@inheritDoc ExecuteQueryByWidgetIdParams.filtersMergeStrategy} */
     filtersMergeStrategy: PropType<"widgetFirst" | "codeFirst" | "codeOnly" | undefined>;
     highlightSelectionDisabled: PropType<boolean | undefined>;
     highlights: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
+    /** {@inheritDoc ExecuteQueryByWidgetIdParams.includeDashboardFilters} */
     includeDashboardFilters: PropType<boolean | undefined>;
     onBeforeRender: PropType<import("@sisense/sdk-ui-preact").BeforeRenderHandler | undefined>;
     onContextMenuClose: PropType<(() => void) | undefined>;

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

@@ -0,0 +1,3 @@
+export { ChartWidget } from './chart-widget';
+export { DashboardWidget } from './dashboard-widget';
+export { TableWidget } from './table-widget';

package/dist/src/components/{charts → widgets}/table-widget.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { type Prop } from 'vue';
 /**
- * The TableWidget component extending the {@link Table} component to support widget style options.
+ * The TableWidget component extending the Table component to support widget style options.
  *
  * @example
  * Here's how you can use the TableWidget component in a Vue application:
@@ -19,6 +19,7 @@ import { type Prop } from 'vue';
  * });
  * </script>
  * ```
+ * <img src="media://vue-table-widget-example.png" width="600px" />
  * @param props - Table Widget properties
  * @returns Widget component representing a table
  * @internal
@@ -26,7 +27,7 @@ import { type Prop } from 'vue';
 export declare const TableWidget: import("vue").DefineComponent<{
     bottomSlot: Prop<import("react").ReactNode>;
     dataOptions: Prop<import("@sisense/sdk-ui-preact").TableDataOptions>;
-    dataSource: Prop<string | undefined>;
+    dataSource: Prop<import("@sisense/sdk-data").DataSource | undefined>;
     description: Prop<string | undefined>;
     filters: Prop<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
     styleOptions: Prop<import("@sisense/sdk-ui-preact").TableWidgetStyleOptions | undefined>;
@@ -38,7 +39,7 @@ export declare const TableWidget: 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<{
     bottomSlot: Prop<import("react").ReactNode>;
     dataOptions: Prop<import("@sisense/sdk-ui-preact").TableDataOptions>;
-    dataSource: Prop<string | undefined>;
+    dataSource: Prop<import("@sisense/sdk-data").DataSource | undefined>;
     description: Prop<string | undefined>;
     filters: Prop<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
     styleOptions: Prop<import("@sisense/sdk-ui-preact").TableWidgetStyleOptions | undefined>;