Page Style (Theme)

1. Overview

When creating analysis dashboards, to improve the aesthetics and information communication effectiveness of the dashboard, users need to perform design beautification, style adjustments, and other operations on the dashboard.

Guandata BI provides a "Theme Skin Change" function that helps users easily create high-quality visual dashboards in a low-cost, low-difficulty way. This function achieves dashboard skin change through one-click operation, meeting users' high requirements for aesthetics and UI details. From global styles to components and card styles, all elements can be flexibly adjusted to improve data consumption satisfaction.

2. Usage Guide

On the dashboard page, click "Page Style" to enter the page style editing state, where you can apply themes with one click on the right side.

Users can select themes to adjust the dashboard's style and UI style with one click. They can also adjust the dashboard style on this basis. The specific configuration process will be explained in detail below.

Note: In theme editing state, if you want to enable fine adjustment, you need to save the current editing content first, then enable it.

2.1. Dashboard Theme

Guandata BI's "Theme Skin Change" function uses preset page theme templates to allow producers to switch styles and themes according to enterprise UI style or dashboard analysis content. In addition to the 6 built-in theme templates, users can also go to the cloud market to download more themes.

(1) Built-in Themes

Guandata BI has 6 built-in themes: "Simple", "Emerald Green", "Deep Blue", "Matte Black", "Gray White", and "Business Blue". Administrators/page owners can switch themes here. At the same time, you can also change the chart color scheme with one click. The chart color scheme selection depends on the color schemes in Guandata BI's enterprise visual library. Administrators can define and add more color schemes in administrator settings for enterprise users to choose from. Guandata BI provides various color schemes. For details, please refer to [《Basic Color Matching Methods》](../../../7-Visualization Best Practice Guide/3-Basic Color Matching Methods.md).

(2) Download Themes from Cloud Market

In enterprise-level data analysis scenarios, page styles need to be changed according to different companies/departments and different businesses, and sometimes even adjusted according to holidays and activities. The 6 theme templates are difficult to fully meet various scenarios. Therefore, in addition to the system's built-in themes, Guandata has uploaded a large number of free theme templates in the cloud market, supporting one-click download. After downloading, they can be used when setting page styles.

Applicable Scenarios:

• Group enterprises where data analysts need to create dashboards according to different branch company styles and need more optional theme templates;

• For different business scenarios, applicable style templates need to be more diverse;

• Holidays/activities, etc., need to change dashboard styles according to time and circumstances.

Note:
1. Cloud market functionality needs to be enabled before using this feature.
2. Only administrators can download theme resources.

1. Enter the cloud market, select "Visual Style", select "Application Method" as theme, and "Application Object" as dashboard to locate dashboard theme templates.

2. After locating the theme of interest, you can click to enter the theme details to preview the effect image. Administrators can download and install it to the dashboard, allowing analysts to change skins with one click.

3. Themes downloaded by administrators will be directly displayed in the theme list in the dashboard theme function. When data analysts create dashboards, they can enter the theme interface and select the corresponding theme to apply successfully.

4. If you no longer want data analysts to use this theme, administrators can delete themes downloaded from the cloud market in Administrator Settings > Resource Management > Enterprise Visual > Dashboard Themes.

2.2. Global Style

Global style refers to unified settings for the overall appearance and layout of dashboards in Guandata BI. By configuring global layout, users can adjust dashboard page layout, card spacing, background color, and other properties to make the dashboard display effect more beautiful, neat, and meet usage requirements.

The following are the global style configuration items and their descriptions:

Configuration Item	Configuration Item Description
Layout Type	Users can set the page layout for the entire dashboard, cards, and card groups in this section; supports two layout methods: waterfall flow and adaptive. Waterfall Flow: Traditional page layout method, suitable for pages with more content that expand vertically; Adaptive: Dashboard content can adapt to browser window size, suitable for pages that can display complete, compact content on a single page.
Compact Layout	After enabling compact layout, the positions of each card (group) will automatically move up and arrange, with compact and unified layout; after disabling, users can freely move and place cards (groups) as needed.
Width Adaptation	After enabling proportional scaling, users can choose default width or custom width. The system will scale the page proportionally according to the ratio of the set width to screen width. Note: Proportional scaling can only be used under waterfall flow type.
Fine Adjustment	By default, users can only adjust card sizes according to the framework provided by the system. After enabling the fine adjustment switch, both unit height and unit width will become smaller, and stretching card height and width will be more precise. Users can adjust card sizes more precisely according to their needs, but the switch cannot be turned off after being enabled. Note: In theme editing state, enabling fine adjustment will automatically save the current editing content.
Background Color	Click the square to directly set the background color. Click the "Default" button to switch back to the system default color with one click; click the asterisk in the bottom right corner to view and apply various color schemes provided by the system.
Background Image	Turn on the "Show Image" switch, click the "Select Image" or "Replace" button to upload images. Supports filling in image links or local upload; supports three display methods: adaptive, original ratio, and full coverage.
Card Spacing	Users can adjust the distance between cards (groups) and cards (groups) on the entire page by setting the spacing value size.
Card Toolbar	Card toolbar icons will be displayed on the dashboard by default. You can hide the icons by enabling the "Hide" button of the card toolbar. Users can set the icons to be completely or partially hidden as needed, support previewing setting effects, and the settings only take effect for visitors. The show/hide of card toolbars on mobile and desktop need to be set separately.

