search

Teradata / covalent

Teradata UI Platform built on Angular Material
https://teradata.github.io/covalent/
MIT License
2.23k stars 358 forks source link

covalent problem when used with ngx-echarts #1121

Closed myl-maria closed 5 years ago

myl-maria commented 6 years ago

Do you want to request a feature or report a bug?

bug

Bug Report

When I use covalent-quickstart with ngx-echarts, if I put a \<div echarts...>\</div> inside \<td-layout>\</td-layout>, the picture can't be shown correctly at first, only blank block on the page. If I resize the window at this time, the picture can be shown on the page. I followed the steps to add the support for ngx-echarts in this link:https://xieziyu.github.io/ngx-echarts/#/home. The \<div echarts...>\</div> outside the \<td-layout>\</td-layout> can be displayed correct. This problem will cause the ngx-echarts can't be used in covalent.

Screenshots or link to CodePen/Plunker/JSfiddle

Code of html: image Load the page: image

After resize the window: image

What is the expected behavior?

I wish the picture drawn by echarts can be shown correctly when the page is loaded at the first time.

Which version of Angular and Material, and which browser and OS does this issue affect?

I used latest Covalent-quickstart from github, Chrome 64.0.3282.140, Mac OS X EI Capitan 10.11.6 .

emoralesb05 commented 5 years ago

Not sure why this happens since td-layout doesnt seem to have any issues with everything else, but we already have an echarts component that works perfectly.

https://github.com/Teradata/covalent-echarts

It looks to me like its an ngx-echarts issue with change detection.