Show-UDModal Sizing using Charts (UD v3+)

Universal Dashboard Universal Dashboard Help
1

I’m looking for a nice way to load some chart data into a dashboard using buttons and other inputs and I’m running into an issue when setting the Fullwidth on the Modal.

    New-UDButton -Variant 'contained' -Text "Graph Button" -OnClick {
        Show-UDModal -Content {
            $LeadData2 = @(31,27,24,14,4)
            $LabelName2 = @('Cost Reduction', 'Productivity', 'Availability', 'Reliablility', 'Performance')
            $DataSingle = @()
            for ($i = 0; $i -lt $LabelName2.Count; $i++) {
                $DataSingle += New-Object -TypeName psobject -Property @{lablesingle=$LabelName2[$i];Benefit=$LeadData2[$i]}
            }
            New-UDChartJS -Type 'bar' -Data $DataSingle -DataProperty Benefit -LabelProperty 'lablesingle' -BackgroundColor '#126f8c'
        } -FullWidth -MaxWidth 'md'
    }

Changing the -FullWidth -MaxWidth parameters doesn’t seem to change the modal sizing at all. I’ve tried several different options but they all render the graph really small.

Setting it to fullscreen just looks ridiculously big.

Is there a way to expand the border of the modal in v3 so the graph would take up about 50-60% of the screen?

2

There was a bug in the Show-UDModal function. It was passing max rather than maxWidth to the React component so it wasn’t actually changing the max width.

This will be fixed in the next version but until then you can define a custom modal function that passes the correct property name.

function Show-Modal
{
    param(
        [Parameter()]
        [Switch]$FullScreen,
        [Parameter()]
        [ScriptBlock]$Footer,
        [Parameter()]
        [ScriptBlock]$Header,
        [Parameter()]
        [ScriptBlock]$Content,
        [Parameter()]
        [Switch]$Persistent,
        [Parameter()]
        [Switch]$FullWidth,
        [Parameter()]
        [ValidateSet("xs", "sm", "md", "lg", "xl")]
        [string]$MaxWidth
    )

    $Modal = @{
        dismissible = -not $Persistent.IsPresent
        maxWidth = $MaxWidth
        fullWidth = $FullWidth.IsPresent
        fullScreen = $FullScreen.IsPresent
    }

    if ($null -ne $Footer)
    {
        $Modal['footer'] = & $Footer
    }

    if ($null -ne $Header)
    {
        $Modal['header'] = & $Header
    }

    if ($null -ne $Content)
    {
        $Modal['content'] = & $Content
    }

    $DashboardHub.SendWebSocketMessage($ConnectionId, "showModal", $modal)
}
3

Thanks @adam, I also found that changing the CSS for MuiDialog-paperWidthSm also fixed the issue. I’ll try your method out shortly as mine also changes the refresh buttons height and width which is kind of annoying.

Another quick question - Do you by chance know of an easy way to change the font-size on the different ChartJS Charts? Referring to Labels anyways.

4

It looks like ChartJS provides those options based on the docs (tick fontSize, I think) but I don’t know off the top of my head how to apply that in UD. I’ll have to mess with it when I get a chance: https://www.chartjs.org/docs/latest/axes/styling.html

1 Like