This is aimed at uibuilder users but if you use vue.js you might be able to help.
I am looking for a gauge that resembles vue-svg-gauge to put in my app. The aforementioned gauge is great as long as you don't want to set a min display value - whereupon it goes a bit wrong. I'm quite new to vue and am not sure how to write a wrapper to a js gauge just yet. If anyone has a suggestion I'd be grateful otherwise I'll have to figure out how to either make vue-svg-gauge work or write a wrapper.
Rather annoyingly the best looking gauge is this one (https://www.npmjs.com/package/vue-speedometer) but I can't seem to make it work without a build step as it has a bunch of require statements. Apexcharts doesn't seem to have a min value and all the others that I have looked at seem to render a complete circle even if you only want a semicircle. I will continue searching.
I am trying to display pressure from a sensor. It is typically around 1000 hPa so starting the scale at zero is a bit daft. Apex assumes the value is a percentage and always starts at zero. vue-svg-gauge has a bug when you set the min value at zero.
I didn't realise that I could use any js library - is that simple to do?
No, foolishly they haven't included the build folder in the repo. If they had, you would be able to use it without a build step like many other Vue components.
What's worse is that the actual code comes from a REACT component, not a Vue one at all.
Yes, it isn't hard in most cases. You are writing front-end code - remember that uibuilder doesn't actually care whether you use a library or not. The uibuilderfe library just makes sure that you get a link to/from the uibuilder Node in Node-RED. It also provides a simple event system to make sending and receiving msgs easy.
If you look at the vue-apexcharts example in the WIKI, you will see that it pulls in the Apex Charts library and then a wrapper library which just makes things easier to do in Vue.
Looks like eCharts might have a decently flexible gauge. You can set min/max values and min/max angles as well.
Thank you, I will have another go with echarts - I think that the last time I got frustrated with how it was rendering a semicircle but using the space as if it was a complete circle. I am very fussy
https://github.com/naikus/svg-gauge also looks promising (I assume it is what vue-svg-gauge is based upon. I can't see how to use it in a vue component though - this is where my lack of front end experience fails me!
Ha, yes that was where I started. I wanted to do some customisation of some components but was struggling so I thought I'd give uibuilder a try. It has been an interesting and fun experience and I've learnt a lot (which to me is the point of playing around with stuff like this). I'm hoping to use some of the things I have learnt when I return to school after the summer to get the kids into developing stuff.
So I ended up solving this by using Highcharts. I hadn't realised it was it was free for non commercial use. I'm happy with the result. I can upload to the wiki if you think it it is appropriate.
