v2.2.0-beta2

Universal Dashboard is now part of PowerShell Universal
Search…
v2.2.0-beta2
Universal Dashboard is now a part of PowerShell Universal. This documentation is for reference to the v2 version of Universal Dashboard and is no longer maintained. PowerShell Universal Documentation can be found here.
v2.2.0-beta2
New Enterprise Charts
Nivo charts are not available in Community Edition
Universal Dashboard 2.2.0-beta2 adds support for Nivo charts. This chart library is built on React and D3 to provide highly configurable and beautiful data visualizations . In addition to the standard charts, such as bar and line charts, there are also new chart types such as calendar and treemap.
You can access all the charts with a single cmdlet: New-UDNivoChart. This cmdlet exposes an extensive amount of configurable parameters for your charts.
New Color Options
Nivo charts provides 50 built in color palettes to use with your charts. You can set the -Colors parameter on your chart to set your color palette. Additionally, you can provide color data directly with the data in your chart rather than having to provide a separate array of colors.
For more information on colors, visit the Nivo color documentation.
Fill Patterns
In addition to custom colors, you can also define fill patterns for your chart components. You can define lines or dots and choose the corresponding colors.
1
$Pattern = New-UDNivoPattern -Dots -Id 'dots' -Background "inherit" -Color "#38bcb2" -Size 4 -Paddin 1 -Stagger
2
$Fill = New-UDNivoFill -ElementId "hot dog" -PatternId 'dots'
Copied!
Interactive Charts
Nivo charts support -onClick event handlers. You can provide a script block and when the chart is clicked, it will be invoked with the $EventData variable populated with the JSON representation of the data that was clicked within the chart.
1
-OnClick {
2
    Show-UDToast -Message $EventData -Duration 3000
3
}
Copied!
Differences between New-UDChart
No Auto Refresh
The Nivo chart cmdlet doesn't expose an -Endpoint or -AutoRefresh parameter directly. That said, it's still possible to auto refresh by putting the chart within a a layout element, like a column, with autorefresh settings enabled and setting the -Id of the chart to anything.
1
 New-UDColumn -SmallSize 6 -AutoRefresh -RefreshInterval 5 -Endpoint {
2
    New-UDHeading -Text "Line" -Size 4
3
    New-UDHeading -Text "A standard line chart."
4
​
5
    New-UDNivoChart  -Id 'lineChart' -Line -Data $Cache:Data -Height 400 -Width 600 -MarginBottom 50 -MarginTop 50 -MarginRight 110 -MarginLeft 60 -OnClick {
6
        Show-UDToast -Message $EventData -Duration 3000
7
    }
8
​
9
}
Copied!
No Out-UDChartData
Data can be provided to the charts directly through the -Data parameter rather than having to be piped through a cmdlet like Out-UDChartData. The reason for this is that each type of chart expects different types of data structures.
Each of these data structures are defined within the Nivo examples but will also be defined within the UD documentation when 2.2 is released.
Click the data tab for an example of what each chart's data structure should look like. You can define a hashtable that matches the structure of the JSON and it will be automatically serialized for your.
Chart Types
Bar
Just as with New-UDChart, the standard bar chart is available. It easily supports multiple datasets and can be stacked, grouped or laid out horizontally.
Here is an example of a bar chart.
1
$Pattern = New-UDNivoPattern -Dots -Id 'dots' -Background "inherit" -Color "#38bcb2" -Size 4 -Paddin 1 -Stagger
2
$Fill = New-UDNivoFill -ElementId "hot dog" -PatternId 'dots'
3
​
4
New-UDNivoChart -Bar -Id 'barChart' -Data @(
5
    @{
6
        country = "AD"
7
        "hot dog" = (Get-Random -Maximum 100 -Minimum 10)
8
        "hot dogColor" = "hsl(313, 70%, 50%)"
9
        "burger" = (Get-Random -Maximum 100 -Minimum 10)
10
        "burgerColor" = "hsl(102, 70%, 50%)"
11
    }
12
    @{
13
        country = "AA"
14
        "hot dog" = (Get-Random -Maximum 100 -Minimum 10)
15
        "hot dogColor" = "hsl(313, 70%, 50%)"
16
        "burger" = (Get-Random -Maximum 100 -Minimum 10)
17
        "burgerColor" = "hsl(102, 70%, 50%)"
18
    }
19
    @{
20
        country = "AE"
21
        "hot dog" = (Get-Random -Maximum 100 -Minimum 10)
22
        "hot dogColor" = "hsl(313, 70%, 50%)"
23
        "burger" = (Get-Random -Maximum 100 -Minimum 10)
24
        "burgerColor" = "hsl(102, 70%, 50%)"
25
    }
26
    @{
27
        country = "AZ"
28
        "hot dog" = (Get-Random -Maximum 100 -Minimum 10)
29
        "hot dogColor" = "hsl(313, 70%, 50%)"
30
        "burger" = (Get-Random -Maximum 100 -Minimum 10)
31
        "burgerColor" = "hsl(102, 70%, 50%)"
32
    }
33
) -Keys @("hot dog", "burger") -IndexBy "country" -Height 400 -Width 600 -colors 'nivo' -Definitions $Pattern -Fill $fill -OnClick {
34
    Show-UDToast -Message $EventData -Duration 3000
35
}
Copied!
Calendar
The calendar chart, as usually seen on GitHub, is a good way to represent data volume over time.
1
New-UDNivoChart -Calendar  -Id 'calendarChart' -Data @(
2
    1..90 | % {
3
        @{
4
            day = (Get-Date).AddDays($_ * -1).ToString("yyyy-MM-dd")
5
            value = (Get-Random -Minimum 1 -Maximum 400)
6
        }
7
    } 
8
)  -From (Get-Date).AddDays(-90) -To (Get-Date) -Width 600 -Height 400 -MarginTop 50 -MarginRight 10 -MarginLeft 50 -MarginBottom 10 -OnClick {
9
    Show-UDToast -Message $EventData -Duration 3000
10
}
Copied!
Heatmap
A heatmap shows squares with different color based on the intensity of the data relative to its peers.
1
$Data = @(
2
    @{
3
        country = "AD"
4
        "hot dog" = (Get-Random -Maximum 100 -Minimum 10)
5
        "hot dogColor" = "hsl(102, 70%, 50%)"
6
        "burger" = (Get-Random -Maximum 100 -Minimum 10)
7
        "burgerColor" = "hsl(102, 70%, 50%)"
8
    }
9
    @{
10
        country = "AA"
11
        "hot dog" = (Get-Random -Maximum 100 -Minimum 10)
12
        "hot dogColor" = "hsl(102, 70%, 50%)"
13
        "burger" = (Get-Random -Maximum 100 -Minimum 10)
14
        "burgerColor" = "hsl(102, 70%, 50%)"
15
    }
16
    @{
17
        country = "AE"
18
        "hot dog" = (Get-Random -Maximum 100 -Minimum 10)
19
        "hot dogColor" = "hsl(102, 70%, 50%)"
20
        "burger" = (Get-Random -Maximum 100 -Minimum 10)
21
        "burgerColor" = "hsl(102, 70%, 50%)"
22
    }
23
    @{
24
        country = "AZ"
25
        "hot dog" = (Get-Random -Maximum 100 -Minimum 10)
26
        "hot dogColor" = "hsl(102, 70%, 50%)"
27
        "burger" = (Get-Random -Maximum 100 -Minimum 10)
28
        "burgerColor" = "hsl(102, 70%, 50%)"
29
    }
30
​
31
)
32
New-UDNivoChart  -Id 'heatmapChart' -Heatmap -Data $data  -Keys @("hot dog", "burger") -IndexBy "country" -ForceSquare -Height 400 -Width 600 -OnClick {
33
    Show-UDToast -Message $EventData -Duration 3000
34
}
Copied!
Line Chart
A standard line chart that easily supports multiple datasets.
1
New-UDNivoChart  -Id 'lineChart' -Line -Data @(
2
    @{
3
        "id"= "japan"
4
        "color" = "hsl(272, 70%, 50%)"
5
        "data" = @(
6
            @{
7
                "x" = "plane"
8
                "y" = (Get-Random -Maximum 100 -Minimum 10)
9
            }
10
            @{
11
                "x" = "helicopter"
12
                "y" = (Get-Random -Maximum 100 -Minimum 10)
13
            }
14
            @{
15
                "x" = "boat"
16
                "y" = (Get-Random -Maximum 100 -Minimum 10)
17
            }
18
            @{
19
                "x" = "train"
20
                "y" = (Get-Random -Maximum 100 -Minimum 10)
21
            }
22
            @{
23
                "x" = "subway"
24
                "y" = (Get-Random -Maximum 100 -Minimum 10)
25
            }
26
            @{
27
                "x" = "bus"
28
                "y" = (Get-Random -Maximum 100 -Minimum 10)
29
            }
30
            @{
31
                "x" = "car"
32
                "y" = (Get-Random -Maximum 100 -Minimum 10)
33
            }
34
            @{
35
                "x" = "moto"
36
                "y" = (Get-Random -Maximum 100 -Minimum 10)
37
            }
38
            @{
39
                "x" = "bicycle"
40
                "y" = (Get-Random -Maximum 100 -Minimum 10)
41
            }
42
        )
43
    }
44
    @{
45
        "id"= "france"
46
        "color" = "hsl(244, 70%, 50%)"
47
        "data" = @(
48
            @{
49
                "x" = "plane"
50
                "y" = (Get-Random -Maximum 100 -Minimum 10)
51
            }
52
            @{
53
                "x" = "helicopter"
54
                "y" = (Get-Random -Maximum 100 -Minimum 10)
55
            }
56
            @{
57
                "x" = "boat"
58
                "y" = (Get-Random -Maximum 100 -Minimum 10)
59
            }
60
            @{
61
                "x" = "train"
62
                "y" = (Get-Random -Maximum 100 -Minimum 10)
63
            }
64
            @{
65
                "x" = "subway"
66
                "y" = (Get-Random -Maximum 100 -Minimum 10)
67
            }
68
            @{
69
                "x" = "bus"
70
                "y" = (Get-Random -Maximum 100 -Minimum 10)
71
            }
72
            @{
73
                "x" = "car"
74
                "y" = (Get-Random -Maximum 100 -Minimum 10)
75
            }
76
            @{
77
                "x" = "moto"
78
                "y" = (Get-Random -Maximum 100 -Minimum 10)
79
            }
80
            @{
81
                "x" = "bicycle"
82
                "y" = (Get-Random -Maximum 100 -Minimum 10)
83
            }
84
        )
85
    }
86
    @{
87
        "id"= "us"
88
        "color" = "hsl(94, 70%, 50%)"
89
        "data" = @(
90
            @{
91
                "x" = "plane"
92
                "y" = (Get-Random -Maximum 100 -Minimum 10)
93
            }
94
            @{
95
                "x" = "helicopter"
96
                "y" = (Get-Random -Maximum 100 -Minimum 10)
97
            }
98
            @{
99
                "x" = "boat"
100
                "y" = (Get-Random -Maximum 100 -Minimum 10)
101
            }
102
            @{
103
                "x" = "train"
104
                "y" = (Get-Random -Maximum 100 -Minimum 10)
105
            }
106
            @{
107
                "x" = "subway"
108
                "y" = (Get-Random -Maximum 100 -Minimum 10)
109
            }
110
            @{
111
                "x" = "bus"
112
                "y" = (Get-Random -Maximum 100 -Minimum 10)
113
            }
114
            @{
115
                "x" = "car"
116
                "y" = (Get-Random -Maximum 100 -Minimum 10)
117
            }
118
            @{
119
                "x" = "moto"
120
                "y" = (Get-Random -Maximum 100 -Minimum 10)
121
            }
122
            @{
123
                "x" = "bicycle"
124
                "y" = (Get-Random -Maximum 100 -Minimum 10)
125
            }
126
        )
127
    }
128
    ) -Height 400 -Width 600 -MarginBottom 50 -MarginTop 50 -MarginRight 110 -MarginLeft 60 -OnClick {
129
    Show-UDToast -Message $EventData -Duration 3000
130
    }
