Release v1.18.0

.prettierignore

@@ -5,6 +5,7 @@ node_modules/
 
 # Ignore artifacts:
 dist/
+**/dist/
 coverage/
 
 # Ignore auto-generated files:

CHANGELOG.md

@@ -1,15 +1,39 @@
 # Changelog
 
+## [1.18.0] - 2024-09-03
+
+### Added
+
+- Add auto zoom feature to `DashboardWidget`
+- Support forecast and trend in Fusion widgets
+
+### Changed
+
+- Improve `SisenseContextProvider`: support of Fusion authentication
+- Extend `measureFactory.customFormula` to support filters
+- Improve `PivotTable`: proper handling of web socket readiness
+- Fix `DashboardWidget` with filter relations and highlights
+- Improve tooltips for forecast and trend
+- Improve charts: palette colors of `BoxplotChart`, refactoring `ThemeSettings.chart.panelBackgroundColor`, making `color` column optional in `AreamapChart`, support of thousands separator from old `numberFormat` config, axis labels for stacked percent charts
+- Improve infrastructure: visual tests of dashboard assets of diffent widget types, replacement of CommonJS dependencies (e.g., lodash)
+
+## [1.17.1] - 2024-08-22
+
+### Changed
+- Improve error handling of WAT authentication
+- Fix an issue in `Table` so user-provided data are sorted in their entirety, instead of per page
+- Apply widget description as `accessibility.description` for `ChartWidget`
+
 ## [1.17.0] - 2024-08-20
 
 ### Added
 - Move components `DashboardById` and `Dashboard` to internal alpha for React, Angular, and Vue
-- Support external usage tracking in `AppConfig.trackingConfig.onTrackingEvent`
+- Support external usage tracking callback configured through `trackingConfig.onTrackingEvent` of the `AppConfig`
 - Refactor `ChartWidget` to reuse `DrilldownWidget` internally
 - Support drill down for scatter chart widgets
 
 ### Changed
-- Mark internal property `enableTracking?` as `@deprecated` in `SisenseContextProviderProps` – use `AppConfig.trackingConfig.enabled` instead
+- Deprecate internal `enableTracking` property in `SisenseContextProviderProps` – use `trackingConfig.enabled` of the `AppConfig` instead
 - Extend `ThemeSettings` to support animation-related config
 - Improve dashboard rendering: locked filters in cross filtering, resetting levels of `CascadingFilterTile`, highlight of all categories in cartesian charts, dashboard theme setting, matching theme for widget header info panel
 - Refactor component `Table` to reduce computations and re-renders

ci/lint_commits.sh

@@ -3,10 +3,10 @@
 set -o xtrace
 
 # It looks like the external URL is not set up correctly for GitLab
-# It is probably set to http://gitlab.sisense.com/ instead of https://gitlab.sisense.com/ (HTTP instead of HTTPS)
+# It is probably set to http://gitlab.rnd.sisense.com/ instead of https://gitlab.rnd.sisense.com/ (HTTP instead of HTTPS)
 # Reference: https://docs.gitlab.com/omnibus/settings/configuration.html#configure-the-external-url-for-gitlab
 # As a temporary workaround, we are setting the remote URL manually
-git remote set-url origin https://gitlab-ci-token:"$GITLAB_TOKEN"@gitlab.sisense.com/SisenseTeam/compose-sdk-monorepo.git
+git remote set-url origin https://gitlab-ci-token:"$GITLAB_TOKEN"@gitlab.rnd.sisense.com/SisenseTeam/compose-sdk-monorepo.git
 
 if [[ "$CI_COMMIT_REF_NAME" == "" ]]; then
 	echo '$CI_COMMIT_REF_NAME missing'

docs-md/sdk/CHANGELOG.md

@@ -1,15 +1,39 @@
 # Changelog
 
+## [1.18.0] - 2024-09-03
+
+### Added
+
+- Add auto zoom feature to `DashboardWidget`
+- Support forecast and trend in Fusion widgets
+
+### Changed
+
+- Improve `SisenseContextProvider`: support of Fusion authentication
+- Extend `measureFactory.customFormula` to support filters
+- Improve `PivotTable`: proper handling of web socket readiness
+- Fix `DashboardWidget` with filter relations and highlights
+- Improve tooltips for forecast and trend
+- Improve charts: palette colors of `BoxplotChart`, refactoring `ThemeSettings.chart.panelBackgroundColor`, making `color` column optional in `AreamapChart`, support of thousands separator from old `numberFormat` config, axis labels for stacked percent charts
+- Improve infrastructure: visual tests of dashboard assets of diffent widget types, replacement of CommonJS dependencies (e.g., lodash)
+
+## [1.17.1] - 2024-08-22
+
+### Changed
+- Improve error handling of WAT authentication
+- Fix an issue in `Table` so user-provided data are sorted in their entirety, instead of per page
+- Apply widget description as `accessibility.description` for `ChartWidget`
+
 ## [1.17.0] - 2024-08-20
 
 ### Added
 - Move components `DashboardById` and `Dashboard` to internal alpha for React, Angular, and Vue
