UNPKG

gojs/extensionsJSM/Fishbone.html

Version:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8"/>
5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
6<meta name="description" content="TypeScript: Cause-and-effect diagrams using FishboneLayout, also known as Ishikawa or herringbone diagrams."/> 
7<link rel="stylesheet" href="../assets/css/style.css"/> 
8<!-- Copyright 1998-2021 by Northwoods Software Corporation. -->
9<title>Fishbone Layout</title>
10</head>
11
12<body>
<!-- This top nav is not part of the sample code -->
<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">
  <div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">
    <div class="md:pl-4">
      <a class="text-white hover:text-white no-underline hover:no-underline
      font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">
        <h1 class="mb-0 p-1 ">GoJS</h1>
      </a>
    </div>
    <button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">
      <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
        <path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
        <path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
      </svg>
    </button>
    <div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">
      <ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"
         target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"
         target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>
      </ul>
    </div>
  </div>
  <hr class="border-b border-gray-600 opacity-50 my-0 py-0" />
</nav>
<div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">
  <div id="navSide" class="flex flex-col w-full md:w-48 text-gray-700 bg-white flex-shrink-0"></div>
  <!-- * * * * * * * * * * * * * -->
  <!-- Start of GoJS sample code -->
  
51
  <div class="p-4 w-full">
<div id="sample">
  <div id="myDiagramDiv" style="height:550px;width:100%;border:1px solid black;"></div>
  <div id="buttons">
    <label>Layout:</label>
    <button id="fishbone">Fishbone</button>
    <button id="branching">Branching</button>
    <button id="normal">Normal</button>
  </div>
  <p>
    This sample shows a "fishbone" layout of a tree model of cause-and-effect relationships. This type of layout is often seen
    in root cause analysis, or RCA. The layout is defined in its own file, as <a href="FishboneLayout.ts">FishboneLayout.ts</a>.
    When using FishboneLayout the diagram uses FishboneLink in order to get custom routing for the links.
  </p>
  <p>
    The buttons each set the <a>Diagram.layout</a> within a transaction.
  </p>
</div>
70
<script type="module" id="code">
  import * as go from "../release/go-module.js";
  import { FishboneLayout, FishboneLink } from './FishboneLayout.js';
74
  if (window.goSamples) window.goSamples(); // init for these samples -- you don't need to call this
  const $ = go.GraphObject.make; // for conciseness in defining templates
77
  const myDiagram =
    $(go.Diagram, 'myDiagramDiv', // refers to its DIV HTML element by id
      { isReadOnly: true }); // do not allow the user to modify the diagram
81
      // define the normal node template, just some text
  myDiagram.nodeTemplate =
    $(go.Node,
      $(go.TextBlock,
        new go.Binding('text'),
        new go.Binding('font', '', convertFont))
    );
89
  function convertFont(data) {
      let size = data.size;
      if (size === undefined)
          size = 13;
      let weight = data.weight;
      if (weight === undefined)
          weight = '';
      return weight + ' ' + size + 'px sans-serif';
  }
99
  // This demo switches the Diagram.linkTemplate between the "normal" and the "fishbone" templates.
  // If you are only doing a FishboneLayout, you could just set Diagram.linkTemplate
  // to the template named "fishbone" here, and not switch templates dynamically.
  // define the non-fishbone link template
  myDiagram.linkTemplateMap.add('normal',
    $(go.Link,
      { routing: go.Link.Orthogonal, corner: 4 },
      $(go.Shape)
    ));
109
  // use this link template for fishbone layouts
  myDiagram.linkTemplateMap.add('fishbone',
    $(FishboneLink, // defined above
      $(go.Shape)
    ));
