GridLayout needs some work

New user here. I bought the enterprise version, and I’m working through building a dash. I’d like to accomplish the following:

  • Page with Grid layout. Top area should contain a few smaller cards with some nivo charts. Bottom area should contain a Grid (listing of items).
  • When the page is resized, I want the cards containing the charts to stay at the same size, and just rearrange on the page responsively to adapt to different screen sizes. The Nivo charts don’t really resize nicely, so I’m setting their size statically. However, I can’t find a way to keep the cards within the grid layout from changing their size.
  • The grid (listing of items, not grid layout) on the bottom should resize with the window, and stay at full width all the time. Ideally there would be a way to specify which columns to hide depending on screen width to make things nice and responsive.
  • Auto refresh of all elements. The grid is already setup to auto refresh, however the cards will not auto refresh. There is no auto refresh params for the grid layout or the cards as there are for UDrow and UDcols. I was able to get auto refresh working for graphs contained within those elements as demonstrated in the docs. However, UDrow/UDcol is not really responsive, and it has the same behavior of resizing, whereas I’d like some of the grid elements to stay the same size!

How would I be able to accomplish this? I’m trying to understand how this product is marketed for building dashboards, while the methods available for having charts properly display in various size browsers are so much less than ideal. Is this just user error?

For me, the methods used to dynamically adapt my dashboards per screen size are well designed and suited to my needs, not to mention easy to use with simple parameters. Granted, it took a little while to understand all the different ways of working with universal dashboard, what it can and cant do, but the benefit is amazing and it saves sooo much time than trying to pop up a website in php (or similar) and spending hours messing about with web development for often simple issues that are very easily leveraged in powershell through UD instead.

The way I handle resizing by screen size in my dashboards is like this:
The design for columns is 12 across. 12 = full width.
So if I want some cards along the top of my page, lets say 6 of them.
On a full screen desktop browser, I want all 6 on one row.
If i resize my window to half, then I only want 3 cards per row.
If i go even smaller, I want 2 cards per row.

