Chart Filter for selected value

PowerShell Universal Universal Dashboard
1

What’s popping everyone?!

Hopefully this is an easy question, is there a way in which charts can perform filters based on dropbox selection?

Was testing this piece of code:

New-UDSelect -Option {
                    New-UDSelectOption -Name 'subdom1.site.com' -Value "subdom1.site.com"
                    New-UDSelectOption -Name 'subdom2.site.com' -Value "subdom2.site.com"
                } -DefaultValue "subdom1.site.com" -OnChange {
                    $options = @{
                        Type = 'bar'
                        Data = $histdata | Where {$_.SensorDevice -eq "$EventData"}
                        Dataset = @($loadtimedataset,$pingdataset,$uptimedataset,$mindataset,$maxdataset)
                        LabelProperty = "SensorName"
                    }
                    New-UDChartJS @options
                    New-UDTypography -Text $EventData
                    Show-UDToast -Message $EventData
                }

Data comes from SQL sproc return thru Invoke-SqlCmd

I get the following error message in the log:
[01-13-21 07:30:17 PM] An error occurred: Cannot bind argument to parameter ‘Data’ because it is null.

Product: PowerShell Universal
Version: 1.5.8
Framework: 3.2.5
2

I was able to make it refresh based on selection. The only thing I can’t get to work is when the page load for the first time. It doesn’t use the DefaultValue as I would think it would.

$pingdataset = New-UDChartJSDataset -DataProperty Ping -Label 'Ping Time(sec)' -BackgroundColor '#126f8c'
$mindataset = New-UDChartJSDataset -DataProperty Minimum -Label 'Minimum' -BackgroundColor 'Blue'
$maxdataset = New-UDChartJSDataset -DataProperty Minimum -Label 'Maximum' -BackgroundColor 'Orange'
$uptimedataset = New-UDChartJSDataset -DataProperty Coverage -Label 'Coverage' -BackgroundColor 'Green'
$loadtimedataset = New-UDChartJSDataset -DataProperty LoadingTime -Label 'Load Time' -BackgroundColor 'Pink'

    New-UDGrid -Container -Content {
        New-UDCard -Title "Sensors Average Data - Past 7 days" -Content {
            New-UDGrid -Item -LargeSize 12 -Content {
                New-UDSelect -Id 'SensorEndpoints' -Label 'Select server endpoint:' -Option {
                    foreach ($name in $sensordevnamedata) {
                        New-UDSelectOption -Name $name.SensorDevice -Value "$($name.SensorDevice)"
                    }
                } -DefaultValue 'subdom1.site.com' -OnChange {
                    Sync-UDElement -Id 'filterchart'
                    Show-UDToast -Message $EventData
                }
                New-UDDynamic -Id 'filterchart' -Content {
                    $chartfilter = Get-UDElement -Id 'SensorEndpoints'
                    $options = @{
                        Type = 'bar'
                        Data = $histdata | Where {$_.SensorDevice -eq "$($chartfilter.Value)"}
                        Dataset = @($loadtimedataset,$pingdataset,$uptimedataset,$mindataset,$maxdataset)
                        LabelProperty = "SensorName"
                    }
                    New-UDChartJS @options
                }
            }
        }
    }
3

Nice work. Have you tried Set-UDElement on the default parameter instead of sync-udelement?

4

Thank you @psDevUK

No I have not. I was using some example code plus add my logic.

Do you have an example on how I could use the Set-UDElement?

5

I would show you how I would do it in UD and not PU and @adam has kindly documented the steps here:-
https://docs.ironmansoftware.com/dashboard/interaction#setting-component-state
and another example here:-
https://docs.ironmansoftware.com/dashboard/components/element#setting-element-properties-dynamically
I hope this does solve the issue for you :crossed_fingers:

P.S Sorry I re-read the problem…Please have a look at New-UDSelect DefaultValue doesn't work from a Variable - #2 by psDevUK for getting the default value to work.

6

Awesome!! Thank you @psDevUK that worked (last link). See code snippet below

New-UDGrid -Container -Content {
    New-UDCard -Title "Sensors Average Data - Past 7 days" -Content {
        New-UDGrid -Item -LargeSize 12 -Content {
            New-UDSelect -Id 'SensorEndpoints' -Label 'Select server endpoint:' -Option {
                foreach ($name in $sensordevnamedata) {
                    New-UDSelectOption -Name $name.SensorDevice -Value "$($name.SensorDevice)"
                }
            } -DefaultValue 'subdom1.site.com' -OnChange {
                Sync-UDElement -Id 'filterchart'
                Show-UDToast -Message $EventData
            }
            New-UDDynamic -Id 'filterchart' -Content {
                $chartfilter = Get-UDElement -Id 'SensorEndpoints'
                if ($chartfilter.Value) {
                    $options = @{
                        Type = 'bar'
                        Data = $histdata | Where {$_.SensorDevice -eq "$($chartfilter.Value)"}
                        Dataset = @($loadtimedataset,$pingdataset,$uptimedataset,$mindataset,$maxdataset)
                        LabelProperty = "SensorName"
                    }
                } else {
                    $options = @{
                        Type = 'bar'
                        Data = $histdata | Where {$_.SensorDevice -eq "$($chartfilter.DefaultValue)"}
                        Dataset = @($loadtimedataset,$pingdataset,$uptimedataset,$mindataset,$maxdataset)
                        LabelProperty = "SensorName"
                    }
                }
                
                New-UDChartJS @options
            }
        }
    }
}
1 Like