Best Practices

This guide introduces key principles and practical guidelines for designing effective dashboards.

KPI Placement

Placing key performance indicators (KPIs) as NumberCards at the top of the dashboard allows users to immediately grasp the most important metrics.

Recommended Layout

1. Top Area: Arrange 3–5 NumberCards horizontally to summarize key KPIs in a single row
2. Middle Area: Place trend and comparison charts such as LineChart and BarChart
3. Bottom Area: Provide detailed data with Table widgets or place supplementary charts

tip

Use prefixes/suffixes (₩, %, cases) on NumberCards to clearly convey the meaning of each metric. Combining them with change rate indicators makes it even easier to identify trends.

Visualization Selection Guide

It is important to choose the right chart based on the characteristics of your data and the message you want to convey.

Purpose	Recommended Widget	Example
Category comparison	BarChart	Revenue by department, sales volume by product
Trends over time	LineChart	Daily visitors, monthly revenue trends
Proportion of the whole	PieChart	Market share, category composition
Relationship between two variables	ScatterChart	Ad spend vs. revenue, temperature vs. sales
Key metric emphasis	NumberCard	Total revenue, active users
Detailed data viewing	Table	Transaction history, user list
Description/instructional text	TextBox	Section titles, data interpretation guide
External content	IFrame	External monitoring tools, documents

Tips for Choosing Visualizations

• PieChart is most effective with 5 or fewer items. Use a BarChart when there are many items.
• LineChart is best suited for data with a time axis. For categorical data, BarChart is clearer.
• ScatterChart shows meaningful patterns when there are enough data points (at least 30).

Performance Optimization

Guidelines for maintaining dashboard loading speed and responsiveness.

Query Optimization

• Use Aggregation: Instead of querying raw data as-is, use GROUP BY and aggregation functions to reduce the number of result rows.
• Set LIMIT: Always specify a LIMIT when querying detailed data (e.g., Table widgets) to prevent excessive data retrieval.
• Select Only Required Columns: Explicitly specify only the columns you need instead of using SELECT *.

-- Bad example: querying all data
SELECT * FROM large_table

-- Good example: aggregation + only required columns
SELECT category, SUM(amount) as total
FROM large_table
WHERE date >= $from AND date <= $to
GROUP BY category
ORDER BY total DESC
LIMIT 20

Widget Count Management

• It is recommended to have no more than 10–15 widgets per dashboard.
• The more widgets there are, the more queries run simultaneously, increasing loading time.
• Consider grouping related metrics by topic and splitting them into separate dashboards.

Leveraging Date Ranges

• Placing a DateRangeSelector to limit the query range significantly improves query performance.
• Set the default date range to Last 7 days or Last 30 days to improve initial loading speed.

caution

Querying data across the entire time range without a date filter can slow down dashboard responsiveness due to the large volume of data processing. Always use a DateRangeSelector or include date conditions in your queries.

Colors and Layout

Color Usage Principles

• Consistent Palette: Maintain the same color palette within a dashboard to ensure visual coherence.
• Meaningful Colors: Use the same color for the same category (e.g., a specific department or product line) across all charts.
• Accent Colors: Use high-contrast colors for key metrics or data that requires attention.
• Color Blindness Consideration: Avoid red-green combinations and choose color combinations with sufficient brightness contrast.

Layout Principles

• Information Hierarchy: Place the most important information in the top-left area (Z-pattern reading direction).
• Logical Grouping: Place related widgets adjacent to each other and use TextBoxes to separate sections.
• Uniform Sizing: Giving widgets of the same type the same size creates a clean appearance.
• Use of Spacing: Maintain appropriate spacing between widgets to reduce visual clutter.

tip

When designing a dashboard for the first time, sketching the widget layout on paper or a whiteboard before implementation helps create a more effective layout.

Design Checklist

Check the following items before sharing your dashboard:

• Are key KPIs clearly placed at the top?
• Is each chart the appropriate type for the message it conveys?
• Do all widgets have meaningful titles?
• Is a DateRangeSelector placed for date filtering?
• Do queries include appropriate LIMIT and date conditions?
• Are colors consistent and accessible?
• Is the dashboard focused on essential information without unnecessary widgets?