docs(graphin):add theme demos

antvis · Jan 18, 2021 · 8206356 · 8206356
1 parent c6f0561
commit 8206356
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 2 deletions.
diff --git a/packages/graphin/docs/render/theme/index.md b/packages/graphin/docs/render/theme/index.md
@@ -13,9 +13,13 @@ nav:
 
 Graphin 根据《图可视分析设计指引》，内置了 Theme，Theme
 
-### Light
+### 主题对比
 
-<code src='./light.tsx'>
+<code src='./index.tsx'>
+
+### 主题自定义
+
+<code src='./setting.tsx'>
 
 ### Dark
 

diff --git a/packages/graphin/docs/render/theme/index.tsx b/packages/graphin/docs/render/theme/index.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import Graphin, { Utils, Behaviors } from '@antv/graphin';
+import iconLoader from '@antv/graphin-icons';
+import { Row, Col } from 'antd';
+
+const { ZoomCanvas } = Behaviors;
+const data = Utils.mock(4)
+  .circle()
+  .graphin();
+const layout = {
+  type: 'concentric',
+};
+
+const icons = Graphin.registerFontFamily(iconLoader);
+
+data.nodes.forEach(node => {
+  node.style = {
+    ...node.style,
+    icon: {
+      type: 'font',
+      fontFamily: 'graphin',
+      value: icons.user,
+    },
+  };
+});
+
+data.nodes[0].status = {
+  selected: true,
+};
+
+export default () => {
+  return (
+    <div>
+      <Row>
+        <Col span={12}>
+          <Graphin data={data} layout={layout} theme={{ mode: 'light' }}>
+            <ZoomCanvas disabled />
+          </Graphin>
+        </Col>
+        <Col span={12}>
+          <Graphin data={data} layout={layout} theme={{ mode: 'dark' }}>
+            <ZoomCanvas disabled />
+          </Graphin>
+        </Col>
+      </Row>
+    </div>
+  );
+};
diff --git a/packages/graphin/docs/render/theme/setting.tsx b/packages/graphin/docs/render/theme/setting.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import Graphin, { Utils, Behaviors } from '@antv/graphin';
+import iconLoader from '@antv/graphin-icons';
+import { Row, Col } from 'antd';
+
+const { ZoomCanvas } = Behaviors;
+const data = Utils.mock(4)
+  .circle()
+  .graphin();
+const layout = {
+  type: 'concentric',
+};
+
+const icons = Graphin.registerFontFamily(iconLoader);
+
+data.nodes.forEach(node => {
+  node.style = {
+    ...node.style,
+    icon: {
+      type: 'font',
+      fontFamily: 'graphin',
+      value: icons.user,
+    },
+  };
+});
+
+data.nodes[0].status = {
+  selected: true,
+};
+
+export default () => {
+  return (
+    <div>
+      <Row>
+        <Col span={12}>
+          <Graphin data={data} layout={layout} theme={{ mode: 'light', primaryColor: '#D77622' }}>
+            <ZoomCanvas disabled />
+          </Graphin>
+        </Col>
+        <Col span={12}>
+          <Graphin data={data} layout={layout} theme={{ mode: 'dark' }}>
+            <ZoomCanvas disabled />
+          </Graphin>
+        </Col>
+      </Row>
+    </div>
+  );
+};