@sisense/sdk-ui-vue 2.35.0 → 2.36.0

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

@@ -5,41 +5,274 @@ export { PivotTableProps };
  * A Vue component for Pivot table with pagination.
  *
  * @example
- * Here's how you can use the PivotTable component in a Vue application:
  * ```vue
+ * <script setup lang="ts">
+ * import { ref } from 'vue';
+ * import { PivotTable } from '@sisense/sdk-ui-vue';
+ * import * as DM from './sample-ecommerce';
+ * import { measureFactory } from '@sisense/sdk-data';
+ *
+ * const pivotTableProps = ref({
+ *   dataOptions: {
+ *     rows: [
+ *       {
+ *         column: DM.Commerce.Date.Years,
+ *         dateFormat: 'yyyy',
+ *         name: 'Year',
+ *       },
+ *       DM.Commerce.Condition,
+ *     ],
+ *     columns: [DM.Commerce.AgeRange],
+ *     values: [measureFactory.sum(DM.Commerce.Revenue, 'Total Revenue')],
+ *   },
+ *   styleOptions: {
+ *     rowsPerPage: 10,
+ *     height: 425,
+ *     width: 800,
+ *   },
+ * });
+ * </script>
+ *
  * <template>
-    <PivotTable :dataOptions="pivotTableProps.dataOptions" :dataSet="pivotTableProps.dataSet"
-        :styleOptions="pivotTableProps.styleOptions" :filters="pivotTableProps.filters" />
+ *   <PivotTable
+ *     :dataSet="DM.DataSource"
+ *     :dataOptions="pivotTableProps.dataOptions"
+ *     :styleOptions="pivotTableProps.styleOptions"
+ *   />
  * </template>
+ * ```
+ *
+ * <img src="media://pivot-table-example-1.png" width="800px" />
+ *
+ * Additional examples:
  *
+ * Highlighting relative magnitude within a column with data bars:
+ * ```vue
  * <script setup lang="ts">
  * import { ref } from 'vue';
- * import { measureFactory, filterFactory } from '@sisense/sdk-data';
- * import { PivotTable, type PivotTableProps } from '@sisense/sdk-ui-vue';
- * import * as DM from '../assets/sample-retail-model';
+ * import { PivotTable } from '@sisense/sdk-ui-vue';
+ * import * as DM from './sample-ecommerce';
+ * import { measureFactory } from '@sisense/sdk-data';
+ *
+ * const pivotTableProps = ref({
+ *   dataOptions: {
+ *     rows: [DM.Commerce.Condition, DM.Commerce.AgeRange],
+ *     columns: [
+ *       {
+ *         column: DM.Commerce.Date.Years,
+ *         dateFormat: 'yyyy',
+ *         name: 'Year',
+ *       },
+ *     ],
+ *     values: [
+ *       {
+ *         column: measureFactory.sum(DM.Commerce.Revenue, 'Total Revenue'),
+ *         dataBars: true,
+ *       },
+ *     ],
+ *   },
+ *   styleOptions: {
+ *     rowsPerPage: 10,
+ *     height: 425,
+ *     width: 850,
+ *   },
+ * });
+ * </script>
+ *
+ * <template>
+ *   <PivotTable
+ *     :dataSet="DM.DataSource"
+ *     :dataOptions="pivotTableProps.dataOptions"
+ *     :styleOptions="pivotTableProps.styleOptions"
+ *   />
+ * </template>
+ * ```
  *
- * 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');
+ * <img src="media://pivot-table-example-2.png" width="800px" />
  *
