Dashboard layout

1.1 Application scenarios

Layout and beautify the components in the dashboard.

1.2 Feature introduction

FineBI's dashboard layout includes grid layout and free layout.

The default is the grid layout, you can set whether there is a gap between the components; free layout is achieved by setting the components to float.

1.2.1 Grid layout

The grid layout only supports vertical extension, not horizontal extension. The grid layout divides the plane into multiple cells according to the rules, and each component occupies a certain number of cells. When the screen size changes, as the actual width and height of the screen divide the cells, the proportion of the component relative to the entire screen does not change.

In the default layout mode, there is a gap between the components, which can be adjusted to be no gap, always placed on the ceiling, and the components cannot be overlapped. That is, the layout rules shown in the figure below:

1.2.2 Free layout

Free layout is achieved by setting the component suspension. After checking the suspension for the component, the position and size of the component can be dragged freely, and the order adjustment when the component is stacked is supported. As shown below:

2.1 There is a gap between components

In the default grid layout, there are fixed gaps between components, as shown in the following figure:

2.2 No gap between components

Click "Dashboard style", and at "Dashboard> Component Gap", you can set the component gap, including "There is a gap" and "No gaps".

The default is "There is a gap", select "No gaps". As shown below:

Adjust the gap between the components to have no gaps to achieve seamless connection between components. The effect is shown in the following figure:

The component gap setting will not affect the layout rules of the grid. It is always placed on the ceiling and cannot be stacked.

The free layout of components is realized by the suspension of components. The components can be placed overlapping.

3.1 Component overlap setting

If you want to freely set the dashboard layout, drag and drop the order and position between the components freely, select the components, and drop down to set "Allow Overlap", as shown in the following figure:

3.2 Adjust component size and position

After allowing overlap, the component can be dragged to any position at will, and the size of the component can be set at will, without being restricted by the grid layout plan division rules. As shown below:

3.3 Set the stacking order of components

Two components that are set to float at the same time can be adjusted by setting the order: top/bottom to adjust the component display, as shown in the following figure:

3.4 Preview effect

The components in the dashboard can be set to float in whole or in part, and can be set according to their own layout needs. Adjust the above dashboard to a free layout effect by floating, as shown in the figure below, and the table component is displayed above the chart component in a floating manner.

Problem:

There are so many components in the dashboard, and some components can't be found.

Cause:

It is blocked by the suspended component.

Solution:

The approximate location of the components can be judged through "Mobile Layout".

Principle: Open the mobile layout, and the components will be displayed in order (from left to right, top to bottom) according to the physical location of the PC.

According to the order of the components in the "Mobile Layout", locate the approximate location of the components, and then return to the dashboard interface to find them.