feat(site):Add legend component demo

package.json

@@ -51,8 +51,8 @@
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
-      "eslint --ext .js,.jsx,.ts,.tsx",
       "prettier --write",
+      "eslint --ext .js,.jsx,.ts,.tsx",
       "git add"
     ]
   },

packages/graphin-site/examples/advanced/layout-switching/demo/Simple.jsx

@@ -9,6 +9,27 @@ import { Select, Icon } from 'antd';
 import '@antv/graphin/dist/index.css'; // 引入Graphin CSS
 import '@antv/graphin-components/dist/index.css'; // 引入Graphin CSS
 
+import {
+  TrademarkCircleOutlined,
+  ChromeOutlined,
+  BranchesOutlined,
+  ApartmentOutlined,
+  AppstoreOutlined,
+  CopyrightCircleOutlined,
+  CustomerServiceOutlined,
+  ShareAltOutlined,
+} from '@ant-design/icons';
+
+const iconMap = {
+  random: <TrademarkCircleOutlined />,
+  concentric: <ChromeOutlined />,
+  circle: <CopyrightCircleOutlined />,
+  force: <BranchesOutlined />,
+  dagre: <ApartmentOutlined />,
+  grid: <AppstoreOutlined />,
+  radial: <ShareAltOutlined />,
+};
+
 const data = Utils.mock(15)
   .tree()
   .graphin();
@@ -22,10 +43,11 @@ const LayoutSelector = props => {
     <div style={{ position: 'absolute', top: 10, left: 10 }}>
       <Select style={{ width: '120px' }} value={value} onChange={onChange}>
         {layouts.map(item => {
-          const { name, icon, disabled, desc } = item;
+          const { name, disabled, desc } = item;
+          const iconComponent = iconMap[name] || <CustomerServiceOutlined />;
           return (
             <SelectOption key={name} value={name} disabled={disabled}>
-              <Icon type={icon} /> &nbsp;{desc}
+              {iconComponent} &nbsp;{desc}
             </SelectOption>
           );
         })}

packages/graphin-site/examples/components/legend/demo/Filter.jsx

@@ -0,0 +1,71 @@
+/* eslint-disable no-undef */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Graphin, { Utils } from '@antv/graphin';
+
+import '@antv/graphin/dist/index.css'; // 引入Graphin CSS
+import { Legend } from '@antv/graphin-components';
+import '@antv/graphin-components/dist/index.css'; // Graphin 组件 CSS
+
+const source = Utils.mock(6)
+  .circle()
+  .graphin();
+
+source.nodes.forEach((node, index) => {
+  const isCompany = index % 3 === 0;
+  node.style = {
+    ...node.style,
+    fontFamily: 'graphin',
+    icon: isCompany ? 'company' : 'user',
+    primaryColor: isCompany ? '#873bf4' : '#f79e26',
+  };
+  node.data.type = isCompany ? 'company' : 'person';
+});
+
+const App = () => {
+  const [data, setData] = React.useState(source);
+
+  const legendOptions = [
+    {
+      label: '公司',
+      value: 'company',
+      color: '#873bf4',
+    },
+    {
+      label: '人群',
+      value: 'person',
+      color: '#f79e26',
+    },
+  ];
+
+  const handleLegend = (_checked, options, LegendProps) => {
+    // Filter 逻辑
+    const optionsMap = options.reduce((acc, curr) => {
+      acc[curr.value] = curr;
+      return acc;
+    }, {});
+
+    const filterNodes = source.nodes.filter(node => {
+      return optionsMap[node.data.type].checked;
+    });
+    const ids = filterNodes.map(c => c.id);
+    const filterEdges = source.edges.filter(edge => {
+      return ids.indexOf(edge.source) !== -1 && ids.indexOf(edge.target) !== -1;
+    });
+    setData({
+      edges: filterEdges,
+      nodes: filterNodes,
+    });
+  };
+
+  return (
+    <div>
+      <Graphin data={data} layout={{ name: 'concentric' }}>
+        <Legend options={legendOptions} onChange={handleLegend} />
+      </Graphin>
+    </div>
+  );
+};
+const rootElement = document.getElementById('container');
+ReactDOM.render(<App />, rootElement);

packages/graphin-site/examples/components/legend/demo/Highlight.jsx

@@ -0,0 +1,67 @@
+/* eslint-disable no-undef */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Graphin, { Utils } from '@antv/graphin';
+import '@antv/graphin/dist/index.css'; // 引入Graphin CSS
+import { Legend } from '@antv/graphin-components';
+import '@antv/graphin-components/dist/index.css'; // Graphin 组件 CSS
+
+const { nodes, edges } = Utils.mock(6)
+  .circle()
+  .graphin();
+console.log(nodes, edges);
+nodes.forEach((node, index) => {
+  const isCompany = index % 3 === 0;
+
+  node.style = {
+    ...node.style,
+    fontFamily: 'graphin',
+    icon: isCompany ? 'company' : 'user',
+    primaryColor: isCompany ? '#873bf4' : '#f79e26',
+  };
+  node.data.type = isCompany ? 'company' : 'person';
+});
+
+const App = () => {
+  const legendOptions = [
+    {
+      label: '公司',
+      value: 'company',
+      color: '#873bf4',
+    },
+    {
+      label: '人群',
+      value: 'person',
+      color: '#f79e26',
+    },
+  ];
+
+  const handleLegend = (checked, options, LegendProps) => {
+    const { apis } = LegendProps;
+    // Highlight 逻辑
+    const optionsMap = options.reduce((acc, curr) => {
+      acc[curr.value] = curr;
+      return acc;
+    }, {});
+
+    const filterNodes = nodes.filter(node => {
+      return optionsMap[node.data.type].checked;
+    });
+    const nodeIds = filterNodes.map(c => c.id);
+    console.log(filterNodes, nodeIds);
+
+    apis.highlight(nodeIds);
+
+    // Hide逻辑
+  };
+  return (
+    <div>
+      <Graphin data={{ nodes, edges }} layout={{ name: 'concentric' }}>
+        <Legend options={legendOptions} onChange={handleLegend} />
+      </Graphin>
+    </div>
+  );
+};
+const rootElement = document.getElementById('container');
+ReactDOM.render(<App />, rootElement);

packages/graphin-site/examples/components/legend/demo/meta.json

@@ -0,0 +1,16 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "Highlight.jsx",
+      "title": ""
+    },
+    {
+      "filename": "Filter.jsx",
+      "title": ""
+    }
+  ]
+}

packages/graphin-site/examples/components/legend/index.en.md

@@ -0,0 +1,9 @@
+---
+title: Legend
+order: 1
+---
+
+Legend is a common matching component for graph analysis. It usually classifies nodes and edges for dyeing and interactive analysis.
+
+- demo-1: highlight logic
+- demo-2: filter logic

packages/graphin-site/examples/components/legend/index.zh.md

@@ -0,0 +1,9 @@
+---
+title: Legend 图例
+order: 1
+---
+
+Legend 图例是一种常见的图分析配套组件，通常将节点 和 边 分类后进行染色，交互分析。
+
+- demo-1 : highlight 逻辑
+- demo-2 : filter 逻辑