import React , { useEffect } from 'react' ; import G6 from '@antv/g6' ; import { appenAutoShapeListener } from '../Register/event' ; export const G6MiniDemo = ( { nodeType , count = 1 , height = 200 , } ) => { useEffect ( ( ) => { const data = { nodes : 'e' . repeat ( count ) . split ( '' ) . map ( ( e , i ) => ( { description : 'ant_type_name_...' , label : 'Type / ReferType' , color : '#7262fd' , meta : { creatorName : 'a_creator' , } , id : 'node' + i + Math . random ( ) . toString ( 16 ) . slice ( - 4 ) , type : nodeType , } ) ) , edges : [ ] , } ; const width = document . getElementById ( 'container' ) ?. clientWidth || 800 ; const graph = new G6 . Graph ( { container : 'container' , width , height , fitCenter : true , modes : { default : [ 'drag-node' , 'drag-canvas' , 'zoom-canvas' ] , } , layout : { type : 'dagre' , } , } ) ; graph . data ( data ) ; const time = new Date ( ) ; graph . render ( ) ; console . log ( `${ count } Nodes rendered` , 'Render time:' , ( Number ( new Date ( ) ) - Number ( time ) ) / 1000 , 's' ) ; appenAutoShapeListener ( graph ) ; return ( ) => { graph . destroy ( ) ; } ; } , [ count , nodeType ] ) ; return < div id = "container" > < /div>; } ;