-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathorgChartStatic.html
235 lines (221 loc) · 13.6 KB
/
orgChartStatic.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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<!DOCTYPE html>
<html>
<head>
<title>Org Chart Static</title>
<meta name="description" content="A larger org chart with an Overview and searching capability." />
<!-- Copyright 1998-2016 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<style type="text/css">
#myOverviewDiv {
position: absolute;
width:200px;
height:100px;
top: 10px;
left: 10px;
background-color: aliceblue;
z-index: 300; /* make sure its in front */
border: solid 1px blue;
}
</style>
<script src="go.js"></script>
<link href="../assets/css/goSamples.css" rel="stylesheet" type="text/css" /> <!-- you don't need to use this -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
<script src="goSamples.js"></script> <!-- this is only for the GoJS Samples framework -->
<script id="code">
function init() {
if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram =
$(go.Diagram, "myDiagramDiv", // the DIV HTML element
{
// Put the diagram contents at the top center of the viewport
initialDocumentSpot: go.Spot.TopCenter,
initialViewportSpot: go.Spot.TopCenter,
// OR: Scroll to show a particular node, once the layout has determined where that node is
//"InitialLayoutCompleted": function(e) {
// var node = e.diagram.findNodeForKey(28);
// if (node !== null) e.diagram.commandHandler.scrollToPart(node);
//},
layout:
$(go.TreeLayout, // use a TreeLayout to position all of the nodes
{
treeStyle: go.TreeLayout.StyleLastParents,
// properties for most of the tree:
angle: 90,
layerSpacing: 80,
// properties for the "last parents":
alternateAngle: 0,
alternateAlignment: go.TreeLayout.AlignmentStart,
alternateNodeIndent: 20,
alternateNodeIndentPastParent: 1,
alternateNodeSpacing: 20,
alternateLayerSpacing: 40,
alternateLayerSpacingParentOverlap: 1,
alternatePortSpot: new go.Spot(0, 0.999, 20, 0),
alternateChildPortSpot: go.Spot.Left
})
});
// define Converters to be used for Bindings
function theNationFlagConverter(nation) {
return "https://www.nwoods.com/go/Flags/" + nation.toLowerCase().replace(/\s/g, "-") + "-flag.Png";
}
function theInfoTextConverter(info) {
var str = "";
if (info.title) str += "Title: " + info.title;
if (info.headOf) str += "\n\nHead of: " + info.headOf;
if (typeof info.boss === "number") {
var bossinfo = myDiagram.model.findNodeDataForKey(info.boss);
if (bossinfo !== null) {
str += "\n\nReporting to: " + bossinfo.name;
}
}
return str;
}
// define the Node template
myDiagram.nodeTemplate =
$(go.Node, "Auto",
// the outer shape for the node, surrounding the Table
$(go.Shape, "Rectangle",
{ stroke: null, strokeWidth: 0 },
/* reddish if highlighted, blue otherwise */
new go.Binding("fill", "isHighlighted", function(h) { return h ? "#F44336" : "#A7E7FC"; }).ofObject()),
// a table to contain the different parts of the node
$(go.Panel, "Table",
{ margin: 6, maxSize: new go.Size(200, NaN) },
// the two TextBlocks in column 0 both stretch in width
// but align on the left side
$(go.RowColumnDefinition,
{
column: 0,
stretch: go.GraphObject.Horizontal,
alignment: go.Spot.Left
}),
// the name
$(go.TextBlock,
{
row: 0, column: 0,
maxSize: new go.Size(160, NaN), margin: 2,
font: '500 16px Roboto, sans-serif',
alignment: go.Spot.Top
},
new go.Binding("text", "name")),
// the country flag
$(go.Picture,
{
row: 0, column: 1, margin: 2,
imageStretch: go.GraphObject.Uniform,
alignment: go.Spot.TopRight
},
// only set a desired size if a flag is also present:
new go.Binding("desiredSize", "nation", function(){ return new go.Size(34, 26) }),
new go.Binding("source", "nation", theNationFlagConverter)),
// the additional textual information
$(go.TextBlock,
{
row: 1, column: 0, columnSpan: 2,
font: "12px Roboto, sans-serif"
},
new go.Binding("text", "", theInfoTextConverter))
) // end Table Panel
); // end Node
// define the Link template, a simple orthogonal line
myDiagram.linkTemplate =
$(go.Link, go.Link.Orthogonal,
{ corner: 5, selectable: false },
$(go.Shape, { strokeWidth: 3, stroke: "#424242" } )); // dark gray, rounded corner links
// set up the nodeDataArray, describing each person/position
var nodeDataArray = [
{ key: 0, name: "Ban Ki-moon 반기문", nation: "South Korea", title: "Secretary-General of the United Nations", headOf: "Secretariat" },
{ key: 1, boss: 0, name: "Patricia O'Brien", nation: "Ireland", title: "Under-Secretary-General for Legal Affairs and United Nations Legal Counsel", headOf: "Office of Legal Affairs" },
{ key: 3, boss: 1, name: "Peter Taksøe-Jensen", nation: "Denmark", title: "Assistant Secretary-General for Legal Affairs" },
{ key: 9, boss: 3, name: "Other Employees" },
{ key: 4, boss: 1, name: "Maria R. Vicien - Milburn", nation: "Argentina", title: "General Legal Division Director", headOf: "General Legal Division" },
{ key: 10, boss: 4, name: "Other Employees" },
{ key: 5, boss: 1, name: "Václav Mikulka", nation: "Czech Republic", title: "Codification Division Director", headOf: "Codification Division" },
{ key: 11, boss: 5, name: "Other Employees" },
{ key: 6, boss: 1, name: "Sergei Tarassenko", nation: "Russia", title: "Division for Ocean Affairs and the Law of the Sea Director", headOf: "Division for Ocean Affairs and the Law of the Sea" },
{ key: 12, boss: 6, name: "Alexandre Tagore Medeiros de Albuquerque", nation: "Brazil", title: "Chairman of the Commission on the Limits of the Continental Shelf", headOf: "The Commission on the Limits of the Continental Shelf" },
{ key: 17, boss: 12, name: "Peter F. Croker", nation: "Ireland", title: "Chairman of the Committee on Confidentiality", headOf: "The Committee on Confidentiality" },
{ key: 31, boss: 17, name: "Michael Anselme Marc Rosette", nation: "Seychelles", title: "Vice Chairman of the Committee on Confidentiality" },
{ key: 32, boss: 17, name: "Kensaku Tamaki", nation: "Japan", title: "Vice Chairman of the Committee on Confidentiality" },
{ key: 33, boss: 17, name: "Osvaldo Pedro Astiz", nation: "Argentina", title: "Member of the Committee on Confidentiality" },
{ key: 34, boss: 17, name: "Yuri Borisovitch Kazmin", nation: "Russia", title: "Member of the Committee on Confidentiality" },
{ key: 18, boss: 12, name: "Philip Alexander Symonds", nation: "Australia", title: "Chairman of the Committee on provision of scientific and technical advice to coastal States", headOf: "Committee on provision of scientific and technical advice to coastal States"},
{ key: 35, boss: 18, name: "Emmanuel Kalngui", nation: "Cameroon", title: "Vice Chairman of the Committee on provision of scientific and technical advice to coastal States" },
{ key: 36, boss: 18, name: "Sivaramakrishnan Rajan", nation: "India", title: "Vice Chairman of the Committee on provision of scientific and technical advice to coastal States" },
{ key: 37, boss: 18, name: "Francis L. Charles", nation: "Trinidad and Tobago", title: "Member of the Committee on provision of scientific and technical advice to costal States"},
{ key: 38, boss: 18, name: "Mihai Silviu German", nation: "Romania", title: "Member of the Committee on provision of scientific and technical advice to costal States"},
{ key: 19, boss: 12, name: "Lawrence Folajimi Awosika", nation: "Nigeria", title: "Vice Chairman of the Commission on the Limits of the Continental Shelf" },
{ key: 20, boss: 12, name: "Harald Brekke", nation: "Norway", title: "Vice Chairman of the Commission on the Limits of the Continental Shelf" },
{ key: 21, boss: 12, name: "Yong-Ahn Park", nation: "South Korea", title: "Vice Chairman of the Commission on the Limits of the Continental Shelf" },
{ key: 22, boss: 12, name: "Abu Bakar Jaafar", nation: "Malaysia", title: "Chairman of the Editorial Committee", headOf: "Editorial Committee" },
{ key: 23, boss: 12, name: "Galo Carrera Hurtado", nation: "Mexico", title: "Chairman of the Training Committee", headOf: "Training Committee" },
{ key: 24, boss: 12, name: "Indurlall Fagoonee", nation: "Mauritius", title: "Member of the Commission on the Limits of the Continental Shelf" },
{ key: 25, boss: 12, name: "George Jaoshvili", nation: "Georgia", title: "Member of the Commission on the Limits of the Continental Shelf" },
{ key: 26, boss: 12, name: "Wenzhang Lu", nation: "China", title: "Member of the Commission on the Limits of the Continental Shelf" },
{ key: 27, boss: 12, name: "Isaac Owusu Orudo", nation: "Ghana", title: "Member of the Commission on the Limits of the Continental Shelf" },
{ key: 28, boss: 12, name: "Fernando Manuel Maia Pimentel", nation: "Portugal", title: "Member of the Commission on the Limits of the Continental Shelf" },
{ key: 7, boss: 1, name: "Renaud Sorieul", nation: "France", title: "International Trade Law Division Director", headOf: "International Trade Law Division" },
{ key: 13, boss: 7, name: "Other Employees" },
{ key: 8, boss: 1, name: "Annebeth Rosenboom", nation: "Netherlands", title: "Treaty Section Chief", headOf: "Treaty Section" },
{ key: 14, boss: 8, name: "Bradford Smith", nation: "United States", title: "Substantive Legal Issues Head", headOf: "Substantive Legal Issues" },
{ key: 29, boss: 14, name: "Other Employees" },
{ key: 15, boss: 8, name: "Andrei Kolomoets", nation: "Russia", title: "Technical/Legal Issues Head", headOf: "Technical/Legal Issues" },
{ key: 30, boss: 15, name: "Other Employees" },
{ key: 16, boss: 8, name: "Other Employees" },
{ key: 2, boss: 0, name: "Heads of Other Offices/Departments" }
];
// create the Model with data for the tree, and assign to the Diagram
myDiagram.model =
$(go.TreeModel,
{ nodeParentKeyProperty: "boss", // this property refers to the parent node data
nodeDataArray: nodeDataArray });
// Overview
myOverview =
$(go.Overview, "myOverviewDiv", // the HTML DIV element for the Overview
{ observed: myDiagram, contentAlignment: go.Spot.Center }); // tell it which Diagram to show and pan
}
// the Search functionality highlights all of the nodes that have at least one data property match a RegExp
function searchDiagram() { // called by button
var input = document.getElementById("mySearch");
if (!input) return;
input.focus();
// create a case insensitive RegExp from what the user typed
var regex = new RegExp(input.value, "i");
myDiagram.startTransaction("highlight search");
myDiagram.clearHighlighteds();
// search four different data properties for the string, any of which may match for success
if (input.value) { // empty string only clears highlighteds collection
var results = myDiagram.findNodesByExample({ name: regex },
{ nation: regex },
{ title: regex },
{ headOf: regex });
myDiagram.highlightCollection(results);
// try to center the diagram at the first node that was found
if (results.count > 0) myDiagram.centerRect(results.first().actualBounds);
}
myDiagram.commitTransaction("highlight search");
}
</script>
</head>
<body onload="init()">
<div id="sample" style="position: relative;">
<div id="myDiagramDiv" style="background-color: white; border: solid 1px black; width: 100%; height: 700px"></div>
<div id="myOverviewDiv"></div> <!-- Styled in a <style> tag at the top of the html page -->
<p>
This sample shows an organizational chart diagram and uses an in-laid GoJS <a>Overview</a> to aid the user in navigation.
The diagram uses a <a>TreeLayout</a> featuring <a>TreeLayout.StyleLastParents</a> to allow for different alignments on the last parents.
The data was taken from the UN web site in August 2009.
</p>
<p>
A search box demonstrates one way of finding and highlighting nodes whose data includes particular strings.
Note that one can see all of the highlighted nodes in the Overview.
</p>
<input type="search" id="mySearch" onkeypress="if (event.keyCode === 13) searchDiagram()" />
<button onclick="searchDiagram()">Search</button>
<p>
To learn how to build an org chart from scratch with GoJS, see the <a href="../learn/index.html">Getting Started tutorial</a>.
</p>
</div>
</body>
</html>