115
    // here is the structured data used to build the model
  const json = {
      'text': 'Incorrect Deliveries', 'size': 18, 'weight': 'Bold', 'causes': [
          {
              'text': 'Skills', 'size': 14, 'weight': 'Bold', 'causes': [
                  {
                      'text': 'knowledge', 'weight': 'Bold', 'causes': [
                          {
                              'text': 'procedures', 'causes': [
                                  { 'text': 'documentation' }
                              ]
                          },
                          { 'text': 'products' }
                      ]
                  },
                  { 'text': 'literacy', 'weight': 'Bold' }
              ]
          },
          {
              'text': 'Procedures', 'size': 14, 'weight': 'Bold', 'causes': [
                  {
                      'text': 'manual', 'weight': 'Bold', 'causes': [
                          { 'text': 'consistency' }
                      ]
                  },
                  {
                      'text': 'automated', 'weight': 'Bold', 'causes': [
                          { 'text': 'correctness' },
                          { 'text': 'reliability' }
                      ]
                  }
              ]
          },
          {
              'text': 'Communication', 'size': 14, 'weight': 'Bold', 'causes': [
                  { 'text': 'ambiguity', 'weight': 'Bold' },
                  {
                      'text': 'sales staff', 'weight': 'Bold', 'causes': [
                          {
                              'text': 'order details', 'causes': [
                                  { 'text': 'lack of knowledge' }
                              ]
                          }
                      ]
                  },
                  {
                      'text': 'telephone orders', 'weight': 'Bold', 'causes': [
                          { 'text': 'lack of information' }
                      ]
                  },
                  {
                      'text': 'picking slips', 'weight': 'Bold', 'causes': [
                          { 'text': 'details' },
                          { 'text': 'legibility' }
                      ]
                  }
              ]
          },
          {
              'text': 'Transport', 'size': 14, 'weight': 'Bold', 'causes': [
                  {
                      'text': 'information', 'weight': 'Bold', 'causes': [
                          { 'text': 'incorrect person' },
                          {
                              'text': 'incorrect addresses', 'causes': [
                                  {
                                      'text': 'customer data base', 'causes': [
                                          { 'text': 'not up-to-date' },
                                          { 'text': 'incorrect program' }
                                      ]
                                  }
                              ]
                          },
                          { 'text': 'incorrect dept' }
                      ]
                  },
                  {
                      'text': 'carriers', 'weight': 'Bold', 'causes': [
                          { 'text': 'efficiency' },
                          { 'text': 'methods' }
                      ]
                  }
              ]
          }
      ]
  };
202
  function walkJson(obj, arr) {
      const key = arr.length;
      obj.key = key;
      arr.push(obj);
      const children = obj.causes;
      if (children) {
          for (let i = 0; i < children.length; i++) {
              const o = children[i];
              o.parent = key; // reference to parent node data
              walkJson(o, arr);
          }
      }
  }
216
  // build the tree model
  const nodeDataArray = [];
  walkJson(json, nodeDataArray);
  myDiagram.model = new go.TreeModel(nodeDataArray);
  layoutFishbone();
222
  window.myDiagram = myDiagram; // Attach to the window for console debugging
224
  // use FishboneLayout and FishboneLink
  function layoutFishbone() {
      myDiagram.startTransaction('fishbone layout');
      myDiagram.linkTemplate = myDiagram.linkTemplateMap.getValue('fishbone');
      myDiagram.layout = go.GraphObject.make(FishboneLayout, {
          angle: 180,
          layerSpacing: 10,
          nodeSpacing: 20,
          rowSpacing: 10
      });
      myDiagram.commitTransaction('fishbone layout');
  }
  // make the layout a branching tree layout and use a normal link template
  function layoutBranching() {
      myDiagram.startTransaction('branching layout');
      myDiagram.linkTemplate = myDiagram.linkTemplateMap.getValue('normal');
      myDiagram.layout = go.GraphObject.make(go.TreeLayout, {
          angle: 180,
          layerSpacing: 20,
          alignment: go.TreeLayout.AlignmentBusBranching
      });
      myDiagram.commitTransaction('branching layout');
  }
  // make the layout a basic tree layout and use a normal link template
  function layoutNormal() {
      myDiagram.startTransaction('normal layout');
      myDiagram.linkTemplate = myDiagram.linkTemplateMap.getValue('normal');
      myDiagram.layout = go.GraphObject.make(go.TreeLayout, {
          angle: 180,
          breadthLimit: 1000,
          alignment: go.TreeLayout.AlignmentStart
      });
      myDiagram.commitTransaction('normal layout');
  }
259
  document.getElementById("fishbone").onclick = layoutFishbone;
  document.getElementById("branching").onclick = layoutBranching;
  document.getElementById("normal").onclick = layoutNormal;
</script>
  </div>
  <!-- * * * * * * * * * * * * * -->
  <!--  End of GoJS sample code  -->
</div>
268</body>
269<!--  This script is part of the gojs.net website, and is not needed to run the sample -->
270<script src="../assets/js/goSamples.js"></script>
271</html>

