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
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.
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?
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
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 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…
Sound thanks man…kids wanted to go for ice-cream in this weather…? 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 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 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?
Well it looks like it paid off as first time boom:-
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
So here is is after a few updates, think it is now ready to be published
I have made the folowing parameters on it:-
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:-
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!
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.
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