-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
134 lines (117 loc) · 5.82 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
134
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="description"
content="Printify Tech Radar: a tool to visualize technology choices, inspire and support Engineering teams at Printify to pick the best technologies for new projects">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Printify Tech Radar</title>
<link rel="shortcut icon" href="https://printify.com/wp-content/themes/printify/assets/favicon-144.png">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://zalando.github.io/tech-radar/release/radar-0.8.js"></script>
<link rel="stylesheet" href="radar.css">
</head>
<body>
<svg id="radar"></svg>
<script>
fetch('data.json').then(function (response) {
return response.json();
}).then(function (data) {
const prefersDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
const radarColors = prefersDarkMode
? {
background: "#1d2125", // Dark background
grid: '#444', // Darker grid lines
inactive: "#777" // Darker inactive blips
}
: {
background: "#ffffff", // Light background
grid: '#ddd', // Light grid lines
inactive: "#ddd" // Light inactive blips
};
const MOVEMENT_VALUES = {
'in': 1,
'out': -1,
'still': 0
};
const quadrantIndexes = Object.fromEntries(data.quadrants.map((quadrant, index) => [quadrant.toLowerCase(), index]));
const ringIndexes = Object.fromEntries(data.rings.map((ring, index) => [ring.name.toLowerCase(), index]));
radar_visualization({
svg_id: "radar",
width: 1450,
height: 1000,
colors: radarColors,
title: data.title,
date: data.date,
quadrants: [
{ name: data.quadrants[0] },
{ name: data.quadrants[1] },
{ name: data.quadrants[2] },
{ name: data.quadrants[3] },
],
rings: [
{ name: data.rings[0].name, color: data.rings[0].color },
{ name: data.rings[1].name, color: data.rings[1].color },
{ name: data.rings[2].name, color: data.rings[2].color },
{ name: data.rings[3].name, color: data.rings[3].color },
],
print_layout: true,
links_in_new_tabs: true,
entries: data.blips.map(function (blip) {
return {
label: blip.name,
quadrant: quadrantIndexes[blip.quadrant.toLowerCase()],
ring: ringIndexes[blip.ring.toLowerCase()],
moved: MOVEMENT_VALUES[blip.moved.toLowerCase()],
link: blip.link
};
})
});
document.getElementById("1st-circle").innerHTML = data.rings[0].description;
document.getElementById("2nd-circle").innerHTML = data.rings[1].description;
document.getElementById("3rd-circle").innerHTML = data.rings[2].description;
document.getElementById("4th-circle").innerHTML = data.rings[3].description;
}).catch(function (error) {
console.error('Error:', error);
});
</script>
<table>
<tr>
<td>
<h3>What is the Tech Radar?</h3>
<p>
The Printify Tech Radar is a list of technologies, complemented by an assessment result, called
<em>ring assignment</em>. We use four rings with the following semantics:
</p>
<ul>
<li id="1st-circle"></li>
<li id="2nd-circle"></li>
<li id="3rd-circle"></li>
<li id="4th-circle"></li>
</ul>
</td>
<td>
<h3>What is the purpose?</h3>
<p>
The Tech Radar is a tool to inspire and support Engineering teams at Printify to pick the best
technologies for new projects; it provides a platform to share knowledge and experience in
technologies, to reflect on technology decisions and continuously evolve our technology landscape.
Based on the <a href="https://www.thoughtworks.com/radar">pioneering work of ThoughtWorks</a>, our
Tech Radar sets out the changes in technologies that are interesting in software development —
changes that we think our engineering teams should pay attention to and use in their projects.
</p>
<h3>How do we maintain it?</h3>
<p>
The Tech Radar is maintained by our <em>Architecture Council</em> — who facilitate and drive
the technology selection discussions at Printify across the Engineering Community. Assignment of
technologies to rings is the outcome of ring change proposals, which are discussed and voted on. The
Tech Radar is open for contribution for all Engineering teams at Printify and depends on their
active
participation to share lessons learned, pitfalls, and contribute to good practices on using the
technologies.<br />
</p>
</td>
</tr>
</table>
</body>
</html>