2.3. Dashboard Component Style

Dashboard component style refers to the support in Guandata BI for unified adjustment of layout components in dashboards. Currently supports configuring text styles for "Dashboard Title" and "Subtitle", as well as background color, icon image, background height, bottom margin, and top distance for component backgrounds.

• Dashboard Title: After setting to display, the dashboard title content will be displayed at the top;

• Subtitle: You can add subtitle components at the new card location. Multiple subtitles can be added on the page simultaneously to partition dashboard content. Subtitles support configuring top distance to adjust the relative distance from the upper content (top distance).

2.4. Cards

Users can configure card styles uniformly to maintain visual consistency of cards in the dashboard. Supported configuration content includes "Card Style" and "Card Title".

• Card Style: Users can adjust card styles by setting card background color and background image, enabling/disabling borders, border color and size, card corner radius size, and enabling/disabling shadows.

• Card Title: You can uniformly adjust the title content of all cards in the dashboard, including the height of the title area and the configuration of top and bottom borders.

Note: Card title configuration does not include metric cards and comparison metric cards, which can be styled separately in Chart Properties - Metric Cards/Comparison Metric Cards).

2.5. Chart Properties

In the "Cards" configuration panel, users can configure most card styles uniformly. For some special cards, including "Metric Cards", "Comparison Metric Cards", and "Tables", Guandata BI supports users to make more targeted unified adjustments to these cards in "Chart Properties".

• Metric Cards: You can uniformly adjust the styles of single metric card type cards in the dashboard. Specific configuration items include: metric and label styles, metric card background, and metric card title.

• Comparison Metric Cards: You can uniformly adjust the styles of comparison metric card type cards in the dashboard. Comparison metric cards support configuring comparison metric styles in addition to other configuration items that are the same as single metric cards.

• Tables: You can uniformly adjust the styles of table type cards in the dashboard. Specific configuration items include: table theme, scroll bars, colors of various parts of the table, and font styles.

Note: General table style settings do not include carousel lists, which need to be set in the carousel list editing.

3. Best Practices

3.1. Use with Component Templates

Guandata BI's component templates aim to meet common dashboard layout and style requirements in different industries, containing professional UI design specifications and business scenario attributes of various industries. This facilitates users to organize beautification design ideas. With just two steps: ① Download from the market, ② Apply and replace data, users can quickly complete the rapid construction of beautiful dashboards.

The one-click skin change function of dashboard themes is the icing on the cake. It can further make fine and rapid adjustments to the overall color scheme or detail styles on the basis of the above steps. The perfect combination of these two makes data presentation more aesthetic and brings greater improvement to users' work efficiency.

3.2. Precipitate as Page Templates for Internal Enterprise Sharing

To unify the visual style of dashboards within the enterprise, users can use unified page templates and apply them with one click when creating new dashboards to ensure consistency each time.

When creating dashboards, the following problems are often encountered:

• The dashboard styles within the enterprise are diverse, affecting the unity of brand visuals;

• When creating new dashboards, it is difficult to reuse previously created dashboards, resulting in new dashboard creation needing to start from scratch, with low efficiency.

To address the above problems, Guandata BI provides a "Page Template" function. Administrators only need to create dashboards that conform to the enterprise visual system, leverage the theme skin change capability, and convert them to "Page Templates" with one click. By precipitating them into the enterprise visual library - Component (Page) Templates, unified management of enterprise visual standards across the entire company can be achieved.

Utilizing the high reusability characteristics of component templates, producers only need to select the most suitable page template according to business scenarios to easily build beautiful dashboards that conform to enterprise visual standards, further meeting enterprise personalization and brand requirements.