Gauge component

Universal Dashboard Universal Dashboard Help
42

Man feel like a xmas donation is needed soon :rofl:
OK I have published 1.0.1 to the powershell gallery like now…
here is a fully working dashboard

Import-Module UniversalDashboard.Community
Import-Module UniversalDashboard.UDCustomGauge
$endpointinit = New-UDEndpointInitialization -Module @("UniversalDashboard.UDCustomGauge")
Get-UDDashboard | Stop-UDDashboard
$theme = get-udtheme "DarkRounded"
$dashboard = New-UDDashboard -Title "New-UDGauge" -theme $theme -Content {
    New-UDRow -Columns {
        New-UDColumn -size 5 -Content {
        New-UDCustomGauge -ValueText "Raised Calls: 333" -width 380 -Height 228 -Value 333 -MaxValue 1000 -TextColor "#fff" -CustomStops 0, 500, 750, 900, 1000 -SegmentColors "firebrick", "tomato", "gold", "limegreen"
            }
        }

    } -EndpointInitialization $endpointinit
Start-UDDashboard -Dashboard $dashboard -Port 10005

At a friends so no time to do anything fancy but this worked. Let me know if you get any issues with 1.0.1 I removed some parameters, so look at the function for all listed params. Thanks

1 Like
43

@psDevUK Nice Job Adam,

You know you can build your own version of UD with all extra modules and functions and that will make your main .ps1 script cleaner and easier for you to use and troubleshoot.

1 Like
44

@psDevUK once again you are the man! This is a great component. The only thing I’m struggling with is placing it inside a card as it seems there’s only a way to specify width and height by pixel size so when the browser window is re-sized it often sits outside of the card element (unless I make the gauge really small). Is there a way to have it auto-resize based on the parent element? I’ve tried some css but have been unsuccessful so far.

Here’s an example:

gauge
gauge571×534 34.4 KB

45

Thanks @tom.obrien much appreciated. I just had a look on github and looks like I didn’t put a readme…doh! But never fear I did blog about it here:- https://psdevuk.github.io/ud-flix/Updated-Gauge-Component/
My assumption without any of your code to go by, is that it is using the default height and width parameters of 250. So you can manually specify the width and height of the gauge component, just specify an integer value in the parameter. If I can help further let me know, but this should do the trick…let me know. Thanks

46

I had a play around with the width and height but as it’s a fixed pixel size it sometimes sits outside of the card when the page is re-sized. On full screen it looks good but as the card auto scales to fit the window the gauge doesn’t change in size and can overlap. I’ve sort of worked around it by specifying a minimum card width with CSS now but I wanted to check with you in case I was missing a trick!

Also one other question, did the custom stops feature get removed? It doesn’t appear to be in v1.0.9

47

Sadly I believe the size you set it, will be the constant size of the component. As for the custom stop points I believe that is in this component https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.UDCustomGauge which is the same component…but a custom version of it. Just skimming through the posts I have given an example on the custom stops, but this is def the other gauge component…I couldn’t figure how to combine everything into the same component, so made two. I do have this on a dashboard, I think I nested it inside a DIV tag for the placement…anyways as always just give me a shout if you need anything else on this. Thanks