Multiple Line Border Colors for ChartJSMonitor

PowerShell Universal Universal Dashboard
1 
Product: PowerShell Universal
Version: 2.6.2

I’m looking to add some monitors to a Dashboard that will keep track of available, in use, and resyncing VDI’s. I’d like to have the monitors all be in one single monitor to save on page space but I cannot seem to get the line border -ChartBorderColor set to more than one single color.

Here is what I’m working with currently. Does anyone know how I can set each line element to its own border color?

$Session:availct = Get-Random -Maximum 400
$Session:inusect = Get-Random -Maximum 300

New-UDChartJSMonitor -Loadata{
    @($Session:availct, $Session:inusect) | Out-UDChartJSMonitorData
} -Label ("Available","InUse") -ChartBorderColor @("#297741","fffb0d") -ChartBackgroundColor "rgba(0,0,0,0)" -RefreshInterval 5
2

This could be a bug. As far as I know, the other colors are arrays and work but maybe this particular color is not.

3

Yeah it seems like it is a bug when I pull out the Function from the psm file for the monitor and run it stand alone it returns both of the html color values in the array but it’s not loading them to the Monitor via the Out function. Testing the Out function the same way I see two y values with the html color values but it looks like maybe they are being loaded on the same axis label? I’m going to try to rework the Out function to mirror the Multi-Axis Line Chart in the Chart JS Docs and see if I can get it to work.

4

So I think its most definitely a bug with Chart JS at this point. I was able to rework the Out function to create seperate Datasets.

for ($i = 0; $i -lt $items.labels.count;$i++{
   $datasets += @{
       x = $TimeStamp
       y = @{
           id = $items.id
           labels = $items.labels[$i]
           refreshInterval = $items.refreshInterval
           chartBordercolor = $items.chartBordercolor[$i]
           chartType = $items.chartType
           assetId = $items.assetID
           options = $items.options
           type = $items.type
           isPlugin = $items.isPlugin
           dataPointHistory = $items.dataPointHistory
           autoRefresh = $items.autoRefresh
           chartBackgroundcolor = $items.chartBackgroundcolor
           loadData = $items.loadData[$i]
       }
    }
}

This creates different datasets but when it’s charted it still only uses one of the chartBordercolor values it seems to only be the first value.

5

So after much fiddling I’ve determined it’s not reading the entire array for the border colors. If you update the line for chartBorderColor in the pipeline object of the New-UDChartJSMonitor function to one of the array places

e.g., chartBordercolor = if ($ChartBorderColor) {$ChartBorderColor.HTMLColor[0]} or chartBordercolor = if ($ChartBorderColor) {$ChartBorderColor.HTMLColor[1]}

It changes the border color of the monitor. I’m thinking this has more to do with the actual js and I don’t have the time to unpack that current. If anyone finds a work around to this I would love to see it.

6

@adam I think I found it in the monitor.jsx line 83 - 94 where you build the Datasets for the Monitor you’re calling the whole array chartBorderColor and chartBackgroundColor in the for loop. Instead of chartBorderColor[i] etc… Funny enough the For Loop in your jsx file is almost identical to the one I wrote to attempt to build different datasets.

I was able to track this down in both the map source and in the machine code on the browser and I think this is likely the issue. If you search for props.labels.length in the map source it is calling the whole array for each dataset and in the machine code on dev tools this can be seen in the bundle.js source by searching borderColor: o (I’m not sure if the machine code is generated differently on each browser or not).

Happy New Years by the way!

7

I was able to test this out over the holiday on my home lab and updating the java bundle to call the array element in the chartBorderColor array while building the datasets will render multiple border colors on the monitor.

8

Nice find! I’ll open an issue for this to make sure this gets into a build for you to test out.

1 Like