Bring the bling with the new Tag Cloud component

Universal Dashboard Universal Dashboard Show Off
1

Demo

This component is right here:-
https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.UDTagCloud

Tag Cloud

Animated Tag Cloud for UniversalDashboard

Reason For This Component

Although I am the dashboard guy at work now, I never get any clues as what to actually put on pages to make them look good.
Having seen various terms being used I found this:- https://www.npmjs.com/package/d3-tagcloud-for-react
This seemed like an ideal way to style any page, and would be good for demonstrations or presentations

Inspiration

I saw a blog posted on twitter a while back right here in fact:-


Well I thought this looked pretty cool, but seemed a big effort to get the result. Plus it wasn’t animated.

Parameters

      * height
      * padding 
      * fontFamily
      * rotate
      * colorarray
      * data
      * fontSize
      * spiral

Demo

Import-Module -Name UniversalDashboard
Import-Module -Name UniversalDashboard.UDTagCloud
Get-UDDashboard | Stop-UDDashboard
$theme = New-UDTheme -Name "Basic" -Definition @{
    'main' = @{
        'padding-left'   = "5px"
        'padding-right'  = "5px"
        'padding-top'    = "5px"
        'padding-bottom' = "5px"
    }
} -Parent "Default"
Start-UDDashboard -Port 1000 -AutoReload -Dashboard (
    New-UDDashboard -Title "Powershell UniversalDashboard" -Theme $theme -Content {
        New-UDRow -Columns {
            New-UDColumn -Size 4 -Content {
                $words = "Powershell", "UniversalDashboard", "Conference", "June 2020", "Adam Driscoll", "Animation", "Dashboards", "Stylish", "Beautiful", "Amazing", "Web Framework", "User Interface", "Europe", "#PSConf"
                $hash = @()
                foreach ($item in $words) {
                    $hash += @{
                        label    = $item
                        fontSize = $(Get-Random -Maximum 5 -Minimum 1)
                        opacity  = $(Get-Random -Maximum 10 -Minimum 3)
                    }
                }

                New-UDTagCloud -data { $hash } -rotate 0 -padding 7 -height "400px" -spiral 3 -colorarray @('#3772ff',
                    '#df2935',
                    '#fdca40',
                    '#09e85e',
                    '#16c172',
                    '#172a3a',
                    '#004346',
                    '#fa7921',
                    '#fe9920',
                    '#0c4767')

            }
        }
    }
)
4 Likes
2

Looks fancy bro,
Asuming this is your sales pitch for sending you to psconfeu? :stuck_out_tongue:

1 Like
3

So yeah I would love to be at the #psconfeu this year, but I have a feeling it’s not going to happen. Thought this makes a great landing screen for any dashboard…obviously with the words you want to display…My company recently updated it’s core values, so now I have them displaying in big on the landing page :smiley:

1 Like
4

@psDevUK

Another great component :slight_smile: … Is there an onclick event too? Thinking of click on one item and get forward to a relate website …

1 Like
5

Pretty sure onclick and hover is available…again I would like to make the refresh of 5 seconds be available to set on demand as a parameter.
Just a word of warning…this seemed to default my grids and tables to white?

6

adjusting the refresh interval is great … just note down that it might me helpfull to disable refresh too

7

I got a new version published here:-


this now has a -timeInterval parameter which animates the text. So now you can at least set the intervals between animation…Might look to develop this further but happy it adds some bling to your page to catch the end-users eyes…also edited the spiral parameter to have the correct values.

2 Likes
9

fyi, demo.ps1
Import-Module -Name UniversalDashboard.UDCloudTag
should be
Import-Module -Name UniversalDashboard.UDTagCloud

10

Also in the demo.ps1, the ‘-spiral 3’ parameter needs to be removed for the demo to work.

1 Like
11

Thanks for the fyi…I did do two versions of this same module, initially released as UDCloudTag but then saw I had been a douche bag and the component was actually called TagCloud not CloudTag…so I re-released a new module UDTagCloud and made the old one unavailable on the powershellgallery, which I don’t think sync’d with the marketplace…cannot seem to edit post here…on repo is showing this as -spiral "archimedean" so guessing this was a typo on my part on the forum. So I do apologise :crazy_face: hope this component has helped jazz your dashboard up a bit :sunglasses:

12

Other than those 2 issues. The control is working great. Thanks!!!

How difficult would it be have the text that is being displayed be a UDLink? Just thinking that will be a good way to display set of related links. I’m working on putting together a Dashboard that exercises some of the controls that you and other have contributed. So thinking the splash page could have text like ‘UDButtonLoader’, “UDTagCloud”, and etc… so each could link to the project page for the control.

13

Hi @cadayton thanks for taking the time to look and use this component. Not to sure how easy it would be to add the additional request you are asking as I do not remember this being mentioned in the documentation. If I can figure this out and it is possible I will add it to the component and relelase an update. Peace