276 error using boosted 4 tooltip in an angular project #407

jacques-lebourgeois · 2024-11-15T09:03:28Z

Related issues

Error using boosted 4 tooltip in an Angular projec

Description

I just pushed two commits:

One for the bug: the bug isn't really solved here, but worked around. I don't know how to use the boosted global object when the packaging system used seems to make the boosted variable inaccessible. I'm interested in solutions. In the meantime, I'm doing a fallback on the popover and tooltip renderer using Apache Echarts customized to the ODS charter.
The second commit is an attempt to improve the documentation to make it more readable and fluid.

Motivation & Context

Cf bug and its comments

Types of change

Bug fix (non-breaking which fixes an issue)
Doc enhancement

Test checklist

Please check that the following tests projects are still working:

netlify · 2024-11-15T09:03:44Z

✅ Deploy Preview for ods-charts ready!

Name	Link
🔨 Latest commit	`e2f4f9a`
🔍 Latest deploy log	https://app.netlify.com/sites/ods-charts/deploys/674089086ca42700084c6a1e
😎 Deploy Preview	https://deploy-preview-407--ods-charts.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

…various functions and their configuration

jacques-lebourgeois · 2024-11-22T13:19:39Z

src/theme/ods-chart-theme.ts

-   * @returns returns back the theme manager object
+   * @param popoverConfig the configuration of the externalizePopover feature {@link ODSChartsPopoverConfig}
+   * @param popoverDefinition renderer {@link ODSChartsPopoverDefinition} of the popover/tooltip. **{@link ODSChartsPopoverManagers}** is used to
+   * specify preconfigured renderer for Apache ECharts, Boosted 5 or Boosted 4 renderer.


Add a warning that using Boosted 4 or Boosted 5 rendering requires dependency on the boosted library and access to the boosted global variable.

jacques-lebourgeois · 2024-11-22T13:21:04Z

src/theme/popover/ods-chart-popover-definitions.ts

- * - ODSChartsPopoverManagers.BOOSTED4: to use Boosted 4 tooltip/popover
+ * - `ODSChartsPopoverManagers.NONE`: to use default ECharts template to externalize tooltip/popover HTML element, implementing Orange Design System
+ * - `ODSChartsPopoverManagers.BOOSTED5`: to use Boosted 5 tooltip/popover
+ * - `ODSChartsPopoverManagers.BOOSTED4`: to use Boosted 4 tooltip/popover


Add a warning that using Boosted 4 or Boosted 5 rendering requires dependency on the boosted library and access to the boosted global variable.

… and Tooltip rendering.

jacques-lebourgeois · 2024-11-22T13:38:58Z

I think this PR corrects the bug as expressed.

I've added a warning about the dependency on the Boosted library for Popover and Tooltip rendering.

louismaximepiton

Some small changes to the doc, but the PR already looks good.
Do we agree that none of the files in ./test/angular-ng-boosted was changed ?

louismaximepiton · 2024-11-26T10:25:34Z

src/theme/popover/ods-chart-popover-definitions.ts

