Dashboard
After completing the basic data model setup, information systems often need to display various types of business information through graphical reports to help users intuitively obtain business progress, conduct data analysis, and mine value. Informat's dashboard module provides users with a highly visual custom chart configuration tool that supports configuring visual data dashboards composed of multiple card types based on business needs.
Typical Usage Scenarios
- Application Workbench: Can be used as a workbench for specific roles, concentrating the main work content related to the role in one interface. For example, sales personnel can see the day's performance overview, to-do items, and sales funnel and other key information.
- Data Dashboard: Real-time display of key business data to help enterprise decision-makers quickly understand the business situation. For example, management can view overall performance, KPI completion status, and trend analysis through the data dashboard.
- Data Report: Display system data in a multi-dimensional, chart-based manner, and support users to generate specific reports as needed, such as sales reports generated by department, region, time period and other dimensions.
Function Boundary
If the chart has complex dynamic effects, please use the Component Editor to complete the dynamic effects of the instrument. For example, multiple TAB labels scrolling display; World population statistics, dynamic population numbers changing with years, etc.
Design Logic
The data of the dashboard mostly comes from the already configured data tables. In general, we need to first configure the Data Table, complete the entry of basic data information, then create chart cards, and finally adjust the created cards into a suitable dashboard layout.
Card Settings
Card settings include the configuration of all cards in the dashboard, among which Dashboard Layout, Card Style, Filter Parameters, and Buttons are unified settings. Only the Card Configuration is different between different cards. Here, Filter Parameters will be explained together with the dashboard Filter Conditions later.
Dashboard Layout
Cards in the dashboard can be resized and moved through grid layout. The card layout uses a 24-column grid layout by default, dividing the width of the layout area into 24 equal parts as the column width, which is the minimum width unit of the card. The row height set by the dashboard is the minimum height unit of the card.
Card Style
We can uniformly adjust the style of the cards, including Title, Border, Background, Padding, Theme Style, etc. The specific configuration effect is shown in the figure below.
Buttons
During the configuration of cards, we may need to add relevant operation buttons on the cards to complete the expansion capability of the cards. The platform also supports embedded card buttons. The specific card configuration effect is shown in the figure below.
Chart Parameters
Can control dashboard-related parameters such as Background, Full Screen Display Card, and Layout Parameters.
Automatically Adjust Arrangement When Screen Width Changes
If Automatically adjust arrangement when screen width changes is enabled in [Chart Parameters], the number of columns in the grid layout will change with the screen width. The details are as follows:
Width <768px | Width >=768px | Width >=996px | Width >=1200px | |
|---|---|---|---|---|
| Number of Columns | 4 | 6 | 10 | 12 |
Dashboard Container Height Fills Full Screen
If Dashboard container height fills full screen is enabled in [Chart Parameters], the number of rows in the grid layout will be fixed to the configuration of Grid Rows, and the height of each row will change with the screen height.
Filter Conditions
Supports global filter conditions for the dashboard module, which can be used in all cards. By using the Query Conditions parameter in the filter within the card, the linked data filtering of the dashboard can be completed.
TIP
If the dashboard filter condition identifier is consistent with the filter parameter identifier in the card, and both have values, the card filter condition shall prevail.
Let's use an example of personnel age distribution to explain the use of filter conditions.
Filter Condition Address Bar Parameters
The filter conditions of the dashboard can be set with default values through address bar parameters. The parameter name in the address bar is consistent with the filter condition identifier. For example, the identifier of the filter condition Minimum Age is minAge, and the value of Minimum Age is set to 12 through the address bar.
Dashboard link: https://next.informat.cn/app/i1mwqy35y88hl/dashboard/eaqvb0rrkuotk
The address after passing parameters through the address bar is: https://next.informat.cn/app/i1mwqy35y88hl/dashboard/eaqvb0rrkuotk?minAge=12