feat:add overview demos

antvis · Feb 10, 2021 · f18853b · f18853b
1 parent 068681a
commit f18853b
Show file tree

Hide file tree

Showing 3 changed files with 135 additions and 0 deletions.
diff --git a/packages/graphin/docs/quick-start/overview/index.en-US.md b/packages/graphin/docs/quick-start/overview/index.en-US.md
@@ -0,0 +1,39 @@
+---
+title: Overview
+order: 0
+group:
+  path: /quick-start
+  title: 快速开始
+  order: 0
+nav:
+  title: 使用文档
+  path: /graphin
+  order: 1
+---
+
+## 功能概览
+
+<code src='./index.tsx'>
+
+## 组件看板
+
+| 组件            | 分类         | 名称          | 说明                                                 |
+| --------------- | ------------ | ------------- | ---------------------------------------------------- |
+| Graphin         | 核心组件     | @antv/graphin | 负责数据驱动整个画布：配置，布局，渲染，交互         |
+| ContextMenu     | 交互组件     | 右键菜单      | 帮助用户进行节点或边操作：打标，扩散，发现           |
+| Tooltip         | 交互组件     | 提示框        | 帮助用户快速浏览节点或边的信息                       |
+| MiniMap         | 交互组件     | 小地图        | 帮助用户进行全局导航                                 |
+| Toolbar         | 交互组件     | 工具栏        | 帮助用户进行画布操作：缩小，放大，全屏               |
+| RedoUndo        | 交互组件     | 撤销回退      | 帮助用户进行全局导航                                 |
+| FishEye         | 交互组件     | 鱼眼放大镜    | 帮助用户进行查看细节                                 |
+| CreateEdge      | 交互组件     | 边建联组件    | 帮助用户进行关系建联                                 |
+| Legend          | 标示组件     | 图例          | 帮助用户进行节点和边的类型标示：颜色，大小，属性     |
+| Hull            | 标示组件     | 轮廓          | 帮助用户进行节点归类示                               |
+| Statistic       | 标示组件     | 统计面板      | 帮助用户进行画布状态的监控标示                       |
+| SnapshotGallery | 分析配套组件 | 快照画廊      | 提供快照保存复现功能，帮助用户分析过程不中断         |
+| LayoutSelector  | 分析配套组件 | 布局切换器    | 帮助用户切换布局，自主调节参数，从而达到最佳布局效果 |
+| Sheetbar        | 分析配套组件 | 多画布组件    | 帮助用户二次分析，多画布管理                         |
+| TableMode       | 分析配套组件 | 表格模式      | 帮助通过表格查看关系源数据                           |
+| FindPathPanel   | 算法分析组件 | 寻找路径      | 帮助用户计算两个节点间的最短路径和可能路径列表       |
+| MapMode         | 高级分析组件 | 地图模式      | 帮助用户分析地理关系数据                             |
+| Timebar         | 高级分析组件 | 时间轴        | 帮助用户分析时序关系数据                             |
diff --git a/packages/graphin/docs/quick-start/overview/index.md b/packages/graphin/docs/quick-start/overview/index.md
@@ -0,0 +1,39 @@
+---
+title: 功能概览
+order: 0
+group:
+  path: /quick-start
+  title: 快速开始
+  order: 0
+nav:
+  title: 使用文档
+  path: /graphin
+  order: 1
+---
+
+## 功能概览
+
+<code src='./index.tsx'>
+
+## 组件看板
+
+| 组件            | 分类         | 名称          | 说明                                                 |
+| --------------- | ------------ | ------------- | ---------------------------------------------------- |
+| Graphin         | 核心组件     | @antv/graphin | 负责数据驱动整个画布：配置，布局，渲染，交互         |
+| ContextMenu     | 交互组件     | 右键菜单      | 帮助用户进行节点或边操作：打标，扩散，发现           |
+| Tooltip         | 交互组件     | 提示框        | 帮助用户快速浏览节点或边的信息                       |
+| MiniMap         | 交互组件     | 小地图        | 帮助用户进行全局导航                                 |
+| Toolbar         | 交互组件     | 工具栏        | 帮助用户进行画布操作：缩小，放大，全屏               |
+| RedoUndo        | 交互组件     | 撤销回退      | 帮助用户进行全局导航                                 |
+| FishEye         | 交互组件     | 鱼眼放大镜    | 帮助用户进行查看细节                                 |
+| CreateEdge      | 交互组件     | 边建联组件    | 帮助用户进行关系建联                                 |
+| Legend          | 标示组件     | 图例          | 帮助用户进行节点和边的类型标示：颜色，大小，属性     |
+| Hull            | 标示组件     | 轮廓          | 帮助用户进行节点归类示                               |
+| Statistic       | 标示组件     | 统计面板      | 帮助用户进行画布状态的监控标示                       |
+| SnapshotGallery | 分析配套组件 | 快照画廊      | 提供快照保存复现功能，帮助用户分析过程不中断         |
+| LayoutSelector  | 分析配套组件 | 布局切换器    | 帮助用户切换布局，自主调节参数，从而达到最佳布局效果 |
+| Sheetbar        | 分析配套组件 | 多画布组件    | 帮助用户二次分析，多画布管理                         |
+| TableMode       | 分析配套组件 | 表格模式      | 帮助通过表格查看关系源数据                           |
+| FindPathPanel   | 算法分析组件 | 寻找路径      | 帮助用户计算两个节点间的最短路径和可能路径列表       |
+| MapMode         | 高级分析组件 | 地图模式      | 帮助用户分析地理关系数据                             |
+| Timebar         | 高级分析组件 | 时间轴        | 帮助用户分析时序关系数据                             |
diff --git a/packages/graphin/docs/quick-start/overview/index.tsx b/packages/graphin/docs/quick-start/overview/index.tsx
@@ -0,0 +1,57 @@
+/**
+ * inline: true
+ */
+
+import React from 'react';
+import { Row, Col, Card } from 'antd';
+import { Link } from 'react-router-dom';
+
+const { Meta } = Card;
+const demos = [
+  {
+    title: '节点样式',
+    desc: 'Graphin内置节点包含：容器，标签，光晕，图标，徽标 5部分，每一部分均可以通过数据驱动',
+    image: 'https://gw.alipayobjects.com/mdn/rms_402c1a/afts/img/A*JoptTZdYEEYAAAAAAAAAAAAAARQnAQ',
+    link: '/graphin/render/node',
+  },
+  {
+    title: '边的样式',
+    desc:
+      'Graphin内置的边包含：路径，标签，光晕 3部分，每一部分均可以通过数据驱动。针对业务中常用的标签背景，自环，多边，虚线等情况，也都有对应的数据设置',
+    image: 'https://gw.alipayobjects.com/mdn/rms_402c1a/afts/img/A*RBkcT5M3dCQAAAAAAAAAAAAAARQnAQ',
+    link: '/graphin/render/edge',
+  },
+  {
+    title: '丰富的布局',
+    desc: 'Graphin内置10款网图布局，4款树图布局，满足你对于不同数据类型，不同分析场景的布局需求',
+    image: 'https://gw.alipayobjects.com/mdn/rms_402c1a/afts/img/A*vhqGTIjetxQAAAAAAAAAAAAAARQnAQ',
+    link: '/graphin/layout/network',
+  },
+  {
+    title: '细腻的交互',
+    desc:
+      'Graphin提供了13种交互组件。包括画布的缩放，平移，圈选，拉索，自动Resize，也包括元素的拖拽，选中，悬停，高亮，展开收起等，满足你对于不同分析场景的交互需求',
+    image: 'https://gw.alipayobjects.com/mdn/rms_402c1a/afts/img/A*L-htTIT2powAAAAAAAAAAAAAARQnAQ',
+    link: '/graphin/behaviors/behaviros',
+  },
+];
+export default () => {
+  return (
+    <div style={{ padding: '30px', background: '#ececec' }}>
+      <Row gutter={[16, 16]}>
+        {demos.map(c => {
+          const { title, desc, image, link } = c;
+          return (
+            <Col span={8} key={title}>
+              <Link to={link}>
+                <Card hoverable bordered={false} cover={<img alt="example" src={image} />}>
+                  <Meta title={title} description={desc} />
+                </Card>
+              </Link>
+            </Col>
+          );
+        })}
+      </Row>
+    </div>
+  );
+};