@sisense/sdk-ui-angular 1.5.0 → 1.7.0

package/dist/lib/components/{pivot-table.component.d.ts → charts/pivot-table.component.d.ts}

@@ -1,11 +1,62 @@
 import { AfterViewInit, ElementRef, OnChanges, OnDestroy } from '@angular/core';
 import { type PivotTableProps } from '@sisense/sdk-ui-preact';
-import { SisenseContextService } from '../services';
-import { ThemeService } from '../services';
+import { SisenseContextService } from '../../services';
+import { ThemeService } from '../../services';
 import * as i0 from "@angular/core";
 /**
  * Pivot Table with and pagination.
  *
+ * @example
+ * ```html
+ *  <csdk-pivot-table
+ *    [dataSet]="pivotTable.dataSet"
+ *    [dataOptions]="pivotTable.dataOptions"
+ *    [filters]="pivotTable.filters"
+ *    [styleOptions]="pivotTable.styleOptions"
+ *  />
+ * ```
+ * ```ts
+import { Component } from '@angular/core';
+import { measureFactory, filterFactory } from '@sisense/sdk-data';
+import * as DM from '../../assets/sample-ecommerce';
+import type { PivotTableDataOptions } from '@sisense/sdk-ui-angular';
+
+@Component({
+  selector: 'app-analytics',
+  templateUrl: './analytics.component.html',
+  styleUrls: ['./analytics.component.scss'],
+})
+export class AnalyticsComponent {
+
+  pivotTableDataOptions: PivotTableDataOptions = {
+    rows: [
+      { column: DM.Category.Category, includeSubTotals: true },
+      { column: DM.Commerce.AgeRange, includeSubTotals: true },
+      DM.Commerce.Condition,
+    ],
+    columns: [{ column: DM.Commerce.Gender, includeSubTotals: true }],
+    values: [
+      measureFactory.sum(DM.Commerce.Cost, 'Total Cost'),
+      {
+        column: measureFactory.sum(DM.Commerce.Revenue, 'Total Revenue'),
+        totalsCalculation: 'sum',
+        dataBars: true,
+      },
+    ],
+    grandTotals: { title: 'Grand Total', rows: true, columns: true },
+  };
+
+  pivotTable = {
+    dataSet: DM.DataSource,
+    dataOptions: this.pivotTableDataOptions,
+    filters: [filterFactory.members(DM.Commerce.Gender, ['Female', 'Male'])],
+    styleOptions: { width: 1400, height: 600, rowsPerPage: 50 },
+  };
+
+}
+ * ```
+ * <img src="media://angular-pivot-table-example.png" width="800px" />
+ * @group Data Grids
  * @alpha
  */
 export declare class PivotTableComponent implements AfterViewInit, OnChanges, OnDestroy {

package/dist/lib/components/{polar-chart.component.d.ts → charts/polar-chart.component.d.ts}

@@ -1,11 +1,62 @@
 import { EventEmitter } from '@angular/core';
-import { type ChartType } from '../sdk-ui-core-exports';
+import { type ChartType } from '../../sdk-ui-core-exports';
 import { type PolarChartProps } from '@sisense/sdk-ui-preact';
-import { type ArgumentsAsObject } from '../types/utility-types';
+import { type ArgumentsAsObject } from '../../types/utility-types';
 import * as i0 from "@angular/core";
 /**
  * A component comparing multiple categories/variables with a spacial perspective in a radial chart.
  * See [Polar Chart](https://docs.sisense.com/main/SisenseLinux/polar-chart.htm) for more information.
+ *
+ * @example
+ * ```html
+ *    <csdk-polar-chart
+ *      [dataSet]="chart.dataSet"
+ *      [dataOptions]="chart.dataOptions"
+ *      [highlights]="filters"
+ *      [beforeRender]="onBeforeRender"
+ *      (dataPointClick)="logArguments($event)"
+ *      (dataPointContextMenu)="logArguments($event)"
+ *      (dataPointsSelect)="logArguments($event)"
+ *    />
+ * ```
+ * ```ts
+import { Component } from '@angular/core';
+import { measureFactory, filterFactory } from '@sisense/sdk-data';
+import * as DM from '../../assets/sample-healthcare-model';
+import type { ChartType } from '@sisense/sdk-ui-angular';
+
+@Component({
+  selector: 'app-analytics',
+  templateUrl: './analytics.component.html',
+  styleUrls: ['./analytics.component.scss'],
+})
+export class AnalyticsComponent {
+  DM = DM;
+  filters = [filterFactory.members(DM.Divisions.Divison_name, ['Cardiology', 'Neurology'])];
+  chart = {
+    chartType: 'column' as ChartType,
+    dataSet: DM.DataSource,
+    dataOptions: {
+      category: [DM.Divisions.Divison_name],
+      value: [measureFactory.sum(DM.Admissions.Cost_of_admission)],
+      breakBy: [],
+    },
+  };
+
+  onBeforeRender(options: any) {
+    console.log('beforeRender');
+    console.log(options);
+    return options;
+  }
+
+  logArguments(...args: any[]) {
+    console.log(args);
+  }
+}
+ * ```
+ * <img src="media://angular-polar-chart-example.png" width="800px" />
+ *
+ * @group Charts
  */
 export declare class PolarChartComponent {
     /**

package/dist/lib/components/{scatter-chart.component.d.ts → charts/scatter-chart.component.d.ts}

@@ -1,7 +1,7 @@
 import { EventEmitter } from '@angular/core';
-import { type ChartType } from '../sdk-ui-core-exports';
+import { type ChartType } from '../../sdk-ui-core-exports';
 import { type ScatterChartProps } from '@sisense/sdk-ui-preact';
-import { type ArgumentsAsObject } from '../types/utility-types';
+import { type ArgumentsAsObject } from '../../types/utility-types';
 import * as i0 from "@angular/core";
 /**
  * A component displaying the distribution of two variables on an X-Axis, Y-Axis,
@@ -13,6 +13,54 @@ import * as i0 from "@angular/core";
  * If omitted, all scatter points are equal in size. If used, the circle sizes are relative to their values.
  *
  * See [Scatter Chart](https://docs.sisense.com/main/SisenseLinux/scatter-chart.htm) for more information.
+ *
+ * @example
+ * ```html
+ *    <csdk-scatter-chart
+ *      [dataSet]="scatter.dataSet"
+ *      [dataOptions]="scatter.dataOptions"
+ *      [highlights]="filters"
+ *      [beforeRender]="onBeforeRender"
+ *      (dataPointClick)="logArguments($event)"
+ *      (dataPointContextMenu)="logArguments($event)"
+ *      (dataPointsSelect)="logArguments($event)"
+ *    />
+ * ```
+ * ```ts
+import { Component } from '@angular/core';
+import { measureFactory, filterFactory } from '@sisense/sdk-data';
+import * as DM from '../../assets/sample-healthcare-model';
+
+@Component({
+  selector: 'app-analytics',
+  templateUrl: './analytics.component.html',
+  styleUrls: ['./analytics.component.scss'],
+})
+export class AnalyticsComponent {
+  DM = DM;
+  filters = [filterFactory.members(DM.Divisions.Divison_name, ['Cardiology', 'Neurology'])];
+  scatter = {
+    dataSet: DM.DataSource,
+    dataOptions: {
+      x: DM.Admissions.Room_ID,
+      y: measureFactory.sum(DM.Admissions.Cost_of_admission),
+    },
+  };
+
+  onBeforeRender(options: any) {
+    console.log('beforeRender');
+    console.log(options);
+    return options;
+  }
+
+  logArguments(...args: any[]) {
+    console.log(args);
+  }
+}
+ * ```
+ * <img src="media://angular-scatter-chart-example.png" width="800px" />
+ *
+ * @group Charts
  */
 export declare class ScatterChartComponent {
     /**

package/dist/lib/components/{scattermap-chart.component.d.ts → charts/scattermap-chart.component.d.ts}

@@ -1,11 +1,58 @@
 import { EventEmitter } from '@angular/core';
-import { type ChartType } from '../sdk-ui-core-exports';
+import { type ChartType } from '../../sdk-ui-core-exports';
 import { type ScattermapChartProps } from '@sisense/sdk-ui-preact';
-import { ArgumentsAsObject } from '../types';
+import { ArgumentsAsObject } from '../../types';
 import * as i0 from "@angular/core";
 /**
  * An Angular component that allows to visualize geographical data as data points on a map.
  * See [Scattermap Chart](https://docs.sisense.com/main/SisenseLinux/scatter-map.htm) for more information.
+ *
+ * @example
+ * ```html
+ *    <csdk-scattermap-chart
+ *      [dataSet]="scattermapChart.dataSet"
+ *      [dataOptions]="scattermapChart.dataOptions"
+ *      [styleOptions]="scattermapChart.styleOptions"
+ *      (dataPointClick)="logArguments($event)"
+ *    />
+ * ```
+ * ```ts
+import { Component } from '@angular/core';
+import { measureFactory, filterFactory } from '@sisense/sdk-data';
+import type { ScattermapStyleOptions,ScattermapChartDataOptions } from '@sisense/sdk-ui-angular';
+import * as DM from '../../assets/sample-ecommerce';
+
+@Component({
+  selector: 'app-analytics',
+  templateUrl: './analytics.component.html',
+  styleUrls: ['./analytics.component.scss'],
+})
+export class AnalyticsComponent {
+  scattermapChart = {
+    dataSet: DM.DataSource,
+    dataOptions: {
+      geo: [DM.Country.Country],
+      size: measureFactory.sum(DM.Commerce.Cost, 'Size by Cost'),
+      colorBy: {
+        column: measureFactory.sum(DM.Commerce.Revenue, 'Color by Revenue'),
+        color: 'green',
+      },
+      details: DM.Category.Category,
+    } as ScattermapChartDataOptions,
+    styleOptions: {
+      markers: {
+        fill: 'hollow-bold',
+      },
+    } as ScattermapStyleOptions,
+  };
+
+  logArguments(...args: any[]) {
+    console.log(args);
+  }
+}
+ * ```
+ * <img src="media://angular-scattermap-chart-example.png" width="800px" />
+ * @group Charts
  */
 export declare class ScattermapChartComponent {
     /**

package/dist/lib/components/{sunburst-chart.component.d.ts → charts/sunburst-chart.component.d.ts}

@@ -1,12 +1,63 @@
 import { EventEmitter } from '@angular/core';
-import { type ChartType } from '../sdk-ui-core-exports';
+import { type ChartType } from '../../sdk-ui-core-exports';
 import { type SunburstChartProps } from '@sisense/sdk-ui-preact';
-import { type ArgumentsAsObject } from '../types/utility-types';
+import { type ArgumentsAsObject } from '../../types/utility-types';
 import * as i0 from "@angular/core";
 /**
  * A component displaying hierarchical data in the form of nested slices.
  * This type of chart can be used instead of a pie chart for comparing a large number of categories and sub-categories.
  * See [Sunburst Chart](https://docs.sisense.com/main/SisenseLinux/sunburst-widget.htm) for more information.
+ *
+ * @example
+ * ```html
+ *    <csdk-sunburst-chart
+ *      [dataSet]="chart.dataSet"
+ *      [dataOptions]="chart.dataOptions"
+ *      [highlights]="filters"
+ *      [beforeRender]="onBeforeRender"
+ *      (dataPointClick)="logArguments($event)"
+ *      (dataPointContextMenu)="logArguments($event)"
+ *      (dataPointsSelect)="logArguments($event)"
+ *    />
+ * ```
+ * ```ts
+import { Component } from '@angular/core';
+import { measureFactory, filterFactory } from '@sisense/sdk-data';
+import * as DM from '../../assets/sample-healthcare-model';
+import type { ChartType } from '@sisense/sdk-ui-angular';
+
+@Component({
+  selector: 'app-analytics',
+  templateUrl: './analytics.component.html',
+  styleUrls: ['./analytics.component.scss'],
+})
+export class AnalyticsComponent {
+  DM = DM;
+  filters = [filterFactory.members(DM.Divisions.Divison_name, ['Cardiology', 'Neurology'])];
+  chart = {
+    chartType: 'column' as ChartType,
+    dataSet: DM.DataSource,
+    dataOptions: {
+      category: [DM.Divisions.Divison_name],
+      value: [measureFactory.sum(DM.Admissions.Cost_of_admission)],
+      breakBy: [],
+    },
+  };
+
+  onBeforeRender(options: any) {
+    console.log('beforeRender');
+    console.log(options);
+    return options;
+  }
+
+  logArguments(...args: any[]) {
+    console.log(args);
+  }
+}
+ * ```
+ * <img src="media://angular-sunburst-chart-example.png" width="800px" />
+ *
+ * @group Charts
  */
 export declare class SunburstChartComponent {
     /**

package/dist/lib/components/{table.component.d.ts → charts/table.component.d.ts}

@@ -1,10 +1,40 @@
 import { AfterViewInit, ElementRef, OnChanges, OnDestroy } from '@angular/core';
 import { type TableProps } from '@sisense/sdk-ui-preact';
-import { SisenseContextService } from '../services/sisense-context.service';
-import { ThemeService } from '../services/theme.service';
+import { SisenseContextService } from '../../services/sisense-context.service';
+import { ThemeService } from '../../services/theme.service';
 import * as i0 from "@angular/core";
 /**
  * Table with aggregation and pagination.
+ *
+ * @example
+ * ```html
+ *  <csdk-table [dataSet]="table.dataSet" [dataOptions]="table.dataOptions" [filters]="filters" />
+ * ```
+ * ```ts
+import { Component } from '@angular/core';
+import { measureFactory, filterFactory } from '@sisense/sdk-data';
+import * as DM from '../../assets/sample-healthcare-model';
+
+@Component({
+  selector: 'app-analytics',
+  templateUrl: './analytics.component.html',
+  styleUrls: ['./analytics.component.scss'],
+})
+export class AnalyticsComponent {
+  DM = DM;
+  filters = [filterFactory.members(DM.Divisions.Divison_name, ['Cardiology', 'Neurology'])];
+  table = {
+    dataSet: DM.DataSource,
+    dataOptions: {
+      columns: [DM.Admissions.Patient_ID, measureFactory.sum(DM.Admissions.Cost_of_admission)],
+    },
+  };
+
+}
+ * ```
+ * <img src="media://angular-table-chart-example.png" width="800px" />
+ *
+ * @group Data Grids
  */
 export declare class TableComponent implements AfterViewInit, OnChanges, OnDestroy {
     private sisenseContextService;

package/dist/lib/components/{treemap-chart.component.d.ts → charts/treemap-chart.component.d.ts}

@@ -1,12 +1,63 @@
 import { EventEmitter } from '@angular/core';
-import { type ChartType } from '../sdk-ui-core-exports';
+import { type ChartType } from '../../sdk-ui-core-exports';
 import { type TreemapChartProps } from '@sisense/sdk-ui-preact';
-import { type ArgumentsAsObject } from '../types/utility-types';
+import { type ArgumentsAsObject } from '../../types/utility-types';
 import * as i0 from "@angular/core";
 /**
  * A component displaying hierarchical data in the form of nested rectangles.
  * This type of chart can be used instead of a column chart for comparing a large number of categories and sub-categories.
  * See [Treemap Chart](https://docs.sisense.com/main/SisenseLinux/treemap.htm) for more information.
+ *
+ * @example
+ * ```html
+ *    <csdk-treemap-chart
+ *      [dataSet]="chart.dataSet"
+ *      [dataOptions]="chart.dataOptions"
+ *      [highlights]="filters"
+ *      [beforeRender]="onBeforeRender"
+ *      (dataPointClick)="logArguments($event)"
+ *      (dataPointContextMenu)="logArguments($event)"
+ *      (dataPointsSelect)="logArguments($event)"
+ *    />
+ * ```
+ * ```ts
+import { Component } from '@angular/core';
+import { measureFactory, filterFactory } from '@sisense/sdk-data';
+import type { ChartType } from '@sisense/sdk-ui-angular';
+import * as DM from '../../assets/sample-healthcare-model';
+
+@Component({
+  selector: 'app-analytics',
+  templateUrl: './analytics.component.html',
+  styleUrls: ['./analytics.component.scss'],
+})
+export class AnalyticsComponent {
+  DM = DM;
+  filters = [filterFactory.members(DM.Divisions.Divison_name, ['Cardiology', 'Neurology'])];
+  chart = {
+    chartType: 'column' as ChartType,
+    dataSet: DM.DataSource,
+    dataOptions: {
+      category: [DM.Divisions.Divison_name],
+      value: [measureFactory.sum(DM.Admissions.Cost_of_admission)],
+      breakBy: [],
+    },
+  };
+
+  onBeforeRender(options: any) {
+    console.log('beforeRender');
+    console.log(options);
+    return options;
+  }
+
+  logArguments(...args: any[]) {
+    console.log(args);
+  }
+}
+ * ```
+ * <img src="media://angular-treemap-chart-example.png" width="800px" />
+ *
+ * @group Charts
  */
 export declare class TreemapChartComponent {
     /**

package/dist/lib/components/context-menu.component.d.ts

@@ -6,6 +6,8 @@ import type { ArgumentsAsObject } from '../types/utility-types';
 import * as i0 from "@angular/core";
 /**
  * Context Menu Component
+ *
+ * @group Drilldown
  */
 export declare class ContextMenuComponent implements AfterViewInit, OnChanges, OnDestroy {
     /**

package/dist/lib/components/drilldown-breadcrumbs.component.d.ts

@@ -6,6 +6,8 @@ import type { ArgumentsAsObject } from '../types/utility-types';
 import * as i0 from "@angular/core";
 /**
  * Drilldown Breadcrumbs Component
+ *
+ * @group Drilldown
  */
 export declare class DrilldownBreadcrumbsComponent implements AfterViewInit, OnChanges, OnDestroy {
     /**

package/dist/lib/components/{date-range-filter-tile.component.d.ts → filters/date-range-filter-tile.component.d.ts}

@@ -1,11 +1,51 @@
 import { AfterViewInit, ElementRef, EventEmitter, OnChanges, OnDestroy } from '@angular/core';
 import { type DateRangeFilterTileProps } from '@sisense/sdk-ui-preact';
-import { SisenseContextService } from '../services/sisense-context.service';
-import { ThemeService } from '../services/theme.service';
-import type { ArgumentsAsObject } from '../types/utility-types';
+import { SisenseContextService } from '../../services/sisense-context.service';
+import { ThemeService } from '../../services/theme.service';
+import type { ArgumentsAsObject } from '../../types/utility-types';
 import * as i0 from "@angular/core";
 /**
  * Date Range Filter Tile Component
+ *
+ * @example
+ * ```html
+ * <csdk-date-range-filter-tile
+ *       title="dateRangeFilterTileProps.title"
+ *       [attribute]="dateRangeFilterTileProps.attribute"
+ *       [filter]="dateRangeFilterTileProps.filter"
+ *       (filterChange)="dateRangeFilterTileProps.setFilter($event)"
+ *     />
+ * ```
+ * ```ts
+ * import { Component } from '@angular/core';
+ * import { Member } from '@sisense/sdk-ui-angular';
+ * import { Filter, filterFactory } from '@sisense/sdk-data';
+ * import * as DM from '../../assets/sample-healthcare-model';
+ *
+ * @Component({
+ *   selector: 'app-filters',
+ *   templateUrl: './filters.component.html',
+ *   styleUrls: ['./filters.component.scss'],
+ * })
+ * export class FiltersComponent {
+ *   DM = DM;
+
+ *   dateRangeFilterTileProps = {
+ *     title: 'Range Filter',
+ *     attribute: DM.ER.Date.Years,
+ *     filter: filterFactory.dateRange(DM.ER.Date.Years),
+ *     setFilter({ filter }: { filter: Filter | null }) {
+ *       console.log(filter);
+ *       if (filter) {
+ *         this.filter = filter;
+ *       }
+ *     },
+ *   };
+ * }
+ * ```
+ * <img src="media://angular-date-range-filter-tile-example.png" width="800px" />
+ *
+ * @group Filter Tiles
  */
 export declare class DateRangeFilterTileComponent implements AfterViewInit, OnChanges, OnDestroy {
     /**

package/dist/lib/components/filters/index.d.ts

@@ -0,0 +1,3 @@
+export * from './basic-member-filter-tile.component';
+export * from './member-filter-tile.component';
+export * from './date-range-filter-tile.component';

package/dist/lib/components/{member-filter-tile.component.d.ts → filters/member-filter-tile.component.d.ts}

@@ -1,11 +1,47 @@
 import { AfterViewInit, ElementRef, EventEmitter, OnChanges, OnDestroy } from '@angular/core';
 import { type MemberFilterTileProps } from '@sisense/sdk-ui-preact';
-import { SisenseContextService } from '../services/sisense-context.service';
-import { ThemeService } from '../services/theme.service';
-import type { ArgumentsAsObject } from '../types/utility-types';
+import { SisenseContextService } from '../../services/sisense-context.service';
+import { ThemeService } from '../../services/theme.service';
+import type { ArgumentsAsObject } from '../../types/utility-types';
 import * as i0 from "@angular/core";
 /**
  * Member Filter Tile Component
+ *
+ * @example
+ * ```html
+ *     <csdk-member-filter-tile
+ *       title="Years Filter"
+ *       [attribute]="DM.ER.Date.Years"
+ *       [filter]="memberFilterTileProps.yearFilter"
+ *       (filterChange)="memberFilterTileProps.setYearFilter($event)"
+ *     />
+ * ```
+ * ```ts
+ * import { Component } from '@angular/core';
+ * import { Member } from '@sisense/sdk-ui-angular';
+ * import { Filter, filterFactory } from '@sisense/sdk-data';
+ * import * as DM from '../../assets/sample-healthcare-model';
+ *
+ * @Component({
+ *   selector: 'app-filters',
+ *   templateUrl: './filters.component.html',
+ *   styleUrls: ['./filters.component.scss'],
+ * })
+ * export class FiltersComponent {
+ *   DM = DM;
+ *   memberFilterTileProps = {
+ *     yearFilter: filterFactory.members(DM.ER.Date.Years, ['2013-01-01T00:00:00']),
+ *     setYearFilter({ filter }: { filter: Filter | null }) {
+ *       if (filter) {
+ *         this.yearFilter = filter;
+ *       }
+ *     },
+ *   };
+ * }
+ * ```
+ * <img src="media://angular-member-filter-tile-example.png" width="800px" />
+ *
+ * @group Filter Tiles
  */
 export declare class MemberFilterTileComponent implements AfterViewInit, OnChanges, OnDestroy {
     /**

package/dist/lib/components/index.d.ts

@@ -1,26 +1,5 @@
-export * from './basic-member-filter-tile.component';
-export * from './chart.component';
-export * from './table.component';
-export * from './chart-widget.component';
-export * from './column-chart.component';
-export * from './bar-chart.component';
-export * from './area-chart.component';
-export * from './line-chart.component';
-export * from './indicator-chart.component';
-export * from './scatter-chart.component';
-export * from './pie-chart.component';
-export * from './funnel-chart.component';
-export * from './polar-chart.component';
-export * from './treemap-chart.component';
-export * from './sunburst-chart.component';
-export * from './table-widget.component';
-export * from './dashboard-widget.component';
-export * from './member-filter-tile.component';
-export * from './drilldown-widget.component';
-export * from './date-range-filter-tile.component';
+export * from './filters';
+export * from './charts';
+export * from './widgets';
 export * from './drilldown-breadcrumbs.component';
 export * from './context-menu.component';
-export * from './boxplot-chart.component';
-export * from './scattermap-chart.component';
-export * from './areamap-chart.component';
-export * from './pivot-table.component';

package/dist/lib/components/{chart-widget.component.d.ts → widgets/chart-widget.component.d.ts}

@@ -1,11 +1,66 @@
 import { AfterViewInit, ElementRef, EventEmitter, OnChanges, OnDestroy } from '@angular/core';
 import { type ChartWidgetProps } from '@sisense/sdk-ui-preact';
-import { SisenseContextService } from '../services/sisense-context.service';
-import { ThemeService } from '../services/theme.service';
-import type { ArgumentsAsObject } from '../types/utility-types';
+import { SisenseContextService } from '../../services/sisense-context.service';
+import { ThemeService } from '../../services/theme.service';
+import type { ArgumentsAsObject } from '../../types/utility-types';
 import * as i0 from "@angular/core";
 /**
  * The Chart Widget component extending {@link ChartComponent} to support widget style options.
+ *
+ * @example
+ * ```html
+ * <csdk-chart-widget
+ *   [chartType]="chartWidget.chartType"
+ *   [dataSource]="chartWidget.dataSource"
+ *   [dataOptions]="chartWidget.dataOptions"
+ *   [highlights]="filters"
+ *   [title]="chartWidget.title"
+ *   [description]="chartWidget.description"
+ *   [beforeRender]="onBeforeRender"
+ *   (dataPointClick)="logArguments($event)"
+ *   (dataPointContextMenu)="logArguments($event)"
+ *   (dataPointsSelect)="logArguments($event)"
+ * />
+ * ```
+ * ```ts
+ * import { Component } from '@angular/core';
+ * import { ChartType } from '@sisense/sdk-ui-angular';
+ * import { filterFactory } from '@sisense/sdk-data';
+ * import * as DM from '../../assets/sample-healthcare-model';
+ *
+ * @Component({
+ *   selector: 'app-widgets',
+ *   templateUrl: './widgets.component.html',
+ *   styleUrls: ['./widgets.component.scss'],
+ * })
+ * export class WidgetsComponent {
+ *   filters = [filterFactory.members(DM.Divisions.Divison_name, ['Cardiology', 'Neurology'])];
+ *   chartWidget = {
+ *     chartType: 'column' as ChartType,
+ *     dataSource: DM.DataSource,
+ *     dataOptions: {
+ *       category: [DM.Divisions.Divison_name],
+ *       value: [measureFactory.sum(DM.Admissions.Cost_of_admission)],
+ *       breakBy: [],
+ *     },
+ *     title: 'Chart Title',
+ *     description: 'Chart Description',
+ *   };
+ *  logArguments(...args: any[]) {
+ *   console.log(args);
+ * }
+ *
+ * onBeforeRender(options: any) {
+ *   console.log('beforeRender');
+ *   console.log(options);
+ *   return options;
+ * }
+ *
+ * }
+ * ```
+ * <img src="media://angular-chart-widget-example.png" width="800px" />
+ *
+ * @group Chart Utilities
  */
 export declare class ChartWidgetComponent implements AfterViewInit, OnChanges, OnDestroy {
     private sisenseContextService;