feat(components):add custom legend

antvis · Jan 25, 2021 · 0886341 · 0886341
1 parent 45a730f
commit 0886341
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 26 deletions.
diff --git a/packages/graphin-components/src/Legend/demos/custom.tsx b/packages/graphin-components/src/Legend/demos/custom.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import Graphin, { Utils } from '@antv/graphin';
+import iconsLoader from '@antv/graphin-icons';
+import { Legend } from '@antv/graphin-components';
+
+const icons = Graphin.registerFontFamily(iconsLoader);
+
+const data = Utils.mock(5).circle().graphin();
+
+const Color = {
+  company: {
+    primaryColor: '#ffc107',
+    secondaryColor: Utils.hexToRgba('#ffc107', '0.2'),
+  },
+  person: {
+    primaryColor: '#28a52d',
+    secondaryColor: Utils.hexToRgba('#28a52d', '0.2'),
+  },
+};
+data.nodes.forEach((node, index) => {
+  const isCompany = index % 3 === 0;
+  node.data.type = isCompany ? 'company' : 'person';
+  const iconType = node.data.type;
+  node.type = 'graphin-circle';
+
+  node.style = {
+    keyshape: {
+      stroke: Color[iconType].primaryColor,
+      size: [30],
+      fill: Color[iconType].secondaryColor,
+    },
+    icon: {
+      type: 'font',
+      fontFamily: 'graphin',
+      value: isCompany ? icons.company : icons.user,
+      size: 14,
+      fill: Color[iconType].primaryColor,
+    },
+    status: {
+      active: {
+        halo: {
+          visible: false,
+        },
+        keyshape: {
+          lineWidth: 8,
+        },
+      },
+      inactive: {
+        halo: {
+          visible: false,
+        },
+        keyshape: {
+          fill: '#eee',
+          stroke: '#eee',
+        },
+        icon: {
+          fill: '#eee',
+        },
+      },
+    },
+  };
+});
+
+const Demo = () => {
+  return (
+    <Graphin data={data}>
+      <Legend bindType="node" sortKey="data.type" colorKey="style.keyshape.stroke">
+        <Legend.Node />
+      </Legend>
+    </Graphin>
+  );
+};
+
+export default Demo;
diff --git a/packages/graphin-components/src/Legend/index.md b/packages/graphin-components/src/Legend/index.md
@@ -16,36 +16,31 @@ Legend 图例是一种常见的图分析配套组件，通常将节点和边分
 
 <code src='./demos/index.tsx'>
 
-## 功能特性
+## 用法
+
+`<Legend />` 内置了一个`<Legend.Node />`组件，用来处理图例的展示样式与交互样式。
+
+```tsx | pure
+<Graphin data={data}>
+  <Legend bindType="node" sortKey="data.type" colorKey="style.keyshape.stroke">
+    <Legend.Node />
+  </Legend>
+</Graphin>
+```
+
+<API src='./index.tsx'>
+<API src='./Node.tsx'>
+
+## 自定义
 
-- 支持用户自定义 legend 的颜色映射
-- 点击交互：支持高亮，支持节点隐藏 两种模式
+Legend 内置了一个`<Legend.Node />`组件，用来处理图例的展示样式与交互样式。用户完全可以定义自己的`<Legend.Node />`组件，达到自定义的目的，可以自定义样式，也可以自定义交互名称。
+
+<code src='./demos/custom.tsx'>
+
+- 自定义交互
 
 ## 参考资料
 
 > 欢迎 github 的伙伴 讨论设计和组件方案，开源共建。
 
 - Graphin 现在的 legend：https://graphin.antv.vision/zh/examples/components/legend
-
-## 用法
-
-```tsx | pure
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Graphin, { Utils } from '@antv/graphin';
-import { Legend } from '@antv/graphin-components';
-// Do not forget to import CSS
-
-const App = () => {
-  return (
-    <div className="App">
-      <Graphin data={Utils.mock(10).graphin()}>
-        <Legend />
-      </Graphin>
-    </div>
-  );
-};
-
-const rootElement = document.getElementById('root');
-ReactDOM.render(<App />, rootElement);
-```