<template>
    <div class="chart-wrap">
        <div id="chartdiv" ref="chartdiv"></div>
    </div>
</template>
 
<script>
import * as am5 from '@amcharts/amcharts5';
import * as am5hierarchy from '@amcharts/amcharts5/hierarchy';
import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';

export default {
    props: {
        setData: {
            type: Object,
            default: {},
        }
    },
    data() {
        return {

        };
    },
    methods: {
        chartCreate: function (data) {
            let chartWarp = this.$refs["chartdiv"]; // 차트 상위 div ref 매칭
            chartWarp.innerHTML = ""; // 차트 상위 div 내용 초기화 (기존 차트 삭제)
            let div = document.createElement("div"); // 차트를 담을 빈 div 생성 (차트 하위 div)
            div.style.width = "100%"; // 차트를 담을 div의 넓이
            div.style.height = "100%"; // 차트를 담을 div의 높이
            chartWarp.appendChild(div); // 차트 상위 div 안에 차트 하위 div를 추가
            let root = am5.Root.new(div); // 차트 하위 div에 차트(root) 담기
            this.charts = root; // 차트 정보 전역에 담기

            root._logo.dispose();

            // Set themes
            // https://www.amcharts.com/docs/v5/concepts/themes/
            root.setThemes([
                am5themes_Animated.new(root)
            ]);


            // Create wrapper container
            let container = root.container.children.push(am5.Container.new(root, {
                width: am5.percent(100),
                height: am5.percent(100),
                layout: root.verticalLayout
            }));


            // Create series
            // https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
            let series = container.children.push(am5hierarchy.ForceDirected.new(root, {
                singleBranchOnly: false,
                downDepth: 1,
                initialDepth: 2,
                valueField: "value",
                categoryField: "name",
                childDataField: "children",
                centerStrength: 0.5,
                minRadius: 20,
                 maxRadius: am5.percent(15)
            }));


            // Generate and set data
            // https://www.amcharts.com/docs/v5/charts/hierarchy/#Setting_data
            let maxLevels = 2;
            let maxNodes = 5;
            let maxValue = 100;


            // generateLevel(data, "", 0);

            series.data.setAll([data]);
            series.set("selectedDataItem", series.dataItems[0]);

            // function generateLevel(data, name, level) {
            //     for (var i = 0; i < Math.ceil(maxNodes * Math.random()) + 1; i++) {
            //         let nodeName = name + "ABCDEFGHIJKLMNOPQRSTUVWXYZ"[i];
            //         let child;
            //         if (level < maxLevels) {
            //             child = {
            //                 name: nodeName + level
            //             }

            //             if (level > 0 && Math.random() < 0.5) {
            //                 child.value = Math.round(Math.random() * maxValue);
            //             }
            //             else {
            //                 child.children = [];
            //                 generateLevel(child, nodeName + i, level + 1)
            //             }
            //         }
            //         else {
            //             child = {
            //                 name: name + i,
            //                 value: Math.round(Math.random() * maxValue)
            //             }
            //         }
            //         data.children.push(child);
            //     }

            //     level++;
            //     return data;
            // }


            // Make stuff animate on load
            series.appear(1000, 100);
        }
    },
    watch: {
        'setData': function (newData) {
            console.log('newData  -  ', newData)
            this.chartCreate(newData)
        }
    },
    computed: {

    },
    components: {

    },
    mounted() {
    }
}
</script>
 
 
 