[Bug] ECharts not displaying in Angular library used in Thingsboard widget

[Younes210701]

Version

5.5.1

Link to Minimal Reproduction

https://github.com/apache/echarts

Steps to Reproduce

Since I cannot do a setup to reproduce the issue, i will try to give you the detailed steps to reproduce this issue:

1. Create an Angular library :

• Generate a new Angular library using CLI.
• Install Echarts by running npm install echarts.

2. Integrate Echarts in the Angular Library :

• Create a new Angular component within the library.
• Import Echarts and initialize it within the component. Below is a simplified version of the code used :

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import * as echarts from 'echarts';

@Component({
  selector: 'lib-echart',
  template: `<div #chartContainer style="width: 100%; height: 400px;"></div>`,
})
export class EchartComponent implements OnInit {
  @ViewChild('chartContainer', { static: true }) chartContainer: ElementRef;

  ngOnInit(): void {
    this.initChart();
  }

  initChart(): void {
    const chart = echarts.init(this.chartContainer.nativeElement);
    chart.setOption({
      title: {
        text: 'EChart Example'
      },
      tooltip: {},
      xAxis: {
        data: ['A', 'B', 'C', 'D']
      },
      yAxis: {},
      series: [{
        type: 'bar',
        data: [5, 20, 36, 10]
      }]
    });
  }
}

3. Build and export the Angular library (which I called Phoebus):

• Build the Angular library using Angular CLI.
• The build process generates a phoebus.js script.

4. Use the Angular library (Phoebus) in Thingsboard:

• Import the phoebus.js script as a resource in Thingsboard.
• Create a new Thingsboard widget and use the EchartComponent within the widget.

5. Run the Thingsboard project:

• Start Thingsboard.
• Navigate to the dashboard containing the widget with EchartComponent.

Current Behavior

• The chart does not display, and there are no visible errors in the console.

Expected Behavior

The EChart should render correctly within the Thingsboard widget.

Environment

- OS:Linux Ubuntu 22.04.4 LTS
- Browser: Mozilla Firefox Browser 127.0.2
- Framework:Angular @15.2.10

Any additional comments?

Description:

I am experiencing issues displaying ECharts in an Angular library (called Phoebus) that is used as a widget in Thingsboard. When attempting to render the charts, they do not display correctly within the Thingsboard environment. Below are the details of my setup and the steps to reproduce the issue.

• I have verified that the chart container has the correct dimensions and that ECharts is being initialized.
• The same code works correctly when used directly in a standard Angular project without the library setup and Thingsboard.
• It seems that the issue arises when integrating the Angular library (Phoebus) into the Thingsboard environment.

Possible Causes:

• There may be conflicts between how Thingsboard handles Angular components and how ECharts expects to be rendered.
• There might be a timing issue where the chart container is not fully ready when ECharts tries to initialize.

Steps Taken to Troubleshoot:

• Ensured all dependencies are correctly installed and up-to-date.
• Tried different initialization methods for ECharts.
• Verified that the chart container dimensions are correctly set.
• Attempted using different ECharts versions.

[JimmyAx]

This is probably the same as #19414.

[Younes210701]

This is probably the same as #19414.

I don't think it's the same, I cannot even see the tooltip and I'm working with different angular project type (project type is library and not application)

[Younes210701]

Any news ?