-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
121 lines (111 loc) · 7.65 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="Landscape map viewpoint visualisation and executable finite state machines." />
<meta name="robots" content="index, follow" />
<title>Landscape maps and executable state machines</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./style/steelbreeze.css">
<link rel="stylesheet" href="https://steelbreeze.net/landscape/style/landscape.css">
</head>
<body>
<header>
<div class="fixedWidth">
<nav>
<a href="." class="selected">
<h1>steelbreeze</h1>
</a>
</nav>
<nav>
<a href="./pivot">pivot</a>
<a href="./landscape">landscape</a>
<a href="./state">state</a>
</nav>
</div>
</header>
<main>
<div class="mainSection">
<div class="fixedWidth">
<article>
<h1>Landscape maps</h1>
<p>For many years as an Enterprise Architect I have been drawing landscape maps in Visio to
communicate
the health of a domain's application portfolio. While they are a valuable communication tool,
these
diagrams are time-consuming, complex to draw and ever-changing. The landscape
map visualisation tool at its simplest renders a table, splitting and joining table cells as
needed, but also provides functionality to optimise the axes ordering for maximum joined cells.
These diagrams conform to the Archimate landscape map viewpoint.</p>
</article>
<article class="widget">
<table id="landscapeTarget"></table>
</article>
<article>
<p>Landscape maps are a technique for visualizing enterprise architectures. They present
architectural
elements in the form of an easy to understand 2D map. A landscape map view on architectures
provides
non-technical stakeholders with a high-level overview, without burdening them with
technicalities of
architectural drawings.</p>
<p>For a more in-depth example, including a time-dimension, see the projet page.</p>
<p>Links: <a href="/landscape">Project</a>; <a
href="https://github.com/steelbreeze/landscape">GitHub</a>; <a
href="https://pubs.opengroup.org/architecture/archimate2-doc/chap08.html#_Toc371945248">Archimate</a>.
</p>
</article>
</div>
</div>
<div class="mainSection">
<div class="fixedWidth">
<article>
<h1>Pivot tables</h1>
<p>The pivot table library is a spin-off project from the landscape library. It provides a
minimalist pivot table capability, slicing data into cells defined by two dimensions. The
resultant data can be aggregated with some basic numerical aggregates, or other queries applied
such as those used in the landscape library to present subsets of the source data.</p>
<p>Links: <a href="/pivot">Project</a>; <a href="https://github.com/steelbreeze/pivot">GitHub</a>.
</p>
</article>
<article>
<h1>Executable state machines</h1>
<p>Finite state machines are a staple of computer science theory, yet this rigorous analysis
discipline
rarely finds its way into application code. The last project I ran used executable finite state
machines in order to manage its business process as it had a wider variety of external event
sources
with non-deterministic sequencing of events.</p>
<p>Links: <a href="/state">Project</a>; <a href="https://github.com/steelbreeze/state">GitHub</a>.
</p>
</article>
</div>
</div>
</main>
<html-include href="/components/footer.html"></html-include>
<script src = "/components/html-include.js"></script>
<script src="https://steelbreeze.net/landscape/dist/render.min.js"></script>
<script type="module">
import * as pivot from 'https://cdn.skypack.dev/pin/@steelbreeze/[email protected]/mode=imports,min/optimized/@steelbreeze/pivot.js';
import * as landscape from 'https://cdn.skypack.dev/pin/@steelbreeze/[email protected]/mode=imports,min/optimized/@steelbreeze/landscape.js';
// source data
const data = [{ "Name": "Thunderhead ONE", "Supplier": "Thunderhead", "Capability": "Confirmations", "Product": "FX", "Status": "green" }, { "Name": "Thunderhead ONE", "Supplier": "Thunderhead", "Capability": "Confirmations", "Product": "MM", "Status": "green" }, { "Name": "Thunderhead ONE", "Supplier": "Thunderhead", "Capability": "Confirmations", "Product": "Rates", "Status": "green" }, { "Name": "Thunderhead ONE", "Supplier": "Thunderhead", "Capability": "Confirmations", "Product": "Credit", "Status": "green" }, { "Name": "Thunderhead ONE", "Supplier": "Thunderhead", "Capability": "Confirmations", "Product": "Equities", "Status": "green" }, { "Name": "Azure API GW", "Supplier": "Microsoft", "Capability": "Market gateway", "Product": "MM", "Status": "green" }, { "Name": "Azure API GW", "Supplier": "Microsoft", "Capability": "Market gateway", "Product": "Credit", "Status": "green" }, { "Name": "Fusion Summit", "Supplier": "Finastra", "Capability": "Market gateway", "Product": "FX", "Status": "green" }, { "Name": "Fusion Summit", "Supplier": "Finastra", "Capability": "Order execution", "Product": "FX", "Status": "green" }, { "Name": "Fusion Summit", "Supplier": "Finastra", "Capability": "Market gateway", "Product": "Rates", "Status": "green" }, { "Name": "Fusion Summit", "Supplier": "Finastra", "Capability": "Order execution", "Product": "Rates", "Status": "green" }, { "Name": "Wall St", "Supplier": "Wall Street Systems", "Capability": "Order management", "Product": "MM", "Status": "green" }, { "Name": "Wall St", "Supplier": "Wall Street Systems", "Capability": "Order execution", "Product": "FX", "Status": "green" }, { "Name": "Wall St", "Supplier": "Wall Street Systems", "Capability": "Order execution", "Product": "MM", "Status": "green" }, { "Name": "Wall St", "Supplier": "Wall Street Systems", "Capability": "Order management", "Product": "FX", "Status": "green" }, { "Name": "MX II", "Supplier": "Murex", "Capability": "Order execution", "Product": "Credit", "Status": "amber" }, { "Name": "MX II", "Supplier": "Murex", "Capability": "Order execution", "Product": "MM", "Status": "amber" }, { "Name": "Kdb+", "Supplier": "Kx Systems", "Capability": "Order management", "Product": "Equities", "Status": "green" }, { "Name": "Kdb+", "Supplier": "Kx Systems", "Capability": "Market gateway", "Product": "Equities", "Status": "green" }, { "Name": "Kdb+", "Supplier": "Kx Systems", "Capability": "Confirmations", "Product": "Equities", "Status": "red" }, { "Name": "Kdb+", "Supplier": "Kx Systems", "Capability": "Order execution", "Product": "Equities", "Status": "green" }];
// create pre-defined dimensions
const products = ["Rates", "FX", "MM", "Credit", "Equities"].map(landscape.criteria("Product"));
const capabilities = ["Market gateway", "Order execution", "Order management", "Confirmations"].map(landscape.criteria("Capability"));
// pivot the data using the product and capability dimensions as the x and y axes respectively
const cube = pivot.pivot(data, capabilities, products);
// create a table of data from the pivot cube
const table = landscape.table(cube, { y: capabilities, x: products }, key, true);
// merge cells on both axes where possible
landscape.merge(table, true, true);
// render the table in a designated element
document.getElementById('landscapeTarget').replaceWith(render.table(table, 'landscapeTarget', 'landscape'));
function key(record) {
return { key: "Name", value: record["Name"], style: record.Status };
}
</script>
</body>
</html>