Release v1.22.0

.eslintrc.cjs

@@ -13,7 +13,7 @@ module.exports = {
     {
       files: ['*.{ts,js,tsx,jsx}'],
       excludedFiles: ['**/*.config.{ts,js}', '**/*.workspace.{ts,js}'],
-      extends: ['@sisense/eslint-config/typescript/react'],
+      extends: ['@sisense/eslint-config/typescript/react', 'plugin:i18next/recommended'],
       overrides: [
         {
           // https://stackoverflow.com/questions/66773897/react-using-typescript-dont-use-as-a-type
@@ -58,6 +58,15 @@ module.exports = {
             'no-global-assign': 'error',
             'no-extend-native': 'error',
             'no-implicit-globals': 'error',
+            // change jsx-text-only to jsx-only for deeper analysis
+            'i18next/no-literal-string': ['error', { mode: 'jsx-text-only' }],
+          },
+        },
+        {
+          // Disable the translation rule for files in the /examples folder
+          files: ['examples/**/*'],
+          rules: {
+            'i18next/no-literal-string': 'off',
           },
         },
         {
@@ -93,6 +102,7 @@ module.exports = {
             'max-lines-per-function': 'off',
             'max-lines': 'off',
             'no-global-assign': ['error', { exceptions: ['window', 'document'] }],
+            'i18next/no-literal-string': 'off',
           },
         },
         {

CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## [1.22.0] - 2024-10-28
+
+### Added
+- Add hook `useComposedDashboard` (alpha) for flexible dashboard composition in React
+- Add hook `useDashboardTheme` for internal testing
+- Support persistence of dashboard for internal testing
+- Add callback `onDataReady` to `ChartProps` for internal testing
+- Add custom translations loader for internal testing
+- Extend CLI `get-data-model` command to include attribute's data source into resulting data model
+- Add CommonJS builds to the packages of `sdk-common`, `sdk-modeling`, `sdk-query-client`, `sdk-rest-client`, `sdk-tracking`, and `sdk-preact` to support Jest compatibility
+
+### Changed
+- Remove internal `enableTracking` property in `SisenseContextProviderProps`
+- Make `ErrorBox` not show by default
+- Fix empty pivot due to incorrect socket namespace for custom tenant
+- Use absolute y-values for pie charts
+- Align “select/unselect” cross-filtering behavior with Fusion
+- Migrate `ChartWidget` to use a new internal `useWithDrilldown` hook
+
+
 ## [1.21.0] - 2024-10-15
 
 ### Added

docs-md/sdk/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## [1.22.0] - 2024-10-28
+
+### Added
+- Add hook `useComposedDashboard` (alpha) for flexible dashboard composition in React
+- Add hook `useDashboardTheme` for internal testing
+- Support persistence of dashboard for internal testing
+- Add callback `onDataReady` to `ChartProps` for internal testing
+- Add custom translations loader for internal testing
+- Extend CLI `get-data-model` command to include attribute's data source into resulting data model
+- Add CommonJS builds to the packages of `sdk-common`, `sdk-modeling`, `sdk-query-client`, `sdk-rest-client`, `sdk-tracking`, and `sdk-preact` to support Jest compatibility
+
+### Changed
+- Remove internal `enableTracking` property in `SisenseContextProviderProps`
+- Make `ErrorBox` not show by default
+- Fix empty pivot due to incorrect socket namespace for custom tenant
+- Use absolute y-values for pie charts
+- Align “select/unselect” cross-filtering behavior with Fusion
+- Migrate `ChartWidget` to use a new internal `useWithDrilldown` hook
+
+
 ## [1.21.0] - 2024-10-15
 
 ### Added

docs-md/sdk/guides/index.md

@@ -31,6 +31,9 @@ indexTopics:
     - title: Migration Guide
       description: Migrate your project from 0.X.X to 1.0.0
       link: ./migration-guide-1.0.0
+    - title: Internationalization (Alpha)
+      description: Learn how to configure language and extend translations in Compose SDK
+      link: ./internationalization
 ---
 
 # Guides

docs-md/sdk/guides/internationalization.md

@@ -0,0 +1,94 @@
+---
+title: Internationalization with Compose SDK (Alpha)
+---
+
+# Internationalization with Compose SDK (Alpha)
+The Compose SDK utilizes the [i18next](https://www.i18next.com/) internationalization framework, making it straightforward to load your own translations.
+
+## Changing the language
+To facilitate language changes, the `AppConfig` of `SisenseContextProvider` includes a `translationConfig` property where you can easily set your desired language. For example, to set the language to **French**, use the following code:
+```
+<SisenseContextProvider appConfig={{ translationConfig: { language: 'fr' }}}>
+```
+## Loading Additional Translations
+By default, the Compose SDK offers a limited number of translation resources. You can utilize `translationConfig` to load additional translation resources into the internationalization framework.
+
+### Preparing Translation Resources
+A translation resource is essentially a nested object comprising translation keys and their corresponding string values. A reference file is available on our GitLab as the [`en.ts` file](https://github.com/sisense/compose-sdk-monorepo/blob/main/packages/sdk-ui/src/translation/resources/en.ts) located in the `translation` folder. If you are providing translations for a package other than `sdk-ui`, refer to that package's `en.ts` file.
+
+It’s important to note that you don’t have to specify all translation keys; any keys that are not provided will default to English.
+
+**IMPORTANT:** Do not translate parts within double curly brackets (i.e., `{{chartType}}`), as these are placeholders for dynamic values that will be matched using the provided variable names.
+
+#### Example: Translation Resources
+Let’s create translation resources for some fields in `sdk-ui` in **French**, and one error message in `sdk-data` in **Spanish**:
+```
+const frenchTranslationResources = {
+  errors: {
+    invalidFilterType: 'Type de filtre invalide',
+  },
+  chartNoData: 'Aucun résultat'
+};
+```
+```
+const spanishTranslationResources = {
+  errors: {
+    measure: {
+      unsupportedType: 'Tipo de medida no compatible',
+    },
+  },
+};
+```
+
+As these files may grow larger, consider storing translations in separate files and loading them as needed. JSON format is a suitable option for nested objects like these.
+
+###  Configuring Custom Translations
+Similar to how we set the language, we can now provide additional translation resources through the `translationConfig`. Below is an example of loading both translations while setting the default language to **French**:
+```
+<SisenseContextProvider
+  appConfig={{
+    translationConfig: {
+      language: 'fr',
+      customTranslations: [{
+        language: 'fr',
+        resources: frenchTranslationResources,
+      },
+      {
+        language: 'es',
+        packageName: 'sdkData',
+        resources: spanishTranslationResources,
+      }]
+    }
+  }}
+ >
+```
+Note that we specified the package name for **Spanish**, as this translation is meant to be loaded for the `sdk-data` package.
+
+Package names can be found in `src/translation/resources/index.ts` of every package - look for `PACKAGE_NAMESPACE` variable.
+If `packageName` is not specified, the translation resource will be registered for `sdkUi` namespace that corresponds to `sdk-ui` package.
+
+
+## Advanced Configuration
+For more advanced internationalization configurations, the `i18n` instance is accessible through the [`useTranslation` hook](https://react.i18next.com/latest/usetranslation-hook) from the `react-i18next` package.
+
+**Note:** The `i18n` instance is initialized within the `SisenseContextProvider`. Therefore, it is important to use the `useTranslation` hook either within the `SisenseContextProvider` or in its child components. Attempting to access `i18n` outside of this context will not yield the instance utilized by the Compose SDK.
+
+#### Example: Checking Loaded Resources
+To verify if the **French** resource bundle is loaded for the `sdk-ui` package, you can use the following code:
+```
+import { useTranslation } from 'react-i18next';
+import { useEffect } from 'react';
+
+const MyComponent = () => {
+  const { i18n } = useTranslation();
+
+  useEffect(() => {
+	const frenchTranslationResourse = i18n.getResourceBundle('fr', 'sdkUi');
+	console.log(`Loaded French translation ${JSON.stringify(frenchTranslationResourse)}`)
+  }, [i18n]);
+
+  return <></>;
+}
+```
+
+For further details, please refer to the [i18next API documentation](https://www.i18next.com/overview/api).

docs-md/sdk/modules/sdk-data/factories/namespace.filterFactory/functions/index.md

@@ -66,7 +66,7 @@ greater than 1000.
 - [measureGreaterThanOrEqual](function.measureGreaterThanOrEqual.md)
 - [measureLessThan](function.measureLessThan.md)
 - [measureLessThanOrEqual](function.measureLessThanOrEqual.md)
-- [members](function.members.md)
+- [members](function.members.md) - Creates filter on attribute to match certain string values
 - [numeric](function.numeric.md)
 - [startsWith](function.startsWith.md)
 - [thisMonth](function.thisMonth.md)

docs-md/sdk/modules/sdk-data/factories/namespace.filterFactory/index.md

@@ -70,7 +70,7 @@ greater than 1000.
 - [measureGreaterThanOrEqual](functions/function.measureGreaterThanOrEqual.md)
 - [measureLessThan](functions/function.measureLessThan.md)
 - [measureLessThanOrEqual](functions/function.measureLessThanOrEqual.md)
-- [members](functions/function.members.md)
+- [members](functions/function.members.md) - Creates filter on attribute to match certain string values
 - [numeric](functions/function.numeric.md)
 - [startsWith](functions/function.startsWith.md)
 - [thisMonth](functions/function.thisMonth.md)

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

@@ -17,7 +17,7 @@ Each unique dimension, measure, or filter included in the `formula` must be defi
 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 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-assets/function.useGetSharedFormula.md).
 
 ## Parameters
 

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

@@ -195,7 +195,7 @@ Use the `highchartsOptions` object that is passed to the callback to change
 [options values](https://api.highcharts.com/highcharts/) and then return the modified options
 object. The returned options are then used when rendering the chart.
 
-This callback is not supported for Indicator Chart, Areamap Chart, and Scattermap Chart.
+This callback is not supported for Indicator Chart, Areamap Chart, Scattermap Chart, and Table.
 
 For an example of how the `onBeforeRender` callback can be used, see the
 [Compose SDK Charts Guide](/guides/sdk/guides/charts/guide-compose-sdk-charts.html#callbacks).

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

@@ -205,7 +205,7 @@ Use the `highchartsOptions` object that is passed to the callback to change
 [options values](https://api.highcharts.com/highcharts/) and then return the modified options
 object. The returned options are then used when rendering the chart.
 
-This callback is not supported for Indicator Chart, Areamap Chart, and Scattermap Chart.
+This callback is not supported for Indicator Chart, Areamap Chart, Scattermap Chart, and Table.
 
 For an example of how the `onBeforeRender` callback can be used, see the
 [Compose SDK Charts Guide](/guides/sdk/guides/charts/guide-compose-sdk-charts.html#callbacks).

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

@@ -196,7 +196,7 @@ Use the `highchartsOptions` object that is passed to the callback to change
 [options values](https://api.highcharts.com/highcharts/) and then return the modified options
 object. The returned options are then used when rendering the chart.
 
-This callback is not supported for Indicator Chart, Areamap Chart, and Scattermap Chart.
+This callback is not supported for Indicator Chart, Areamap Chart, Scattermap Chart, and Table.
 
 For an example of how the `onBeforeRender` callback can be used, see the
 [Compose SDK Charts Guide](/guides/sdk/guides/charts/guide-compose-sdk-charts.html#callbacks).

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

@@ -186,7 +186,7 @@ Use the `highchartsOptions` object that is passed to the callback to change
 [options values](https://api.highcharts.com/highcharts/) and then return the modified options
 object. The returned options are then used when rendering the chart.
 
-This callback is not supported for Indicator Chart, Areamap Chart, and Scattermap Chart.
+This callback is not supported for Indicator Chart, Areamap Chart, Scattermap Chart, and Table.
 
 For an example of how the `onBeforeRender` callback can be used, see the
 [Compose SDK Charts Guide](/guides/sdk/guides/charts/guide-compose-sdk-charts.html#callbacks).

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

@@ -218,7 +218,7 @@ Use the `highchartsOptions` object that is passed to the callback to change
 [options values](https://api.highcharts.com/highcharts/) and then return the modified options
 object. The returned options are then used when rendering the chart.
 
-This callback is not supported for Indicator Chart, Areamap Chart, and Scattermap Chart.
+This callback is not supported for Indicator Chart, Areamap Chart, Scattermap Chart, and Table.
 
 For an example of how the `onBeforeRender` callback can be used, see the
 [Compose SDK Charts Guide](/guides/sdk/guides/charts/guide-compose-sdk-charts.html#callbacks).

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

@@ -195,7 +195,7 @@ Use the `highchartsOptions` object that is passed to the callback to change
 [options values](https://api.highcharts.com/highcharts/) and then return the modified options
 object. The returned options are then used when rendering the chart.
 
-This callback is not supported for Indicator Chart, Areamap Chart, and Scattermap Chart.
+This callback is not supported for Indicator Chart, Areamap Chart, Scattermap Chart, and Table.
 
 For an example of how the `onBeforeRender` callback can be used, see the
 [Compose SDK Charts Guide](/guides/sdk/guides/charts/guide-compose-sdk-charts.html#callbacks).

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

@@ -190,7 +190,7 @@ Use the `highchartsOptions` object that is passed to the callback to change
 [options values](https://api.highcharts.com/highcharts/) and then return the modified options
 object. The returned options are then used when rendering the chart.
 
-This callback is not supported for Indicator Chart, Areamap Chart, and Scattermap Chart.
+This callback is not supported for Indicator Chart, Areamap Chart, Scattermap Chart, and Table.
 
 For an example of how the `onBeforeRender` callback can be used, see the
 [Compose SDK Charts Guide](/guides/sdk/guides/charts/guide-compose-sdk-charts.html#callbacks).

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

@@ -193,7 +193,7 @@ Use the `highchartsOptions` object that is passed to the callback to change
 [options values](https://api.highcharts.com/highcharts/) and then return the modified options
 object. The returned options are then used when rendering the chart.
 
-This callback is not supported for Indicator Chart, Areamap Chart, and Scattermap Chart.
+This callback is not supported for Indicator Chart, Areamap Chart, Scattermap Chart, and Table.
 
 For an example of how the `onBeforeRender` callback can be used, see the
 [Compose SDK Charts Guide](/guides/sdk/guides/charts/guide-compose-sdk-charts.html#callbacks).

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

@@ -192,7 +192,7 @@ Use the `highchartsOptions` object that is passed to the callback to change
 [options values](https://api.highcharts.com/highcharts/) and then return the modified options
 object. The returned options are then used when rendering the chart.
 
-This callback is not supported for Indicator Chart, Areamap Chart, and Scattermap Chart.
+This callback is not supported for Indicator Chart, Areamap Chart, Scattermap Chart, and Table.
 
 For an example of how the `onBeforeRender` callback can be used, see the
 [Compose SDK Charts Guide](/guides/sdk/guides/charts/guide-compose-sdk-charts.html#callbacks).

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

@@ -194,7 +194,7 @@ Use the `highchartsOptions` object that is passed to the callback to change
 [options values](https://api.highcharts.com/highcharts/) and then return the modified options
 object. The returned options are then used when rendering the chart.
 
-This callback is not supported for Indicator Chart, Areamap Chart, and Scattermap Chart.
+This callback is not supported for Indicator Chart, Areamap Chart, Scattermap Chart, and Table.
 
 For an example of how the `onBeforeRender` callback can be used, see the
 [Compose SDK Charts Guide](/guides/sdk/guides/charts/guide-compose-sdk-charts.html#callbacks).

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

@@ -194,7 +194,7 @@ Use the `highchartsOptions` object that is passed to the callback to change
 [options values](https://api.highcharts.com/highcharts/) and then return the modified options
 object. The returned options are then used when rendering the chart.
 
-This callback is not supported for Indicator Chart, Areamap Chart, and Scattermap Chart.
+This callback is not supported for Indicator Chart, Areamap Chart, Scattermap Chart, and Table.
 
 For an example of how the `onBeforeRender` callback can be used, see the
 [Compose SDK Charts Guide](/guides/sdk/guides/charts/guide-compose-sdk-charts.html#callbacks).

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

@@ -192,7 +192,7 @@ Use the `highchartsOptions` object that is passed to the callback to change
 [options values](https://api.highcharts.com/highcharts/) and then return the modified options
 object. The returned options are then used when rendering the chart.
 
-This callback is not supported for Indicator Chart, Areamap Chart, and Scattermap Chart.
+This callback is not supported for Indicator Chart, Areamap Chart, Scattermap Chart, and Table.
 
 For an example of how the `onBeforeRender` callback can be used, see the
 [Compose SDK Charts Guide](/guides/sdk/guides/charts/guide-compose-sdk-charts.html#callbacks).

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

@@ -192,7 +192,7 @@ Use the `highchartsOptions` object that is passed to the callback to change
 [options values](https://api.highcharts.com/highcharts/) and then return the modified options
 object. The returned options are then used when rendering the chart.
 
-This callback is not supported for Indicator Chart, Areamap Chart, and Scattermap Chart.
+This callback is not supported for Indicator Chart, Areamap Chart, Scattermap Chart, and Table.
 
 For an example of how the `onBeforeRender` callback can be used, see the
 [Compose SDK Charts Guide](/guides/sdk/guides/charts/guide-compose-sdk-charts.html#callbacks).

docs-md/sdk/modules/sdk-ui-angular/charts/index.md

@@ -11,8 +11,8 @@ Angular components and utilities for working with charts
 - [AreaRangeChartComponent](class.AreaRangeChartComponent.md) <Badge type="beta" text="Beta" />
 - [BarChartComponent](class.BarChartComponent.md)
 - [BoxplotChartComponent](class.BoxplotChartComponent.md)
-- [boxWhiskerProcessResult](function.boxWhiskerProcessResult.md)
-- [ChartComponent](class.ChartComponent.md)
+- [boxWhiskerProcessResult](function.boxWhiskerProcessResult.md) - Utility function that combines box whisker data and outliers data
+- [ChartComponent](class.ChartComponent.md) - Common component for rendering charts of different types including table
 - [ColumnChartComponent](class.ColumnChartComponent.md)
 - [FunnelChartComponent](class.FunnelChartComponent.md)
 - [IndicatorChartComponent](class.IndicatorChartComponent.md)

docs-md/sdk/modules/sdk-ui-angular/dashboards/class.ChartWidgetComponent.md

@@ -174,7 +174,7 @@ Use the `highchartsOptions` object that is passed to the callback to change
 [options values](https://api.highcharts.com/highcharts/) and then return the modified options
 object. The returned options are then used when rendering the chart.
 
-This callback is not supported for Indicator Chart, Areamap Chart, and Scattermap Chart.
+This callback is not supported for Indicator Chart, Areamap Chart, Scattermap Chart, and Table.
 
 For an example of how the `onBeforeRender` callback can be used, see the
 [Compose SDK Charts Guide](/guides/sdk/guides/charts/guide-compose-sdk-charts.html#callbacks).

docs-md/sdk/modules/sdk-ui-angular/fusion-embed/index.md → docs-md/sdk/modules/sdk-ui-angular/fusion-assets/index.md

@@ -1,10 +1,10 @@
 ---
-title: Fusion Embed
+title: Fusion Assets
 ---
 
-# Fusion Embed
+# Fusion Assets
 
-Angular modules, services, and components for working with Fusion Embed dashboards, widgets, queries, and formulas
+Angular modules, services, and components for working with Fusion dashboards, widgets, queries, and formulas
 
 - [DashboardByIdComponent](class.DashboardByIdComponent.md) <Badge type="fusionEmbed" text="Fusion Embed" /> <Badge type="beta" text="Beta" />
 - [DashboardModel](interface.DashboardModel.md) <Badge type="fusionEmbed" text="Fusion Embed" />