-- Support external usage tracking in `AppConfig.trackingConfig.onTrackingEvent`
+- Support external usage tracking callback configured through `trackingConfig.onTrackingEvent` of the `AppConfig`
 - Refactor `ChartWidget` to reuse `DrilldownWidget` internally
 - Support drill down for scatter chart widgets
 
 ### Changed
-- Mark internal property `enableTracking?` as `@deprecated` in `SisenseContextProviderProps` – use `AppConfig.trackingConfig.enabled` instead
+- Deprecate internal `enableTracking` property in `SisenseContextProviderProps` – use `trackingConfig.enabled` of the `AppConfig` instead
 - Extend `ThemeSettings` to support animation-related config
 - Improve dashboard rendering: locked filters in cross filtering, resetting levels of `CascadingFilterTile`, highlight of all categories in cartesian charts, dashboard theme setting, matching theme for widget header info panel
 - Refactor component `Table` to reduce computations and re-renders

docs-md/sdk/modules/sdk-data/factories/namespace.measureFactory/functions/function.customFormula.md

@@ -7,29 +7,29 @@ title: customFormula
 > **customFormula**(
   `title`,
   `formula`,
-  `context`): [`Attribute`](../../../interfaces/interface.Attribute.md) \| [`Measure`](../../../interfaces/interface.Measure.md)
+  `context`): [`CalculatedMeasure`](../../../interfaces/interface.CalculatedMeasure.md)
 
 Creates a calculated measure for a valid custom formula built from [base functions](/guides/sdk/reference/functions.html#measured-value-functions).
 
-Use square brackets (`[]`) within the `formula` property to include dimensions or measures.
-Each unique dimension or measure included in the `formula` must be defined using a property:value pair in the `context` parameter.
+Use square brackets (`[]`) within the `formula` property to include dimensions, measures, or filters.
+Each unique dimension, measure, or filter included in the `formula` must be defined using a property:value pair in the `context` parameter.
 
 You can nest custom formulas by placing one inside the `formula` parameter of another.
 
 Note: To use [shared formulas](https://docs.sisense.com/main/SisenseLinux/shared-formulas.htm)
-from a Fusion Embed instance, you must fetch them first using [useGetSharedFormula](../../../../sdk-ui/fusion-embed/function.useGetSharedFormula.md).
+from a Fusion instance, you must fetch them first using [useGetSharedFormula](../../../../sdk-ui/fusion-embed/function.useGetSharedFormula.md).
 
 ## Parameters
 
 | Parameter | Type | Description |
 | :------ | :------ | :------ |
 | `title` | `string` | Title of the measure to be displayed in legend |
 | `formula` | `string` | Formula to be used for the measure |
-| `context` | [`CustomFormulaContext`](../../../interfaces/interface.CustomFormulaContext.md) | Formula context as a map of strings to measures or attributes |
+| `context` | [`CustomFormulaContext`](../../../interfaces/interface.CustomFormulaContext.md) | Formula context as a map of strings to attributes, measures, or filters |
 
 ## Returns
 
-[`Attribute`](../../../interfaces/interface.Attribute.md) \| [`Measure`](../../../interfaces/interface.Measure.md)
+[`CalculatedMeasure`](../../../interfaces/interface.CalculatedMeasure.md)
 
 A calculated measure instance
 
@@ -57,3 +57,15 @@ const profitabilityRatioRank = measureFactory.customFormula(
   },
 );
 ```
+
+Another example of constructing a custom formula using measures and filters
+```ts
+const totalCostWithFilter = measureFactory.customFormula(
+  'Total Cost with Filter',
+  '(SUM([cost]), [categoryFilter])',
+  {
+    cost: DM.Commerce.Cost,
+    categoryFilter: filterFactory.members(DM.Category.Category, ['Apple Mac Desktops']),
+  },
+);
+```

docs-md/sdk/modules/sdk-data/interfaces/interface.CustomFormulaContext.md

@@ -4,6 +4,8 @@ title: CustomFormulaContext
 
 # Interface CustomFormulaContext
 
+Context for a custom formula, as defined by `measureFactory.customFormula()`
+
 ## Indexable
 
- \[`key`: `string`\]: [`Attribute`](interface.Attribute.md) \| [`Measure`](interface.Measure.md)
+ \[`key`: `string`\]: [`Attribute`](interface.Attribute.md) \| [`Measure`](interface.Measure.md) \| [`Filter`](interface.Filter.md)

docs-md/sdk/modules/sdk-ui-angular/charts/class.AreamapChartComponent.md

@@ -14,7 +14,9 @@ An Angular component that allows to visualize geographical data as polygons on a
      [dataOptions]="areamapChart.dataOptions"
      [styleOptions]="areamapChart.styleOptions"
      (dataPointClick)="logArguments($event)"
-   /> * ```
+   />
+```
+
 ```ts
 import { Component } from '@angular/core';
 import { measureFactory } from '@sisense/sdk-data';

docs-md/sdk/modules/sdk-ui-angular/charts/class.BarChartComponent.md

@@ -18,7 +18,9 @@ whose lengths are proportional to the values that they represent.
      (dataPointClick)="logArguments($event)"
      (dataPointContextMenu)="logArguments($event)"
      (dataPointsSelect)="logArguments($event)"
-   /> * ```
+   />
+```
+
 ```ts
 import { Component } from '@angular/core';
 import { measureFactory, filterFactory } from '@sisense/sdk-data';

docs-md/sdk/modules/sdk-ui-angular/charts/class.BoxplotChartComponent.md

@@ -18,7 +18,9 @@ variability, and center of a data set along an axis.
      (dataPointClick)="logArguments($event)"
      (dataPointContextMenu)="logArguments($event)"
      (dataPointsSelect)="logArguments($event)"
-   /> * ```
+   />
+```
+
 ```ts
 import { Component } from '@angular/core';
 import { filterFactory } from '@sisense/sdk-data';

docs-md/sdk/modules/sdk-ui-angular/charts/class.ChartComponent.md

@@ -10,6 +10,18 @@ An Angular component used for easily switching chart types or rendering multiple
 
 An example of using the `Chart` component to
 plot a column chart of the Sample Healthcare data source hosted in a Sisense instance:
+
+```html
+<!--Component HTML template in .component.html-->
+<csdk-chart
+  [chartType]="chart.chartType"
+  [dataSet]="chart.dataSet"
+  [dataOptions]="chart.dataOptions"
+  [filters]="chart.filters"
+  [styleOptions]="chart.styleOptions"
+/>
+```
+
 ```ts
 // Component behavior in .component.ts
 chart = {
@@ -39,16 +51,6 @@ chart = {
   },
 };
 ```
-```html
-<!--Component HTML template in .component.html-->
-<csdk-chart
-  [chartType]="chart.chartType"
-  [dataSet]="chart.dataSet"
-  [dataOptions]="chart.dataOptions"
-  [filters]="chart.filters"
-  [styleOptions]="chart.styleOptions"
-/>
-```
 
 <img src="../../../img/angular-chart-example.png" width="800px" />
 

docs-md/sdk/modules/sdk-ui-angular/filter-tiles/class.DateRangeFilterTileComponent.md

@@ -43,7 +43,7 @@ export class FiltersComponent {
   };
 }
 ```
-<img src="../../../img/angular-date-range-filter-tile-example.png" width="800px" />
+<img src="../../../img/angular-date-range-filter-tile-example.png" width="600px" />
 
 ## Implements
 

docs-md/sdk/modules/sdk-ui-angular/filter-tiles/class.MemberFilterTileComponent.md

@@ -39,7 +39,7 @@ export class FiltersComponent {
   };
 }
 ```
