Release v1.9.0

.eslintrc.cjs

@@ -55,10 +55,13 @@ module.exports = {
             '@typescript-eslint/no-use-before-define': 'warn',
             '@typescript-eslint/no-shadow': 'off',
             '@typescript-eslint/require-await': 'warn',
-            complexity: 'warn',
+            complexity: 'off',
+            'sonarjs/cognitive-complexity': 'off',
             '@typescript-eslint/no-throw-literal': 'off',
             'no-underscore-dangle': 'off',
             '@typescript-eslint/no-empty-interface': ['error', { allowSingleExtends: true }],
+            'max-lines-per-function': ["warn", 400],
+            'max-lines': ["warn", 1000],
           },
         },
         {

CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## [1.9.0] - 2024-05-02
+
+### Added
+- Add pivot table support to `DashboardWidget` and `WidgetModel`
+- Extend `PivotTable` to support additional style options
+- Add internal `ContentPanel` component for rendering a layout of widgets
+- Add extra factory functions for measure filters: `measureEquals`, `measureGreaterThan`, and `measureLessThan`
+
+### Changed
+- Reduce the bundle size of `@sisense/sdk-ui`
+- Extend CLI command `get-data-model` to include field descriptions in the generated data model file.
+  _Note: User account of role 'Data Designer' and above is required to include field descriptions_
+- Upgrade `sisense-charts` to prevent jQuery patching by Highcharts
+- Fix pivot types to prevent build errors in Angular 17
+- Fix missing values in drilldown breadcrumbs of categorical charts
+- Improve the translation of filter JAQL to `Filter` objects
+- Make improvements to the AI components and hooks (private beta): theme settings, style customizations, insight customization, chatbot header, and dropup for recent queries/suggestions
+
 ## [1.8.0] - 2024-04-15
 
 ### Added

docs-md/sdk/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## [1.9.0] - 2024-05-02
+
+### Added
+- Add pivot table support to `DashboardWidget` and `WidgetModel`
+- Extend `PivotTable` to support additional style options
+- Add internal `ContentPanel` component for rendering a layout of widgets
+- Add extra factory functions for measure filters: `measureEquals`, `measureGreaterThan`, and `measureLessThan`
+
+### Changed
+- Reduce the bundle size of `@sisense/sdk-ui`
+- Extend CLI command `get-data-model` to include field descriptions in the generated data model file.
+  _Note: User account of role 'Data Designer' and above is required to include field descriptions_
+- Upgrade `sisense-charts` to prevent jQuery patching by Highcharts
+- Fix pivot types to prevent build errors in Angular 17
+- Fix missing values in drilldown breadcrumbs of categorical charts
+- Improve the translation of filter JAQL to `Filter` objects
+- Make improvements to the AI components and hooks (private beta): theme settings, style customizations, insight customization, chatbot header, and dropup for recent queries/suggestions
+
 ## [1.8.0] - 2024-04-15
 
 ### Added

docs-md/sdk/getting-started/index.md

@@ -0,0 +1,22 @@
+---
+title: Getting Started
+indexTopics:
+    - title: React Quickstart
+      description: Get started using Compose SDK with React
+      link: ./quickstart
+    - title: Angular Quickstart
+      description: Get started using Compose SDK with Angular
+      link: ./quickstart-angular
+    - title: Vue Quickstart
+      description: Get started using Compose SDK with Vue
+      link: ./quickstart-vue
+    - title: Authentication & Security
+      description: Learn how to authenticate your app
+      link: ./authentication-security
+---
+
+# Getting Started
+
+Here you'll find guides that will help get started with Compose SDK.
+
+<SectionIndex />

docs-md/sdk/quickstart-angular.md → docs-md/sdk/getting-started/quickstart-angular.md

@@ -6,8 +6,8 @@ title: Quickstart Guide (Angular)
 
 Follow this guide to get started developing applications with Compose SDK.
 
->**Note**:
-This guide is for [<img src="./img/angular-logo.png" height="18px" style="vertical-align: text-bottom; padding-bottom: 2px" /> Angular](./quickstart-angular). We also have a Quickstart Guide for [<img src="./img/react-logo.png" height="18px" style="vertical-align: text-bottom; padding-bottom: 3px" /> React](./quickstart) and [<img src="./img/vue-logo.png" height="14px" /> Vue](./quickstart-vue) (beta).
+> **Note**:
+> This guide is for [<img src="../img/angular-logo.png" height="18px" style="vertical-align: text-bottom; padding-bottom: 2px" /> Angular](./quickstart-angular). We also have a Quickstart Guide for [<img src="../img/react-logo.png" height="18px" style="vertical-align: text-bottom; padding-bottom: 3px" /> React](./quickstart) and [<img src="../img/vue-logo.png" height="14px" /> Vue](./quickstart-vue) (beta).
 
 ## Prerequisites
 
@@ -20,10 +20,10 @@ Compose SDK contains a set of components needed to interface with your Sisense i
 5. Access to a [Sisense](https://sisense.com) instance with a queryable data source (for example, Sample Healthcare).
 6. Angular application **with TypeScript**. You can use an existing application, or if you don't have one, you can follow the [tutorial](https://angular.io/start) to create one.
 
->**Package manager**:
->In Angular `npm` is the default choice and this guide will also adopt `npm`.
+> **Package manager**:
+> In Angular `npm` is the default choice and this guide will also adopt `npm`.
 >
->You can opt to switch to `Yarn` by following the instructions in a [blog post](https://blog.angular-university.io/getting-started-with-angular-setup-a-development-environment-with-yarn-the-angular-cli-setup-an-ide/) from Angular University.
+> You can opt to switch to `Yarn` by following the instructions in a [blog post](https://blog.angular-university.io/getting-started-with-angular-setup-a-development-environment-with-yarn-the-angular-cli-setup-an-ide/) from Angular University.
 
 ## Quickstart Application Setup
 
@@ -33,20 +33,27 @@ If you're using an existing project, skip to [Installing the SDK packages](#inst
 
 1. Create or navigate to the directory in which you want to create your Angular app.
 2. Run this command to create your new Angular app.
+
 ```sh
 npm init @angular compose-sdk-app
 ```
+
 3. When prompted, choose to add Angular routing, then press Enter to accept the default option.
-This creates a new Angular app in the `compose-sdk-app` directory.
+   This creates a new Angular app in the `compose-sdk-app` directory.
 4. Run this command to navigate to the newly created directory.
+
 ```sh
 cd compose-sdk-app
 ```
+
 5. Install the dependencies.
+
 ```sh
 npm install
 ```
+
 6. To run the application, use:
+
 ```sh
 npm start
 ```
@@ -55,20 +62,22 @@ npm start
 
 First, you should make some configurations to enable proper typing with TypeScript.
 You can achieve this by adding the `allowSyntheticDefaultImports` flag to the `compilerOptions` section in your `tsconfig.json` file.
->**Note:** This flag does not affect the JavaScript emitted by TypeScript, it’s only for the type checking. This option brings the behavior of TypeScript in-line with Babel, where extra code is emitted to make using a default export of a module more ergonomic.
 
-<img src="./img/angular-allow-synthetic-default-imports.png" height="100px"/>
+> **Note:** This flag does not affect the JavaScript emitted by TypeScript, it’s only for the type checking. This option brings the behavior of TypeScript in-line with Babel, where extra code is emitted to make using a default export of a module more ergonomic.
+
+<img src="../img/angular-allow-synthetic-default-imports.png" height="100px"/>
 
 Compose SDK for Angular contains three packages for public use:
 
-- [@sisense/sdk-ui-angular](https://www.npmjs.com/package/@sisense/sdk-ui-angular): Angular components and services for rendering charts and executing queries against a Sisense instance.
-- [@sisense/sdk-data](https://www.npmjs.com/package/@sisense/sdk-data): Implementations of dimensional modeling elements including dimensions, attributes, measures, and filters.
-- [@sisense/sdk-cli](https://www.npmjs.com/package/@sisense/sdk-cli): A command-line tool for generating a TypeScript representation of a Sisense data model.
+-   [@sisense/sdk-ui-angular](https://www.npmjs.com/package/@sisense/sdk-ui-angular): Angular components and services for rendering charts and executing queries against a Sisense instance.
+-   [@sisense/sdk-data](https://www.npmjs.com/package/@sisense/sdk-data): Implementations of dimensional modeling elements including dimensions, attributes, measures, and filters.
+-   [@sisense/sdk-cli](https://www.npmjs.com/package/@sisense/sdk-cli): A command-line tool for generating a TypeScript representation of a Sisense data model.
 
 The Compose SDK packages are deployed via public NPM Registry. To install `@sisense/sdk-ui-angular` and `@sisense/sdk-data` for your app:
-   ```sh
-   npm i @sisense/sdk-ui-angular @sisense/sdk-data
-   ```
+
+```sh
+npm i @sisense/sdk-ui-angular @sisense/sdk-data
+```
 
 Package `@sisense/sdk-cli` is not needed to run your app. It will be installed on the fly as you execute CLI commands using [npx](https://docs.npmjs.com/cli/v10/commands/npx).
 
@@ -157,8 +166,8 @@ In this section, you will add a new component and modify the main app module to
 > **Note:**
 > The following assumptions are made about your application:
 >
-> - The `sample-healthcare.ts` file generated earlier resides in `src/`.
-> - The URL to your application (f.e. http://localhost:4200) is already added as an entry to CORS Allowed Origins section on your Sisense instance
+> -   The `sample-healthcare.ts` file generated earlier resides in `src/`.
+> -   The URL to your application (f.e. http://localhost:4200) is already added as an entry to CORS Allowed Origins section on your Sisense instance
 
 ### Connecting to a Sisense Instance
 
@@ -170,18 +179,24 @@ The following examples shows how to add a provider to `src/app/app.module.ts`.
 Full file code is available in [Adding a component and routing section](#adding-a-component-and-routing)
 :::
 Add the following:
-- TypeScript imports:
+
+-   TypeScript imports:
+
 ```typescript
 import { SISENSE_CONTEXT_CONFIG_TOKEN, SdkUiModule, SisenseContextConfig } from '@sisense/sdk-ui-angular';
 ```
-- Authentication config:
+
+-   Authentication config:
+
 ```typescript
 export const SISENSE_CONTEXT_CONFIG: SisenseContextConfig = {
-  url: '<instance url>', // replace with the URL of your Sisense instance
-  token: '<api token>', // replace with the API token of your user account
+    url: '<instance url>', // replace with the URL of your Sisense instance
+    token: '<api token>', // replace with the API token of your user account
 };
 ```
-- Module import and provider:
+
+-   Module import and provider:
+
 ```typescript
 @NgModule({
   imports: [SdkUiModule],
@@ -201,16 +216,19 @@ To render a chart in your application that queries your data model, you need to
 Here, we'll add a new **Analytics** component with the help of the `ng` CLI tool. You can do it manually. For more information, see the [guide](https://angular.io/guide/component-overview) from Angular.
 
 Run following in your terminal from the project directory:
+
 ```sh
 npx ng generate component analytics
 ```
+
 This should result in a new folder with three files inside:
 
-<img src='./img/angular-component-folders.png' height='200px' />
+<img src='../img/angular-component-folders.png' height='200px' />
 
 Next, configure the routing and point the main page to the `Analytics` component.
 
 The `app.module.ts` file should look like this now:
+
 ```typescript
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
@@ -221,28 +239,21 @@ import { RouterModule } from '@angular/router';
 import { AnalyticsComponent } from './analytics/analytics.component';
 
 export const SISENSE_CONTEXT_CONFIG: SisenseContextConfig = {
-  url: '<instance url>', // replace with the URL of your Sisense instance
-  token: '<api token>', // replace with the API token of your user account
+    url: '<instance url>', // replace with the URL of your Sisense instance
+    token: '<api token>', // replace with the API token of your user account
 };
 
 @NgModule({
-  imports: [
-    BrowserModule,
-    SdkUiModule,
-    RouterModule.forRoot([
-      { path: '', component: AnalyticsComponent },
-    ]),
-  ],
-  declarations: [AppComponent, AnalyticsComponent],
-  providers: [
-    { provide: SISENSE_CONTEXT_CONFIG_TOKEN, useValue: SISENSE_CONTEXT_CONFIG },
-  ],
-  bootstrap: [AppComponent],
+    imports: [BrowserModule, SdkUiModule, RouterModule.forRoot([{ path: '', component: AnalyticsComponent }])],
+    declarations: [AppComponent, AnalyticsComponent],
+    providers: [{ provide: SISENSE_CONTEXT_CONFIG_TOKEN, useValue: SISENSE_CONTEXT_CONFIG }],
+    bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}
 ```
 
 Replace the contents of the `app.component.html` file with:
+
 ```typescript
 <router-outlet></router-outlet>
 ```
@@ -273,32 +284,33 @@ import { measureFactory } from '@sisense/sdk-data';
 import * as DM from '../../sample-healthcare';
 
 @Component({
-  selector: 'app-analytics',
-  templateUrl: './analytics.component.html',
-  styleUrls: ['./analytics.component.css'],
+    selector: 'app-analytics',
+    templateUrl: './analytics.component.html',
+    styleUrls: ['./analytics.component.css'],
 })
 export class AnalyticsComponent {
-  chart = {
-    chartType: 'line' as const,
-    dataSet: DM.DataSource,
-    dataOptions: {
-      category: [DM.Doctors.Specialty],
-      value: [measureFactory.average(DM.Admissions.TimeofStay, 'Average time of stay')],
-      breakBy: [],
-    },
-    styleOptions: {
-      legend: {
-        enabled: true,
-        position: 'bottom',
-      },
-    },
-  };
-
-  logArguments(...args: any[]) {
-    console.log(args);
-  }
+    chart = {
+        chartType: 'line' as const,
+        dataSet: DM.DataSource,
+        dataOptions: {
+            category: [DM.Doctors.Specialty],
+            value: [measureFactory.average(DM.Admissions.TimeofStay, 'Average time of stay')],
+            breakBy: [],
+        },
+        styleOptions: {
+            legend: {
+                enabled: true,
+                position: 'bottom',
+            },
+        },
+    };
+
+    logArguments(...args: any[]) {
+        console.log(args);
+    }
 }
 ```
+
 ```ts
 // src/app/analytics/analytics.component.html
 
@@ -314,9 +326,9 @@ export class AnalyticsComponent {
 
 At this point, check your application in the browser if it's already running or run `npm start` to run your application and view it in a browser.
 
-You first Compose SDK chart with Angular should look something like this:
+Your first Compose SDK chart with Angular should look something like this:
 
-![Line chart rendered by the Angular component](./img/angular-quickstart-chart-example.png)
+![Line chart rendered by the Angular component](../img/angular-quickstart-chart-example.png)
 
 See the [SISENSE_CONTEXT_CONFIG_TOKEN](./modules/sdk-ui-angular/contexts/variable.SISENSE_CONTEXT_CONFIG_TOKEN.md) and [ChartComponent](./modules/sdk-ui-angular/charts/class.ChartComponent.md) docs for more details on supported props.