Gauge component

Hi all,

Had a look around but can’t seem to find anything which quite fits the bill.

I’m after some sort of gauge component which I can use to show how close something is getting to its threshold. For example… we have a system which will automatically spin up new instances of an api handler at peak times. Sometimes these instances get stuck, or sometimes it might spin up a few too many and get close to our limit.

So I’d like to be able to visualise when

  1. one of these instances is getting close to being 1 hour without activity - up to 25 minutes could be green, up to 40 minutes could be amber and anything above could be red.
  2. there are getting close to 40 instances running. - anything below 15 could be green, anything up to 35 could be amber and above 35 could be red.

Has anyone seen a component which would be suitable?

Many thanks
Paul

Maybe UDIndicator: https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.UDIndicator

Or UDGauge: Some new SVG UniversalDashboard components

I think you can change color based on thresholds. @psDevUK probably has the skinny on how those work.

1 Like

Thanks @adam. I did see UniversalDashboard.UDIndicator, however the orientation of this didn’t match my use case. For example this seems to be red at low values, rather than high values.

UDgauge doesn’t change color when nearing the threshold, but this may be something that @psDevUK could implement? :smiley:

Hi @Alc this seems to be the most popular component I have is the gauge component, even though it doesn’t have a picture with it…? I have implemented https://www.powershellgallery.com/packages/UniversalDashboard.UDCircle/1.0.0 which is a component I built and this has lots of customization you can do…sorry I know its not a gauge and I also got this slider which I also use which again you can set the Max value, and the current value to give you a nice indication this is here https://www.powershellgallery.com/packages/UniversalDashboard.UDSlider/1.0.0 …I just got back from my work christmas party, as I am working on a loader component at the moment…but could have a butchers to either see if I can modify the exisiting gauge component, or build a new one…head over to https://www.npmjs.com/ search for react gauge post me a link and I will see if I can bob the builder it for you man. Peace

Or I just seen I should be able to build in a custom colour pallette for the UDinciator, which would then mean you could create your own colour scheme…the choice is your man

Thanks for the shout-out :smiley:

Hey @psDevUK, something like either of these would be great

I will see what I can cook up for you fella

Man so I liked the look of the react-gauge-chart and thought wow only one dependency…nice…however that one dependency has 31 dependencies…so after installing the following:-
npm i react-gauge-chart
npm i d3
npm i d3-array
npm i d3-axis
npm i d3-brush
npm i d3-dispatch
npm i d3-drag
npm i d3-selection
npm i d3-interpolate
npm i d3-color
npm i d3-transition
npm i d3-chord
npm i d3-path
npm i d3-collection
npm i d3-contour
npm i d3-dsv
npm i commander
npm i iconv-lite
npm i safer-buffer
npm i rw
npm i d3-ease
npm i d3-fetch
npm i d3-force
npm i d3-quadtree
npm i d3-timer
npm i d3-format
npm i d3-geo
npm i d3-hierarchy
npm i d3-polygon
npm i d3-random
npm i d3-scale
npm i d3-time
npm i d3-time-format
npm i d3-scale-chromatic
npm i d3-selection
npm i d3-shape
npm i d3-transition
npm i d3-voronoi
npm i d3-zoom
It’s still not working :frowning_face: getting some react error…so some more research is required…failing this may just modify the indicator to include custom colours…I want to get this working though…

31 dependencies! Dang. It does look nice though right :stuck_out_tongue:

for sure…if it works… :rofl: taking family out soon, but I think I may have spotted another dependency not mentioned…fingers crossed

Doh! I thought it needed the prop-types added that rebuilt…still same error :face_with_symbols_over_mouth:

@psDevUK

Upload your current stuffs to github and invite me :slight_smile:
I’ll see if i can be of some guidance.

1 Like

Sound thanks man…kids wanted to go for ice-cream in this weather…? :woozy_face: so had to take whole family out for big desserts…will have another few more goes, then I think I will be out of ideas…so expect a github link sometime soon. :ok_hand:

Ok fella had to take my family out for some nosh. Still couldn’t get choice one to work, so although I been trying to cut back, this component has had me chain smoking :smoking: but I still couldn’t get choice one to work, I double checked all dependencies and all looked good…so thankfully you gave me 2 choices of what you would be happy with, and it looks like option 2 although it listed 6 dependencies, it still needed the 31 I had already downloaded…so whats downloading another ton of dependencies? :rofl:
Well it looks like it paid off as first time boom:-
UDgauge
So will make some modifications on it, might do a blog on it here https://psdevuk.github.io/ud-flix/ then as always post on the powershell gallery…think I will replace the current udgauge I did as it was a bit naff and replace it with this :grinning:

So here is is after a few updates, think it is now ready to be published
UDGauge
I have made the folowing parameters on it:-
MaxValue,Value,NeedleColor,NeedleHeight,NeedleTransition,Segments,StartColor,EndColor

Well I went a bit crazy, stayed up past midnight, watching some zombie flick with the Mrs, then re-looked at this component, and added another 5 parameters so you have more custom control over the component:-
UDgauge2
Hope you like. Peace

P.S New link here:-
https://www.powershellgallery.com/packages/UniversalDashboard.UDGauge/1.0.6

4 Likes

Damn @psDevUK
You fancy boi

2 Likes

Dude that looks awesome, can’t wait to try it! :smiley: good job and thank you.

My plan is to use it in this dashboard:

and put it next to the top grids like this

I just need to work out how to make this layout!

Do you have the professional version? Just if you did you could use the layout designer and save the layout there is a nice youtube video @adam done on it a while back.

The link for this component is right here:-

Hope other people find this component useful, make sure you include the module in your endpointinitialization and apply it to your dashboard to be able to use this component in an endpoint which you could then dynamically update the values. I blogged about this here:- https://psdevuk.github.io/ud-flix/Animated-Number-Counter/ under the more dynamic heading. Happy dashboarding!

I’m waiting for a purchase order for the enterprise version to be raised.

Sound, well once you join the elite club you can do super cool stuff like this:-


this video is only a few minutes, but I used this method when I had a complicated design in my head, but couldn’t figure it out…so I cheated and used this method. Made it childs play to do a super complex design.
2 Likes

Thought I’d try with rows and columns… guess that didn’t work lol

You may have to adjust some CSS as there does seem to be quite a bit of bottom-padding going on…From your design I would do a new udrow, then do newudcolum of 4 then another udrow, then udcolumn of 2. You can nest within udcolumn.
As mentioned the professional version saving the layout makes this thing childs play.

Doh! My bad…I now see a height and width parameter I didn’t turn into props/parameters. It is defaulting to 334px for width and height, hence you get so much bottom padding…I will do another release today at some point, got to take kids out as they are being well hectic. But adding the height parameter will sort this out…If you cannot wait for new release, then you could hack it with some custom DIV tags setting a height with them, and should fit inside the div perfectly.
Anyways I will update this to include these additional few parameters :smiley:


manual CSS hack, but when I am done the spacing can be reduced to something like this