Copied!
Pie
Pie chart with numerous configuration options and the ability to create donut charts.
1
 New-UDNivoChart -Id 'pieChart' -Pie -Data @(
2
    @{
3
        id = 'python'
4
        label = 'python'
5
        value = (Get-Random -Maximum 100 -Minimum 10)
6
        color = "hsl(52, 70%, 50%)"
7
    }
8
    @{
9
        id = 'powershell'
10
        label = 'powershell'
11
        value = (Get-Random -Maximum 100 -Minimum 10)
12
        color = "hsl(307, 70%, 50%)"
13
    }
14
    @{
15
        id = 'make'
16
        label = 'make'
17
        value = (Get-Random -Maximum 100 -Minimum 10)
18
        color = "hsl(161, 70%, 50%)"
19
    }
20
    @{
21
        id = 'scala'
22
        label = 'scala'
23
        value = (Get-Random -Maximum 100 -Minimum 10)
24
        color = "hsl(206, 70%, 50%)"
25
    }
26
    @{
27
        id = 'ruby'
28
        label = 'ruby'
29
        value = (Get-Random -Maximum 100 -Minimum 10)
30
        color = "hsl(145, 70%, 50%)"
31
    }
32
)  -Height 400 -Width 600 -MarginBottom 50 -MarginTop 50 -MarginRight 110 -MarginLeft 60 -InnerRadius 0.5 -PadAngle 0.7 -CornerRadius 3 -OnClick {
33
    Show-UDToast -Message $EventData -Duration 3000
34
}
Copied!
Stream
Stream charts provide a good representation of event data volume as it comes into a system.
1
New-UDNivoChart -id 'streamChart' -Stream -Data @(
2
    @{
3
        "Adam" = (Get-Random -Minimum 10 -Maximum 100)
4
        "Bill" = (Get-Random -Minimum 10 -Maximum 100)
5
        "Frank" = (Get-Random -Minimum 10 -Maximum 100)
6
    }
7
    @{
8
        "Adam" = (Get-Random -Minimum 10 -Maximum 100)
9
        "Bill" = (Get-Random -Minimum 10 -Maximum 100)
10
        "Frank" = (Get-Random -Minimum 10 -Maximum 100)
11
    }                    
12
    @{
13
        "Adam" = (Get-Random -Minimum 10 -Maximum 100)
14
        "Bill" = (Get-Random -Minimum 10 -Maximum 100)
15
        "Frank" = (Get-Random -Minimum 10 -Maximum 100)
16
    }                    
17
    @{
18
        "Adam" = (Get-Random -Minimum 10 -Maximum 100)
19
        "Bill" = (Get-Random -Minimum 10 -Maximum 100)
20
        "Frank" = (Get-Random -Minimum 10 -Maximum 100)
21
    }
22
) -Keys @("Adam", "Bill", "Frank") -Height 400 -Width 600 -OnClick {
23
    Show-UDToast $EventData -Duration 3000
24
}
Copied!
Treemap
Provides a breakdown of data in a tree format. Good for visualizing things like the size of a folder structure. (think WinDirStat)
1
$ChartData = @{
2
    name = 'root'
3
    color = 'hsl(344, 70%, 50%)'
4
    cost = (Get-Random -Maximum 100 -Minimum 10)
5
    children = @(
6
        @{
7
        name = 'node1'
8
        color = "hsl(246, 70%, 50%)"
9
        cost = (Get-Random -Maximum 100 -Minimum 10)
10
        children = @(                  
11
            @{
12
                name = 'nodeNode1'
13
                color = "hsl(120, 70%, 50%)"
14
                cost = (Get-Random -Maximum 100 -Minimum 10)
15
            }
16
            @{
17
                name = 'nodeNode2'
18
                color = "hsl(120, 70%, 50%)"
19
                cost = (Get-Random -Maximum 100 -Minimum 10)
20
            }
21
            @{
22
                name = 'nodeNode3'
23
                color = "hsl(120, 70%, 50%)"
24
                cost = (Get-Random -Maximum 100 -Minimum 10)
25
            }
26
        )
27
        }
28
        @{
29
        name = 'node2'
30
        color = "hsl(246, 70%, 50%)"
31
        cost = (Get-Random -Maximum 100 -Minimum 10)
32
        }
33
        @{
34
        name = 'node3'
35
        color = "hsl(246, 70%, 50%)"
36
        cost = (Get-Random -Maximum 100 -Minimum 10)
37
        }
38
    )
39
    }
40
​
41
New-UDNivoChart -Id 'treemapChart' -Treemap -Data $ChartData -Identity 'name' -Value 'cost' -InnerPadding 3 -OuterPadding 3 -Height 400 -Width 600 -OnClick {
42
    Show-UDToast -Message $EventData -Duration 3000
43
}
Copied!
v2.2.0
v2.2.0-beta1
Last modified 2yr ago
Copy link
Contents
v2.2.0-beta2
New Enterprise Charts
New Color Options
Fill Patterns
Interactive Charts
Differences between New-UDChart
Chart Types
Stream
Treemap