Dashboard style

1.1 Version

1.2 Application scenarios

Users finish making the components in the dashboard and performs the beautification operation of the dashboard. You can change and customize the dashboard style. After the customized style is saved, users can apply it to other dashboard productions.

1.3 Feature introduction

The dashboard style provides the ability to adjust the canvas from a global perspective. You can set the background, title, component, chart, table and color matching of the dashboard, and filter component themes. And can save the adjusted dashboard style effect. It is convenient for users to apply to other dashboard productions.

1.3.1 Dashboard style entry

Click "Dashboard style" on the dashboard editing interface, and the dashboard style editing interface will pop up, as shown in the following figure:

1.3.2 Dashboard style interface description

The detailed description of the interface functions of "Dashboard style" is as shown in the figure below:

• Users support direct selection of dashboard styles;

• Users support to set custom styles;

• The current user supports using the custom style of the dashboard in other dashboards. Click "Save as Custom Style" to realize it.

There are three types of dashboard styles that have been set, custom styles, global styles and preset styles, as shown in the following figure:

The three types of dashboard styles are described in the following table:

Dashboard styles display order	Dashboard styles	Style description
1	Custom style	Only the current user can add, delete, and rename custom styles. A user can add up to 3 custom styles. Note: If you need to modify the custom style, you can click the target dashboard style, set the custom style and "Save as Preset Style" to delete the original dashboard style.
2	Global style	Only the administrator can add, delete, modify, and rename global styles. The administrator can add up to 5 global styles.There will be a  mark in the upper left corner of the global style.
3	Preset styles 1-6	There are 6 preset styles that come with the system, which cannot be deleted, modified, or renamed.

1.4 Effective range

• The effective range of the styles saved by the user as a custom style: All dashboards created by the current user can select the previously saved custom style.

• Valid range of custom styles not saved by the user: current dashboard.

• The effective priority of dashboard styles is arranged as: Component Style>Dashboard Style>BI Global Style.

Note: The user's default dashboard style can only be changed by the administrator.

Open "Dashboard Style" and click the preset style of the dashboard, or set a custom style. After the desired effect is achieved, click "OK" to change the style. As shown below:

In the component editing interface, click "Dashboard Style" to edit the custom style, as shown in the figure below:

Note: After editing, the preview effect will be automatically displayed on the dashboard, and the customized effect will take effect after clicking "OK". If it is not saved as a custom style, the style will only take effect on this dashboard.

The custom dashboard style settings include the background themes of dashboard, title, component, chart, table, and filter component. As shown in the following table:

3.1 Set dashboard

1) Click "Dashboard" to set the style. The "background" and "component gap" of the dashboard can be set.

The background color is set to "Green", and the component gap is set to "There is a gap". The effect is shown in the following figure:

Note: If the component is set to component floating, even though there is a gap between the components in the dashboard style, the components can still be displayed overlapped.

2) The dashboard setting description is shown in the following table:

3.2 Set title

The title can set the "background" and "text" of the component title in the dashboard. (Including filter component)

1) The title background is set to "Blue", the title text is set to "custom", select "Black", font size "14", font "Bold", font color "Dark blue". As shown below:

2) The title setting description is shown in the following table:

3.3 Set component

In the component, the background of all components in the dashboard can be set uniformly, which is divided into two types: "color" and "image". (Including filter component)

The effect after the color is set to "Blue" is as shown in the figure below:

For a detailed description of the component background, please refer to the background description in section 3.1 of this article.

3.4 Set chart

1) The chart is to set the "color" of the chart in the dashboard and the "text" style of the chart.

Click on the "color matching" of the chart to modify the color of the charts in the column chart, and set the font in the chart to "Custom", "Black" and "14". As shown below:

The detailed description of the chart settings is shown in the following table:

3.5 Set table

1) Under the table, the styles of all table components in the dashboard can be set uniformly, including "style", "theme color" and "text". The fonts of "header" and "body" can be set in the text customization.

After customizing the text style, the effect is shown in the figure below:

The detailed description of the table setting is shown in the following table:

3.6 Set filter component

In the filter component, the theme color of all filter components in the dashboard can be set uniformly. You can choose custom colors, transparency, and automatically achieve different effects.

1) After setting the theme of the filter component to "Gray", the border of the filter component will turn gray. After setting the dashboard, click "OK" to apply the custom style to the entire dashboard. As shown below:

After setting a custom style, if the user needs to use it repeatedly in other dashboards, click "Save as Custom Style". As shown below:

Note: The same user can add up to 3 custom styles.

Click the title of the added custom style to rename the custom style, as shown in the figure below:

Note: The administrator's global style can only be renamed by the administrator, and the preset styles 1-6 that come with the system cannot be modified.

Hover the mouse over the custom style saved by the user, a delete button will appear in the upper right corner, click and confirm again, and click "OK" to delete. As shown below:

Note: The administrator's global style can only be deleted by the administrator, and the preset styles 1-6 that come with the system cannot be modified.