I. Overview
1) In enterprises, dashboards are widely used to display business operations. To meet this requirement, FineReport has introduced a dashboard design mode and offered abundant components.
2) This helps create beautiful and powerful dashboards by simple drag-and-drop operations, enables linkage, drill-down, timed refresh and other effects between components, and makes dashboard design a creative and interesting process.
II. Features of a dashboard
Multi-screen self-adaptation: after a dashboard is designed on a PC, it can be adapted to various terminals including tablets, mobile phones, TVs and large screens.
Abundant visual elements: a wide range of visual components, e.g., tables, charts and widgets, are available.
Multiple layout types: a variety of layout types, such as adaptive layout, absolute layout and Tab layout, are available.
Component reuse: components can be reused, so that users can work out beautiful dashboards quickly.
Component linkage: click on a certain component and another component that links to it auto refreshes to display corresponding data.
Data monitoring and timed refresh: any changes in back-end data will be updated in time on the front end.
Auto carousel: carousel of different charts in one location and of Tab pages is supported.
III. Overview of dashboard interface
1) Parameter pane: a component. Like a common report, the parameter pane can hold widgets for data query.
2) Blank block: a component, including Tab block, absolute canvas block and report block. A report block is similar to a common report. A Tab block or absolute canvas block is equivalent to a mini canvas that can hold other components, e.g., chart blocks.
3) Chart block: a component. It resembles a floating chart in a common report, which can be dragged into a canvas.
4) Widget: widgets can be dragged into the parameter pane as widgets for parameter query, or be directly dragged into the canvas as components of a dashboard.
Note: dashboard component or widget name cannot be empty or duplicated.
5) Component hierarchy: it displays the hierarchical relationship among components in the canvas. There is a body, i.e., the canvas itself, at the very beginning.
6) Shared components: components that can be reused locally are displayed. By directly using these components, you may avoid complex style settings.
7) Attributes: you can set canvas attributes here, including name, style and layout.
8) Size: canvas size can be set manually here.
IV. Introduction of dashboard body
1. Concept of body
Body is a container for components in a dashboard, i.e., the canvas itself.
If body uses absolute layout, you may resize the dashboard by adjusting the size of body.
2. Set dashboard background
The background of a dashboard is the background of body.
Select body and then click drop-down box in the Attributes pane.
Select [Image] as the filling mode, select an image and set the image display mode to [Adaptive] (similar to the case of inserting an image into a cell, for details, please see Insert Images).
Click PC Preview to view the background effect.
V. Dashboard layout types
Dashboard layout types include absolute layout and adaptive layout.
In absolute layout, a component can be placed anywhere while in adaptive layout, components are adaptive in the preview.
1. Set layout
Select body to set the layout type.
2. Effects of different layout types
1) Absolute Layout
In absolute layout, the effect of dragging components into body is as follows:
When the layout is absolute, the height and width of body will be shown.
The height and width of body is the size of the design region, it is determined by the size of report and the PC resolution and cannot be changed by users.
The size of report is the size of actual report display.
The calculation is as follows:
| Resolution | Size of body |
|---|---|
| 1920*1080 | size of report*1.2 |
| 1440*900 | size of report |
| 1366*768 | size of report*0.9 |
| 1280*800 | size of report*0.85 |
| 1024*768 | size of report*0.6 |
Note: If the PC resolution is less than 1024, it will count as 1024; If higher than 1920, it will count as 1920.
If you need to disable the resize calculation of canvas, you can insert a record of field value CustomConfig.screenScaleEnabled, and value of false into the fine_conf_entity table of FineDB.
After this calculation is disabled, the size of body (design region) will be the same as size of report.
2) Adaptive Layout
In adaptive layout, the effect of dragging components into body is as follows:
3. Application of different layout types
Application of absolute layout: components are freely arranged and can be superposed over one another.
Application of adaptive layout: components are arranged in order and cannot be superposed.
VI. Dashboard canvas zooming
For versions after 10.0.9, the dashboard canvas can be zoomed in and out.
When the size of canvas is small and you need to adjust many details, you may zoom in;
When the size of canvas is large and you need to show the overall effect, you may zoom out.
Note: This will only change the size of canvas without changing the size of actual report.
Detailed information:
Allow the user to drag the slider or click the plus and minus sign to adjust the zoom step. A single click on the plus and minus sign adjusts a srep of 10%.
The input box displays the current zoom range, and allows manual input of the zoom step. Press the Enter key or click outside the input box to confirm the current value.
The maximum value is 400%, and the minimum value is 10%.
The larger the magnification, the more blurred the display effect of the components in the design region.
Windows zoom shortcuts: "Ctrl+mouse wheel sliding" and "Ctrl+plus/minus key" to control zoom; MacOS zoom shortcuts: "command(⌘)+mouse wheel sliding" and "command(⌘)+ Plus key/minus key".
Previous：The Frist Dashboard
