Grafana v10: Error loading: aceiot-svg-panel

[kalew]

Panel fails to load in Grafana v10.0.0.

Console output:

importPanelPlugin.ts:55 

Error loading panel plugin: aceiot-svg-panel TypeError: Cannot assign to read only property 'toArray' of object '[object Object]'
    at Y (/public/plugins/aceiot-svg-panel/module.js:2:5792)
    at Module.eval (/public/plugins/aceiot-svg-panel/module.js:2:23049)
    at n (/public/plugins/aceiot-svg-panel/module.js:2:213)
    at eval (/public/plugins/aceiot-svg-panel/module.js:2:1013)
    at eval (/public/plugins/aceiot-svg-panel/module.js:2:1022)
    at mt (system.js:4:41800)
    at system.js:4:27340
    at V (system.js:4:7597)
    at ne (system.js:4:7092)
    at $ (system.js:4:6072)

Panel loaded successfully in 9.5.3. Possibly related to this PR.

[skydiablo]

exactly the same here...

[cicciopizza]

same problem :(

[JuliusKoenig]

same problem to

[skydiablo]

Hmmmm, I tried to fix the bug. I'm far away from being a JS/TS coder, but I do what I can ;) I searched for the string toArray( but unfortunately, it doesn't appear anywhere in the whole project. I think it only happens when it's transpiled from TS to JS, and for now, that's where it stops for me. Perhaps someone with more JS/TS experience can take a look at it?

By the way, is the bug still there? I haven't dared to update to Grafana v10 yet ;)

[skydiablo]

@acedrew any suggestions?

[andrepura]

same problem Any workarounds available?

[skydiablo]

yes, dont use grafana v10 :(

[andrepura]

we downgraded ... hopefully there will be a fix in the future

[cicciopizza]

Are there alternative plugins? I have developed quite a complex dashboard with this plugin and I believe this is no longer supported. So either I decide to migrate to some other plugin or I have to stay with version 9, and I don't know how long it's possible.

[acedrew]

Hey all, I was told Grafana's internal team was building features to eliminate the need for this plugin, so haven't really prioritized the maintenance here. Judging by the 9.x and 10.x releases, my current view is that goal was grossly exaggerated. The only complication is that the client we originally built this for ended up not being a real use case, so I have little business justification for investing in this. I'd like to maintain and keep this active, but so far we've born the entire cost of development and maintenance and unfortunately, have not been able to turn it into a business value. I'd welcome pull requests obviously, and given my first statement, I will start investigating what it will take to get 10.x compatibility merged in.

It's been great to see so many people getting value out of the little tool we built, and that this approach resonated with versus the other SVG/Panel animation plugins.

[acedrew]

Are there alternative plugins? I have developed quite a complex dashboard with this plugin and I believe this is no longer supported. So either I decide to migrate to some other plugin or I have to stay with version 9, and I don't know how long it's possible.

I think I respond to this above, sorry for the inconvenience :(

[Yusseiin]

Thanks for your work acedrew. Yours are the best SVG plugin out there and we are using it massively. Hope it will be compatible with ver. 10.

[skydiablo]

is there any new statement from grafana available? for now, we have grafana v10.0.3, any chance that we will see a compatible version?

[Yusseiin]

is there any new statement from grafana available? for now, we have grafana v10.0.3, any chance that we will see a compatible version?

If you need it you can use "gapit-htmlgraphics-panel" it is inspired by the "aceiot" ones and it is working in grafana v10

[skydiablo]

@Yusseiin thx for response, as i can see, there is no svg-lib shipped by gapit-htmlgraphics-panel. so i want/need a library like SVG.js. it seems that i can bundle some external libs, but this is some wired magic JS stuff for me :(

the alternate grafana plugin svg-panel is also deprecated, so there is no really usable plugin availabe to create custom SVG stuff like ace.svg :(

any other suggestions?

[Yusseiin]

@Yusseiin thx for response, as i can see, there is no svg-lib shipped by gapit-htmlgraphics-panel. so i want/need a library like SVG.js. it seems that i can bundle some external libs, but this is some wired magic JS stuff for me :(

the alternate grafana plugin svg-panel is also deprecated, so there is no really usable plugin availabe to create custom SVG stuff like ace.svg :(

any other suggestions?

i am using htmlgraphics plugin for my SVG and it is working flawless, what do you need to do?

[dcarontei]

@Yusseiin thx for response, as i can see, there is no svg-lib shipped by gapit-htmlgraphics-panel. so i want/need a library like SVG.js. it seems that i can bundle some external libs, but this is some wired magic JS stuff for me :( the alternate grafana plugin svg-panel is also deprecated, so there is no really usable plugin availabe to create custom SVG stuff like ace.svg :( any other suggestions?

i am using htmlgraphics plugin for my SVG and it is working flawless, what do you need to do?

Does htmlgraphics support SVG animations? That is the our use-case for ace-svg. I am reading the documentation for htmlgraphics and don't see any mention of being able to do animations.

[Yusseiin]

@Yusseiin thx for response, as i can see, there is no svg-lib shipped by gapit-htmlgraphics-panel. so i want/need a library like SVG.js. it seems that i can bundle some external libs, but this is some wired magic JS stuff for me :( the alternate grafana plugin svg-panel is also deprecated, so there is no really usable plugin availabe to create custom SVG stuff like ace.svg :( any other suggestions?

i am using htmlgraphics plugin for my SVG and it is working flawless, what do you need to do?

Does htmlgraphics support SVG animations? That is the our use-case for ace-svg. I am reading the documentation for htmlgraphics and don't see any mention of being able to do animations.

What do you mean with Animation? Change colour, rotate, change text is working with SVG i think ever more. Probably is better if you try by yourself it is an copy-paste from ace-svg to htmlgraphics :) Or you can try Canvas by Grafana, it's working pretty good with SVG but it is still in beta.

[dcarontei]

@Yusseiin thx for response, as i can see, there is no svg-lib shipped by gapit-htmlgraphics-panel. so i want/need a library like SVG.js. it seems that i can bundle some external libs, but this is some wired magic JS stuff for me :( the alternate grafana plugin svg-panel is also deprecated, so there is no really usable plugin availabe to create custom SVG stuff like ace.svg :( any other suggestions?

i am using htmlgraphics plugin for my SVG and it is working flawless, what do you need to do?

Does htmlgraphics support SVG animations? That is the our use-case for ace-svg. I am reading the documentation for htmlgraphics and don't see any mention of being able to do animations.

What do you mean with Animation? Change colour, rotate, change text is working with SVG i think ever more. Probably is better if you try by yourself it is an copy-paste from ace-svg to htmlgraphics :) Or you can try Canvas by Grafana, it's working pretty good with SVG but it is still in beta.

I will take a closer look at htmlgraphics and try it out. I had a blower fan SVG I made and I was animating it with ace-svg when a value was above a threshold it would spin the blades at the speed returned from the database query.

I did take a look at the Canvas panel in Grafana 10, and I see that it does support svg animations, however currently the only way to add a custom animated SVG is by hand-coding it in to the source files and building grafana from source. So not very easy.

[Yusseiin]

I will take a closer look at htmlgraphics and try it out. I had a blower fan SVG I made and I was animating it with ace-svg when a value was above a threshold it would spin the blades at the speed returned from the database query.

I did take a look at the Canvas panel in Grafana 10, and I see that it does support svg animations, however currently the only way to add a custom animated SVG is by hand-coding it in to the source files and building grafana from source. So not very easy.

for sure you will be able to make a fan spin with the htmlgraphics, some commands are a bit different but there is the tutorial. Unfortunately for canvas you have to put your SVG in the grafana folder or using an URL, i have the fortune that i am able to change the grafana code as i need.

[skydiablo]

good news: https://github.com/ACE-IoT-Solutions/ace-svg-react/pull/40

[dcarontei]

oo exciting.

[skydiablo]

i'm realy not a js/node coder and also this yarn stuff going me crazy :D maybe someone can help me to bring this CI pipeline going well?

[skydiablo]

btw, this plugin is already running well in grafana v10. just copy the "dist" folder in your plugin folder and allow this plugin as unsigned . done ;) @acedrew maybe you can have a look to just fix the CI/DI pipeline and than to merge and publish this new version?

[acedrew]

Good news everyone, I've found someone to help with maintenance and features on the plugin, look for updates in the next week or so, starting with v10 API compatibility!!

[Yusseiin]

Good news everyone, I've found someone to help with maintenance and features on the plugin, look for updates in the next week or so, starting with v10 API compatibility!!

Fantastic <3

[nicfv]

Hi all, can you try upgrading your plugins to version 0.1.0 and let me know if any issues arise? I'm going to close this issue - please open a new issue for any problems or requests for version 0.1.0. Thanks all for your patience!