forked from zalando/tech-radar
-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
133 lines (111 loc) · 4.07 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
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>SaaS Tool Radar</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/papaparse@5.2.0/papaparse.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="radar.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght@500;600;700;800&family=Roboto:ital,wght@0,300;0,400;1,300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="radar.css">
</head>
<body>
<div class=header>
<h1>SaaS Tool Radar</h1>
<input type="file" onchange="parsecsv()" accept=".csv" id="file" />
<label for="file" class="btn">Load .csv</label>
</div>
<div class=radar-container>
<div id="container" class="svg-container">
<svg id="radar"></svg>
</div>
</div>
<div class=radar-container>
<div class=grid-container>
<div class=grid-column>
<h2>Invest</h2>
<p>Tools we have high confidence in to serve our purpose, also in the future. We want to encourage usage of and want to develop and research further. Thinking about what initiatives we can do to enhance the experience.</p>
</div>
<div class=grid-column>
<h2>Support</h2>
<p>These tools are commonly used within the company for productivity. They provide the foundation of applications we use to collaborate. However, at the moment, these tools are not being developed on further.</p>
</div>
<div class=grid-column>
<h2>Assess</h2>
<p>Tools and ideas worth exploring further, we see great potential in these products. We want to evaluate how they would fit in our workspace.</p>
</div>
<div class=grid-column>
<h2>Drop</h2>
<p>Tools we want to move away from. We rather avoid new projects being started in the tool and want to limit the usage over time to finally decommission the product entirely.</p>
</div>
</div>
</div>
<div class=radar-container>
<div class=dl-buttons>
<br/> <button type="button" class="button">download png</button>
</div>
</div>
<script>
radar_visualization(
[
{
"label": "Hello World",
"ring": 0,
"quadrant": 0,
"new": 1,
"trend": 1
},
{
"label": "Hello Again",
"ring": 1,
"quadrant": 1,
"new": 0,
"trend": -1
}
]
);
function parsecsv(){
var x = document.getElementById("file");
Papa.parse(x.files[0],
{header: true, dynamicTyping: true, skipEmptyLines: true, comments: true, complete: function(results)
{
radar_visualization(results.data)
}
})
};
</script>
<div id="crowbar-workspace"></div>
<script type="text/javascript" src="svg-crowbar-export.js"></script>
<script>
d3.select("button").on("click", download_png)
function download_png () {
var svg_el = d3.select("svg")
.attr("version", 1.1)
.attr("xmlns", "http://www.w3.org/2000/svg")
.node();
svg_crowbar(d3.select("#radar").node(), {
filename: "tool-radar.png",
width: 1600,
height: 1000,
crowbar_el: d3.select("#crowbar-workspace").node(),
})
}
</script>
<div class="footer">
<div class="footer-content">
<h2>What is the SaaS Tool Radar?</h2>
<p>
The SaaS Tool Radar is a tool to inspire and visualize our organization's tools for productivity. Based on the <a href="https://www.thoughtworks.com/radar">ThoughtWorks Tech Radar</a>, this radar sets out to establish a pulse of where we are heading and what tools we investing our time in.
</p>
<p>
The goal is to create a framework for describing, visualizing, and talking about SaaS applications internally.
It's a forever growing market of applications. Visualizing internally and publicly how you think regarding SaaS applications could be an exciting way to see where you are heading and where you want to be.
SaaS Tool Radar is forked from <a href="https://github.com/zalando/tech-radar">Zalando's Tech Radar</a> from which efforts this radar would not have existed.
</p>
<p>
<a href="https://github.com/vrklgn/saas-tool-radar">Github Repo</a>
</p>
</div>
</div>
</body>
</html>