Grid

The grid is the distribution system for the charts, tables and other components in the views that we are creating. To make the customization of these views as comfortable as possible, but at the same time easy to create, the basic operating concepts of the grid are shown below.

Functioning

To create our dashboard in a customized way, we have to give the components an order, and define what size they will occupy on the screen. By default, the grid is divided as follows:

• 12 auto-sized columns.

• Infinite rows of fixed size (160 pixels in height).

12 columns and infinite rows.

Size of rows and columns, and gaps between them.

Properties

Order, Columns, Rows, Padding: [ top, right, bottom, left ]

The following properties act on the components to give them size, position and space if required.

Order

• Place the component in a position from 0 to n The property places elements from left to right, starting at 0 and following a logical order, 0,1,2,3...etc.

If an order is not defined for a component, it will be placed visually as the last element.

Columns and padding: The maximum number of columns for a component is 12 (including padding). If a component exceeds this number, the width of the columns will be subtracted to fit.

A component with 8 columns and 4 padding on the left and on the right. The end result will be a component with 4 columns and 4 padding on the left and on the right, as in here:

Column

• Defines the width size of a component.

• At most 12 columns can be defined.

• If more than 12 columns are defined, the component will avoid the number and will define the maximum possible columns(12).

• If columns are not defined, the components have predefined sizes for their correct visualization.

• If the component does not have enough size in columns, a horizontal scroll will appear.

Row

• Defines the height size of a component.

• Infinite rows can be used.

• If rows are not defined, the components have predefined sizes for their correct visualization.

• If the component does not have enough size in rows, a vertical scroll will appear.

• With indicators the minimum rows_size is 2; thecols_size must accommodate the text that you want to show, maximum cols_size is 12.

• HTML: its rows_size will not have a minimum height of 160px (like all other components), it will only take up the necessary space.

Padding

• Defines the size of space around a component.

• It has 4 sub-properties (padding-top, padding-right, padding-bottom, padding-left) These are always set in a clockwise direction, first up, then right, then down, and finally left.

• Each sub-property leaves a different space, being the right and left paddings the ones that leave space the size of the column width. On the other hand, the top and bottom padding will leave space of the size of the rows.

• On mobile devices all components will be placed one below the other and padding will be removed.

This property is not mandatory in the definition of a component

Information of interest – Q & A

The breakpoint at which the drawer (left menu) appears is 900px. The width of the drawer is 240px. It’s fixed. It doesn’t scale. The height of the top navbar is 66px. It doesn’t scale. 1. What is the actual distance between columns and rows, and what is the behavior when it comes to scaling? The column gap is 16px and the row gap is currently 32px. The width of the columns is automatic and is reduced with the screen. The height of the rows is not automatic and is not reduced at any time, currently. The redistribution of the elements is done automatically as the screen is reduced. The behavior that we now have inherited from a MUI material breakpoint, is that at less than 1200px, all the elements start to be distributed as in “mobile”. Putting one under the other. We will also change the breakpoint, coming soon.

2. How does the space between the grid boxes influence the padding? The gaps are added to the padding. We will work on a better idea for the use of padding.

3. Can the padding be subdivided? The minimum size of one box is quite rough. Currently, we cannot subdivide the padding. We understand that it is a pain point because the size in some cases can be very large. We will consider it.

4. What is the behavior of text/graph inside a component? How is it arrangeable? Texts (HTML components) have special behavior in the grid. The texts (HTML components), if they are not told otherwise, do not have the height of 160px of a row. The texts have the height defined in their style, if it is a title for example, by having a larger font width and line height. Your row will be taller than the base text for example.

For more information refer to Using the grid.

Examples

Examples of using order, rows_size, cols_size and padding to locate a component in the page.

from os import getenv
import datetime as dt

from shimoku import Client

universe_id: str = getenv('UNIVERSE_ID')
workspace_id: str = getenv('WORKSPACE_ID')
environment: str = getenv('ENVIRONMENT')
access_token: str = getenv('API_TOKEN')

s = Client(
    access_token=access_token,
    universe_id=universe_id,
    environment=environment,
    verbosity='INFO',
    async_execution=True
)
s.set_workspace(uuid=workspace_id)
s.set_board('Custom Board')
s.set_menu_path('menu path', 'sub-path')

data = [
    {'date': dt.date(2021, 1, 1), 'x': 5, 'y': 5},
    {'date': dt.date(2021, 1, 2), 'x': 6, 'y': 5},
    {'date': dt.date(2021, 1, 3), 'x': 4, 'y': 5},
    {'date': dt.date(2021, 1, 4), 'x': 7, 'y': 5},
    {'date': dt.date(2021, 1, 5), 'x': 3, 'y': 5},
]

s.plt.html(html='<h1>Test</h1>', order=0)

s.plt.bar(
    data=data, x='date',
    order=1, rows_size=2, cols_size=6
)

s.plt.bar(
    data=data, x='date',
    order=2, rows_size=2, cols_size=4,
    padding="2, 2, 2, 2"
)

s.run()

For more information refer to Using the grid.