@sisense/sdk-ui-angular 1.5.0 → 1.6.0

package/dist/lib/component-wrapper-helpers/context-connectors.d.ts

@@ -1,5 +1,17 @@
 import { ContextConnector, CustomSisenseContext, CustomThemeProviderProps } from '@sisense/sdk-ui-preact';
 import { SisenseContextService } from '../services/sisense-context.service';
 import { ThemeService } from '../services/theme.service';
+/**
+ * Creates theme context connector
+ *
+ * @param themeService - The theme service
+ * @internal
+ */
 export declare const createThemeContextConnector: (themeService: ThemeService) => ContextConnector<CustomThemeProviderProps['context']>;
+/**
+ * Creates Sisense context connector
+ *
+ * @param sisenseContextService - The Sisense context service
+ * @internal
+ */
 export declare const createSisenseContextConnector: (sisenseContextService: SisenseContextService) => ContextConnector<CustomSisenseContext>;

package/dist/lib/components/{area-chart.component.d.ts → charts/area-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 AreaChartProps } from '@sisense/sdk-ui-preact';
-import { ArgumentsAsObject } from '../types';
+import { ArgumentsAsObject } from '../../types';
 import * as i0 from "@angular/core";
 /**
  * A component similar to a {@link LineChartComponent},
  * but with filled in areas under each line and an option to display them as stacked.
  * More info on [Sisense Documentation page](https://docs.sisense.com/main/SisenseLinux/area-chart.htm).
+ *
+ * @example
+ * ```html
+ *    <csdk-area-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, Filter } 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-area-chart-example.png" width="800px" />
+ *
+ * @group Charts
  */
 export declare class AreaChartComponent {
     /**

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

@@ -1,10 +1,49 @@
 import { EventEmitter } from '@angular/core';
 import { type ChartType, type AreamapChartProps } from '@sisense/sdk-ui-preact';
-import { ArgumentsAsObject } from '../types/utility-types';
+import { ArgumentsAsObject } from '../../types/utility-types';
 import * as i0 from "@angular/core";
 /**
  * An Angular component that allows to visualize geographical data as polygons on a map.
  * See [Areamap Chart](https://docs.sisense.com/main/SisenseLinux/area-map.htm) for more information.
+ *
+ * @example
+ * ```html
+ *    <csdk-areamap-chart
+ *      [dataSet]="areamapChart.dataSet"
+ *      [dataOptions]="areamapChart.dataOptions"
+ *      [styleOptions]="areamapChart.styleOptions"
+ *      (dataPointClick)="logArguments($event)"
+ *    /> * ```
+ * ```ts
+import { Component } from '@angular/core';
+import { measureFactory } from '@sisense/sdk-data';
+import * as DM from '../../assets/sample-ecommerce';
+
+@Component({
+  selector: 'app-analytics',
+  templateUrl: './analytics.component.html',
+  styleUrls: ['./analytics.component.scss'],
+})
+export class AnalyticsComponent {
+  areamapChart = {
+    dataSet: DM.DataSource,
+    dataOptions: {
+      geo: [DM.Country.Country],
+      color: [measureFactory.sum(DM.Commerce.Revenue, 'Color by Revenue')],
+    } as AreamapChartDataOptions,
+    styleOptions: {
+      mapType: 'world',
+    } as AreamapStyleOptions,
+  };
+
+  logArguments(...args: any[]) {
+    console.log(args);
+  }
+}
+ * ```
+ * <img src="media://angular-areamap-chart-example.png" width="800px" />
+ *
+ * @group Charts
  */
 export declare class AreamapChartComponent {
     /**

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

@@ -1,12 +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 BarChartProps } 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 representing categorical data with horizontal rectangular bars,
  * whose lengths are proportional to the values that they represent.
  * See [Bar Chart](https://docs.sisense.com/main/SisenseLinux/bar-chart.htm) for more information.
+ *
+ * @example
+ * ```html
+ *    <csdk-bar-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-bar-chart-example.png" width="800px" />
+ *
+ * @group Charts
  */
 export declare class BarChartComponent {
     /**

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

@@ -1,12 +1,55 @@
 import { EventEmitter } from '@angular/core';
-import { type ChartType } from '../sdk-ui-core-exports';
+import { type ChartType } from '../../sdk-ui-core-exports';
 import { type BoxplotChartProps } 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";
 /**
  * An Angular component representing data in a way that visually describes the distribution, variability,
  * and center of a data set along an axis.
  * See [Boxplot Chart](https://docs.sisense.com/main/SisenseLinux/box-and-whisker-plot.htm) for more information.
+ *
+ * @example
+ * ```html
+ *    <csdk-boxplot-chart
+ *      [dataSet]="boxplotChart.dataSet"
+ *      [dataOptions]="boxplotChart.dataOptions"
+ *      [highlights]="boxplotChart.highlights"
+ *      [beforeRender]="onBeforeRender"
+ *      (dataPointClick)="logArguments($event)"
+ *      (dataPointContextMenu)="logArguments($event)"
+ *      (dataPointsSelect)="logArguments($event)"
+ *    /> * ```
+ * ```ts
+import { Component } from '@angular/core';
+import { filterFactory } from '@sisense/sdk-data';
+import type { BoxplotChartDataOptions } 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 {
+  boxplotChart = {
+    dataSet: DM.DataSource,
+    dataOptions: {
+      category: [DM.Divisions.Divison_name],
+      value: [DM.Admissions.TimeofStay],
+      boxType: 'iqr',
+      outliersEnabled: true,
+    } as BoxplotChartDataOptions,
+    highlights: [filterFactory.members(DM.Divisions.Divison_name, ['Cardiology', 'Neurology'])],
+  };
+
+  logArguments(...args: any[]) {
+    console.log(args);
+  }
+}
+ * ```
+ * <img src="media://angular-boxplot-chart-example.png" width="800px" />
+ *
+ * @group Charts
  */
 export declare class BoxplotChartComponent {
     /**

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

@@ -1,8 +1,8 @@
 import { AfterViewInit, ElementRef, EventEmitter, OnChanges, OnDestroy } from '@angular/core';
 import { type ChartProps } 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";
 /**
  * An Angular component used for easily switching chart types or rendering multiple series of different chart types.
@@ -50,7 +50,9 @@ import * as i0 from "@angular/core";
  * />
  * ```
  *
- * <img src="media://angular-chart-data-source-example-1.png" width="800px" />
+ * <img src="media://angular-chart-example.png" width="800px" />
+ *
+ * @group Charts
  */
 export declare class ChartComponent implements AfterViewInit, OnChanges, OnDestroy {
     /**

package/dist/lib/components/{column-chart.component.d.ts → charts/column-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 ColumnChartProps } 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 representing categorical data with vertical rectangular bars
  * whose heights are proportional to the values that they represent.
  * See [Column Chart](https://docs.sisense.com/main/SisenseLinux/column-chart.htm) for more information.
+ *
+ * @example
+ * ```html
+ *    <csdk-column-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-column-chart-example.png" width="800px" />
+ *
+ * @group Charts
  */
 export declare class ColumnChartComponent {
     /**

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

@@ -1,11 +1,61 @@
 import { EventEmitter } from '@angular/core';
-import { type ChartType } from '../sdk-ui-core-exports';
+import { type ChartType } from '../../sdk-ui-core-exports';
 import { type FunnelChartProps } 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 representing data progressively decreasing in size or quantity through a funnel shape.
  * See [Funnel Chart](https://docs.sisense.com/main/SisenseLinux/funnel-chart.htm) for more information.
+ *
+ * @example
+ * ```html
+ *    <csdk-funnel-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, Filter } 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-funnel-chart-example.png" width="800px" />
+ *
+ * @group Charts
  */
 export declare class FunnelChartComponent {
     /**

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

@@ -0,0 +1,17 @@
+export * from './chart.component';
+export * from './table.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 './boxplot-chart.component';
+export * from './scattermap-chart.component';
+export * from './areamap-chart.component';
+export * from './pivot-table.component';

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

@@ -1,9 +1,65 @@
-import { type ChartType } from '../sdk-ui-core-exports';
+import { type ChartType } from '../../sdk-ui-core-exports';
 import { type IndicatorChartProps } from '@sisense/sdk-ui-preact';
 import * as i0 from "@angular/core";
 /**
  * A component that provides various options for displaying one or two numeric values as a number, gauge or ticker.
  * See [Indicator](https://docs.sisense.com/main/SisenseLinux/indicator.htm) for more information.
+ *
+ * @example
+ * ```html
+ *    <csdk-indicator-chart
+ *      [dataSet]="indicator.dataSet"
+ *      [dataOptions]="indicator.dataOptions"
+ *      [filters]="filters"
+ *      [styleOptions]="indicator.styleOptions"
+ *    />
+ * ```
+ * ```ts
+import { Component } from '@angular/core';
+import { measureFactory, filterFactory } from '@sisense/sdk-data';
+import * as DM from '../../assets/sample-healthcare-model';
+import type { IndicatorStyleOptions } 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'])];
+  indicator = {
+    dataSet: DM.DataSource,
+    dataOptions: {
+      value: [measureFactory.sum(DM.Admissions.Cost_of_admission)],
+      secondary: [measureFactory.sum(DM.Admissions.Diagnosis_ID)],
+    },
+    styleOptions: {
+      indicatorComponents: {
+        title: {
+          shouldBeShown: true,
+          text: 'Total Cost_of_admission',
+        },
+        secondaryTitle: {
+          text: 'Total Diagnosis_ID',
+        },
+        ticks: {
+          shouldBeShown: true,
+        },
+        labels: {
+          shouldBeShown: true,
+        },
+      },
+      subtype: 'indicator/gauge',
+      skin: 2,
+    } as IndicatorStyleOptions,
+  };
+
+}
+ * ```
+ * <img src="media://angular-indicator-chart-example.png" width="800px" />
+ *
+ * @group Charts
  */
 export declare class IndicatorChartComponent {
     /**

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

@@ -1,11 +1,61 @@
 import { EventEmitter } from '@angular/core';
-import { type ChartType } from '../sdk-ui-core-exports';
+import { type ChartType } from '../../sdk-ui-core-exports';
 import { type LineChartProps } 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 data as a series of points connected by a line. Used to show trends or changes over time.
  * See [Line Chart](https://docs.sisense.com/main/SisenseLinux/line-chart.htm) for more information.
+ *
+ * @example
+ * ```html
+ *    <csdk-line-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, Filter } 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-line-chart-example.png" width="800px" />
+ *
+ * @group Charts
  */
 export declare class LineChartComponent {
     /**

package/dist/lib/components/{pie-chart.component.d.ts → charts/pie-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 PieChartProps } 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 representing data in a circular graph with the data shown as slices of a whole,
  * with each slice representing a proportion of the total.
  * See [Pie Chart](https://docs.sisense.com/main/SisenseLinux/pie-chart.htm) for more information.
+ *
+ * @example
+ * ```html
+ *    <csdk-pie-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-pie-chart-example.png" width="800px" />
+ *
+ * @group Charts
  */
 export declare class PieChartComponent {
     /**