Dashboard Page Layout

This article introduces the dashboard page layout and design. The page layout, or canvas mode, includes two settings: custom and fixed size. The canvas layout currently supports a layered mode, where multiple control layers are stacked and displayed.

Canvas Mode

The canvas mode includes adaptive and fixed size options. The adaptive mode uses the number of grids for page layout, while the fixed size mode uses pixels for page layout.

Adaptive Mode

The adaptive mode uses the number of grids for page layout.

First, set the number of horizontal grids on the canvas, which supports any integer value between 6 and 500.

Then, set the number of vertical grids, which can be adjusted using the grid aspect ratio and adaptive settings.

• The grid aspect ratio indicates that the width of the vertical grid depends on the width of the horizontal grid. The available ratios are 1:1, 4:3, 3:4, 16:9, and 9:16. When the aspect ratio is 1:1, it means the width of the vertical grid is the same as the horizontal grid. If the aspect ratio is 4:3, it means the width of the vertical grid is 3/4 of the horizontal grid width. When using the grid aspect ratio, first calculate the vertical grid width based on the horizontal grid width, and then calculate the number of grids in the vertical direction based on the vertical canvas width. When the horizontal canvas is fixed, the size of the grid is fixed. Adjusting the vertical height of the canvas increases the number of grids in the vertical direction, allowing more controls to enter the canvas.
• Adaptive means that the number of vertical grids is independent of the number of horizontal grids and can be set separately, with any integer value between 6 and 400. In the adaptive mode for vertical grids, since the number of horizontal and vertical grids on a page is fixed, when the horizontal width of the canvas is fixed, adjusting the vertical height does not change the number of vertical grids, and the controls within the canvas remain unchanged. However, due to the change in grid shape, the controls will also deform accordingly.

After setting the number of horizontal and vertical grids, the canvas is fixed. The size of the controls is determined by the number of grids, with the smallest control being the size of one grid. Grid spacing can be set for layout fine-tuning. When creating charts, grids can be displayed to facilitate adjusting the position and size of controls.

Fixed Size Mode

Fixed size mode indicates that the page size remains fixed. Three built-in canvas sizes are available: 4:3 (width 1600: height 1200), 16:9 (width 1600: height 900), and 21:9 (width 1680: height 720). Additionally, custom canvas width and height are supported.

When the page layout is set to fixed size, it is necessary to configure the page embedding, preview zoom mode, and the display position (top, middle, bottom, left, center, right) on the page under various modes. The zoom modes include:

• No Zoom: Display without scaling, according to the set size.
• Full Content: Display the entire content of the dashboard.
• Full Screen: Display the dashboard filling the entire screen.

When editing the dashboard, the fixed size display mode can also be adjusted. You can switch between zoom, fill canvas, and show all modes at the bottom, which is convenient for users to view the chart display effects during editing.

Mobile Page Layout

When displaying the dashboard on mobile devices, a separate page layout needs to be set. The mobile page layout also supports adaptive and fixed size settings.

Mobile Adaptive Mode

In mobile adaptive mode, the layout method supports automatic and manual modes. Automatic means the system lays out the controls, and users cannot move them. The manual mode is the same as the PC configuration; refer to the relevant instructions for configuration.

Mobile Fixed Size Mode

Mobile fixed size mode includes two mobile page layouts for iPhone SE and iPhone XR, and other sizes can be set using the custom method. The mobile fixed size mode configuration is the same as the PC configuration; refer to the relevant instructions for configuration.