@sisense/sdk-ui-vue 2.34.0 → 2.36.0

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

@@ -9,36 +9,34 @@ export interface AreamapChartProps extends AreamapChartPropsPreact {
  * A Vue component for visualizing geographical data as polygons on a map.
  *
  * @example
- * Here's how you can use the AreamapChart component in a Vue application:
  * ```vue
- * <template>
-    <AreamapChart
-      :dataOptions="areamapChartProps.dataOptions"
-      :dataSet="areamapChartProps.dataSet"
-      :filters="areamapChartProps.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 { 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: {
-      geo: [DM.DimCountries.CountryName],
-      color: [{ column: measureTotalRevenue, title: 'Total Revenue' }],
-    },
-    filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
-  });
+ * import { AreamapChart, type AreamapChartDataOptions, type AreamapStyleOptions } from '@sisense/sdk-ui-vue';
+ * import { measureFactory } from '@sisense/sdk-data';
+ * import * as DM from './sample-ecommerce';
+ *
+ * const chartProps = ref<{
+ *   dataOptions: AreamapChartDataOptions;
+ *   styleOptions: AreamapStyleOptions;
+ * }>({
+ *   dataOptions: {
+ *     geo: [DM.Country.Country],
+ *     color: [measureFactory.sum(DM.Commerce.Revenue, 'Total Revenue')],
+ *   },
+ *   styleOptions: { mapType: 'world' },
+ * });
  * </script>
+ *
+ * <template>
+ *   <AreamapChart
+ *     :dataSet="DM.DataSource"
+ *     :dataOptions="chartProps.dataOptions"
+ *     :styleOptions="chartProps.styleOptions"
+ *   />
+ * </template>
  * ```
- * <img src="media://vue-areamap-chart-example.png" width="600px" />
+ * <img src="media://areamap-chart-example-1.png" width="700px" />
  * @param props - Areamap chart properties
  * @returns Areamap Chart component
  * @group Charts

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

@@ -10,36 +10,27 @@ export interface BarChartProps extends BarChartPropsPreact {
  * whose lengths are proportional to the values that they represent.
  *
  * @example
- * Here's how you can use the BarChart component in a Vue application:
  * ```vue
- * <template>
-    <BarChart
-      :dataOptions="barChartProps.dataOptions"
-      :dataSet="barChartProps.dataSet"
-      :filters="barChartProps.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 { 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: {
-      category: [dimProductName],
-      value: [{ column: measureTotalRevenue, sortType: 'sortDesc' }],
-      breakBy: [],
-    },
-    filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
-  });
+ * import { BarChart } from '@sisense/sdk-ui-vue';
+ * import { measureFactory } from '@sisense/sdk-data';
+ * import * as DM from './sample-ecommerce';
+ *
+ * const chartProps = ref({
+ *   dataOptions: {
+ *     category: [DM.Commerce.Date.Years],
+ *     value: [measureFactory.sum(DM.Commerce.Revenue, 'Total Revenue')],
+ *     breakBy: [DM.Commerce.Condition],
+ *   },
+ * });
  * </script>
+ *
+ * <template>
+ *   <BarChart :dataSet="DM.DataSource" :dataOptions="chartProps.dataOptions" />
+ * </template>
  * ```
- * <img src="media://vue-bar-chart-example.png" width="800"/>
+ * <img src="media://bar-chart-example-1.png" width="700px" />
  * @param props - Bar chart properties
  * @returns Bar Chart component
  * @group Charts

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

@@ -10,36 +10,32 @@ export interface BoxplotChartProps extends BoxplotChartPropsPreact {
  * and center of a data set along an axis.
  *
  * @example
- * Here's how you can use the BoxplotChart component in a Vue application:
  * ```vue
- * <template>
-    <BoxplotChart
-        :dataOptions="boxplotChartProps.dataOptions"
-        :dataSet="boxplotChartProps.dataSet"
-        :filters="boxplotChartProps.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 { BoxplotChart, type BoxplotChartProps } from '@sisense/sdk-ui-vue';
-
- * 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],
-      value: [DM.Fact_Sale_orders.OrderRevenue],
-      boxType: 'iqr',
-      outliersEnabled: true,
-    },
-    filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
-  });
+ * import { BoxplotChart, type BoxplotChartDataOptions } from '@sisense/sdk-ui-vue';
+ * import * as DM from './sample-ecommerce';
+ *
+ * const chartProps = ref({
+ *   dataOptions: {
+ *     category: [DM.Commerce.Condition],
+ *     value: [{ column: DM.Commerce.Cost, name: 'Total Cost' }],
+ *     boxType: 'iqr',
+ *     outliersEnabled: true,
+ *   } as BoxplotChartDataOptions,
+ *   styleOptions: { subtype: 'boxplot/full' },
+ * });
+ * </script>
+ *
+ * <template>
+ *   <BoxplotChart
+ *     :dataSet="DM.DataSource"
+ *     :dataOptions="chartProps.dataOptions"
+ *     :styleOptions="chartProps.styleOptions"
+ *   />
+ * </template>
  * ```
- * <img src="media://vue-boxplot-chart-example.png" width="600px" />
+ * <img src="media://boxplot-chart-example-1.png" width="700px" />
  * @param props - Boxplot chart properties
  * @returns Boxplot Chart component
  * @group Charts

package/dist/src/components/charts/calendar-heatmap-chart.d.ts

@@ -10,37 +10,31 @@ export interface CalendarHeatmapChartProps extends CalendarHeatmapChartPropsPrea
  * making it easy to identify daily patterns or anomalies
  *
  * @example
- * Here's how you can use the CalendarHeatmapChart component in a Vue application:
  * ```vue
- * <template>
- * <CalendarHeatmapChart
-      :dataOptions="calendarChartProps.dataOptions"
-      :dataSet="calendarChartProps.dataSet"
-      :filters="calendarChartProps.filters"
-      :styleOptions="calendarChartProps.styleOptions"
-    />
- * </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 { CalendarHeatmapChart, type CalendarHeatmapChartProps } from '@sisense/sdk-ui-vue';
+ * import { CalendarHeatmapChart } from '@sisense/sdk-ui-vue';
+ * import { measureFactory } from '@sisense/sdk-data';
+ * import * as DM from './sample-ecommerce';
  *
- * const calendarChartProps = ref<CalendarHeatmapChartProps>({
- *   dataSet: DM.DataSource,
+ * const chartProps = ref({
  *   dataOptions: {
- *     date: DM.DimDate.Date.Days,
- *     value: measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue'),
- *   },
- *   styleOptions: {
- *     viewType: 'quarter',
+ *     date: DM.Commerce.Date.Days,
+ *     value: { column: measureFactory.sum(DM.Commerce.Quantity, 'Total Quantity') },
  *   },
- *   filters: [],
+ *   styleOptions: { viewType: 'quarter' as const },
  * });
  * </script>
+ *
+ * <template>
+ *   <CalendarHeatmapChart
+ *     :dataSet="DM.DataSource"
+ *     :dataOptions="chartProps.dataOptions"
+ *     :styleOptions="chartProps.styleOptions"
+ *   />
+ * </template>
  * ```
- * <img src="media://vue-calendar-heatmap-chart-example.png" width="800"/>
+ * <img src="media://calendar-heatmap-chart-example-1.png" width="700px" />
  * @param {CalendarHeatmapChartProps} - Calendar heatmap chart properties
  * @returns Calendar Heatmap Chart component
  * @group Charts

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

@@ -5,57 +5,28 @@ export { ChartProps };
  * A Vue component used for easily switching chart types or rendering multiple series of different chart types.
  *
  * @example
- * An example of using the `Chart` component to
- * plot a bar chart of the Sample Retail data source hosted in a Sisense instance:
- * ```tsx
+ * ```vue
  * <script setup lang="ts">
- * import { Chart } from '@sisense/sdk-ui-vue';
- * 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';
+ * import { Chart, ChartDataOptions, ChartType } 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 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 chartProps = ref({
+ *   chartType: 'column' as ChartType,
+ *   dataOptions: {
+ *     category: [DM.Commerce.Date.Quarters],
+ *     value: [measureFactory.sum(DM.Commerce.Revenue, 'Total Revenue')],
+ *     breakBy: [],
+ *   } as ChartDataOptions,
+ * });
  * </script>
  *
  * <template>
-     <Chart
-       :chartType="chartProps.chartType"
-       :dataSet="chartProps.dataSet"
-       :dataOptions="chartProps.dataOptions"
-       :filters="chartProps.filters"
-       :styleOptions="chartProps.styleOptions"
-     />
+ *   <Chart :chartType="chartProps.chartType" :dataSet="DM.DataSource" :dataOptions="chartProps.dataOptions" />
  * </template>
  * ```
- *
- * <img src="media://vue-chart-example.png" width="800px" />
+ * <img src="media://chart-example-1.png" width="700px" />
  * @shortDescription Common component for rendering charts of different types including table
  * @param props - Chart properties
  * @returns Chart component representing a chart type as specified in `ChartProps.`{@link ChartProps.chartType | chartType}

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

@@ -10,36 +10,27 @@ export interface ColumnChartProps extends ColumnChartPropsPreact {
  * whose heights are proportional to the values that they represent.
  *
  * @example
- * Here's how you can use the ColumnChart component in a Vue application:
  * ```vue
- * <template>
-      <ColumnChart
-        :dataOptions="columnChartProps.dataOptions"
-        :dataSet="columnChartProps.dataSet"
-        :filters="columnChartProps.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 { ColumnChart, type ColumnChartProps } from '@sisense/sdk-ui-vue';
+ * import { ColumnChart } 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 columnChartProps = ref<ColumnChartProps>({
-  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.Date.Years],
+ *     value: [measureFactory.sum(DM.Commerce.Revenue, 'Total Revenue')],
+ *     breakBy: [DM.Commerce.Condition],
+ *   },
+ * });
+ * </script>
+ *
+ * <template>
+ *   <ColumnChart :dataSet="DM.DataSource" :dataOptions="chartProps.dataOptions" />
+ * </template>
  * ```
- * <img src="media://vue-column-chart-example.png" width="800"/>
+ * <img src="media://column-chart-example-1.png" width="700px" />
  * @param props - Column chart properties
  * @returns Column Chart component
  * @group Charts

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

@@ -10,38 +10,35 @@ export interface FunnelChartProps extends FunnelChartPropsPreact {
  * It maintains compatibility with Vue's reactivity system while preserving the functionality of the FunnelChart.
  *
  * @example
- * Here's how you can use the FunnelChart component in a Vue application:
  * ```vue
- * <template>
-    <FunnelChart
-      :dataOptions="funnelChartProps.dataOptions"
-      :dataSet="funnelChartProps.dataSet"
-      :filters="funnelChartProps.filters"
-    />
- * </template>
- *
  * <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 dimProductName = DM.DimProducts.ProductName;
- * const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
+ * import { FunnelChart, FunnelStyleOptions } from '@sisense/sdk-ui-vue';
+ * import { measureFactory } from '@sisense/sdk-data';
+ * import * as DM from './sample-ecommerce';
  *
- * const funnelChartProps = ref<FunnelChartProps>({
-  dataSet: DM.DataSource,
-  dataOptions: {
-    category: [dimProductName],
-    value: [{ column: measureTotalRevenue, sortType: 'sortDesc' }],
-  },
-  filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
-});
+ * const chartProps = ref({
+ *   dataOptions: {
+ *     category: [DM.Commerce.AgeRange],
+ *     value: [measureFactory.sum(DM.Commerce.Revenue, 'Total Revenue')],
+ *   },
+ *   styleOptions: {
+ *     funnelType: 'regular',
+ *     funnelSize: 'regular',
+ *     funnelDirection: 'regular',
+ *   } as FunnelStyleOptions,
+ * });
  * </script>
- * ```
- * <img src="media://vue-funnel-chart-example.png" width="800"/>
  *
- * Note that the chart sorts the measure, `Unique Users`, in descending order by default.
+ * <template>
+ *   <FunnelChart
+ *     :dataSet="DM.DataSource"
+ *     :dataOptions="chartProps.dataOptions"
+ *     :styleOptions="chartProps.styleOptions"
+ *   />
+ * </template>
+ * ```
+ * <img src="media://funnel-chart-example-1.png" width="700px" />
  * @param props - Funnel chart properties
  * @returns Funnel Chart component
  * @group Charts

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

@@ -9,34 +9,104 @@ export interface IndicatorChartProps extends IndicatorChartPropsPreact {
  * A Vue component that provides various options for displaying one or two numeric values as a number, gauge or ticker.
  *
  * @example
- * Here's how you can use the IndicatorChart component in a Vue application:
  * ```vue
+ * <script setup lang="ts">
+ * import { ref } from 'vue';
+ * import { IndicatorChart, IndicatorStyleOptions } from '@sisense/sdk-ui-vue';
+ * import { measureFactory } from '@sisense/sdk-data';
+ * import * as DM from './sample-ecommerce';
+ *
+ * const chartProps = ref({
+ *   dataOptions: {
+ *     value: [measureFactory.sum(DM.Commerce.Revenue, 'Total Revenue')],
+ *     max: [measureFactory.constant(125000000)],
+ *   },
+ *   styleOptions: {
+ *     indicatorComponents: {
+ *       title: { shouldBeShown: true, text: 'Total Revenue' },
+ *       ticks: { shouldBeShown: false },
+ *       labels: { shouldBeShown: true },
+ *     },
+ *     subtype: 'indicator/gauge',
+ *     skin: 2,
+ *   } as IndicatorStyleOptions,
+ * });
+ * </script>
+ *
  * <template>
-      <IndicatorChart
-        :dataOptions="indicatorChartProps.dataOptions"
-        :dataSet="indicatorChartProps.dataSet"
-        :filters="indicatorChartProps.filters"
-      />
+ *   <IndicatorChart
+ *     :dataSet="DM.DataSource"
+ *     :dataOptions="chartProps.dataOptions"
+ *     :styleOptions="chartProps.styleOptions"
+ *   />
  * </template>
+ * ```
+ * <img src="media://indicator-chart-example-1.png" width="400px" />
+ *
+ * Numeric indicator variant with a secondary value:
  *
+ * ```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 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)],
-   });
+ * import { IndicatorChart } from '@sisense/sdk-ui-vue';
+ * import { measureFactory } from '@sisense/sdk-data';
+ * import * as DM from './sample-ecommerce';
+ *
+ * const chartProps = ref({
+ *   dataOptions: {
+ *     value: [measureFactory.sum(DM.Commerce.Revenue, 'Total Revenue')],
+ *     // secondary value is optional
+ *     secondary: [measureFactory.sum(DM.Commerce.Quantity, 'Total Quantity')],
+ *   },
+ * });
+ * </script>
+ *
+ * <template>
+ *   <IndicatorChart :dataSet="DM.DataSource" :dataOptions="chartProps.dataOptions" />
+ * </template>
+ * ```
+ *
+ * <img src="media://indicator-chart-example-3.png" width="400px" />
+ *
+ * Ticker style indicator variant:
+ *
+ * ```vue
+ * <script setup lang="ts">
+ * import { ref } from 'vue';
+ * import { IndicatorChart, IndicatorStyleOptions } from '@sisense/sdk-ui-vue';
+ * import { measureFactory } from '@sisense/sdk-data';
+ * import * as DM from './sample-ecommerce';
+ *
+ * const chartProps = ref({
+ *   dataOptions: {
+ *     value: [measureFactory.sum(DM.Commerce.Revenue, 'Total Revenue')],
+ *     max: [measureFactory.constant(125000000)],
+ *   },
+ *   styleOptions: {
+ *     indicatorComponents: {
+ *       title: { shouldBeShown: true, text: 'Total Revenue' },
+ *       ticks: { shouldBeShown: false },
+ *       labels: { shouldBeShown: true },
+ *     },
+ *     subtype: 'indicator/gauge',
+ *     skin: 2,
+ *     forceTickerView: true,
+ *     tickerBarHeight: 30,
+ *     width: 400,
+ *   } as IndicatorStyleOptions,
+ * });
  * </script>
+ *
+ * <template>
+ *   <IndicatorChart
+ *     :dataSet="DM.DataSource"
+ *     :dataOptions="chartProps.dataOptions"
+ *     :styleOptions="chartProps.styleOptions"
+ *   />
+ * </template>
  * ```
- * <img src="media://vue-indicator-chart-example.png" width="400px" />
+ *
+ * <img src="media://indicator-chart-example-4.png" width="400px" />
  * @param props - Indicator chart properties
  * @returns Indicator Chart component
  * @group Charts

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

@@ -15,37 +15,35 @@ export interface KpiChartProps extends KpiChartPropsPreact {
  * a second measure, or against a target.
  *
  * @example
- * Here's how you can use the KpiChart component in a Vue application:
  * ```vue
- * <template>
- * <KpiChart
-      :dataSet="kpiChartProps.dataSet"
-      :dataOptions="kpiChartProps.dataOptions"
-      :filters="kpiChartProps.filters"
-      :styleOptions="kpiChartProps.styleOptions"
-    />
- * </template>
- *
  * <script setup lang="ts">
  * import { ref } from 'vue';
+ * import { KpiChart } from '@sisense/sdk-ui-vue';
+ * import * as DM from './sample-ecommerce';
  * import { measureFactory } from '@sisense/sdk-data';
- * import * as DM from '../assets/sample-retail-model';
- * import { KpiChart, type KpiChartProps } from '@sisense/sdk-ui-vue';
  *
- * const kpiChartProps = ref<KpiChartProps>({
- *   dataSet: DM.DataSource,
+ * const chartProps = ref({
  *   dataOptions: {
- *     value: measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue'),
- *     category: DM.DimDate.Date.Months,
+ *     value: measureFactory.sum(DM.Commerce.Revenue, 'Total Revenue'),
+ *     category: DM.Commerce.Date.Months,
  *     comparison: { type: 'previous-period' },
  *   },
  *   styleOptions: {
- *     title: { text: 'Total Revenue' },
+ *     sparkline: { chartType: 'area' },
+ *     height: 250,
  *   },
- *   filters: [],
  * });
  * </script>
+ *
+ * <template>
+ *   <KpiChart
+ *     :dataSet="DM.DataSource"
+ *     :dataOptions="chartProps.dataOptions"
+ *     :styleOptions="chartProps.styleOptions"
+ *   />
+ * </template>
  * ```
+ * <img src="media://kpi-chart-example-1.png" width="400px" />
  * @param {KpiChartProps} - KPI chart properties
  * @returns KPI Chart component
  * @group Charts

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

@@ -10,35 +10,27 @@ export interface LineChartProps extends LineChartPropsPreact {
  * It maintains compatibility with Vue's reactivity system while preserving the functionality of the LineChart.
  *
  * @example
- * Here's how you can use the LineChart component in a Vue application:
  * ```vue
- * <template>
-      <LineChart
-        :dataOptions="lineChartProps.dataOptions"
-        :dataSet="lineChartProps.dataSet"
-        :filters="lineChartProps.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 { LineChart, type LineChartProps } from '@sisense/sdk-ui-vue';
-
- * 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)],
-  });
+ * import { LineChart } from '@sisense/sdk-ui-vue';
+ * import { measureFactory } from '@sisense/sdk-data';
+ * import * as DM from './sample-ecommerce';
+ *
+ * const chartProps = ref({
+ *   dataOptions: {
+ *     category: [DM.Commerce.Date.Quarters],
+ *     value: [measureFactory.sum(DM.Commerce.Revenue, 'Total Revenue')],
+ *     breakBy: [DM.Commerce.Condition],
+ *   },
+ * });
+ * </script>
+ *
+ * <template>
+ *   <LineChart :dataSet="DM.DataSource" :dataOptions="chartProps.dataOptions" />
+ * </template>
  * ```
- * <img src="media://vue-line-chart-example.png" width="800px" />
+ * <img src="media://line-chart-example-1.png" width="700px" />
  * @param props - Line chart properties
  * @returns Line Chart component
  * @group Charts