chore: update chart-node-g6

CHANGELOG.md

@@ -4,7 +4,7 @@
 
 - feat: chart node;
 - feat: bubble set;
-- feat: custom node with xml;
+- feat: custom node with JSX;
 - feat: minimum spanning tree algorithm;
 - feat: path finding algorithm;
 - feat: cycle finding algorithm;

examples/item/customNode/demo/intervalChartNode.js

@@ -55,21 +55,15 @@ G6.registerNode(
         },
       });
 
-      // calculate the region for the chart
-      const region = G6.Util.getChartRegion({
-        group,
-        width: 360,
-        height: 70,
-        x: 20,
-        y: 100
-      });
-
       // 实际开发中把 (Chart || window.Chart) 换成 Chart
       // Replace (Chart || window.Chart) by Chart in your project
       const view = new (Chart || window.Chart)({
         group,
         padding: 1,
-        region
+        width: 360,
+        height: 70,
+        x: 20,
+        y: 100
       });
 
       view.data(cfg.trendData);

examples/item/customNode/demo/jsxNode.js

@@ -1,17 +1,17 @@
 import G6 from '@antv/g6';
 
 /**
- *  Custom a xml node
+ *  Custom a JSX node
  *  by Dominic Ming
  *
  */
 
 
 /**
- * Register a XML Node
+ * Register a JSX Node
  */
 
-G6.registerNode('rect-xml', (cfg) => `
+G6.registerNode('rect-jsx', (cfg) => `
 <group>
   <rect>
     <rect style={{
@@ -53,45 +53,45 @@ G6.registerNode('rect-xml', (cfg) => `
 `)
 
 const data = {
-    nodes: [{
-        x: 150,
-        y: 150,
-        description: "ant_type_name_...",
-        label: "Type / ReferType",
-        color: '#2196f3',
-        meta: {
-            creatorName: "a_creator"
-        },
-        id: "node1",
-        type: 'rect-xml'
-    }, {
-        x: 350,
-        y: 150,
-        description: "node2_name...",
-        label: "XML Node",
-        color: '#2196f3',
-        meta: {
-            creatorName: "a_creator"
-        },
-        id: 'node2',
-        type: 'rect-xml'
-    }],
-    edges: [
-        { source: 'node1', target: 'node2' }
-    ]
+  nodes: [{
+    x: 150,
+    y: 150,
+    description: "ant_type_name_...",
+    label: "Type / ReferType",
+    color: '#2196f3',
+    meta: {
+      creatorName: "a_creator"
+    },
+    id: "node1",
+    type: 'rect-jsx'
+  }, {
+    x: 350,
+    y: 150,
+    description: "node2_name...",
+    label: "JSX Node",
+    color: '#2196f3',
+    meta: {
+      creatorName: "a_creator"
+    },
+    id: 'node2',
+    type: 'rect-jsx'
+  }],
+  edges: [
+    { source: 'node1', target: 'node2' }
+  ]
 };
 
 const width = document.getElementById('container').scrollWidth;
 const height = document.getElementById('container').scrollHeight || 500;
 const graph = new G6.Graph({
-    container: 'container',
-    width,
-    height,
-    // translate the graph to align the canvas's center, support by v3.5.1
-    fitCenter: true,
-    modes: {
-        default: ['drag-node', 'zoom-canvas']
-    }
+  container: 'container',
+  width,
+  height,
+  // translate the graph to align the canvas's center, support by v3.5.1
+  fitCenter: true,
+  modes: {
+    default: ['drag-node', 'zoom-canvas']
+  }
 });
 
 graph.data(data);

examples/item/customNode/demo/lineChartNode.js

@@ -55,21 +55,15 @@ G6.registerNode(
         },
       });
 
-      // calculate the region for the chart
-      const region = G6.Util.getChartRegion({
-        group,
-        width: 360,
-        height: 70,
-        x: 20,
-        y: 100
-      });
-
       // 实际开发中把 (Chart || window.Chart) 换成 Chart
       // Replace (Chart || window.Chart) by Chart in your project
       const view = new (Chart || window.Chart)({
         group,
         padding: 5,
-        region
+        width: 360,
+        height: 70,
+        x: 20,
+        y: 100
       });
 
       view.data(cfg.trendData);

examples/item/customNode/demo/meta.json

@@ -21,10 +21,10 @@
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*b-g0RoOpI3sAAAAAAAAAAABkARQnAQ"
     },
     {
-      "filename": "xmlNode.js",
+      "filename": "jsxNode.js",
       "title": {
-        "zh": "使用 XML 自定义节点",
-        "en": "Custom Node with XML"
+        "zh": "使用 JSX 自定义节点",
+        "en": "Custom Node with JSX"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*NcHWTKo3sEoAAAAAAAAAAAAAARQnAQ"
     },

examples/item/customNode/demo/pointChartNode.js

@@ -62,8 +62,9 @@ G6.registerNode(
         Oceania: '#223273',
       };
 
-      // calculate the region for the chart
-      const region = G6.Util.getChartRegion({
+      // 实际开发中把 (Chart || window.Chart) 换成 Chart
+      // Replace (Chart || window.Chart) by Chart in your project
+      const chart = new (Chart || window.Chart)({
         group,
         width: 360,
         height: 70,
@@ -71,13 +72,6 @@ G6.registerNode(
         y: 100
       });
 
-      // 实际开发中把 (Chart || window.Chart) 换成 Chart
-      // Replace (Chart || window.Chart) by Chart in your project
-      const chart = new (Chart || window.Chart)({
-        group,
-        region
-      });
-
       chart.data(cfg.trendData);
 
       chart

package.json

@@ -89,7 +89,7 @@
     "ml-matrix": "^6.5.0"
   },
   "devDependencies": {
-    "@antv/chart-node-g6": "^0.0.2",
+    "@antv/chart-node-g6": "^0.0.3",
     "@antv/gatsby-theme-antv": "^0.11.1",
     "@babel/core": "^7.7.7",
     "@babel/plugin-proposal-class-properties": "^7.1.0",

tests/unit/plugins/menu-spec.ts

@@ -9,7 +9,7 @@ describe('menu', () => {
   it('menu with default', () => {
     const menu = new G6.Menu({
       handleMenuClick: (target, item) => {
-        // console.log(target, item);
+        console.log(target, item);
       },
     });