GoJS/samples/familyTree.html at master · danielpenagos/GoJS · 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
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
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Family Tree (British)</title>
  <meta name="description" content="A family tree diagram of British royalty." />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Copyright 1998-2020 by Northwoods Software Corporation. -->

  <script src="../release/go.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700' rel='stylesheet' type='text/css'>
  <script src="../assets/js/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",  // must be the ID or reference to div
          {
            "toolManager.hoverDelay": 100,  // 100 milliseconds instead of the default 850
            allowCopy: false,
            layout:  // create a TreeLayout for the family tree
              $(go.TreeLayout,
                { angle: 90, nodeSpacing: 10, layerSpacing: 40, layerStyle: go.TreeLayout.LayerUniform })
          });

      var bluegrad = '#90CAF9';
      var pinkgrad = '#F48FB1';

      // Set up a Part as a legend, and place it directly on the diagram
      myDiagram.add(
        $(go.Part, "Table",
          { position: new go.Point(300, 10), selectable: false },
          $(go.TextBlock, "Key",
            { row: 0, font: "700 14px Droid Serif, sans-serif" }),  // end row 0
          $(go.Panel, "Horizontal",
            { row: 1, alignment: go.Spot.Left },
            $(go.Shape, "Rectangle",
              { desiredSize: new go.Size(30, 30), fill: bluegrad, margin: 5 }),
            $(go.TextBlock, "Males",
              { font: "700 13px Droid Serif, sans-serif" })
          ),  // end row 1
          $(go.Panel, "Horizontal",
            { row: 2, alignment: go.Spot.Left },
            $(go.Shape, "Rectangle",
              { desiredSize: new go.Size(30, 30), fill: pinkgrad, margin: 5 }),
            $(go.TextBlock, "Females",
              { font: "700 13px Droid Serif, sans-serif" })
          )  // end row 2
        ));

      // get tooltip text from the object's data
      function tooltipTextConverter(person) {
        var str = "";
        str += "Born: " + person.birthYear;
        if (person.deathYear !== undefined) str += "\nDied: " + person.deathYear;
        if (person.reign !== undefined) str += "\nReign: " + person.reign;
        return str;
      }

      // define tooltips for nodes
      var tooltiptemplate =
        $("ToolTip",
          { "Border.fill": "whitesmoke", "Border.stroke": "black" },
          $(go.TextBlock,
            {
              font: "bold 8pt Helvetica, bold Arial, sans-serif",
              wrap: go.TextBlock.WrapFit,
              margin: 5
            },
            new go.Binding("text", "", tooltipTextConverter))
        );

      // define Converters to be used for Bindings
      function genderBrushConverter(gender) {
        if (gender === "M") return bluegrad;
        if (gender === "F") return pinkgrad;
        return "orange";
      }

      // replace the default Node template in the nodeTemplateMap
      myDiagram.nodeTemplate =
        $(go.Node, "Auto",
          { deletable: false, toolTip: tooltiptemplate },
          new go.Binding("text", "name"),
          $(go.Shape, "Rectangle",
            {
              fill: "lightgray",
              stroke: null, strokeWidth: 0,
              stretch: go.GraphObject.Fill,
              alignment: go.Spot.Center
            },
            new go.Binding("fill", "gender", genderBrushConverter)),
          $(go.TextBlock,
            {
              font: "700 12px Droid Serif, sans-serif",
              textAlign: "center",
              margin: 10, maxSize: new go.Size(80, NaN)
            },
            new go.Binding("text", "name"))
        );

      // define the Link template
      myDiagram.linkTemplate =
        $(go.Link,  // the whole link panel
          { routing: go.Link.Orthogonal, corner: 5, selectable: false },
          $(go.Shape, { strokeWidth: 3, stroke: '#424242' }));  // the gray link shape

      // here's the family data
      var nodeDataArray = [
        { key: 0, name: "George V", gender: "M", birthYear: "1865", deathYear: "1936", reign: "1910-1936" },
        { key: 1, parent: 0, name: "Edward VIII", gender: "M", birthYear: "1894", deathYear: "1972", reign: "1936" },
        { key: 2, parent: 0, name: "George VI", gender: "M", birthYear: "1895", deathYear: "1952", reign: "1936-1952" },
        { key: 7, parent: 2, name: "Elizabeth II", gender: "F", birthYear: "1926", reign: "1952-" },
        { key: 16, parent: 7, name: "Charles, Prince of Wales", gender: "M", birthYear: "1948" },
        { key: 38, parent: 16, name: "Prince William", gender: "M", birthYear: "1982" },
        { key: 39, parent: 16, name: "Prince Harry of Wales", gender: "M", birthYear: "1984" },
        { key: 17, parent: 7, name: "Anne, Princess Royal", gender: "F", birthYear: "1950" },
        { key: 40, parent: 17, name: "Peter Phillips", gender: "M", birthYear: "1977" },
        { key: 82, parent: 40, name: "Savannah Phillips", gender: "F", birthYear: "2010" },
        { key: 41, parent: 17, name: "Zara Phillips", gender: "F", birthYear: "1981" },
        { key: 18, parent: 7, name: "Prince Andrew", gender: "M", birthYear: "1960" },
        { key: 42, parent: 18, name: "Princess Beatrice of York", gender: "F", birthYear: "1988" },
        { key: 43, parent: 18, name: "Princess Eugenie of York", gender: "F", birthYear: "1990" },
        { key: 19, parent: 7, name: "Prince Edward", gender: "M", birthYear: "1964" },
        { key: 44, parent: 19, name: "Lady Louise Windsor", gender: "F", birthYear: "2003" },
        { key: 45, parent: 19, name: "James, Viscount Severn", gender: "M", birthYear: "2007" },
        { key: 8, parent: 2, name: "Princess Margaret", gender: "F", birthYear: "1930", deathYear: "2002" },
        { key: 20, parent: 8, name: "David Armstrong-Jones", gender: "M", birthYear: "1961" },
        { key: 21, parent: 8, name: "Lady Sarah Chatto", gender: "F", birthYear: "1964" },
        { key: 46, parent: 21, name: "Samuel Chatto", gender: "M", birthYear: "1996" },
        { key: 47, parent: 21, name: "Arthur Chatto", gender: "M", birthYear: "1999" },
        { key: 3, parent: 0, name: "Mary, Princess Royal", gender: "F", birthYear: "1897", deathYear: "1965" },
        { key: 9, parent: 3, name: "George Lascelles", gender: "M", birthYear: "1923", deathYear: "2011" },
        { key: 22, parent: 9, name: "David Lascelles", gender: "M", birthYear: "1950" },
        { key: 48, parent: 22, name: "Emily Shard", gender: "F", birthYear: "1975" },
        { key: 49, parent: 22, name: "Benjamin Lascelles", gender: "M", birthYear: "1978" },
        { key: 50, parent: 22, name: "Alexander Lascelles", gender: "M", birthYear: "1980" },
        { key: 51, parent: 22, name: "Edward Lascelles", gender: "M", birthYear: "1982" },
        { key: 23, parent: 9, name: "James Lascelles", gender: "M", birthYear: "1953" },
        { key: 52, parent: 23, name: "Sophie Lascelles", gender: "F", birthYear: "1973" },
        { key: 53, parent: 23, name: "Rowan Lascelles", gender: "M", birthYear: "1977" },
        { key: 54, parent: 23, name: "Tanit Lascelles", gender: "F", birthYear: "1981" },
        { key: 55, parent: 23, name: "Tewa Lascelles", gender: "M", birthYear: "1985" },
        { key: 24, parent: 9, name: "Jeremy Lascelles", gender: "M", birthYear: "1955" },
        { key: 56, parent: 24, name: "Thomas Lascelles", gender: "M", birthYear: "1982" },
        { key: 57, parent: 24, name: "Ellen Lascelles", gender: "F", birthYear: "1984" },
        { key: 58, parent: 24, name: "Amy Lascelles", gender: "F", birthYear: "1986" },
        { key: 59, parent: 24, name: "Tallulah Lascelles", gender: "F", birthYear: "2005" },
        { key: 25, parent: 9, name: "Mark Lascelles", gender: "M", birthYear: "1964" },
        { key: 60, parent: 25, name: "Charlotte Lascelles", gender: "F", birthYear: "1996" },
        { key: 61, parent: 25, name: "Imogen Lascelles", gender: "F", birthYear: "1998" },
        { key: 62, parent: 25, name: "Miranda Lascelles", gender: "F", birthYear: "2000" },
        { key: 10, parent: 3, name: "Gerald Lascelles", gender: "M", birthYear: "1924", deathYear: "1998" },
        { key: 26, parent: 10, name: "Henry Lascelles", gender: "M", birthYear: "1953" },
        { key: 63, parent: 26, name: "Maximilian Lascelles", gender: "M", birthYear: "1991" },
        { key: 27, parent: 10, name: "Martin David Lascelles", gender: "M", birthYear: "1962" },
        { key: 64, parent: 27, name: "Alexander Lascelles", gender: "M", birthYear: "2002" },
        { key: 4, parent: 0, name: "Prince Henry", gender: "M", birthYear: "1900", deathYear: "1974" },
        { key: 11, parent: 4, name: "Prince William of Gloucester", gender: "M", birthYear: "1941", deathYear: "1972" },
        { key: 12, parent: 4, name: "Prince Richard", gender: "M", birthYear: "1944" },
        { key: 28, parent: 12, name: "Alexander Windsor", gender: "M", birthYear: "1974" },
        { key: 65, parent: 28, name: "Xan Windsor", gender: "M", birthYear: "2007" },
        { key: 66, parent: 28, name: "Lady Cosima Windsor", gender: "F", birthYear: "2010" },
        { key: 29, parent: 12, name: "Lady Davina Lewis", gender: "F", birthYear: "1977" },
        { key: 67, parent: 29, name: "Senna Lewis", gender: "F", birthYear: "2010" },
        { key: 30, parent: 12, name: "Lady Rose Gilman", gender: "F", birthYear: "1980" },
        { key: 68, parent: 30, name: "Lyla Gilman", gender: "F", birthYear: "2010" },
        { key: 5, parent: 0, name: "Prince George", gender: "M", birthYear: "1902", deathYear: "1942" },
        { key: 13, parent: 5, name: "Prince Edward", gender: "M", birthYear: "1935" },
        { key: 31, parent: 13, name: "George Windsor", gender: "M", birthYear: "1962" },
        { key: 69, parent: 31, name: "Edward Windsor", gender: "M", birthYear: "1988" },
        { key: 70, parent: 31, name: "Lady Marina-Charlotte Windsor", gender: "F", birthYear: "1992" },
        { key: 71, parent: 31, name: "Lady Amelia Windsor", gender: "F", birthYear: "1995" },
        { key: 32, parent: 13, name: "Lady Helen Taylor", gender: "F", birthYear: "1964" },
        { key: 72, parent: 32, name: "Columbus Taylor", gender: "M", birthYear: "1994" },
        { key: 73, parent: 32, name: "Cassius Taylor", gender: "M", birthYear: "1996" },
        { key: 74, parent: 32, name: "Eloise Taylor", gender: "F", birthYear: "2003" },
        { key: 75, parent: 32, name: "Estella Taylor", gender: "F", birthYear: "2004" },
        { key: 33, parent: 13, name: "Lord Nicholas Windsor", gender: "M", birthYear: "1970" },
        { key: 76, parent: 33, name: "Albert Windsor", gender: "M", birthYear: "2007" },
        { key: 77, parent: 33, name: "Leopold Windsor", gender: "M", birthYear: "2009" },
        { key: 14, parent: 5, name: "Princess Alexandra", gender: "F", birthYear: "1936" },
        { key: 34, parent: 14, name: "James Ogilvy", gender: "M", birthYear: "1964" },
        { key: 78, parent: 34, name: "Flora Ogilvy", gender: "F", birthYear: "1994" },
        { key: 79, parent: 34, name: "Alexander Ogilvy", gender: "M", birthYear: "1996" },
        { key: 35, parent: 14, name: "Marina Ogilvy", gender: "F", birthYear: "1966" },
        { key: 80, parent: 35, name: "Zenouska Mowatt", gender: "F", birthYear: "1990" },
        { key: 81, parent: 35, name: "Christian Mowatt", gender: "M", birthYear: "1993" },
        { key: 15, parent: 5, name: "Prince Michael of Kent", gender: "M", birthYear: "1942" },
        { key: 36, parent: 15, name: "Lord Frederick Windsor", gender: "M", birthYear: "1979" },
        { key: 37, parent: 15, name: "Lady Gabriella Windsor", gender: "F", birthYear: "1981" },
        { key: 6, parent: 0, name: "Prince John", gender: "M", birthYear: "1905", deathYear: "1919" }
      ];

      // create the model for the family tree
      myDiagram.model = new go.TreeModel(nodeDataArray);

      document.getElementById('zoomToFit').addEventListener('click', function() {
        myDiagram.commandHandler.zoomToFit();
      });

      document.getElementById('centerRoot').addEventListener('click', function() {
        myDiagram.scale = 1;
        myDiagram.scrollToRect(myDiagram.findNodeForKey(0).actualBounds);
      });

    }
  </script>
</head>
<body onload="init()">
<div id="sample">
  <div id="myDiagramDiv" style="background-color: white; border: solid 1px black; width: 100%; height: 550px"></div>
  <p><button id="zoomToFit">Zoom to Fit</button> <button id="centerRoot">Center on root</button></p>
  <p>This family tree diagram shows several generations of British royalty beginning with George V (1865-1936).</p>
  <p><a>Node</a> data contains information about gender, and a data binding assigns a corresponding color. Additional data is displayed with a tooltip. A key is placed on the diagram using a <a>Panel,Table</a>.</p>
  <p>For a variation of this tree, see the <a href="familyTreeJP.html">Japanese family tree sample</a>.</p>
  <p>For a more complex family tree see the <a href="genogram.html">genogram sample</a>.</p>
</div>
</body>
</html>