Visual-Decision-Tree/index.html at main · FLK-byte/Visual-Decision-Tree · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.cdnfonts.com/css/helvetica-neue-55" rel="stylesheet">
    <title>Visual Decision Tree</title>
    <script src="html2canvas.min.js" type="text/javascript"></script>
    <script src="jszip.js" type="text/javascript"></script>
    <script src="xlsx.js" type="text/javascript"></script>
    <script src="parseExcel.js" type="text/javascript"></script>
    <script src="parseExcelData.js" type="text/javascript"></script>

    <script type="text/javascript">
        window.onload = function () {

            document.getElementById("download").onclick = () => {
                html2canvas(document.getElementsByTagName("body")[0]).then(canvas => {
                    const base64 = canvas.toDataURL("image/png");
                    var a = document.createElement("a");
                    a.href = base64
                    a.download = "decisionTree.png"
                    a.click();
                });
            }

            const parsePropension = (value) => {
                const {PROPENSAO, QTD} = JSON.parse(`${value}`)
                return `Propensao: ${PROPENSAO} \n Quantidade: ${QTD}`
            }

            const formatPropension = () => {
                const propensions = document.querySelectorAll('div[class*="propension"]')
                const _propensions = [...propensions]
                _propensions.map((el, idx)=> el.innerHTML = parsePropension(el.innerHTML))
            }

            const formatContainers = (node) => {
                    const verticalContainers = document.querySelectorAll(".container > .vertical-container")
                    const _verticalContainers = [...verticalContainers]

                    const nodesToMap = node ? node : _verticalContainers
                    nodesToMap.map((el, idx)=>{
                        const containerChilds = [...el.childNodes].filter((node)=> node.className == "vertical-container")

                        const container = document.createElement('div')
                        container.className = "horizontal-container"

                        containerChilds.forEach((child)=>{
                            el.removeChild(child)
                            container.appendChild(child)
                            formatContainers([child])
                        })
                        if (container.hasChildNodes()) el.appendChild(container)
                    })

            }
            const mountTreeInDom = (node, divToReceiveNode) => {
                const domTree = document.getElementById("tree")

                if (node.nextItems) {

                    const containerNodeInDom = document.createElement('div')
                    containerNodeInDom.className = 'container'

                    node.nextItems.forEach((el, idx) => {

                        const newNodeInDom = document.createElement('div')
                        newNodeInDom.className = el.type === 'variable' ? `square rounded text ${el.value} ${el.type}` : `square text ${el.value} ${el.type}`
                        newNodeInDom.innerHTML = el.value

                        divToReceiveNode ? divToReceiveNode.appendChild(newNodeInDom) : containerNodeInDom.appendChild(newNodeInDom)

                    })
                    if (containerNodeInDom.hasChildNodes()) divToReceiveNode ? divToReceiveNode.parentNode.appendChild(containerNodeInDom) : domTree.appendChild(containerNodeInDom)

                    if (node.nextItems.length === 1) mountTreeInDom(node.nextItems[0], divToReceiveNode)

                    if (node.nextItems.length > 1) {
                        node.nextItems.forEach((el, idx) => {
                            const ElDiv = document.querySelector(`div[class*=${`"`+el.value+`"`}]`)

                            const parentElDiv = ElDiv.parentNode
                            parentElDiv.removeChild(ElDiv)

                            const container = document.createElement('div')
                            container.className = "vertical-container"
                            container.appendChild(ElDiv)

                            parentElDiv.appendChild(container)
                            mountTreeInDom(el, container)
                        })
                    }
                }
            }

            document.getElementById("excelInput").onchange = (e) => {
                parseExcel(e.target.files[0], (value) => {
                    this.tree = this.parseData(JSON.parse(value))
                    mountTreeInDom(this.tree)
                    formatPropension()
                    formatContainers()
                });
            };

        }
    </script>
</head>

<body class="body">
<div class="tree" id="tree">
</div>
<button id="download">Download as png</button>
<input type="file" id="excelInput"></input>
</body>

</html>