New-UDChartJS infinitely expanding when nested in -OnRowExpand of Table

1

Here’s a weird one… I’m building out a report for battery health of our laptops. I had the thought to have it display a graph of the battery health in the last 30 days, but when the row is expanded, the chart is…

  1. Bigger than the table
  2. expands infinitely vertically and horizontally…

Any thoughts?

$BQuery = @"
SQLQuery here
"@
$BatteryAll = Invoke-DbaQuery -SqlInstance $Instance -Database $Database -query $BQuery -As PSObject
$IDs = $BatteryAll | Select-Object -ExpandProperty snid -Unique
$BatteryReport = $IDs | ForEach-Object -Parallel {
    $ID = $_
    $Batteryall = $Using:Batteryall
    $BatteryAll | Where-Object {$_.Snid -eq $ID} | Sort-Object Timestamp -Descending | Select -First 1
}
$Columns = @(
    New-UDTableColumn -Property DeviceName -Title "Device Name" -Render {
        New-UDLink -Text $EventData.'snid' -url "ComputerManagement/$($EventData.snid)" -OpenInNewWindow
    } -FilterType text -ShowFilter
    New-UDTableColumn -Property Model -FilterType AutoComplete -ShowFilter
    New-UDTableColumn -Property DesignCapacity -Title "Design Capacity (mAh)"
    New-UDTableColumn -Property CurrentCapacity -Title "Current Capacity (mAh)"
    New-UDTableColumn -Property Percentage -Render {
        Switch ($EventData.Percentage) {
            {$_ -le 50} {
                New-UDAlert -Severity 'error' -Text "$_%";Break
            }
            {$_ -le 75} {
                New-UDAlert -Severity 'warning' -Text "$_%";break
            }
            {$_ -le 100} {
                New-UDAlert -Severity 'success' -Text "$_%";break
            }
        }
    } -FilterType Range -ShowFilter
    New-UDTableColumn -Property TimeStamp -Render {
        New-UDDateTime -InputObject $EventData.TimeStamp
    }
)
New-UDTable -Title "Battery Report" -Columns $Columns -Data $BatteryReport -PageSize 10 -ShowPagination -ShowFilter -OnRowExpand {
    $Data = $BatteryAll | Where-object {$_.snid -eq $EventData.snid} | Select-Object -First 30
    $Baseline = New-UDChartJSDataset -DataProperty DesignCapacity -Label "Design Capacity (mAh)"
    $Actual = New-UDChartJSDataset -DataProperty CurrentCapacity -Label "Current Capacity (mAh)"
    $Options = @{
        type = 'line'
        Data = $Data
        Dataset = @($Baseline,$Actual)
        LabelProperty = "TimeStamp"
    }
    New-UDChartJS @Options
}

image
image2072×1109 103 KB

image
image2351×862 26.1 KB

image
image2303×855 19.8 KB

2

You might be able to wrap the New-UDChartJS in a UDElement and set the maxWidth to something like 100vw. I have no idea why it expands like that.

3

Hi Adam,

Getting back into the swing of things after the new year…

Could you give an example of this? What is “100vw”?

4

Sorry. That was super unclear. 100vw is 100% view width. You can also do stuff like 50% and that will be 50% of the container. Or something like pixels: 500px.

Then wrap it in a UI element and apply the style.

New-UDElement -tag div -Content {
   New-UDChartJS @Options
} -Attributes @{ 
   style = @{
      maxWidth = '500px'
   }
}

You may also be able to use UDStyle.

New-UDStyle -Style "maxWidth = '500px'" -Content {
   New-UDChartJS @Options
}
1 Like