- * const pivotTableProps = ref<PivotTableProps>({
- *   dataSet: DM.DataSource,
+ * Sorting rows: `Condition` and `Age Range` rows sorted directly by their own values (equivalent to a user clicking a row heading and choosing Sort Descending):
+ * ```vue
+ * <script setup lang="ts">
+ * import { ref } from 'vue';
+ * import { PivotTable } from '@sisense/sdk-ui-vue';
+ * import * as DM from './sample-ecommerce';
+ * import { measureFactory } from '@sisense/sdk-data';
+ *
+ * const pivotTableProps = ref({
  *   dataOptions: {
- *     rows: [dimProductName, dimColor],
- *     columns: [dimCategoryName],
- *     values: [measureTotalRevenue],
+ *     rows: [
+ *       {
+ *         column: DM.Commerce.Condition,
+ *         sortType: 'sortDesc',
+ *       },
+ *       {
+ *         column: DM.Commerce.AgeRange,
+ *         sortType: 'sortDesc',
+ *       },
+ *     ],
+ *     columns: [{ column: DM.Commerce.Date.Years }],
+ *     values: [
+ *       { column: measureFactory.sum(DM.Commerce.Revenue, 'Revenue') },
+ *       { column: measureFactory.sum(DM.Commerce.Quantity, 'Units') },
+ *     ],
  *   },
  *   styleOptions: {
+ *     rowsPerPage: 12,
+ *     height: 425,
  *     width: 1200,
- *     height: 500,
  *   },
- *   filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 1000)],
  * });
+ * </script>
+ *
+ * <template>
+ *   <PivotTable
+ *     :dataSet="DM.DataSource"
+ *     :dataOptions="pivotTableProps.dataOptions"
+ *     :styleOptions="pivotTableProps.styleOptions"
+ *   />
+ * </template>
+ * ```
+ *
+ * <img src="media://pivot-table-example-3.png" width="800px" />
+ *
+ * Sorting rows by a value column: `Age Range` sorted by its `Revenue` values (equivalent to a user clicking the `Revenue` value heading and sorting `Age Range` Descending):
+ * ```vue
+ * <script setup lang="ts">
+ * import { ref } from 'vue';
+ * import { PivotTable } from '@sisense/sdk-ui-vue';
+ * import * as DM from './sample-ecommerce';
+ * import { measureFactory } from '@sisense/sdk-data';
+ *
+ * const pivotTableProps = ref({
+ *   dataOptions: {
+ *     rows: [
+ *       DM.Commerce.Condition,
+ *       {
+ *         column: DM.Commerce.AgeRange,
+ *         sortType: {
+ *           direction: 'sortDesc',
+ *           by: {
+ *             valuesIndex: 0,
+ *           },
+ *         },
+ *       },
+ *     ],
+ *     values: [
+ *       measureFactory.sum(DM.Commerce.Revenue, 'Revenue'),
+ *       measureFactory.sum(DM.Commerce.Quantity, 'Units'),
+ *     ],
+ *   },
+ *   styleOptions: {
+ *     rowsPerPage: 12,
+ *     height: 425,
+ *     width: 800,
+ *   },
+ * });
+ * </script>
+ *
+ * <template>
+ *   <PivotTable
+ *     :dataSet="DM.DataSource"
+ *     :dataOptions="pivotTableProps.dataOptions"
+ *     :styleOptions="pivotTableProps.styleOptions"
+ *   />
+ * </template>
+ * ```
+ *
+ * <img src="media://pivot-table-example-4.png" width="800px" />
+ *
+ * Grand totals across rows and columns:
+ * ```vue
+ * <script setup lang="ts">
+ * import { ref } from 'vue';
+ * import { PivotTable } from '@sisense/sdk-ui-vue';
+ * import * as DM from './sample-ecommerce';
+ * import { measureFactory } from '@sisense/sdk-data';
+ *
+ * const pivotTableProps = ref({
+ *   dataOptions: {
+ *     rows: [
+ *       {
+ *         column: DM.Commerce.Date.Years,
+ *         dateFormat: 'yyyy',
+ *         name: 'Year',
+ *       },
+ *       DM.Commerce.Condition,
+ *     ],
+ *     columns: [DM.Commerce.AgeRange],
+ *     values: [measureFactory.sum(DM.Commerce.Revenue, 'Total Revenue')],
+ *     grandTotals: {
+ *       rows: true,
+ *       columns: true,
+ *     },
+ *   },
+ *   styleOptions: {
+ *     rowsPerPage: 15,
+ *     height: 550,
+ *     width: 900,
+ *     totalsColor: true,
+ *     headersColor: true,
+ *   },
+ * });
+ * </script>
+ *
+ * <template>
+ *   <PivotTable
+ *     :dataSet="DM.DataSource"
+ *     :dataOptions="pivotTableProps.dataOptions"
+ *     :styleOptions="pivotTableProps.styleOptions"
+ *   />
+ * </template>
+ * ```
+ *
+ * <img src="media://pivot-table-example-5.png" width="800px" />
+ *
+ * Grand totals plus a subtotal row per `Year`, via {@link PivotTableDataOptions.rows}' `includeSubTotals`:
+ * ```vue
+ * <script setup lang="ts">
+ * import { ref } from 'vue';
+ * import { PivotTable } from '@sisense/sdk-ui-vue';
+ * import * as DM from './sample-ecommerce';
+ * import { measureFactory } from '@sisense/sdk-data';
  *
+ * const pivotTableProps = ref({
+ *   dataOptions: {
+ *     rows: [
+ *       {
+ *         column: DM.Commerce.Date.Years,
+ *         dateFormat: 'yyyy',
+ *         name: 'Year',
+ *         includeSubTotals: true,
+ *       },
+ *       DM.Commerce.Condition,
+ *     ],
+ *     columns: [DM.Commerce.AgeRange],
+ *     values: [measureFactory.sum(DM.Commerce.Revenue, 'Total Revenue')],
+ *     grandTotals: {
+ *       rows: true,
+ *       columns: true,
+ *     },
+ *   },
+ *   styleOptions: {
+ *     rowsPerPage: 15,
+ *     height: 550,
+ *     width: 900,
+ *     totalsColor: true,
+ *     headersColor: true,
+ *   },
+ * });
  * </script>
+ *
+ * <template>
+ *   <PivotTable
+ *     :dataSet="DM.DataSource"
+ *     :dataOptions="pivotTableProps.dataOptions"
+ *     :styleOptions="pivotTableProps.styleOptions"
+ *   />
+ * </template>
  * ```
- * <img src="media://vue-pivot-table-example.png" width="800px" />
+ *
+ * <img src="media://pivot-table-example-6.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.*`

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

@@ -9,35 +9,27 @@ export interface PolarChartProps extends PolarChartPropsPreact {
  * A Vue component comparing multiple categories/variables with a spacial perspective in a radial chart.
  *
  * @example
- * Here's how you can use the PolarChart component in a Vue application:
  * ```vue
- * <template>
-      <PolarChart
-        :dataOptions="polarChartProps.dataOptions"
-        :dataSet="polarChartProps.dataSet"
-        :filters="polarChartProps.filters"
-      />
- * </template>
- *
  * <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';
+ * import { PolarChart } from '@sisense/sdk-ui-vue';
+ * import { measureFactory } from '@sisense/sdk-data';
+ * import * as DM from './sample-ecommerce';
  *
- * 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)],
-  });
+ * const chartProps = ref({
+ *   dataOptions: {
+ *     category: [DM.Commerce.AgeRange],
+ *     value: [measureFactory.sum(DM.Commerce.Revenue, 'Total Revenue')],
+ *     breakBy: [],
+ *   },
+ * });
+ * </script>
+ *
+ * <template>
+ *   <PolarChart :dataSet="DM.DataSource" :dataOptions="chartProps.dataOptions" />
+ * </template>
  * ```
- * <img src="media://vue-polar-chart-example.png" width="600px" />
+ * <img src="media://polar-chart-example-1.png" width="700px" />
  * @param props - Polar chart properties
  * @returns Polar Chart component
  * @group Charts

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

@@ -12,27 +12,17 @@ export interface SankeyChartProps extends SankeyChartPropsPreact {
  * between two connected nodes.
  *
  * @example
- * Here's how you can use the SankeyChart component in a Vue application:
  * ```vue
- * <template>
- * <SankeyChart
- *      :dataOptions="sankeyChartProps.dataOptions"
- *      :dataSet="sankeyChartProps.dataSet"
- *      :styleOptions="sankeyChartProps.styleOptions"
- *    />
- * </template>
- *
  * <script setup lang="ts">
  * import { ref } from 'vue';
+ * import { SankeyChart } from '@sisense/sdk-ui-vue';
+ * import * as DM from './sample-ecommerce';
  * import { measureFactory } from '@sisense/sdk-data';
- * import * as DM from '../assets/sample-ecommerce';
- * import { SankeyChart, type SankeyChartProps } from '@sisense/sdk-ui-vue';
  *
- * const sankeyChartProps = ref<SankeyChartProps>({
- *   dataSet: DM.DataSource,
+ * const chartProps = ref({
  *   dataOptions: {
  *     category: [DM.Commerce.Gender, DM.Commerce.AgeRange],
- *     value: measureFactory.sum(DM.Commerce.Revenue, 'Revenue'),
+ *     value: measureFactory.sum(DM.Commerce.Revenue),
  *   },
  *   styleOptions: {
  *     orientation: 'horizontal',
@@ -40,7 +30,16 @@ export interface SankeyChartProps extends SankeyChartPropsPreact {
  *   },
  * });
  * </script>
+ *
+ * <template>
+ *   <SankeyChart
+ *     :dataSet="DM.DataSource"
+ *     :dataOptions="chartProps.dataOptions"
+ *     :styleOptions="chartProps.styleOptions"
+ *   />
+ * </template>
  * ```
+ * <img src="media://sankey-chart-example-1.png" width="700px" />
  * @param {SankeyChartProps} - Sankey chart properties
  * @returns Sankey Chart component
  * @group Charts

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

@@ -15,34 +15,34 @@ export interface ScatterChartProps extends ScatterChartPropsPreact {
  * If omitted, all scatter points are equal in size. If used, the circle sizes are relative to their values.
  *
  * @example
- * Here's how you can use the ScatterChart component in a Vue application:
  * ```vue
- * <template>
-      <ScatterChart
-        :dataOptions="scatterChartProps.dataOptions"
-        :dataSet="scatterChartProps.dataSet"
-        :filters="scatterChartProps.filters"
-      />
- * </template>
- *
  * <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';
+ * import { ScatterChart } from '@sisense/sdk-ui-vue';
+ * import { measureFactory } from '@sisense/sdk-data';
+ * import * as DM from './sample-ecommerce';
  *
- * 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)],
-  });
+ * const chartProps = ref({
+ *   dataOptions: {
+ *     x: DM.Category.CategoryID,
+ *     y: measureFactory.sum(DM.Commerce.Revenue),
+ *     breakByColor: DM.Commerce.Gender,
+ *   },
+ *   styleOptions: {
+ *     yAxis: { enabled: true, logarithmic: true, title: { enabled: true, text: 'Total Revenue' } },
+ *   },
+ * });
+ * </script>
+ *
+ * <template>
+ *   <ScatterChart
+ *     :dataSet="DM.DataSource"
+ *     :dataOptions="chartProps.dataOptions"
+ *     :styleOptions="chartProps.styleOptions"
+ *   />
+ * </template>
  * ```
- * <img src="media://vue-scatter-chart-example.png" width="800px" />
+ * <img src="media://scatter-chart-example-1.png" width="700px" />
  * @param props - Scatter chart properties
  * @returns Scatter Chart component
  * @group Charts

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

@@ -10,35 +10,31 @@ export interface ScattermapChartProps extends ScattermapChartPropsPreact {
  * It maintains compatibility with Vue's reactivity system while preserving the functionality of the ScattermapChart.
  *
  * @example
- * Here's how you can use the ScattermapChart component in a Vue application:
  * ```vue
- * <template>
-      <ScattermapChart
-        :dataOptions="scattermapChartProps.dataOptions"
-        :dataSet="scattermapChartProps.dataSet"
-        :filters="scattermapChartProps.filters"
-      />
- * </template>
- *
  * <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';
+ * import { ScattermapChart, type ScattermapChartDataOptions } from '@sisense/sdk-ui-vue';
+ * import { measureFactory } from '@sisense/sdk-data';
+ * import * as DM from './sample-ecommerce';
  *
- * 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)],
-  });
+ * const chartProps = ref<{ dataOptions: ScattermapChartDataOptions }>({
+ *   dataOptions: {
+ *     geo: [DM.Country.Country],
+ *     size: measureFactory.sum(DM.Commerce.Cost, 'Size by Cost'),
+ *     colorBy: {
+ *       column: measureFactory.rank(measureFactory.sum(DM.Commerce.Revenue, 'Color by Revenue Rank')),
+ *       color: { type: 'range', steps: 7, minColor: '#cf9270', maxColor: '#3900b3' },
+ *     },
+ *     details: DM.Brand.Brand,
+ *   },
+ * });
  * </script>
+ *
+ * <template>
+ *   <ScattermapChart :dataSet="DM.DataSource" :dataOptions="chartProps.dataOptions" />
+ * </template>
  * ```
- * <img src="media://vue-scattermap-chart-example.png" width="600px" />
+ * <img src="media://scattermap-chart-example-1.png" width="700px" />
  * @param props - Scattermap chart properties
  * @returns Scattermap Chart component
  * @group Charts

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

@@ -14,37 +14,71 @@ export interface StreamgraphChartProps extends StreamgraphChartPropsPreact {
  * overall patterns and trends.
  *
  * @example
- * Here's how you can use the StreamgraphChart component in a Vue application:
  * ```vue
+ * <script setup lang="ts">
+ * import { ref } from 'vue';
+ * import { StreamgraphChart } from '@sisense/sdk-ui-vue';
+ * import * as DM from './sample-ecommerce';
+ * import { measureFactory } from '@sisense/sdk-data';
+ *
+ * const chartProps = ref({
+ *   dataOptions: {
+ *     category: [DM.Commerce.Date.Quarters],
+ *     value: [measureFactory.sum(DM.Commerce.Revenue, 'Total Revenue')],
+ *     breakBy: [DM.Commerce.Condition],
+ *   },
+ * });
+ * </script>
+ *
  * <template>
- * <StreamgraphChart
- *      :dataOptions="streamgraphChartProps.dataOptions"
- *      :dataSet="streamgraphChartProps.dataSet"
- *      :filters="streamgraphChartProps.filters"
- *      :styleOptions="streamgraphChartProps.styleOptions"
- *    />
+ *   <StreamgraphChart
+ *     :dataSet="DM.DataSource"
+ *     :dataOptions="chartProps.dataOptions"
+ *   />
  * </template>
+ * ```
+ * <img src="media://streamgraph-chart-example-1.png" width="700px" />
  *
+ * Additional examples:
+ *
+ * Styled with a visible y-axis, thinned-out x-axis labels, and a legend:
+ * ```vue
  * <script setup lang="ts">
  * import { ref } from 'vue';
- * import { measureFactory, filterFactory } from '@sisense/sdk-data';
- * import * as DM from '../assets/sample-ecommerce';
- * import { StreamgraphChart, type StreamgraphChartProps } from '@sisense/sdk-ui-vue';
+ * import { StreamgraphChart } from '@sisense/sdk-ui-vue';
+ * import * as DM from './sample-ecommerce';
+ * import { measureFactory } from '@sisense/sdk-data';
  *
- * const streamgraphChartProps = ref<StreamgraphChartProps>({
- *   dataSet: DM.DataSource,
+ * const chartProps = ref({
  *   dataOptions: {
  *     category: [DM.Commerce.Date.Quarters],
- *     value: [measureFactory.sum(DM.Commerce.Revenue, 'Revenue')],
- *     breakBy: [DM.Category.Category],
+ *     value: [measureFactory.sum(DM.Commerce.Revenue, 'Total Revenue')],
+ *     breakBy: [DM.Commerce.Condition],
  *   },
- *   filters: [filterFactory.members(DM.Category.Category, ['Electronics', 'Clothing'])],
  *   styleOptions: {
- *     width: 1200,
- *     height: 500,
+ *     yAxis: {
+ *       enabled: true,
+ *       labels: { enabled: true },
+ *       gridLines: false,
+ *     },
+ *     xAxis: {
+ *       intervalJumps: 4,
+ *       isIntervalEnabled: true,
+ *     },
+ *     legend: { enabled: true },
  *   },
  * });
+ * </script>
+ *
+ * <template>
+ *   <StreamgraphChart
+ *     :dataSet="DM.DataSource"
+ *     :dataOptions="chartProps.dataOptions"
+ *     :styleOptions="chartProps.styleOptions"
+ *   />
+ * </template>
  * ```
+ * <img src="media://streamgraph-chart-example-2.png" width="700px" />
  * @param {StreamgraphChartProps} - Streamgraph chart properties
  * @returns Streamgraph Chart component
  * @group Charts

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

@@ -10,34 +10,26 @@ export interface SunburstChartProps extends SunburstChartPropsPreact {
  * It maintains compatibility with Vue's reactivity system while preserving the functionality of the SunburstChart.
  *
  * @example
- * Here's how you can use the SunburstChart component in a Vue application:
  * ```vue
- * <template>
-    <SunburstChart
-      :dataOptions="sunburstChartProps.dataOptions"
-      :dataSet="sunburstChartProps.dataSet"
-      :filters="sunburstChartProps.filters"
-    />
- * </template>
- *
  * <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';
+ * import { SunburstChart } from '@sisense/sdk-ui-vue';
+ * import { measureFactory } from '@sisense/sdk-data';
+ * import * as DM from './sample-ecommerce';
  *
- * 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)],
-  });
+ * const chartProps = ref({
+ *   dataOptions: {
+ *     category: [DM.Commerce.Condition, DM.Commerce.AgeRange],
+ *     value: [measureFactory.sum(DM.Commerce.Quantity, 'Total Quantity')],
+ *   },
+ * });
+ * </script>
+ *
+ * <template>
+ *   <SunburstChart :dataSet="DM.DataSource" :dataOptions="chartProps.dataOptions" />
+ * </template>
  * ```
- * <img src="media://vue-sunburst-chart-example.png" width="600px" />
+ * <img src="media://sunburst-chart-example-1.png" width="700px" />
  * @param props - Sunburst Chart properties
  * @returns Sunburst Chart component
  * @group Charts