cbcfd38ca7
* build: try to use dumi as doc tool * docs: migrate demo structure to dumi way * refactor: use type export & import * docs: migrate demo previewer to dumi * docs: create empty layout & components * docs: apply custom rehype plugin * docs: create empty extra pages * docs: Add Banner component * chore: move theme tsconfig.json * docs: home page init * docs: migrate header (#37896) * docs: header * docs: update * docs: home init * clean up * test: fix site lint * chore: tsc ignore demo * chore: dumi demo migrate script * chore: cards * docs: home layout * docs: Update locale logic * docs: fix getLink logic * chore: fix ci (#37899) * chore: fix ci * ci: remove check-ts-demo * ci: preview build * test: ignore demo.tsx * chore: update script * test: update snapshot * test: update node and image test * chore: add .surgeignore * docs: layout providers (#37908) * docs: add components sidebar (#37923) * docs: sidebar * docs: update docs title * docs: update design doc * chore: code clean * docs: handle changelog page * docs: add title * docs: add subtitle * docs: active header nav * chore: code clean * docs: overview * chore: code clean * docs: update intl (#37918) * docs: update intl * chore: code clean * docs: update favicons * chore: update testPathIgnorePatterns * chore: code clean * chore: code clean * chore: copy 404.html (#37996) * docs: Home page theme picker * chore: Update migrate script * docs: home page update * docs: theme editor style * docs: theme lang * chore: update migrate.js * docs: fix demo (#38094) * chore: update migrate.js * docs: update md * docs: update demo * test: fix snapshot * chore: move debug to code attr in migrate script * chore: update md Co-authored-by: PeachScript <scdzwyxst@gmail.com> * feat: overview page * feat: Migrate `404` page (#38118) * feat: migrate IconSearch component (#37916) * feat<site/IconSearch>: copy IconDisplay from site to .dumi * feat<site/IconSearch>: change docs of icon * feat<site/IconSearch>: tweak * feat<site/IconSearch>: use useIntl instead of injectIntl * feat<site/IconSearch>: fix ts type error * feat<site/IconSearch>: use intl.formatMessage to render text * docs: Adjust home btn sizw * docs: Update doc * feat: v5 site overview page (#38131) * feat: site * fix: fix * feat: v5 site overview page * fix: fix path * fix: fix * fix: fix * docs: fix margin logic * feat: v5 site change-log page (#38137) * feat: v5 site change-log page (#38162) * docs: site redirect to home pag * docs: theme picker * docs: use react-intl from dumi (#38183) * docs: Theme Picker * docs: update dumi config * docs: home back fix * docs: picker colorful * docs: locale of it * docs: update components desc * docs: site of links * docs: update components list * docs: update desc * feat: Migrate `DemoWrapper` component (#38166) * feat: Migrate `DemoWrapper` component * feat: remove invalid comments and add comment for `key` prop * docs: FloatButton pure panel * chore: update demo * chore: update dumi config * Revert "chore: update demo" This reverts commit 028265d3ba5987df5f13c3e9d42cf76cb1812b2e. * chore: test logic adjust to support cnpm modules * chore: add locale alias * docs: /index to / * docs: add locale redirect head script * chore: adjust compact * docs: fix missing token * feat: compact switch * chore: code clean * docs: update home * docs: fix radius token * docs: hash of it * chore: adjust home page * docs: Add background map * docs: site theme bac logic * docs: avatar * docs: update logo color * docs: home banner * docs: adjust tour size * docs: purepanl update * docs: transfooter * docs: update banner gif * docs: content (#38361) * docs: title & EditButton * docs: content * chore: fix toc * docs: resource page * docs: transform resource data from hast * docs: filename & Resource Card * chore: enable prerender * chore: remove less * docs: toc style * chore: fix lint * docs: fix Layout page * docs: fix CP page * chore: update demos * docs: workaround for export dynamic html * chore: enable demo eslint * docs: table style * fix: header shadow * chore: update snapshot * fix: toc style * docs: add title * docs: Adjust site * feat: helmet * docs: site css * fix: description * feat: toc debug * docs: update config-provider * feat: use colorPanel * fix: colorPanel value * feat: anchor ink ball style * feat: apply theme editor * fix: code block style * chore: update demo * chore: fix lint * chore: code clean * chore: update snapshot * feat: ts2js * chore: description * docs: site ready for ssr includes: - move client render logic to useEffect in site theme - extract antd cssinjs to a single css file like bisheng - workaround to support react@18 pipeableStream for emotion * chore: bump testing lib * docs: font size of title * chore: remove react-sortable-hoc * chore: update snapshot * chore: update script Co-authored-by: PeachScript <scdzwyxst@gmail.com> Co-authored-by: MadCcc <1075746765@qq.com> Co-authored-by: zqran <uuxnet@gmail.com> Co-authored-by: TrickyPi <530257315@qq.com> Co-authored-by: lijianan <574980606@qq.com>
7.7 KiB
| group | type | order | title |
|---|---|---|---|
| Design Patterns | Template Document | 2 | Visualization Page |
Data visualization templates depict information and assist users to understand the data, by displaying a serious of multiple charts. In the way of viewing and operating the charts, users can analyze the data and finally make the data-driven strategies.
Design Goals
To help users quickly and clearly understand the meanings of data, analyze trends, and make decisions.
Design Principles
Organized
Define the layout logically, prioritize the content in order. In most cases, in order to emphasize the common-used analysis thoughts, you should organize the information from top to bottom and from left to right, or use processive interactions. To sum up, put the summary first, then focus on filters, and finally provide details whenever the user needs.
Focused
Put the most important charts and the key scorecards on the top or upper part the page.
Accurate
Keep data accuracy, clarity and completeness.
1. Use the correct types of chart.
2. Explain data definition when necessary.
Do & Don’t
When the data is highly summarized, a chart with the detail number(s) is more straight-forward than a chart alone.
Try to highlight the primary data on first one screen, and limit the sum of modules into 5-9, avoiding information overload.
Make good use of filtering capability, let users observe the overview, and check the detailed data at the same time. Therefore, users can explore quickly whenever they have questions.
Typical Templates
Presentation Dashboards
In order to help users to make decisions, tile the most critical data from the overall perspective on the whole page. When all of the indicators share similar importance, choose the layout on the left; to emphasize one of them, select the one on the right.
Indicator Dashboards
When to use
For decision-makers to monitor overviews of data, and attach charts for further insights.
Related capabilities
Key indicator, scorecard, filter, chart.
Monitor Dashboards
When to use
This type of dashboard provides an overview of the data for decision making. Usually there is a central topic, around which presents multi-dimension indicators, helping the users find out abnormal immediately.
Related capabilities
Key indicator, scorecard, chart, map.
Analytics Dashboards
Analytics dashboards separate the data-analysis interface into several parts. Usually their layouts are "summary and description" structure, showing overviews of the whole information with different aspects. These dashboards can assist the users to discover the current problems.
Multi-dimension Analytics Dashboards
When to use
To analyze multiple dimension of data, surround the same topic.
Related capabilities
Key indicator, scorecard, filter, chart.
Detail Templates
Detail templates display the overview and detailed information of a report or a unique indicator. Users can set texts, lists and charts according to their business needs.
Data Details
When to use
To show the details of the reports.
Related capabilities
Filter, chart, table.
Design Suggestions
Connect Analysis Steps
- Figure out users’ roles and aims, and choose the categories of template accordingly. Different business roles pay attention to different key data. There are two common-used types of indicators: high-level dashboard data, and detailed information.
- Decision-makers can select templates which describe the results;
- Operators can choose templates which provide more analysis capabilities and detailed information.
- Confirm the priority of the key indicators, and then define the page layouts accordingly. Put the most important data on the most outstanding positions.
- Please remember, you can connect the user interfaces through interactive modes, telling your own stories.
Combination Methods of Cards
- One card, one topic.
- Place closely-related datasets on one card, and use split lines to break it into different areas.
Use Suitable Charts
After designing the draft layout, select related visualization charts based on how summarized or detailed the data is. Usually scorecards and ranking lists are used for information summaries, tables and texts express details, and charts are between the two categories.
Color Palette
Read more
Relative Rules
- AntV Visualizatio Design Principles
- AntV Visualization Color Palette
- AntV Visualization Interaction Design Guidelines