docs: add site demos (#2707)

site/.dumi/global.ts

@@ -7,6 +7,7 @@ if (window) {
   (window as any).lodashEs = require('lodash');
   /** 不要使用 link, react-dom 冲突 */
   (window as any).plots = require('@ant-design/plots');
+  (window as any).graphs = require('@ant-design/graphs');
   (window as any).d3Interpolate = require('d3-interpolate');
   (window as any).d3Regression = require('d3-regression');
 }

site/.dumirc.ts

@@ -156,6 +156,14 @@ export default defineConfig({
           en: 'Statistics',
         },
       },
+      {
+        slug: 'relations',
+        icon: 'line',
+        title: {
+          zh: '关系图表',
+          en: 'Relations',
+        },
+      },
     ],
     detail: {
       engine: {

site/examples/relations/dendrogram/demo/horizontal-dendrogram.js

@@ -0,0 +1,24 @@
+import { Dendrogram, G6 } from '@ant-design/graphs';
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+
+const { treeToGraphData } = G6;
+
+const DemoDendrogram = () => {
+  const [data, setData] = useState(undefined);
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then((data) => setData(treeToGraphData(data)));
+  }, []);
+
+  const options = {
+    autoFit: 'view',
+    data,
+  };
+
+  return <Dendrogram {...options} />;
+};
+
+ReactDOM.render(<DemoDendrogram />, document.getElementById('container'));

site/examples/relations/dendrogram/demo/horizontal-tidy-tree.js

@@ -0,0 +1,25 @@
+import { Dendrogram, G6 } from '@ant-design/graphs';
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+
+const { treeToGraphData } = G6;
+
+const DemoDendrogram = () => {
+  const [data, setData] = useState(undefined);
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then((data) => setData(treeToGraphData(data)));
+  }, []);
+
+  const options = {
+    autoFit: 'view',
+    data,
+    compact: true,
+  };
+
+  return <Dendrogram {...options} />;
+};
+
+ReactDOM.render(<DemoDendrogram />, document.getElementById('container'));

site/examples/relations/dendrogram/demo/meta.json

@@ -0,0 +1,56 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "horizontal-dendrogram.js",
+      "title": {
+        "zh": "水平生态树",
+        "en": "Horizontal Dendrogram"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*rRlBRIOnCjoAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "vertical-dendrogram.js",
+      "title": {
+        "zh": "垂直生态树",
+        "en": "Vertical Dendrogram"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Xzf1SKVmNxIAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "radial-dendrogram.js",
+      "title": {
+        "zh": "径向生态树",
+        "en": "Radial Dendrogram"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*mvnUTaA91H0AAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "horizontal-tidy-tree.js",
+      "title": {
+        "zh": "水平紧凑树",
+        "en": "Horizontal Tidy Tree"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*3u63Q4dYzMQAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "vertical-tidy-tree.js",
+      "title": {
+        "zh": "垂直紧凑树",
+        "en": "Vertical Tidy Tree"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*GbheQoWEWREAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "radial-tidy-tree.js",
+      "title": {
+        "zh": "径向紧凑树",
+        "en": "Radial Tidy Tree"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*6xYwTbcLp20AAAAAAAAAAAAADmJ7AQ/original"
+    }
+  ]
+}

site/examples/relations/dendrogram/demo/radial-dendrogram.js

@@ -0,0 +1,25 @@
+import { Dendrogram, G6 } from '@ant-design/graphs';
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+
+const { treeToGraphData } = G6;
+
+const DemoDendrogram = () => {
+  const [data, setData] = useState(undefined);
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then((data) => setData(treeToGraphData(data)));
+  }, []);
+
+  const options = {
+    autoFit: 'view',
+    data,
+    direction: 'radial',
+  };
+
+  return <Dendrogram {...options} />;
+};
+
+ReactDOM.render(<DemoDendrogram />, document.getElementById('container'));

site/examples/relations/dendrogram/demo/radial-tidy-tree.js

@@ -0,0 +1,26 @@
+import { Dendrogram, G6 } from '@ant-design/graphs';
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+
+const { treeToGraphData } = G6;
+
+const DemoDendrogram = () => {
+  const [data, setData] = useState(undefined);
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then((data) => setData(treeToGraphData(data)));
+  }, []);
+
+  const options = {
+    autoFit: 'view',
+    data,
+    direction: 'radial',
+    compact: true,
+  };
+
+  return <Dendrogram {...options} />;
+};
+
+ReactDOM.render(<DemoDendrogram />, document.getElementById('container'));

site/examples/relations/dendrogram/demo/vertical-dendrogram.js

@@ -0,0 +1,25 @@
+import { Dendrogram, G6 } from '@ant-design/graphs';
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+
+const { treeToGraphData } = G6;
+
+const DemoDendrogram = () => {
+  const [data, setData] = useState(undefined);
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then((data) => setData(treeToGraphData(data)));
+  }, []);
+
+  const options = {
+    autoFit: 'view',
+    data,
+    direction: 'vertical',
+  };
+
+  return <Dendrogram {...options} />;
+};
+
+ReactDOM.render(<DemoDendrogram />, document.getElementById('container'));

site/examples/relations/dendrogram/demo/vertical-tidy-tree.js

@@ -0,0 +1,26 @@
+import { Dendrogram, G6 } from '@ant-design/graphs';
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+
+const { treeToGraphData } = G6;
+
+const DemoDendrogram = () => {
+  const [data, setData] = useState(undefined);
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then((data) => setData(treeToGraphData(data)));
+  }, []);
+
+  const options = {
+    autoFit: 'view',
+    data,
+    direction: 'vertical',
+    compact: true,
+  };
+
+  return <Dendrogram {...options} />;
+};
+
+ReactDOM.render(<DemoDendrogram />, document.getElementById('container'));

site/examples/relations/dendrogram/index.en.md

@@ -0,0 +1,4 @@
+---
+title: Dendrogram
+order: 2
+---

site/examples/relations/dendrogram/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: 生态树
+order: 2
+---