I am working on a small project to build a Grafana plugin that essentially acts as a wrapper around the Kendo React UI.
While Grafana gives me a way to specify what css files to load for my plugin, it does not give me any kind of guarantee that those css files will have completed loaded before the component is mounted. When this happens, the "Chart" function ends up being called with a "themeOptions" parameter that is set to useless defaults (one consequence of this is that all of my charts are drawn with their fill set to (0,0,0,0)).
To me there seems to be bugs on both sides leading to this problem. Grafana should do a better job at loading required files before it mounts my components, and Kendo React should more gracefully handle this type of situation. Once this has happened, future renders are stuck with those theme-less defaults until I actually destroy the component.
On the Kendo React side of things, I would be interested in knowing if there is a good workaround, or better way to structure my project that I am not aware of. I can see that in other Kendo UIs there are APIs that would allow me to change the theme manually, which could work.
If I want this plugin to be a standalone thing, then I do not have the option of including a stylesheet link in <head>. I have to work entirely within the div assigned to my plugin by Grafana.
1 Answer, 1 is accepted
Thank you for the detailed explanation.
Currently, I can suggest two possible workarounds:
1) Use the seriesColors prop of the Chart which allows setting the color regardless of the theme color. This why the Chart will not depend on the CSS:
https://stackblitz.com/edit/react-bcf7tk?file=index.html
2) Render the Chart conditionally, for example check if the CSS is loaded, and if it is not, do not render the Chart. Then once the CSS is loaded, render the Chart.
I hope one of the options to prove helpful.
Regards,
Stefan
Progress Telerik