Gauge Chart

[MarianRaphael]

Description

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

[joepavitt]

A few Gauge Library options here:

JustGage: https://github.com/toorshia/justgage

• What Dashboard 1.0 currently uses
• License: MIT
• Size: 255 kB

Gauge.js: https://github.com/bernii/gauge.js

• Looks cleaner when rendered
• More customisation
• No maintenance, and 100+ reported issues on GH.
• License: MIT
• Size: 17kB

[joepavitt]

@dceejay would you recommend sticking with JustGage?

[dceejay]

Hi @joepavitt

well one of the just gage contributors is robertsLando - who is one our users and fixed some of the issues with it to make it better for all of us. So gets my vote.

But also if you search the forum you will see hotnipi is something of a whizz with pure CSS - eg https://flows.nodered.org/node/node-red-contrib-ui-artless-gauge and he did https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/9 etc

I do like the artless gauge myself :-)... net is there may be better more modern ways using CSS etc :-)

[Paul-Reed]

Hotnipi's artless gauge gets my vote, it's clean & crisp, more modern and as it was created by the community it's unique to Node-RED.

IMO the Justgage gauge is looking a little tired.

[joepavitt]

Complexity with artless style is that it's bound by GreenSocks's non-commercial license:

This node uses GreenSock animation library GSAP licenced with Standard GreenSock License for non-commercial use <a href="https://greensock.com/standard-license/"">https://greensock.com/standard-license

which in turn means it wouldn't be a widget we can run on FlowFuse - thoughts @dceejay?

[dceejay]

Hey - if you can't use it - then you can't use it. It is a nice gauge though so hopefully someone will create a version that is an add-on widget. Of course that doesn't solve the problem of what to do for Dashboard2 "core".

This vue library looks fairly flexible though ? https://hellocomet.github.io/vue-svg-gauge/

Then again - I've not looked at the source of artless gauge - and how much "animation" it uses... maybe if it's minimal then some css "easing" may be able to suffice for a change in value ? (IE remove the requirement on GSAP ?)

[joepavitt]

Reached out to GreenSock and had confirmation that we're good to go:

Hey Joe. Thanks for reaching out to confirm the licensing stuff. So are you saying that the thing that uses GSAP (Node-RED Dashboard) is 100% free, but FlowFuse offers a paid hosting service in which a customer could optionally add Node-RED Dashboard at no additional charge? So the fees are for hosting Node-RED, and the “add-on” that uses GSAP is not a paid add-on, right?

If that’s accurate (and I’m also assuming you’re not using any of the members-only bonus plugins), then you’re totally fine with the standard “no charge” license. No need to get the commercial license unless there’s some kind of fee associated with the optional GSAP-enhanced add-on.

[dceejay]

hmmm - but what if some other 3rd party builds (say a factory monitoring system) that uses dashboard v2 as the ui - and sells that IE the complete system... ? Presumably then they are liable for the license. Not sure how we can make it clear people can't use a node in their own commercial system.

[joepavitt]

hmmm - but what if some other 3rd party builds (say a factory monitoring system) that uses dashboard v2 as the ui - and sells that IE the complete system... ? Presumably then they are liable for the license. Not sure how we can make it clear people can't use a node in their own commercial system.

This is a good point... I will ask

[joepavitt]

Response:

Yeah, that sounds like a case that’d warrant the commercial license So as I see it, you’ve got 3 options:

1. Get an enterprise license that’ll cover usage of GSAP downline by your customers even in commercial ways (most freedom, most expensive)
2. Add a blurb to your license indicating that the GSAP files are subject to their own license, and link them to gsap.com/standard-license. That offloads the responsibility to your end users if they use things in commercial ways. Zero expense for you, possibly a hassle for a small subset of your end users.
3. Don’t use GSAP

I feel like we're leaning towards 3.

[joepavitt]

The other option is - I build a d3-based gauge, specific for D2.0 with the visual style of the above - more work, but no license issue.

[nstadigs]

Maybe just start out with a v-progress-circular?

I mean, it will automatically use theme colors and fit into the style system.

[hotNipi]

A bit of background for artless gauge. At the time I did it, I was educating myself about the SVG stuff. So you may freely call it as side-product of my learning curve. And it is of course over-complicated and not very well written. GSAP was the choice because I failed to manage animations, partly cos it is quite complex for SVG-s and partly due the dashboard behaviors.

If to do it today - I'd go for HTML/CSS, for sure it is not that complex. And the maintenance cost goes probably down if to separate linear and radial versions.

Anyway, nice to see it still gets attention.