Overlap of input controls on Chart

[adamdriscoll]

https://files.gitter.im/ironmansoftware/show-off/4SC7/inputs.gif

[adamdriscoll]

@mattmcnabb - What browser were you using? I can't repro this. An example dashboard might help too. Thanks!!

[mattmcnabb]

Might have been quantum. I'll check it out in others to verify.

[mattmcnabb]

Pretty much looks the same in all browsers for me. Here's a shot of Edge, Chrome, and FF Quantum

Is it possible it's more of a resolution/DPI thing? Also, TBH this is not a huge deal to me. I'm really happy to get the chart inputs in there at all. That's a huge win. Thanks!

[mattmcnabb]

Sorry, I forgot to include an example dashboard. here's an example:

$Dashboard = New-UDDashboard -Title "Testing input overlap" -Content {
    New-UDRow -columns {
        New-UDColumn -size 6 -Content {
            New-UDChart -Type Line -Endpoint {
                param ($TimeRange, $ToCurrency)

                $Data = @(
                    [PSCustomObject]@{Day = 1; Value = 33}
                    [PSCustomObject]@{Day = 2; Value = 48}
                    [PSCustomObject]@{Day = 3; Value = 27}
                    [PSCustomObject]@{Day = 4; Value = 39}
                    [PSCustomObject]@{Day = 5; Value = 55}
                    [PSCustomObject]@{Day = 6; Value = 62}
                    [PSCustomObject]@{Day = 7; Value = 88}
                )
                $Data | Out-UDChartData -LabelProperty Day -DataProperty Value
            } -FilterFields {
                New-UDInputField -Type select -Name TimeRange -Values @("1H", "1D", "1W", "1M", "1Y", "5Y") -DefaultValue "1D"
                New-UDInputField -Type select -Name ToCurrency -Values @("USD", "ETH", "LTC") -DefaultValue "USD"
            }
        }
    } 
}

Start-UDDashboard -Dashboard $Dashboard -port 8080

The overlap only seems to occur in a sized column. If I place the chart right inside the dashboard content scriptblock, I don't see the overlap. So here's the same chart but without the row and column formatting:

$Dashboard = New-UDDashboard -Title "Testing input overlap" -Content {
    New-UDChart -Type Line -Endpoint {
        param ($TimeRange, $ToCurrency)

        $Data = @(
            [PSCustomObject]@{Day = 1; Value = 33}
            [PSCustomObject]@{Day = 2; Value = 48}
            [PSCustomObject]@{Day = 3; Value = 27}
            [PSCustomObject]@{Day = 4; Value = 39}
            [PSCustomObject]@{Day = 5; Value = 55}
            [PSCustomObject]@{Day = 6; Value = 62}
            [PSCustomObject]@{Day = 7; Value = 88}
        )
        $Data | Out-UDChartData -LabelProperty Day -DataProperty Value
    } -FilterFields {
        New-UDInputField -Type select -Name TimeRange -Values @("1H", "1D", "1W", "1M", "1Y", "5Y") -DefaultValue "1D"
        New-UDInputField -Type select -Name ToCurrency -Values @("USD", "ETH", "LTC") -DefaultValue "USD"
    }
}

Start-UDDashboard -Dashboard $Dashboard -port 8080

[mattmcnabb]

Personally I kind of like the look of the input selectors when they're scrunched together rather than spread across the bottom of the chart. All that really needs to happen is to expand the chart card's bottom downward to encapsulate the input control. Not sure how that would be achieved, but again, no biggie from my perspective.

[adamdriscoll]

This is fix in the next build. Controls will stack horizontally and won't overlap.

[adamdriscoll]

1.3.0-beta5