-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
141 lines (130 loc) · 5.63 KB
/
index.html
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<html>
<head>
<meta charset="UTF-8">
<title>Simple Google OrgChart Editor</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script type="text/javascript" src="js/json-url.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var codec = JsonUrl('lzma');
google.charts.load('current', {packages:["orgchart"]});
google.charts.setOnLoadCallback(drawChart);
var toData = function(input){
var format = function(role,name){
return role+'<div style="color:red; font-style:italic">'+name+'</div>'
}
var arrays = input.split(/[\|\n]/)
.map((x)=>x.trim())
.filter((x)=>x.length)
.filter((x)=>!x.startsWith("#"))
.map((x)=>x.split(":").map((r)=>r.trim()))
.map((x)=>{
var names = (x[2]||"").split(",")
.map((n)=>n.trim())
.filter((n)=>n.length)
if(names.length == 0){
if(x.length == 1){
return [[{v: x[0], f: x[0]},null]]
}
return [[{v: x[1], f: x[1]}, x[0]]]
}
if(names.length == 1){
//boss:role:name
return [[{v: x[1], f: format(x[1],names[0])},x[0]]];
}
return names.map((name)=>{return [{v: x[1]+name, f: format(x[1],name)},x[0]]})
});
var merged = [].concat.apply([], arrays);
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addRows(merged);
return data;
}
function drawChart() {
var rawdata = $("#orgChartData").val();
var data = toData(rawdata);
// Create the chart.
var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
// Draw the chart, setting the allowHtml option to true for the tooltips.
chart.draw(data, {'allowHtml':true});
codec.compress(rawdata).then(output=>{location.hash='#'+output});
$("#copylink").text("Copy Link for Sharing");
}
function delay(callback, ms) {
var timer = 0;
return function() {
var context = this, args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
callback.apply(context, args);
}, ms || 0);
};
}
var onChartDataChanged = delay(drawChart,1000);
var oldChartData = "";
$(document).ready(function(){
if(location.hash){
try{
codec.decompress(location.hash.substring(1)).then((output)=>$("#orgChartData").val(output));
}catch(e){
console.log("sorry, a chart could not be loaded");
}
}
$("#orgChartData").on("change keyup paste", function() {
var currentVal = $(this).val();
if(currentVal == oldChartData) {
return;
}
oldChartData = currentVal;
onChartDataChanged();
});
$("#copylink").on("click",function(){
var dummy = document.createElement('input'),
text = window.location.href;
document.body.appendChild(dummy);
dummy.value = text;
dummy.select();
document.execCommand('copy');
document.body.removeChild(dummy);
$("#copylink").text("Copied!");
})
});
</script>
</head>
<body>
<div class="container-fluid">
<button class="btn btn-primary editor collapse show d-print-none" type="button" data-toggle="collapse" data-target=".editor" aria-expanded="false" aria-controls=".editor">
Edit
</button>
<div id="editor" class="collapse d-print-none editor">
<div class="form-group">
<label for="orgCharData">Chart Data</label>
<textarea class="form-control" id="orgChartData" rows="10">
# Format your data like this:
# Boss:Role:Name 1, Name 2, Name 3.
# Each Role should be unique.
# Note Boss is the name of the bosses role.
# Lines beginning with '#' are ignored.
:The Boss:Fred Flintstone
The Boss:The Family:Flintsones
The Boss:The Rubbles:Friends
The Family:Pet:Dino, Baby Puss
The Family:Wife:Wilma
The Family:Child:Pebbles
The Rubbles:Mr. Rubbles:Barney
The Rubbles:Mrs. Rubbles:Betty
The Rubbles:Baby Rubbles: Bamm Bamm</textarea>
</div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".editor" aria-expanded="false" aria-controls=".editor">
Close
</button>
<button id="copylink" class="btn btn-primary">Copy Link for Sharing</button>
</div>
<div id="chart_div"></div>
</div>
</body>
</html>