ant-design · lxfu1 · Nov 12, 2024 · Nov 12, 2024 · Nov 12, 2024 · Nov 12, 2024
diff --git a/site/docs/options/demos/components-list.tsx b/site/docs/options/demos/components-list.tsx
@@ -1,9 +1,11 @@
 /**
  * inline: true
  */
-import { Card, Col, Flex, Row, Tag } from 'antd';
+import { Button, Card, Col, Divider, Flex, Row, Tag } from 'antd';
 import React, { Suspense, useMemo } from 'react';
 import { useLocale, useFullSidebarData, useNavigate } from 'dumi';
+import { styled } from 'styled-components';
+import { isEmpty } from 'lodash';
 
 enum ChartType {
   PLOT = 'Plot',
@@ -23,34 +25,154 @@ const locales = {
 
 const URLS = ['/options/plots/special', '/options/graphs'];
 
+const StyledWrapper = styled.div`
+  .filter-panel {
+    margin: 24px 0 32px;
+
+    .filter-tag {
+      border-radius: 4px;
+    }
+  }
+
+  .usage-items {
+    margin-top: 2px;
+
+    .usage-item {
+      border-radius: 12px;
+      padding: 0px 12px;
+      font-size: 10px;
+      border: 1px solid #f0f0f0;
+    }
+  }
+.`
+
+const usagesData = [{
+  id: 'all',
+  nameZh: '全部',
+  nameEn: 'All',
+},
+{
+  id: 'comparison',
+  nameZh: '比较类',
+  nameEn: 'Comparison',
+}, {
+  id: 'distribution',
+  nameZh: '分布类',
+  nameEn: 'Distribution',
+}, {
+  id: 'flow',
+  nameZh: '流程类',
+  nameEn: 'Flow',
+}, {
+  id: 'proportion',
+  nameZh: '占比类',
+  nameEn: 'Proportion',
+}, {
+  id: 'interval',
+  nameZh: '区间类',
+  nameEn: 'Interval',
+}, {
+  id: 'relation',
+  nameZh: '关系类',
+  nameEn: 'Relation',
+}, {
+  id: 'trend',
+  nameZh: '趋势类',
+  nameEn: 'Trend',
+}, {
+  id: 'time',
+  nameZh: '时间类',
+  nameEn: 'Time',
+}, {
+  id: 'map',
+  nameZh: '地图类',
+  nameEn: 'Map',
+}, {
+  id: 'other',
+  nameZh: '其他',
+  nameEn: 'Other',
+}];
+
 export default () => {
   const lang = useLocale().id;
   const locale = locales[lang];
   const data = useFullSidebarData();
   const navigate = useNavigate();
+  const [selectedUsages, setSelectedUsages] = React.useState<string[]>(['all']);
 
   const metas = useMemo(() => URLS.flatMap(url => data[lang === 'zh' ? url : `/en${url}`][0].children)
-    .filter(meta => meta.frontmatter.category === 'Components').map(meta => ({
-      ...meta,
-      ...meta.frontmatter,
-      color: meta.frontmatter.type === ChartType.GRAPH ? "purple" : "volcano"
-    })).sort((a, b) => a.title.localeCompare(b.title)), [data, lang]);
+    .filter(meta => meta.frontmatter.category === 'Components')
+    .map(meta => {
+      const usageIds = (meta.frontmatter.usage || '').split(',').filter(usage => !isEmpty(usage));
+      const usages = usagesData.filter(tag => usageIds.includes(tag.id));
+      return {
+        ...meta,
+        ...meta.frontmatter,
+        usages,
+      }
+    })
+    .filter(meta => selectedUsages.includes('all') || selectedUsages.every(usage => meta.usages.some(item => item.id === usage)))
+    .sort((a, b) => a.title.localeCompare(b.title)), [data, lang, selectedUsages]);
+
+  const handleChange = (tag: string, checked: boolean) => {
+    let nextSelectedUsages;
+
+    if (tag === 'all') {
+      nextSelectedUsages = checked ? ['all'] : [];
+    } else {
+      nextSelectedUsages = checked
+        ? [...selectedUsages.filter((t) => t !== 'all'), tag]
+        : selectedUsages.filter((t) => t !== tag);
+
+      if (nextSelectedUsages.length === 0) {
+        nextSelectedUsages = ['all'];
+      }
+    }
+
+    setSelectedUsages(nextSelectedUsages);
+  };
 
   return <Suspense fallback={null}>
-    <Row gutter={[16, 16]}>
-      {metas.map((meta, index) => <Col span={6} key={index}>
-        <Card
-          size="small"
-          onClick={() => navigate(meta.link)}
-          hoverable
-          title={meta.title}
-          extra={<Tag bordered={false} style={{ borderRadius: 2 }} color={meta.color}>{locale[meta.type]}</Tag>}
-          style={{ borderRadius: 4 }}
-        >
-          <Flex justify="center" align="center">
-            <img alt={meta.title} src={meta.cover} height={148} />
-          </Flex>
-        </Card></Col>)}
-    </Row>
+    <StyledWrapper>
+      <div className='filter-panel'>
+        <Divider />
+        <Flex gap={6} wrap align="center">
+          {usagesData.map<React.ReactNode>(({ id, nameZh, nameEn }) => (
+            <Tag.CheckableTag
+              className='filter-tag'
+              key={id}
+              checked={selectedUsages.includes(id)}
+              onChange={(checked) => handleChange(id, checked)}
+            >
+              {lang === 'zh' ? nameZh : nameEn}
+            </Tag.CheckableTag>
+          ))}
+        </Flex>
+        <Divider />
+      </div>
+
+      <Row gutter={[24, 24]}>
+        {metas.map((meta, index) => {
+          return <Col span={6} key={index}>
+            <Card
+              size="small"
+              onClick={() => navigate(meta.link)}
+              hoverable
+              title={meta.title}
+              style={{ borderRadius: 6 }}
+
+            >
+              <Flex justify="center" align="center">
+                <img alt={meta.title} src={meta.cover} height={158} />
+              </Flex>
+              <Flex wrap gap={2} className='usage-items'>
+                {meta.usages?.map((usage, index) => <div className='usage-item' key={index}>{
+                  lang === 'zh' ? usage.nameZh : usage.nameEn
+                }</div>)}
+              </Flex>
+            </Card></Col>
+        })}
+      </Row>
+    </StyledWrapper>
   </Suspense >
 };
diff --git a/site/docs/options/graphs/dendrogram.en.md b/site/docs/options/graphs/dendrogram.en.md
@@ -1,6 +1,7 @@
 ---
 category: Components
 type: Graph
+usage: relation
 title: Dendrogram
 cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*mvnUTaA91H0AAAAAAAAAAAAADmJ7AQ/original
 order: 3

diff --git a/site/docs/options/graphs/dendrogram.zh.md b/site/docs/options/graphs/dendrogram.zh.md
@@ -1,6 +1,7 @@
 ---
 category: Components
 type: Graph
+usage: relation
 title: Dendrogram 生态树图
 cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*mvnUTaA91H0AAAAAAAAAAAAADmJ7AQ/original
 order: 3

diff --git a/site/docs/options/graphs/flow-direction-graph.en.md b/site/docs/options/graphs/flow-direction-graph.en.md
@@ -1,6 +1,7 @@
 ---
 category: Components
 type: Graph
+usage: flow,relation
 title: FlowDirectionGraph
 cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*jOEPRKWxPE0AAAAAAAAAAAAADmJ7AQ/original
 order: 6

diff --git a/site/docs/options/graphs/flow-direction-graph.zh.md b/site/docs/options/graphs/flow-direction-graph.zh.md
@@ -1,6 +1,7 @@
 ---
 category: Components
 type: Graph
+usage: flow,relation
 title: FlowDirectionGraph 流向图
 cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*jOEPRKWxPE0AAAAAAAAAAAAADmJ7AQ/original
 order: 6

diff --git a/site/docs/options/graphs/flow-graph.en.md b/site/docs/options/graphs/flow-graph.en.md
@@ -1,6 +1,7 @@
 ---
 category: Components
 type: Graph
+usage: flow,relation
 title: FlowGraph
 cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*n9JgQIGi9BQAAAAAAAAAAAAADmJ7AQ/original
 order: 5

diff --git a/site/docs/options/graphs/flow-graph.zh.md b/site/docs/options/graphs/flow-graph.zh.md
@@ -1,6 +1,7 @@
 ---
 category: Components
 type: Graph
+usage: flow,relation
 title: FlowGraph 流程图
 cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*n9JgQIGi9BQAAAAAAAAAAAAADmJ7AQ/original
 order: 5

diff --git a/site/docs/options/graphs/indented-tree.en.md b/site/docs/options/graphs/indented-tree.en.md
@@ -1,6 +1,7 @@
 ---
 category: Components
 type: Graph
+usage: relation
 title: IndentedTree
 cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*JZZVT5PsWPQAAAAAAAAAAAAADmJ7AQ/original
 order: 2

diff --git a/site/docs/options/graphs/indented-tree.zh.md b/site/docs/options/graphs/indented-tree.zh.md
@@ -1,6 +1,7 @@
 ---
 category: Components
 type: Graph
+usage: relation
 title: IndentedTree 缩进树图
 cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*JZZVT5PsWPQAAAAAAAAAAAAADmJ7AQ/original
 order: 2

diff --git a/site/docs/options/graphs/mind-map.en.md b/site/docs/options/graphs/mind-map.en.md
@@ -1,6 +1,7 @@
 ---
 category: Components
 type: Graph
+usage: relation
 title: MindMap
 cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*cce0Sa7DR3cAAAAAAAAAAAAADmJ7AQ/original
 order: 1

diff --git a/site/docs/options/graphs/mind-map.zh.md b/site/docs/options/graphs/mind-map.zh.md
@@ -1,6 +1,7 @@
 ---
 category: Components
 type: Graph
+usage: relation
 title: MindMap 思维导图
 cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*cce0Sa7DR3cAAAAAAAAAAAAADmJ7AQ/original
 order: 1

diff --git a/site/docs/options/graphs/network-graph.en.md b/site/docs/options/graphs/network-graph.en.md
@@ -1,6 +1,7 @@
 ---
 category: Components
 type: Graph
+usage: relation
 title: NetworkGraph
 cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*q9AkRIF8fF4AAAAAAAAAAAAADmJ7AQ/original
 order: 7

diff --git a/site/docs/options/graphs/network-graph.zh.md b/site/docs/options/graphs/network-graph.zh.md
@@ -1,6 +1,7 @@
 ---
 category: Components
 type: Graph
+usage: relation
 title: NetworkGraph 网络图
 cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*q9AkRIF8fF4AAAAAAAAAAAAADmJ7AQ/original
 order: 7

diff --git a/site/docs/options/graphs/organization-chart.en.md b/site/docs/options/graphs/organization-chart.en.md
@@ -1,6 +1,7 @@
 ---
 category: Components
 type: Graph
+usage: relation
 title: OrganizationChart
 cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*jgGCT7cMxg8AAAAAAAAAAAAADmJ7AQ/original
 order: 4

diff --git a/site/docs/options/graphs/organization-chart.zh.md b/site/docs/options/graphs/organization-chart.zh.md
@@ -1,6 +1,7 @@
 ---
 category: Components
 type: Graph
+usage: relation
 title: OrganizationChart 组织结构图
 cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*jgGCT7cMxg8AAAAAAAAAAAAADmJ7AQ/original
 order: 4

diff --git a/site/docs/options/overview.zh.md b/site/docs/options/overview.zh.md
@@ -1,5 +1,10 @@
 ---
-title: 📈 图表总览
+title: 📈 图表分类
+showToc: false
 ---
 
+一提到图表，大家脑海里浮现的，通常是柱状图、饼图、趋势图等等。这是按照图形等维度对图表进行分类，经常会导致图表的误用。
+
+图表的作用，是帮助我们更好地看懂数据。选择什么图表，需要回答的首要问题是 **「我有什么数据，需要用图表做什么」** ， 而不是 **「图表长成什么样」**。因此我们从数据出发，从功能角度对图表进行分类。
+
 <code src="./demos/components-list.tsx"></code>
diff --git a/site/docs/options/plots/special/area.en.md b/site/docs/options/plots/special/area.en.md
@@ -0,0 +1,9 @@
+---
+category: Components
+type: Plot
+usage: comparison,distribution,interval,trend,time
+title: Area
+cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ZxtyTrhyN4sAAAAAAAAAAAAADmJ7AQ/original
+link: /examples#statistics-area
+order: 0
+---
diff --git a/site/docs/options/plots/special/area.zh.md b/site/docs/options/plots/special/area.zh.md
@@ -0,0 +1,9 @@
+---
+category: Components
+type: Plot
+usage: comparison,distribution,interval,trend,time
+title: Area 面积图
+cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ZxtyTrhyN4sAAAAAAAAAAAAADmJ7AQ/original
+link: /examples#statistics-area
+order: 0
+---
diff --git a/site/docs/options/plots/special/bar.en.md b/site/docs/options/plots/special/bar.en.md
@@ -1,6 +1,7 @@
 ---
 category: Components
 type: Plot
+usage: comparison
 title: Bar
 cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*eU1cRqm_fPAAAAAAAAAAAAAADmJ7AQ/original
 link: /examples#statistics-bar

diff --git a/site/docs/options/plots/special/bar.zh.md b/site/docs/options/plots/special/bar.zh.md
@@ -1,6 +1,7 @@
 ---
 category: Components
 type: Plot
+usage: comparison
 title: Bar 条形图
 cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*eU1cRqm_fPAAAAAAAAAAAAAADmJ7AQ/original
 link: /examples#statistics-bar

diff --git a/site/docs/options/plots/special/bidirectional-bar.en.md b/site/docs/options/plots/special/bidirectional-bar.en.md
@@ -1,6 +1,7 @@
 ---
 category: Components
 type: Plot
+usage: comparison
 title: BidirectionalBar
 cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*19M9So-1OpoAAAAAAAAAAAAADmJ7AQ/original
 link: /examples#statistics-bidirectional-bar

diff --git a/site/docs/options/plots/special/bidirectional-bar.zh.md b/site/docs/options/plots/special/bidirectional-bar.zh.md
@@ -1,6 +1,7 @@
 ---
 category: Components
 type: Plot
+usage: comparison
 title: BidirectionalBar 对称条形图
 cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*19M9So-1OpoAAAAAAAAAAAAADmJ7AQ/original
 link: /examples#statistics-bidirectional-bar

diff --git a/site/docs/options/plots/special/box.en.md b/site/docs/options/plots/special/box.en.md
@@ -1,6 +1,7 @@
 ---
 category: Components
 type: Plot
+usage: distribution
 title: Box
 cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*A746SrYUxbsAAAAAAAAAAAAADmJ7AQ/original
 link: /examples#statistics-box

diff --git a/site/docs/options/plots/special/box.zh.md b/site/docs/options/plots/special/box.zh.md
@@ -1,6 +1,7 @@
 ---
 category: Components
 type: Plot
+usage: distribution
 title: Box 箱线图
 cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*A746SrYUxbsAAAAAAAAAAAAADmJ7AQ/original
 link: /examples#statistics-box

diff --git a/site/docs/options/plots/special/bullet.en.md b/site/docs/options/plots/special/bullet.en.md
@@ -1,6 +1,7 @@
 ---
 category: Components
 type: Plot
+usage: comparison
 title: Bullet
 cover: https://mdn.alipayobjects.com/huamei_za7we3/afts/img/A*R4hCRJwwMhgAAAAAAAAAAAAADo2bAQ/original
 link: /examples#statistics-bullet

diff --git a/site/docs/options/plots/special/bullet.zh.md b/site/docs/options/plots/special/bullet.zh.md
@@ -1,6 +1,7 @@
 ---
 category: Components
 type: Plot
+usage: comparison
 title: Bullet 子弹图
 cover: https://mdn.alipayobjects.com/huamei_za7we3/afts/img/A*R4hCRJwwMhgAAAAAAAAAAAAADo2bAQ/original
 link: /examples#statistics-bullet