Dashboard Layout

Version

Application Scenario

You can freely customize and beautify the layout of existing visual dashboards.

Function Description

FineBI supports both grid layout and free layout for dashboards.

The default layout is the grid layout, and you can set the gap between components. The free layout can be achieved by setting components to hover.

Grid Layout

Free Layout

Grid layout only supports vertical stretching, not horizontal stretching. Grid layout divides the plane into multiple cells according to rules, with each component occupying a certain number of cells. When the screen size changes, the cells are divided based on the actual width and height of the screen and the relative proportion of the components to the entire screen remains unchanged.

There is a gap (can be canceled) between components by default. In addition, components can be set to stick to the top, but the components cannot be overlapped by others.

Component Gap Setting

You can see a fixed gap between components set by default in grid layout after entering the dashboard editing page, as shown in the following figure.

You can set the component gap by choosing Dashboard Style > Custom > Dashboard > Component Gap. For example, set the Component Gap to 2, as shown in the following figure. The gap between the components.

Component Size Adjustment

You can drag to adjust component sizes, as shown in the following figure.

You can directly use the Set Width function to quickly set a component size to a fixed percentage of the screen width.

For example, if you want three filter components with equal width to fill the entire screen, you can set each filter component's width to one-third of the screen width. You can click the drop-down list, and select Set Width, as shown in the following figure.

The free layout is achieved by setting component hover. You can drag and adjust the component position and size freely after selecting hover for components. Additionally, this layout allows you to adjust the stacking order for components.

Component Hover Setting

If you want to freely set the layout of the dashboard, and adjust the order and position of the components, you can click the component, and select Hover from the drop-down list, as shown in the following figure.

Component Adjusting

You can freely drag the component and adjust its size despite the rules of grid layout after setting the component to hover, as shown in the following figure. You can freely drag the component position after setting the component to hover.

Component Stacking Order Setting

You can adjust the display order of two hovering components by selecting Move to Top/Move to Bottom in Order, as shown in the following figure.

Component Size Optimization

The method for adjusting the size of hovering components is the same as that in the grid layout. For details, see "Component Size Optimization".