@@ -90,6 +91,11 @@ export class ODSChartsPopoverDefinition {
   * getPopupTemplate() may be specify to replace a specific template for the  popup/tooltip to replace the default one
   */
  public getPopupTemplate?: (categoryLabel: string, tooltipElements: ODSChartsPopoverItem[]) => string;
+  /**
+   * if provided, the `testAvailibility()` will be called to check if this renderer is available.
+   * If not, the fall back is en empty `ODSChartsPopoverDefinition`, ie `ODSChartsPopoverManagers.NONE`


Suggested change

* If not, the fall back is en empty `ODSChartsPopoverDefinition`, ie `ODSChartsPopoverManagers.NONE`

* If not, the fall back is an empty `ODSChartsPopoverDefinition`, ie `ODSChartsPopoverManagers.NONE`

louismaximepiton · 2024-11-26T10:28:13Z

src/theme/popover/ods-chart-popover-definitions.ts

@@ -186,6 +192,21 @@ export class ODSChartsPopoverConfig {
 }

 class BOOSTED5_Definition extends ODSChartsPopoverDefinitionWithRenderer {
+  public testAvailibility = (): boolean => {
+    let availbility = true;


Suggested change

let availbility = true;

let availability = true;

louismaximepiton · 2024-11-26T10:28:50Z

src/theme/popover/ods-chart-popover-definitions.ts

@@ -221,6 +242,21 @@ class BOOSTED5_Definition extends ODSChartsPopoverDefinitionWithRenderer {
 }

 class BOOSTED4_Definition extends ODSChartsPopoverDefinitionWithRenderer {
+  public testAvailibility = (): boolean => {
+    let availbility = true;


Suggested change

let availbility = true;

let availability = true;

louismaximepiton · 2024-11-26T10:43:51Z

README.md

@@ -73,6 +73,8 @@ myChart.setOption(themeManager.getChartOptions(dataOptions));

 The `themeManager` returned by `getThemeManager()` can be used to add other features supported by the ODS Charts library.

+Read the [API documentaion](https://ods-charts.netlify.app/api/) for details on this legends, popover, tooltip... features.


Suggested change

Read the [API documentaion](https://ods-charts.netlify.app/api/) for details on this legends, popover, tooltip... features.

Read the [API documentation](https://ods-charts.netlify.app/api/) for details on this legends, popover, tooltip... features.

louismaximepiton · 2024-11-26T10:48:08Z

package.json

@@ -23,7 +23,7 @@
    "serve:any": "serve",
    "serve:react": "serve test/react/build/",
    "serve:vue": "serve test/vue/dist/",
-    "typedoc": "typedoc --out docs/api src/ods-charts.ts --disableSources --excludePrivate --excludeProtected --readme docs/README.md && node build/add_head.mjs",
+    "typedoc": "typedoc --out docs/api src/ods-charts.ts --skipErrorChecking --disableSources --excludePrivate --excludeProtected --readme docs/README.md && node build/add_head.mjs",


Not a big fan of this, I'd rather have warning during the compilation, and maybe create a new issue around these.

louismaximepiton · 2024-11-26T11:07:28Z

src/theme/ods-chart-theme.ts

-   * @returns returns back the theme manager object
+   * @param echart the initialized eCharts object
+   * @param legendHolderSelector
+   * legendHolderSelectorcan be


Suggested change

* legendHolderSelectorcan be

* legendHolderSelector can be:

louismaximepiton · 2024-11-26T11:07:53Z

src/theme/ods-chart-theme.ts

+   * @param echart the initialized eCharts object
+   * @param legendHolderSelector
+   * legendHolderSelectorcan be
+   * - a string, and then is interprated as the CSS selector of the legends container


Suggested change

* - a string, and then is interprated as the CSS selector of the legends container

* - a string, and then is interpreted as the CSS selector of the legends container

louismaximepiton · 2024-11-26T11:11:11Z

src/theme/ods-chart-theme.ts

-   *   {@link ODSChartsPopoverManagers} gives preconfigured renderer
+   * @param popoverConfig the configuration of the externalizePopover feature {@link ODSChartsPopoverConfig}
+   * @param popoverDefinition renderer {@link ODSChartsPopoverDefinition} of the popover/tooltip. **{@link ODSChartsPopoverManagers}** is used to
+   * specify preconfigured renderer for Apache ECharts, Boosted 5 or Boosted 4 renderer.


Suggested change

* specify preconfigured renderer for Apache ECharts, Boosted 5 or Boosted 4 renderer.

* specify preconfigured renderer for Apache ECharts, Boosted 5 or Boosted 4.

louismaximepiton · 2024-11-26T11:13:09Z

src/theme/ods-chart-theme.ts

   *
-   *   default value is  {@link ODSChartsPopoverManagers.NONE}: uses default Apache ECharts template to externalize tooltip/popover HTML element, implementing Orange Design system
+   * Default value is  {@link ODSChartsPopoverManagers.NONE}, that means it uses default Apache ECharts template to externalize tooltip/popover HTML element, implementing Orange Design system.


Suggested change

* Default value is {@link ODSChartsPopoverManagers.NONE}, that means it uses default Apache ECharts template to externalize tooltip/popover HTML element, implementing Orange Design system.

* Default value is {@link ODSChartsPopoverManagers}.NONE, that means it uses default Apache ECharts template to externalize tooltip/popover HTML element, implementing Orange Design system.

The link seems to be broken, not sure my workaround works in here.

louismaximepiton · 2024-11-26T11:14:56Z

src/theme/ods-chart-theme.ts

-   * optionally you can use this call to set dataOptions
-   * @returns the Apache ECharts options
+   * @param dataOptions optionally you can use this call to set dataOptions, if not already set.
+   * @returns the Apache ECharts options to use in [Apache Echarts setOption()](https://echarts.apache.org/en/option.html) call.


Suggested change

* @returns the Apache ECharts options to use in [Apache Echarts setOption()](https://echarts.apache.org/en/option.html) call.

* @returns the Apache ECharts options to use in [Apache Echarts `setOption()`](https://echarts.apache.org/en/option.html) call.

jacques-lebourgeois linked an issue Nov 15, 2024 that may be closed by this pull request

Error using boosted 4 tooltip in an Angular project #276

Open

3 tasks

jacques-lebourgeois requested a review from louismaximepiton November 15, 2024 09:03

jacques-lebourgeois marked this pull request as ready for review November 15, 2024 13:21

jacques-lebourgeois added 2 commits November 22, 2024 12:18

fix(lib) Error using boosted 4 tooltip in an Angular project

ae7a44c

doc(lib) Make documentation easier to read, to facilitate use of the …

eee581f

…various functions and their configuration

jacques-lebourgeois force-pushed the 276-error-using-boosted-4-tooltip-in-an-angular-project branch from 4d5a3bc to 494bf83 Compare November 22, 2024 11:18

test(ng-boosted) Test with boosted loaded through ng-boosted

6f84bd4

jacques-lebourgeois force-pushed the 276-error-using-boosted-4-tooltip-in-an-angular-project branch from 494bf83 to 6f84bd4 Compare November 22, 2024 11:21

jacques-lebourgeois commented Nov 22, 2024

View reviewed changes

Add a warning about the dependency on the Boosted library for Popover…

e2f4f9a

… and Tooltip rendering.

louismaximepiton requested changes Nov 26, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

276 error using boosted 4 tooltip in an angular project #407

276 error using boosted 4 tooltip in an angular project #407

jacques-lebourgeois commented Nov 15, 2024

netlify bot commented Nov 15, 2024 •

edited

Loading

jacques-lebourgeois Nov 22, 2024

jacques-lebourgeois Nov 22, 2024

jacques-lebourgeois commented Nov 22, 2024

louismaximepiton left a comment

louismaximepiton Nov 26, 2024

louismaximepiton Nov 26, 2024

louismaximepiton Nov 26, 2024

louismaximepiton Nov 26, 2024

louismaximepiton Nov 26, 2024

louismaximepiton Nov 26, 2024

louismaximepiton Nov 26, 2024

louismaximepiton Nov 26, 2024

louismaximepiton Nov 26, 2024

louismaximepiton Nov 26, 2024

	* If not, the fall back is en empty `ODSChartsPopoverDefinition`, ie `ODSChartsPopoverManagers.NONE`
	* If not, the fall back is an empty `ODSChartsPopoverDefinition`, ie `ODSChartsPopoverManagers.NONE`

		@@ -73,6 +73,8 @@ myChart.setOption(themeManager.getChartOptions(dataOptions));

		The `themeManager` returned by `getThemeManager()` can be used to add other features supported by the ODS Charts library.

		Read the [API documentaion](https://ods-charts.netlify.app/api/) for details on this legends, popover, tooltip... features.

	Read the [API documentaion](https://ods-charts.netlify.app/api/) for details on this legends, popover, tooltip... features.
	Read the [API documentation](https://ods-charts.netlify.app/api/) for details on this legends, popover, tooltip... features.

	* - a string, and then is interprated as the CSS selector of the legends container
	* - a string, and then is interpreted as the CSS selector of the legends container

	* specify preconfigured renderer for Apache ECharts, Boosted 5 or Boosted 4 renderer.
	* specify preconfigured renderer for Apache ECharts, Boosted 5 or Boosted 4.

	* Default value is {@link ODSChartsPopoverManagers.NONE}, that means it uses default Apache ECharts template to externalize tooltip/popover HTML element, implementing Orange Design system.
	* Default value is {@link ODSChartsPopoverManagers}.NONE, that means it uses default Apache ECharts template to externalize tooltip/popover HTML element, implementing Orange Design system.

	* @returns the Apache ECharts options to use in [Apache Echarts setOption()](https://echarts.apache.org/en/option.html) call.
	* @returns the Apache ECharts options to use in [Apache Echarts `setOption()`](https://echarts.apache.org/en/option.html) call.

276 error using boosted 4 tooltip in an angular project #407

Are you sure you want to change the base?

276 error using boosted 4 tooltip in an angular project #407

Conversation

jacques-lebourgeois commented Nov 15, 2024

Related issues

Description

Motivation & Context

Types of change

Test checklist

netlify bot commented Nov 15, 2024 • edited Loading

✅ Deploy Preview for ods-charts ready!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jacques-lebourgeois commented Nov 22, 2024

louismaximepiton left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

netlify bot commented Nov 15, 2024 •

edited

Loading