Paging for New-UDChartJS

PowerShell Universal
1 
Product: PowerShell Universal
Version: 2.2.1

I have a SQL query that returns several columns of data into a powershell variable and that data is then used in several visuals throughout my dashboard. However, it doesn’t really look good when you have 30+ rows on a bar graph so I am wondering if I could have a drop-down or some sort of pagination on the chart itself. I know you can do this with tables in Powershell Universal, but what would be the best way to do this for a chart. I could select top XX into a new variable from my existing variable, but that would not allow me to see anything beyond the top 5 in my bar chart.

2

Here’s a paging control you could use. Instead of the UDCard, just include your charts. You can also remove the transition if you don’t want any animation between changes.

New-UDDashboard -Title 'test' -Content {
    if ($null -eq $Session:Page)
    {
        $Session:Page = 0
    }

    New-UDDynamic -Id 'content' -Content {
        if ($Session:Page -eq 0 -or $null -eq $Session:Page)
        {
            New-UDTransition -Content {
                New-UDCard -Text "Chart Set 1 Here"
            } -In -Grow -Timeout 100
        }
        elseif ($Session:Page -eq 1)
        {
            New-UDTransition -Content {
                New-UDCard -Text "Chart Set 2 Here"
            } -In -Grow -Timeout 100
        }
        elseif ($Session:Page -eq 2)
        {
            New-UDTransition -Content {
                New-UDCard -Text "Chart Set 3 Here"
            } -In -Grow -Timeout 100
        }
    }

    New-UDButton -Text 'Back' -OnClick {
        $Session:Page -= 1
        if ($Session:Page -eq -1)
        {
            $Session:Page = 0
        }
        Sync-UDElement -Id 'content'
    }

    New-UDButton -Text 'Next' -OnClick {
        $Session:Page += 1
        Sync-UDElement -Id 'content'
    }
}

Here’s what the looks like.

paging

1 Like