-<img src="../../../img/angular-member-filter-tile-example.png" width="800px" />
+<img src="../../../img/angular-member-filter-tile-example.png" width="400px" />
 
 ## Implements
 

docs-md/sdk/modules/sdk-ui-angular/fusion-embed/class.DashboardWidgetComponent.md

@@ -27,12 +27,13 @@ import * as DM from '../../assets/sample-healthcare-model';
 
 @Component({
  selector: 'app-widgets',
-templateUrl: './widgets.component.html',
-styleUrls: ['./widgets.component.scss'],
+ templateUrl: './widgets.component.html',
+ styleUrls: ['./widgets.component.scss'],
 })
 export class WidgetsComponent {
  widgetOid: string = '60f3e3e3e4b0e3e3e4b0e3e3';
  dashboardOid: string = '60f3e3e3e4b0e3e3e4b0e3e3';
+}
 ```
 
 ## Implements

docs-md/sdk/modules/sdk-ui-angular/interfaces/interface.AreamapChartDataOptions.md

@@ -11,7 +11,7 @@ to geographic features of an Areamap chart.
 
 ### color
 
-> **color**: [[`MeasureColumn`](../../sdk-data/interfaces/interface.MeasureColumn.md) \| [`CalculatedMeasureColumn`](../../sdk-data/interfaces/interface.CalculatedMeasureColumn.md) \| [`StyledMeasureColumn`](interface.StyledMeasureColumn.md)]
+> **color**?: [[`MeasureColumn`](../../sdk-data/interfaces/interface.MeasureColumn.md) \| [`CalculatedMeasureColumn`](../../sdk-data/interfaces/interface.CalculatedMeasureColumn.md) \| [`StyledMeasureColumn`](interface.StyledMeasureColumn.md)]
 
 Measure column (or measure) encoded by the color of the countries (or states) on the map.
 

docs-md/sdk/modules/sdk-ui-angular/interfaces/interface.SisenseContextConfig.md

@@ -60,6 +60,16 @@ To signify that the token is pending (e.g., being generated), set the value to `
 
 ***
 
