@sisense/sdk-ui-vue 2.35.0 → 2.36.0

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

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

@@ -10,34 +10,31 @@ export interface PieChartProps extends PieChartPropsPreact {
  * with each slice representing a proportion of the total.
  *
  * @example
- * Here's how you can use the PieChart component in a Vue application:
  * ```vue
- * <template>
-      <PieChart
-        :dataOptions="pieChartProps.dataOptions"
-        :dataSet="pieChartProps.dataSet"
-        :filters="pieChartProps.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 { PieChart,type PieChartProps } from '@sisense/sdk-ui-vue';
+ * import { PieChart, PieStyleOptions } 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 pieChartProps = ref<PieChartProps>({
-    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: { subtype: 'pie/classic' } as PieStyleOptions,
+ * });
+ * </script>
+ *
+ * <template>
+ *   <PieChart
+ *     :dataSet="DM.DataSource"
+ *     :dataOptions="chartProps.dataOptions"
+ *     :styleOptions="chartProps.styleOptions"
+ *   />
+ * </template>
  * ```
- * <img src="media://vue-pie-chart-example.png" width="800px" />
+ * <img src="media://pie-chart-example-1.png" width="700px" />
  * @param props - Pie chart properties
  * @returns Pie Chart component
  * @group Charts