1	`<!DOCTYPE html>`
2	`<html lang="en">`
3	`<head>`
4	`<meta charset="utf-8"/>`
5	`<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>`
6	`<meta name="description" content="TypeScript: Cause-and-effect diagrams using FishboneLayout, also known as Ishikawa or herringbone diagrams."/>`
7	`<link rel="stylesheet" href="../assets/css/style.css"/>`
8	`<!-- Copyright 1998-2021 by Northwoods Software Corporation. -->`
9	`<title>Fishbone Layout</title>`
10	`</head>`
11
12	`<body>`
13	`<!-- This top nav is not part of the sample code -->`
14	`<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">`
15	`<div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">`
16	`<div class="md:pl-4">`
17	`<a class="text-white hover:text-white no-underline hover:no-underline`
18	`font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">`
19	`<h1 class="mb-0 p-1 ">GoJS</h1>`
20	`</a>`
21	`</div>`
22	`<button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">`
23	`<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">`
24	`<path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>`
25	`<path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>`
26	`</svg>`
27	`</button>`
28	`<div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">`
29	`<ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">`
30	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>`
31	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>`
32	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>`
33	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>`
34	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>`
35	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>`
36	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>`
37	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"`
38	`target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>`
39	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"`
40	`target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>`
41	`</ul>`
42	`</div>`
43	`</div>`
44	`<hr class="border-b border-gray-600 opacity-50 my-0 py-0" />`
45	`</nav>`
46	`<div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">`
47	`<div id="navSide" class="flex flex-col w-full md:w-48 text-gray-700 bg-white flex-shrink-0"></div>`
48	`<!-- * * * * * * * * * * * * * -->`
49	`<!-- Start of GoJS sample code -->`
50
51
52	`<div class="p-4 w-full">`
53	`<div id="sample">`
54	`<div id="myDiagramDiv" style="height:550px;width:100%;border:1px solid black;"></div>`
55	`<div id="buttons">`
56	`<label>Layout:</label>`
57	`<button id="fishbone">Fishbone</button>`
58	`<button id="branching">Branching</button>`
59	`<button id="normal">Normal</button>`
60	`</div>`
61	`<p>`
62	`This sample shows a "fishbone" layout of a tree model of cause-and-effect relationships. This type of layout is often seen`
63	`in root cause analysis, or RCA. The layout is defined in its own file, as <a href="FishboneLayout.ts">FishboneLayout.ts</a>.`
64	`When using FishboneLayout the diagram uses FishboneLink in order to get custom routing for the links.`
65	`</p>`
66	`<p>`
67	`The buttons each set the <a>Diagram.layout</a> within a transaction.`
68	`</p>`
69	`</div>`
70
71	`<script type="module" id="code">`
72	`import * as go from "../release/go-module.js";`
73	`import { FishboneLayout, FishboneLink } from './FishboneLayout.js';`
74
75	`if (window.goSamples) window.goSamples(); // init for these samples -- you don't need to call this`
76	`const $ = go.GraphObject.make; // for conciseness in defining templates`
77
78	`const myDiagram =`
79	`$(go.Diagram, 'myDiagramDiv', // refers to its DIV HTML element by id`
80	`{ isReadOnly: true }); // do not allow the user to modify the diagram`
81
82	`// define the normal node template, just some text`
83	`myDiagram.nodeTemplate =`
84	`$(go.Node,`
85	`$(go.TextBlock,`
86	`new go.Binding('text'),`
87	`new go.Binding('font', '', convertFont))`
88	`);`
89
90	`function convertFont(data) {`
91	`let size = data.size;`
92	`if (size === undefined)`
93	`size = 13;`
94	`let weight = data.weight;`
95	`if (weight === undefined)`
96	`weight = '';`
97	`return weight + ' ' + size + 'px sans-serif';`
98	`}`
99
100	`// This demo switches the Diagram.linkTemplate between the "normal" and the "fishbone" templates.`
101	`// If you are only doing a FishboneLayout, you could just set Diagram.linkTemplate`
102	`// to the template named "fishbone" here, and not switch templates dynamically.`
103	`// define the non-fishbone link template`
104	`myDiagram.linkTemplateMap.add('normal',`
105	`$(go.Link,`
106	`{ routing: go.Link.Orthogonal, corner: 4 },`
107	`$(go.Shape)`
108	`));`
109
110	`// use this link template for fishbone layouts`
111	`myDiagram.linkTemplateMap.add('fishbone',`
112	`$(FishboneLink, // defined above`
113	`$(go.Shape)`
114	`));`
115
116	`// here is the structured data used to build the model`
117	`const json = {`
118	`'text': 'Incorrect Deliveries', 'size': 18, 'weight': 'Bold', 'causes': [`
119	`{`
120	`'text': 'Skills', 'size': 14, 'weight': 'Bold', 'causes': [`
121	`{`
122	`'text': 'knowledge', 'weight': 'Bold', 'causes': [`
123	`{`
124	`'text': 'procedures', 'causes': [`
125	`{ 'text': 'documentation' }`
126	`]`
127	`},`
128	`{ 'text': 'products' }`
129	`]`
130	`},`
131	`{ 'text': 'literacy', 'weight': 'Bold' }`
132	`]`
133	`},`
134	`{`
135	`'text': 'Procedures', 'size': 14, 'weight': 'Bold', 'causes': [`
136	`{`
137	`'text': 'manual', 'weight': 'Bold', 'causes': [`
138	`{ 'text': 'consistency' }`
139	`]`
140	`},`
141	`{`
142	`'text': 'automated', 'weight': 'Bold', 'causes': [`
143	`{ 'text': 'correctness' },`
144	`{ 'text': 'reliability' }`
145	`]`
146	`}`
147	`]`
148	`},`
149	`{`
150	`'text': 'Communication', 'size': 14, 'weight': 'Bold', 'causes': [`
151	`{ 'text': 'ambiguity', 'weight': 'Bold' },`
152	`{`
153	`'text': 'sales staff', 'weight': 'Bold', 'causes': [`
154	`{`
155	`'text': 'order details', 'causes': [`
156	`{ 'text': 'lack of knowledge' }`
157	`]`
158	`}`
159	`]`
160	`},`
161	`{`
162	`'text': 'telephone orders', 'weight': 'Bold', 'causes': [`
163	`{ 'text': 'lack of information' }`
164	`]`
165	`},`
166	`{`
167	`'text': 'picking slips', 'weight': 'Bold', 'causes': [`
168	`{ 'text': 'details' },`
169	`{ 'text': 'legibility' }`
170	`]`
171	`}`
172	`]`
173	`},`
174	`{`
175	`'text': 'Transport', 'size': 14, 'weight': 'Bold', 'causes': [`
176	`{`
177	`'text': 'information', 'weight': 'Bold', 'causes': [`
178	`{ 'text': 'incorrect person' },`
179	`{`
180	`'text': 'incorrect addresses', 'causes': [`
181	`{`
182	`'text': 'customer data base', 'causes': [`
183	`{ 'text': 'not up-to-date' },`
184	`{ 'text': 'incorrect program' }`
185	`]`
186	`}`
187	`]`
188	`},`
189	`{ 'text': 'incorrect dept' }`
190	`]`
191	`},`
192	`{`
193	`'text': 'carriers', 'weight': 'Bold', 'causes': [`
194	`{ 'text': 'efficiency' },`
195	`{ 'text': 'methods' }`
196	`]`
197	`}`
198	`]`
199	`}`
200	`]`
201	`};`
202
203	`function walkJson(obj, arr) {`
204	`const key = arr.length;`
205	`obj.key = key;`
206	`arr.push(obj);`
207	`const children = obj.causes;`
208	`if (children) {`
209	`for (let i = 0; i < children.length; i++) {`
210	`const o = children[i];`
211	`o.parent = key; // reference to parent node data`
212	`walkJson(o, arr);`
213	`}`
214	`}`
215	`}`
216
217	`// build the tree model`
218	`const nodeDataArray = [];`
219	`walkJson(json, nodeDataArray);`
220	`myDiagram.model = new go.TreeModel(nodeDataArray);`
221	`layoutFishbone();`
222
223	`window.myDiagram = myDiagram; // Attach to the window for console debugging`
224
225	`// use FishboneLayout and FishboneLink`
226	`function layoutFishbone() {`
227	`myDiagram.startTransaction('fishbone layout');`
228	`myDiagram.linkTemplate = myDiagram.linkTemplateMap.getValue('fishbone');`
229	`myDiagram.layout = go.GraphObject.make(FishboneLayout, {`
230	`angle: 180,`
231	`layerSpacing: 10,`
232	`nodeSpacing: 20,`
233	`rowSpacing: 10`
234	`});`
235	`myDiagram.commitTransaction('fishbone layout');`
236	`}`
237	`// make the layout a branching tree layout and use a normal link template`
238	`function layoutBranching() {`
239	`myDiagram.startTransaction('branching layout');`
240	`myDiagram.linkTemplate = myDiagram.linkTemplateMap.getValue('normal');`
241	`myDiagram.layout = go.GraphObject.make(go.TreeLayout, {`
242	`angle: 180,`
243	`layerSpacing: 20,`
244	`alignment: go.TreeLayout.AlignmentBusBranching`
245	`});`
246	`myDiagram.commitTransaction('branching layout');`
247	`}`
248	`// make the layout a basic tree layout and use a normal link template`
249	`function layoutNormal() {`
250	`myDiagram.startTransaction('normal layout');`
251	`myDiagram.linkTemplate = myDiagram.linkTemplateMap.getValue('normal');`
252	`myDiagram.layout = go.GraphObject.make(go.TreeLayout, {`
253	`angle: 180,`
254	`breadthLimit: 1000,`
255	`alignment: go.TreeLayout.AlignmentStart`
256	`});`
257	`myDiagram.commitTransaction('normal layout');`
258	`}`
259
260	`document.getElementById("fishbone").onclick = layoutFishbone;`
261	`document.getElementById("branching").onclick = layoutBranching;`
262	`document.getElementById("normal").onclick = layoutNormal;`
263	`</script>`
264	`</div>`
265	`<!-- * * * * * * * * * * * * * -->`
266	`<!-- End of GoJS sample code -->`
267	`</div>`
268	`</body>`
269	`<!-- This script is part of the gojs.net website, and is not needed to run the sample -->`
270	`<script src="../assets/js/goSamples.js"></script>`
271	`</html>`