New-UDRow -Columns {
    New-UDColumn -SmallSize 6 -MediumSize 4 -LargeSize 2 -Content { New-UDCard }
    New-UDColumn -SmallSize 6 -MediumSize 4 -LargeSize 2 -Content { New-UDCard }
    New-UDColumn -SmallSize 6 -MediumSize 4 -LargeSize 2 -Content { New-UDCard }
    New-UDColumn -SmallSize 6 -MediumSize 4 -LargeSize 2 -Content { New-UDCard }
    New-UDColumn -SmallSize 6 -MediumSize 4 -LargeSize 2 -Content { New-UDCard }
    New-UDColumn -SmallSize 6 -MediumSize 4 -LargeSize 2 -Content { New-UDCard }


I usually place 99% of my elements in ud cards and then handle them this way, so your comment about the grid - just create a row for it, column inside that at 12 small medium and large sizes, and then stick your grid inside that - it’ll stay at full width.
Specifying which columns to hide by screen width is not a feature of this component as far as i’m aware, however it’s not impossible i’m sure, but probably would be tricky to manually implement.

If you want all your cards to auto refresh, then use the parent element: new-udcolumn’s properties -AutoRefresh & -RefreshInterval (Providing these are endpoints and not content).
Alternativly if its just a numerical values you want to display, you can also use new-udcounter which has autorefresh and refreshinterval parameters.
Then there is also the new-udelement which can be used in almost any way (particularly to wrap other components) and also has these properties.

On top of this, there are other numerous ways in which you can refresh data, all depending on what you want to achieve and how. For example, you can also use set-udelement or sync-udelement.

Once you get used to how UD is designed and responds I find it very easy and practical to work with.
You need to understand what it can and cant do, as there’s going to be limitations to any product. The main takeaway is that it’s a framework which enables you to do more in powershell and its constantly evolving and growing (version 3 is on its way with some pretty awesome improvements).
Most often if there are things that cannot be done directly in UD components, there’s a way around it with a bit of extra development and code - or stick a feature request in and it’ll likely be picked up if there is a practical need for it.

If you have any specific issues, please post your code and/or screenshots so people can advise further.
The community here is pretty good and we generally all help each other out where we can so If something doesn’t behave the way you expect or you’re struggling getting something working how you want, provide the specifics and I’m sure people will share the solutions they have.

1 Like

Thanks, that’s helpful. However, I’m still not sure how I can ensure that the ud columns maintain a static width. In this case, I’d prefer that the elements were not responsive, as I don’t want the contained nivo graphs to resize. Is it possible to have some ud columns containing cards be a static size, while others use the grid system? I’ve done some extensive work before with grid systems, putting in much effort to make a site fully responsive. This was utilizing the zurb foundation front end. In my experience, to make a properly responsive site, we would need much more control over these components (in my case, that level of control was facilitated by extensive use of css media queries), or they would need to be designed out of the box to be more responsive. For example, the grid view does not have an option to hide specific columns as its width shrinks. This is usually part of getting a table to be “properly responsive” (in my experience). Additionally, it helps to have control over what to hide and what to intelligently rearrange and reflow depending on screen width. In my humble opinion, locking us into using a grid system that resizes its columns with no real control over all these other aspects leads to an incomplete implementation of “responsiveness”. I hope this doesn’t come off the wrong way, as I’m definitely not trying to bash this product. As I’ve only worked with it for a day or so now, I’m fully aware that I may be missing something. It’s just that I did mess about for quite a bit trying to figure a way to get nivo charts in cards and not have them resize with the page width, to no avail. I set the width and height of the chart element, which worked great, however the card containing the chart would still resize with the page width. Admittedly, I have not really checked out how other dashboards built using this framework operate - I will take a look around now. But at this point, I’m still stumped as to how to do this without resorting to custom css or possibly even modifying the reactjs components that underpin these controls.

Here’s an example video of me resizing the official UD demo:
Please observe how terribly the chart in the lower left resizes (as well as the icons). IMO, these cards/boxes should have a static or minimum size, after which they move positions on the page to accommodate a smaller screen. Ultimately, I think this is a band-aid to get around the fact that the framework would have a long ways to go to get close to the level of perfection in something like grafana. I will say that there seem to be many other dashboard-type frameworks that can’t get this right either, so UD is not alone here.

An example of a dashboard framework that is able to be responsive and allow the “cards” and their containing graphs to smoothly resize is grafana. Take a look at this live demo, and watch what happens as the window is resized:
Notice that at no point do the graphs look bad. Everything just smoothly resizes and reconfigures.

An important part of our dashboard is having it display nicely on mobile. It seems that the project just does not accommodate the needs of a responsive design all that well. I’m looking forward to v3, hoping that these issues will be fixed with a better frontend framework.

All that being said, I think I’m going to try to do some custom components. I’d like to try to integrate amcharts - the nicest-looking charting lib I’ve seen thus far.

So I’ve determined that the issue here is that nivo just sucks. I began developing a custom extension for UD that plugs Amcharts into it. Amcharts is by far the nicest charting library I’ve seen so far. The charts are fully responsive with every option you can possibly imagine. After plugging this lib in, I’m now happy with the way charts are displayed, and my need for a static layout is greatly reduced or eliminated at this point.

I’ve taken a different route with the implementation than the UD authors did for the nivo charts. The nivo implementation was done by building PS cmdlets (as all UD components are done) for a handful of chart types. In my humble opinion, there are many drawbacks to this approach:

  • Incomplete implementation: Not all charting options are exposed via the cmdlet, and not all chart types have been exposed.
  • Increased maintenance and potential for drift: As the nivo library is changed or added to, the cmdlets must be updated as well
  • Seriously reduced capabilities: By abstracting away the native JS API, the full power of the charting library can never be utilized.

With all of these drawbacks in mind, I designed this module to allow the full power of the charting library to be unleashed by getting out of the way and passing straight JS through to Amchart in the browser.

Here’s a teaser screencap:

1 Like

I get your point with the display issues on charts, although in this case i think comparing UD to Grafana is a bit apples to oranges. Maybe that should be raised as a bug, however if its an issue with the way the react component is designed then likely not something that can be fixed in UD I imagine. In V3 there’s an overhaul on the UI moving to MaterialUI, I’ve not had chance to play with it yet but there is a beta version available on the gallery so I’d suggest to take a look at that and see if it resolves any of your problems.

It would be interesting to see what your approach is for amchart however I feel that the point in UD is so you don’t have to spend time fiddling with JS or other webcode especially if you’re not comfortable with it (myself included). It’s presenting these things with cmdlets and parameters that makes it quick and easy to use for people that are already familiar and comfortable with PS.

That’s all good and well - those who are fine with what nivo provides can keep using the cmdlets, and those who want to have great looking charts with all the power that using the native API brings can take my extension for a spin. I’ll post back here when I have it up on github. I’m excited to share a fresh take on charting/graphing in UD.