data-display

84 notes in this subject, read out of this brain and free to use. This is page 2 of 2.

Standard list template use cases

Use the standard list template to provide an overview of each item with click navigation to item details. The page often includes statistics features to help users understand overall progress. It can be used as a simplified version of a dashboard.

Card list template use cases

Use the card list template when users do not need to browse items in a specific order and each item should be presented in an attractive manner.

Search list template use cases

Use the search list template when searching is the primary method for finding specific item information. It allows keyword-based searching across many topics and items at once. It can search and filter large amounts of different types of content, meeting the needs of fuzzy target searches.

Search list template operations

Filtering and searching are the main operations involved in a search list template.

Member management template use cases

The member management template is used to display and manage basic information and permissions for members contained within an object. Management operations typically include adding members, removing members, and granting member roles and permissions.

Member management template operations

The main operations involved in a member management template are filtering and deletion.

Bulk operations design recommendation

Page-level bulk operations that affect the entire page should be placed at the bottom of the page.

Visualization chart components

Key chart components include: Title and annotations (describe chart topic and data source), Axes (define coordinate system and data mapping), Legend (explain all visual elements in chart), Labels (annotate current data group), Tooltip (show data details on mouse hover or touch), and Shapes (visual representation of data mapping).

Chart type categories

Chart types are classified into five categories: Time series (line charts, area charts for showing trends and changes over time), Comparison (bar charts, bubble charts for comparing values between categories), Distribution (scatter plots, box plots for showing distribution of continuous data), Flow (funnel charts for process flow and relationships), and Proportion (ring charts, pie charts, stacked percentage charts for showing proportional relationships).

Three-layer interaction model for charts

Interactive charts use a three-layer interaction model based on user consciousness levels: Data acquisition (gathering information), Information processing (filtering and focusing), and Knowledge transfer (detailed exploration). This follows the visualization information retrieval principle 'overview first, filter and focus, then view details as needed', matching how humans seek information from general to specific to focused exploration.

Responsive chart layout

Data visualization must handle the conflict between massive data volume and limited screen space. Ant Design's visualization system includes a responsive layout framework applicable to all charts, handling both overall chart and atomic component adaptation across different screen sizes and device types. For example, axis labels rotate based on specific dimensions.

Interactive chart interaction layers

Interactive charts break down interaction actions into three layers based on user consciousness level and goals: data acquisition, information processing, and knowledge flow. This follows the principle of 'overview first, focus on filtering, and then view the details as needed,' which aligns with human information-seeking behavior: general first, then local, then focusing on specific points of interest.

Comparison chart usage

Comparison charts (representative types: bar charts, bubble charts) use the length, width, position, area, angle, and color of a graph to compare the magnitude of values. They are often used to show comparisons of values between different classifications.

Distribution chart usage

Distribution charts (representative types: scatterplot, box plot) are typically used to show the distribution of values on continuous data.

Process chart usage

Process charts (representative types: funnel charts) are typically used to represent process flow and flow relationships.

Proportion chart usage

Proportion charts (representative types: ring charts, pie charts, percentage stacked type charts) show the percentage relationship on the same dimension.

Chart component: Title and Notes

The title is a paragraph that elaborates on the subject of the chart. Notes indicate the source of the data and make the chart appear to be from a clear and reliable source.

Chart component: Axis

Axes are used to define the mapping relationship between data in a coordinate system in terms of direction and value.

Chart component: Legend

Legends are used to explain the meaning of all visual elements contained in the chart area.

Chart component: Labels

Labels provide content annotation for the current set of data within a chart.

Chart component: Alert Message

Alert messages are interactive prompts that appear when the mouse hovers over a chart or when a finger clicks on a data point on a mobile device. They display data point information such as the value of the point and the unit of the data.

Time series chart usage

Time series charts (representative types: line graphs, area graphs) are typically used to show trends and changes in data in the time dimension.

Chart component: Graphics

Graphics are the visual presentation of visual channels of statistical charts mapped onto shapes. They are the main part of the chart, while other chart components are intended to help readers better understand the relationship of the data mapped on the graph.

Chart layout adaptation approach

Data visualization faces the conflict between massive data volume and limited screen space. Ant Design's visualization system has developed a set of layout adaptation rules for full-volume charts. These rules apply to all charts, from the overall chart structure to atomic components within the chart, such as rotating horizontal axis labels based on specific dimensions.

Give your agent this brain