import React from 'react';
import * as echarts from 'echarts';

function App(props) {

    const [dmo, setDmo] = React.useState<HTMLDivElement | null>();

    const [myChart, setChart] = React.useState<any>();
    const chartData = React.useMemo(() => {
        return props.data;
    }, [props.data]);

    React.useEffect(() => {
        if (dmo) {
            setChart(echarts.init(dmo))
        } else {
            setChart(undefined)
        }
    }, [dmo])

    React.useEffect(() => {
        if (!myChart) return;
        const option = {
            title: {
                text: ''
            },
            tooltip: {},
            animationDurationUpdate: 1500,
            animationEasingUpdate: 'quinticInOut',
            series: [
                {
                    type: 'graph',
                    layout: 'force',
                    roam: true,
                    nodeScaleRatio: 0.6,
                    edgeSymbol: ['none', 'arrow'],
                    edgeSymbolSize: 10,
                    lineStyle: {
                        color: 'source',
                        curveness: 0.1
                    },
                    emphasis: {
                        focus: 'adjacency',
                        label: {
                            show: true
                        },
                        edgeLabel: {
                            show: true,
                            formatter: '{@value}'
                        }
                    },
                    label: {
                        show: true,
                        overflow: 'breakAll',
                        ellipsis: '...',
                        width: 80
                    },
                    draggable: true,
                    symbol: 'circle',
                    symbolSize: 80,
                    edgeLabel: {
                        fontSize: 30
                    },
                    force: {
                        initLayout: 'circular',
                        gravity: 0.01,
                        repulsion: 150,
                        edgeLength: 150,
                    },
                    ...chartData
                }
            ]
        };
        myChart.setOption(option);
    }, [myChart, chartData])

    return (
        <div ref={e => { setDmo(e) }}  style={{ flex:1,width:'100%'}} ></div>
    );
}

export default App;