harsh
/
privacy-policy-dashboard


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Privacy Policy</title>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
    <link rel='stylesheet prefetch' href='https://fperucic.github.io/treant-js/Treant.css'>
    <style type="text/css">
.chart { height: 159px; width: 332px; margin: 5px; margin: 5px auto; border: 3px solid #DDD; border-radius: 3px; }
 .data-category {
        background-color: rgba(255,0,0,0.4);
    }
    .DC {
        background-color: rgba(255,0,0,0.4);
    }
    .data-type {
        background-color: rgba(150,50,50,0.4);
    }
    .DT {
        background-color: rgba(150,50,50,0.4);
    }
    .process {
        background-color: rgba(0,0,250,0.4);
    }
    .legal-basis {
        background-color: rgba(0,200,250,0.4);
    }
    .data-source {
        background-color: rgba(100,200,50,0.4);
    }
    .processor {
        background-color: rgba(250,200,0,0.4);
    }
    .third-party {
        background-color: rgba(150,255,0,0.4);
    }
    #legend {
        position: absolute;
        top: 10px;
        right: 250px;
        padding: 5px; 
        border: 2px dashed black;
        background: white;
    }
    </style>
<body>
    
    <div>
        <div id="metadata" style="height: 500px; margin: 5px; width: auto;"> </div>
    </div>
    <script src="https://fperucic.github.io/treant-js/Treant.js"></script>
    <script src="https://fperucic.github.io/treant-js/vendor/raphael.js"></script>
<script type="text/javascript">
var simple_chart_config = {
    chart: {
        container: "#metadata",
        // rootOrientation: "WEST",
        levelSeparation:    50,
        siblingSeparation:  25,
        subTeeSeparation:   25,
        connectors: {
            type: "step",
            style: {
                "stroke-width": 2
            }
        },
    },
    connectors: {
        type: "straight",
        style: {
            "stroke-width": 2,
            "stroke": "#ccc"
        }
    },
    nodeStructure: {
        text: { name: "Policy" },
        children: [
            {
                text: { name: "Data Collection" },
                children: [
                    {
                        text: { name: "source" },
                        children: [
                            {
                                text: { name: "Data Subject" },
                            },
                            {
                                text: { name: "Third Party" },
                            },
                        ]
                    },
                    {
                        text: { name: "legal basis" },
                        children: [
                            {
                                text: { name: "Necessary" }
                            },
                            {
                                text: { name: "Opt-In" }
                            }
                        ]
                    },
                    {
                        text: { name: "mechanism" },
                        children: [
                            {
                                text: { name: "manual" }
                            },
                            {
                                text: { name: "automatic" }
                            }
                        ]
                    }
                ]
            },
            // {
            //     text: { name: "Data Usage" },
            //     children: [
            //         {
            //             text: { name: "Operate Services" }
            //         },
            //         {
            //             text: { name: "Security" }
            //         },
            //         {
            //             text: { name: "Legal Obligations" }
            //         },
            //         {
            //             text: { name: "Other" },
            //             children: [
            //                 {
            //                     text: { name: "Improve Services" }
            //                 },
            //                 {
            //                     text: { name: "Analytics" }
            //                 },
            //                 {
            //                     text: { name: "Marketing" }
            //                 }
            //             ]
            //         }
            //     ]
            // }
        ]
    }
};

$(document).ready(function() {
    new Treant(simple_chart_config);
});
</script>
</body>
</html>