Implementing Table Traffic Lights in Cards
Applicable Scenarios
Table "traffic lights" enhance the readability of data in tables, suitable for period-over-period comparisons (YoY/MoM), simulating traffic lights to provide alerts as data changes and quickly identify anomalies. In Guandata BI, you can easily implement traffic light effects in cards by setting conditional formatting.
Effect

Method 1
1. Data Preparation
Create a table card and drag the required dimension fields into the dimension box.
2. Double Header Creation (Optional)
In the drawing area, click the gear icon in the value bar, add a value group, set the name, drag in value fields, and generate a double header.

3. YoY/MoM Calculation
Drag the value field "Sales" multiple times into the value group, use the same aggregation, and set advanced calculation - YoY/MoM for each as needed. For the field to show traffic lights, set YoY/MoM - growth rate. Set field aliases; if two fields have the same name, the header will merge automatically.

4. Set Conditional Formatting
Click the value field to display as traffic lights and set conditional formatting as shown below.

5. Set Styles
Set the left traffic light column to "right align" and the right value column to "left align" to visually merge the two columns. Adjust column width, use color schemes and table border design (set row/column dividers to background color or transparent) for better effect.

Method 2 (Available from Version 5.7)
1. Set Conditional Formatting
No need to add extra fields for traffic light icons. Directly set conditional formatting for the field with advanced calculation - YoY/MoM - growth rate, select "Icon Set", and choose traffic lights from the dropdown. Note: By default, values >0 are red; you can manually change to green.

2. Alignment
Icons are displayed on the right by default. It is recommended to set the value field alignment to "right align". Effect as shown below.

Comparison of the Two Methods
Method 1: Applicable to all versions, more complex operation; allows adjustment of icon position, size, etc.
Method 2: Available in version 5.7 and above, simple operation; does not support adjusting icon position, size, etc.