poshud/pages/components.ps1

$Components = New-UDPage -Name Components -Icon area_chart -Content {
    New-UDHtml -Markup '<link rel="stylesheet"
    href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/agate.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script><script>hljs.initHighlightingOnLoad();</script>'

 

    New-UDRow {
        New-UDColumn -Size 3 {
            New-UDCard @AlternateColors -Title "Grids" -Text "Display data in a table that supports client and server side paging."
        }
        New-UDColumn -Size 9 {
            New-UDCard @ScriptColors -Language "PowerShell" -Text 'New-UDGrid -Title "Customer Locations" @Colors -Headers @("Country", "Customers", "First Purchase Date") -Properties @("Country", "Customers", "FirstPurchaseDate") -AutoRefresh -RefreshInterval 20 -Endpoint {
                Invoke-RestMethod http://myserver/api/myendpoint | Out-UDGridData
} '
 -Title "PowerShell"
        }
    }
    New-UDRow {
        New-UDColumn -Size 12 {
            New-UDGrid -Title "Customer Locations" @Colors -Headers @("Country", "Customers", "First Purchase Date") -Properties @("Country", "Customers", "FirstPurchaseDate") -AutoRefresh -RefreshInterval 20 -Endpoint {
                
                                     @(
                                            @{
                                                    Country = "MAURITANIA"
                                                    Customers = 262
                                                    FirstPurchaseDate = "5/30/2017"
                                                },
                                            @{
                                                    Country = "NAURU"
                                                    Customers = 649
                                                    FirstPurchaseDate = "9/11/2017"
                                                },
                                            @{
                                                    Country = "POLAND"
                                                    Customers = 92
                                                    FirstPurchaseDate = "8/8/2017"
                                                },
                                            @{
                                                    Country = "SWITZERLAND"
                                                    Customers = 830
                                                    FirstPurchaseDate = "5/8/2017"
                                                },
                                            @{
                                                    Country = "ISLE OF MAN"
                                                    Customers = 641
                                                    FirstPurchaseDate = "7/13/2017"
                                                },
                                            @{
                                                    Country = "KYRGYZSTAN"
                                                    Customers = 857
                                                    FirstPurchaseDate = "7/30/2017"
                                                },
                                            @{
                                                    Country = "GIBRALTAR"
                                                    Customers = 223
                                                    FirstPurchaseDate = "9/3/2017"
                                                },
                                            @{
                                                    Country = "BAHRAIN"
                                                    Customers = 912
                                                    FirstPurchaseDate = "9/10/2017"
                                                },
                                            @{
                                                    Country = "PAKISTAN"
                                                    Customers = 913
                                                    FirstPurchaseDate = "6/9/2017"
                                                },
                                            @{
                                                    Country = "MALAWI"
                                                    Customers = 281
                                                    FirstPurchaseDate = "6/14/2017"
                                                },
                                            @{
                                                    Country = "HONG KONG"
                                                    Customers = 255
                                                    FirstPurchaseDate = "8/19/2017"
                                                },
                                            @{
                                                    Country = "DOMINICA"
                                                    Customers = 80
                                                    FirstPurchaseDate = "8/3/2017"
                                                },
                                            @{
                                                    Country = "GHANA"
                                                    Customers = 275
                                                    FirstPurchaseDate = "4/15/2017"
                                                },
                                            @{
                                                    Country = "ISRAEL"
                                                    Customers = 380
                                                    FirstPurchaseDate = "5/11/2017"
                                                },
                                            @{
                                                    Country = "FRENCH POLYNESIA"
                                                    Customers = 155
                                                    FirstPurchaseDate = "4/20/2017"
                                                },
                                            @{
                                                    Country = "PANAMA"
                                                    Customers = 130
                                                    FirstPurchaseDate = "9/3/2017"
                                                },
                                            @{
                                                    Country = "ESTONIA"
                                                    Customers = 468
                                                    FirstPurchaseDate = "8/12/2017"
                                                },
                                            @{
                                                    Country = "BANGLADESH"
                                                    Customers = 794
                                                    FirstPurchaseDate = "7/29/2017"
                                                },
                                            @{
                                                    Country = "�LAND ISLANDS"
                                                    Customers = 989
                                                    FirstPurchaseDate = "8/20/2017"
                                                },
                                            @{
                                                    Country = "ANGOLA"
                                                    Customers = 377
                                                    FirstPurchaseDate = "4/22/2017"
                                                }
                
                                             )  | Out-UDGridData
                                }
        }
    }
    New-UDRow {
        New-UDColumn -Size 3 {
            New-UDCard @AlternateColors -Title "Tables" -Text "Display static table data. Refresh on a customizable interval."
        }
        New-UDColumn -Size 9 {
            New-UDCard @ScriptColors -Language "PowerShell" -Text 'New-UDTable -Title "Top GitHub Issues" -Headers @("Id", "Title", "Description", "Comments") @Colors -Endpoint {
    $issues = @();
    $issues += [PSCustomObject]@{ "ID" = (Get-Random -Minimum 10 -Maximum 10000); "Title" = "Product is too awesome..."; "Description" = "Universal Desktop is just too awesome."; Comments = (Get-Random -Minimum 10 -Maximum 10000) }
    $issues += [PSCustomObject]@{ "ID" = (Get-Random -Minimum 10 -Maximum 10000); "Title" = "Support for running on a PS4"; "Description" = "A dashboard on a PS4 would be pretty cool."; Comments = (Get-Random -Minimum 10 -Maximum 10000) }
    $issues += [PSCustomObject]@{ "ID" = (Get-Random -Minimum 10 -Maximum 10000); "Title" = "Bug in the flux capacitor"; "Description" = "The flux capacitor is constantly crashing."; Comments = (Get-Random -Minimum 10 -Maximum 10000) }
    $issues += [PSCustomObject]@{ "ID" = (Get-Random -Minimum 10 -Maximum 10000); "Title" = "Feature Request - Hypnotoad Widget"; "Description" = "Every dashboard needs more hypnotoad"; Comments = (Get-Random -Minimum 10 -Maximum 10000) }
    
    $issues | Out-UDTableData -Property @("ID", "Title", "Description", "Comments")
}'
 -Title "PowerShell"
        }

    }
    New-UDRow {
        New-UDColumn -Size 12 {
            New-UDTable -Title "Top GitHub Issues" -Headers @("Id", "Title", "Description", "Comments") @Colors -Endpoint {
                $issues = @();
                $issues += [PSCustomObject]@{ "ID" = (Get-Random -Minimum 10 -Maximum 10000);  "Title" = "Product is too awesome...";  "Description" = "Universal Desktop is just too awesome."; Comments = (Get-Random -Minimum 10 -Maximum 10000) }
                $issues += [PSCustomObject]@{ "ID" = (Get-Random -Minimum 10 -Maximum 10000);  "Title" = "Support for running on a PS4";  "Description" = "A dashboard on a PS4 would be pretty cool."; Comments = (Get-Random -Minimum 10 -Maximum 10000) }
                $issues += [PSCustomObject]@{ "ID" = (Get-Random -Minimum 10 -Maximum 10000);  "Title" = "Bug in the flux capacitor";  "Description" = "The flux capacitor is constantly crashing."; Comments = (Get-Random -Minimum 10 -Maximum 10000) }
                $issues += [PSCustomObject]@{ "ID" = (Get-Random -Minimum 10 -Maximum 10000);  "Title" = "Feature Request - Hypnotoad Widget";  "Description" = "Every dashboard needs more hypnotoad"; Comments = (Get-Random -Minimum 10 -Maximum 10000) }
                
                $issues | Out-UDTableData -Property @("ID", "Title", "Description", "Comments") 
            }
        }
    }
    New-UDRow {
        New-UDColumn -Size 3 {
            New-UDCard @AlternateColors -Title "Images" -Text "Display images from the web or from disk. Refresh images on the fly and generate them from endpoints."
        }
        New-UDColumn -Size 9 {
            New-UDCard @ScriptColors -Language "PowerShell" -Text 'New-UDImage -Url https://poshtools.com/wp-content/uploads/2017/04/PoshToolsLogo-2.png -Height 100 -Width 100' -Title "PowerShell"
        }
    }
    New-UDRow {
        New-UDColumn -Size 3 {
            New-UDImage -Url https://poshtools.com/wp-content/uploads/2017/04/PoshToolsLogo-2.png -Height 75 -Width 300
        }
        New-UDColumn -Size 3 {
            New-UDImage -Url https://poshtools.com/wp-content/uploads/2017/04/PoshToolsLogo-2.png -Height 75 -Width 300
        }
        New-UDColumn -Size 3 {
            New-UDImage -Url https://poshtools.com/wp-content/uploads/2017/04/PoshToolsLogo-2.png -Height 75 -Width 300
        }
        New-UDColumn -Size 3 {
            New-UDImage -Url https://poshtools.com/wp-content/uploads/2017/04/PoshToolsLogo-2.png -Height 75 -Width 300
        }
    }
}