+#### useFusionAuth
+
+> **useFusionAuth**?: `boolean`
+
+Flag to delegate authentication to Fusion.
+
+Defaults to `false`.
+
+***
+
 #### wat
 
 > **wat**?: `null` \| `string`

docs-md/sdk/modules/sdk-ui-angular/interfaces/interface.ThemeSettings.md

@@ -24,6 +24,14 @@ Chart theme settings
 
 ***
 
+### filter
+
+> **filter**?: [`FilterThemeSettings`](../../sdk-ui/type-aliases/type-alias.FilterThemeSettings.md)
+
+Filter theme settings
+
+***
+
 ### general
 
 > **general**?: [`GeneralThemeSettings`](../../sdk-ui/interfaces/interface.GeneralThemeSettings.md)

docs-md/sdk/modules/sdk-ui-angular/type-aliases/type-alias.Navigator.md

@@ -15,3 +15,9 @@ Options that define navigator - zoom/pan tool for large datasets in a chart.
 **enabled**: `boolean`
 
 Boolean flag that defines if navigator should be shown on the chart
+
+***
+
+### `scrollerLocation`
+
+**scrollerLocation**?: [`AutoZoomNavigatorScrollerLocation`](../../sdk-ui/type-aliases/type-alias.AutoZoomNavigatorScrollerLocation.md)

docs-md/sdk/modules/sdk-ui-vue/chart-utilities/class.ChartWidget.md

@@ -47,7 +47,7 @@ Here's how you can use the ChartWidget component in a Vue application:
 import { ref } from 'vue';
 import { measureFactory, filterFactory } from '@sisense/sdk-data';
 import * as DM from '../assets/sample-retail-model';
-import {ChartWidget} from '@sisense/sdk-ui-vue';
+import { ChartWidget } from '@sisense/sdk-ui-vue';
 
 const dimProductName = DM.DimProducts.ProductName;
 const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');

docs-md/sdk/modules/sdk-ui-vue/charts/class.AreaChart.md

@@ -23,7 +23,7 @@ Here's how you can use the AreaChart component in a Vue application:
 import { ref } from 'vue';
 import { measureFactory, filterFactory } from '@sisense/sdk-data';
 import * as DM from '../assets/sample-retail-model';
-import {AreaChart, type AreaChartProps} from '@sisense/sdk-ui-vue';
+import { AreaChart, type AreaChartProps } from '@sisense/sdk-ui-vue';
 
 const dimProductName = DM.DimProducts.ProductName;
 const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');

docs-md/sdk/modules/sdk-ui-vue/charts/class.AreaRangeChart.md

@@ -24,7 +24,7 @@ Here's how you can use the AreaRangeChart component in a Vue application:
 import { ref } from 'vue';
 import { measureFactory } from '@sisense/sdk-data';
 import * as DM from '../assets/sample-retail-model';
-import {AreaRangeChart, type AreaRangeChartProps} from '@sisense/sdk-ui-vue';
+import { AreaRangeChart, type AreaRangeChartProps } from '@sisense/sdk-ui-vue';
 
 const dimProductName = DM.DimProducts.ProductName;
 const areaRangeChartProps = ref<AreaRangeChartProps>({

docs-md/sdk/modules/sdk-ui-vue/charts/class.AreamapChart.md

@@ -22,7 +22,7 @@ Here's how you can use the AreamapChart component in a Vue application:
 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';
+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');

docs-md/sdk/modules/sdk-ui-vue/charts/class.BarChart.md

@@ -23,7 +23,7 @@ Here's how you can use the BarChart component in a Vue application:
 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';
+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');

docs-md/sdk/modules/sdk-ui-vue/charts/class.BoxplotChart.md

@@ -23,7 +23,7 @@ Here's how you can use the BoxplotChart component in a Vue application:
 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';
+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');

docs-md/sdk/modules/sdk-ui-vue/charts/class.ColumnChart.md

@@ -23,7 +23,7 @@ Here's how you can use the ColumnChart component in a Vue application:
 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, type ColumnChartProps } from '@sisense/sdk-ui-vue';
 
 const dimProductName = DM.DimProducts.ProductName;
 const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');

docs-md/sdk/modules/sdk-ui-vue/charts/class.FunnelChart.md

@@ -21,7 +21,7 @@ Here's how you can use the FunnelChart component in a Vue application:
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import {FunnelChart, type FunnelChartProps} from '@sisense/sdk-ui-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';