Custom Dashboard Styles
Background
When configuring the dashboard module, we need to pay attention to the overall layout settings to ensure style consistency. The configuration includes dashboard background settings, each card's background configuration, and detailed content configuration for each card. These settings help create a unified appearance and functionality for the dashboard.
We will take a dark theme as an example.
Implementation Steps
We can implement this function through the following methods:
Step 1: Configure Chart Parameters
In the application design center of the Informat platform, first find the dashboard module to be configured, click on "Chart Parameters", and configure global styles here, including data refresh frequency, dashboard background, and card layout.
To set the background, click on the dashboard background image section, upload the required background image, then select the image and click the [Confirm] button.
Step 2: Configure Card Styles
After completing the overall layout settings, we enter the configuration phase for each card. Click on [Card Configuration], then click the [Edit] icon on the card that needs to be configured.
In [Card Style], after enabling [Custom Style], please click on the background image section to upload the required card background image. After the upload is complete, we can configure [Background Image Fill Method], [Horizontal Position], [Vertical Position], and [Padding]. We will see the generated effect in real-time in the chart view on the left, which will help with real-time style adjustments.
Next, continue configuring the card title, including [Title Position], [Title Font Size], and [Title Color]. Here, we set the title position to left-aligned, title font size to medium, and title color to white [rgba(255, 255, 255, 1)].
Step 3: Perform Card Configuration
After completing the [Card Style] settings, we need to configure the card parameters. First, click on [Card Configuration], find the [Chart Settings] section, and set [Bar Width] to 15
Then, continue scrolling down to find the [Label Settings] section, where we enable label display. For single data, it is recommended to set the label position to top for better data display. Set the distance between the label and the graphic to 10, and set the label color to white [rgba(255, 255, 255, 1)]
Next, we continue to set the horizontal axis display style. Click on [Horizontal Axis], in the [Basic Information] section, turn on the [Display] switch, then set the name of the horizontal axis
In [Name Text Style], set the color to white [rgba(255, 255, 255, 1)]
Then, in the [Axis Labels] section, enable the [Display Labels] option. If there is a large amount of statistical data, we can set the [Rotation Angle] to 45 for better data display. Set the label color to white [rgba(255, 255, 255, 1)]. If a rotation angle is set, we can choose right alignment in [Horizontal Alignment]. This will help optimize data visualization display
After setting the horizontal axis, we continue to set the vertical axis display style. Click on [Vertical Axis], in the [Basic Information] section, turn on the [Display] switch, then set the name of the vertical axis
In [Name Text Style], set the color to white [rgba(255, 255, 255, 1)]
Then, in the [Axis Labels] section, enable the [Display Labels] option; set the label color to white [rgba(255, 255, 255, 1)]
After setting the vertical axis style, we continue to set the displayed legend
To define the display name of the legend, please define a name for the chart in the [Chart]—[Basic Information] section. This name will be used as the display name of the legend. If there are multiple legends, you need to set corresponding names on multiple charts. This will help identify and distinguish different legends
In the [Basic Information] section of the [Card Configuration]—[Legend] module, first turn on the "Display Legend" switch, then configure whether to allow selecting legends. If allowed, users can click on the legend to show or hide the corresponding data. This setting allows us to more flexibly control the data displayed on the chart
In the [Legend Public Text Style] section, set the legend text color to white [rgba(255, 255, 255, 1)]
Next, we can perform chart color matching for the card. In the [Card Configuration]—[Style] module, find the [Color Palette] section, and set the required color values from top to bottom. If not set manually, the system will automatically generate color values. This setting can help beautify the chart and make it more visually appealing
Step 4: Quickly Generate Cards
In this way, we have completed the dashboard style and single card style configuration. Next, we can quickly generate multiple cards with consistent styles through card copying, thereby adding more data display and analysis options to the dashboard
After card copying, we only need to configure cards with different analysis dimensions according to actual business needs. This will help us quickly create multiple cards to meet different data analysis needs and improve work efficiency. Please refer to [Link] for card configuration
Step 5: Adjust Dashboard Layout
After configuring the cards, you can layout the cards. Simply move the mouse to the lower right corner of the card, then click and drag the card to adjust its size and layout. After adjustment, be sure to click [Save Layout] to save this adjustment. This will ensure that the layout changes made are preserved
Effect
After configuration is complete, the final display effect is as follows: