@sisense/sdk-ui-vue 2.16.1 → 2.17.0

package/dist/packages/sdk-ui-vue/src/components/charts/pivot-table.d.ts

@@ -15,29 +15,38 @@ export { PivotTableProps };
  * <script setup lang="ts">
  * import { ref } from 'vue';
  * import { measureFactory, filterFactory } from '@sisense/sdk-data';
- * import * as DM from '../assets/sample-retail-model';
  * import { PivotTable, type PivotTableProps } from '@sisense/sdk-ui-vue';
+ * import * as DM from '../assets/sample-retail-model';
  *
+ * const dimCategoryName = DM.DimProducts.CategoryName;
+ * const dimColor = DM.DimProducts.Color;
  * 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)],
-});
+ *
+ * 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" />
+ *
+ * @remarks
+ * Configuration options can also be applied within the scope of a `<SisenseContextProvider>` to control the default behavior of PivotTable, by changing available settings within `appConfig.chartConfig.tabular.*`
+ *
+ * Follow the link to {@link AppConfig} for more details on the available settings.
+ *
  * @group Data Grids
- * @beta
  */
 export declare const PivotTable: import("vue").DefineComponent<{
     /**

package/dist/packages/sdk-ui-vue/src/components/widgets/pivot-table-widget.d.ts

@@ -9,15 +9,45 @@ export { PivotTableWidgetProps };
  * Here's how you can use the PivotTableWidget component in a Vue application:
  * ```vue
  * <template>
- *   <PivotTableWidget :props="pivotTableWidgetProps" />
+ *   <PivotTableWidget
+ *      :dataSource="pivotTableWidgetProps.dataSource"
+ *      :filters="pivotTableWidgetProps.filters"
+ *      :dataOptions="pivotTableWidgetProps.dataOptions"
+ *      :styleOptions="pivotTableWidgetProps.styleOptions"
+ *      :title="pivotTableWidgetProps.title"
+ *   />
  * </template>
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
- * import { PivotTableWidget } from '@sisense/sdk-ui-vue';
+ * import { measureFactory } from '@sisense/sdk-data';
+ * import { PivotTableWidget, type PivotTableWidgetProps } from '@sisense/sdk-ui-vue';
+ * import * as DM from '../assets/sample-ecommerce-model';
  *
- * const pivotTableWidgetProps = ref({
- *   // Configure your PivotTableWidget here
+ * const pivotTableWidgetProps = ref<PivotTableWidgetProps>({
+ *   dataSource: DM.DataSource,
+ *   dataOptions: {
+ *     rows: [DM.Category.Category],
+ *     values: [measureFactory.sum(DM.Commerce.Cost, 'Total Cost')],
+ *   },
+ *   filters: [],
+ *   title: 'Pivot Table Widget Example',
+ *   styleOptions: {
+ *     spaceAround: 'Medium',
+ *     cornerRadius: 'Large',
+ *     shadow: 'Light',
+ *     border: true,
+ *     borderColor: '#e0e0e0',
+ *     backgroundColor: '#ffffff',
+ *     header: {
+ *       hidden: false,
+ *       titleTextColor: '#333333',
+ *       titleAlignment: 'Center',
+ *       dividerLine: true,
+ *       dividerLineColor: '#e0e0e0',
+ *       backgroundColor: '#f5f5f5',
+ *     },
+ *   },
  * });
  * </script>
  * ```
@@ -25,7 +55,6 @@ export { PivotTableWidgetProps };
  * @param props - Pivot Table Widget properties
  * @returns Widget component representing a pivot table
  * @group Dashboards
- * @beta
  */
 export declare const PivotTableWidget: import("vue").DefineComponent<{
     /**