+
+
+ What is the Tech Radar?
+
+
+ The Kloia Tech Radar is a list of technologies, complemented by an assessment result, called ring assignment. We use four rings with the following semantics:
+
+
+
+ - ADOPT — Technologies we have high confidence in to serve our purpose, also in large scale. Technologies with a usage culture in our Kloia production environment, low risk and recommended to be widely used.
+ - TRIAL — Technologies that we have seen work with success in project work to solve a real problem; first serious usage experience that confirm benefits and can uncover limitations. TRIAL technologies are slightly more risky; some engineers in our organization walked this path and will share knowledge and experiences.
+ - ASSESS — Technologies that are promising and have clear potential value-add for us; technologies worth to invest some research and prototyping efforts in to see if it has impact. ASSESS technologies have higher risks; they are often brand new and highly unproven in our organisation. You will find some engineers that have knowledge in the technology and promote it, you may even find teams that have started a prototyping effort.
+ - HOLD — Technologies not recommended to be used for new projects. Technologies that we think are not (yet) worth to (further) invest in. HOLD technologies should not be used for new projects, but usually can be continued for existing projects.
+
+
+ |
+
+ What is the purpose?
+
+
+ The Tech Radar is a tool to inspire and support engineering teams at Kloia 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 pioneering work of ThoughtWorks, 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 consider using in their projects.
+
+
+ How do we maintain it?
+
+
+ The Tech Radar is maintained by the Kloia Technologists Guild — an open group of senior Kloia technologists committed to devote time to the Tech Radar purpose. The guild self organises to maintain the Tech Radar documents, including this public version. Assignment of technologies to rings is the outcome of ring change proposals, which are discussed and voted on in guild meetings. The Tech Radar depends on active participation and input from all engineering teams at Kloia.
+
+
+ |
+
-
+
\ No newline at end of file
diff --git a/docs/radar.js b/docs/radar.js
index c817d5d..db6ec20 100644
--- a/docs/radar.js
+++ b/docs/radar.js
@@ -1,6 +1,6 @@
// The MIT License (MIT)
-// Copyright (c) 2017 Zalando SE
+// Copyright (c) 2017-2024 Zalando SE
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
@@ -191,16 +191,21 @@ function radar_visualization(config) {
].join(" ");
}
+ // adjust with config.scale.
+ config.scale = config.scale || 1;
+ var scaled_width = config.width * config.scale;
+ var scaled_height = config.height * config.scale;
+
var svg = d3.select("svg#" + config.svg_id)
.style("background-color", config.colors.background)
- .attr("width", config.width)
- .attr("height", config.height);
+ .attr("width", scaled_width)
+ .attr("height", scaled_height);
var radar = svg.append("g");
if ("zoomed_quadrant" in config) {
svg.attr("viewBox", viewbox(config.zoomed_quadrant));
} else {
- radar.attr("transform", translate(config.width / 2, config.height / 2));
+ radar.attr("transform", translate(scaled_width / 2, scaled_height / 2).concat(`scale(${config.scale})`));
}
var grid = radar.append("g");
@@ -245,9 +250,10 @@ function radar_visualization(config) {
.text(config.rings[i].name)
.attr("y", -rings[i].radius + 62)
.attr("text-anchor", "middle")
- .style("fill", "#c9c9c9")
- .style("font-family", "Roboto, Helvetica")
- .style("font-size", 42)
+ .style("fill", config.rings[i].color)
+ .style("opacity", 0.35)
+ .style("font-family", "Arial, Helvetica")
+ .style("font-size", "42px")
.style("font-weight", "bold")
.style("pointer-events", "none")
.style("user-select", "none");
@@ -255,7 +261,7 @@ function radar_visualization(config) {
}
function legend_transform(quadrant, ring, index=null) {
- var dx = ring < 2 ? 0 : 120;
+ var dx = ring < 2 ? 0 : 140;
var dy = (index == null ? -16 : index * 12);
if (ring % 2 === 1) {
dy = dy + 36 + segmented[quadrant][ring-1].length * 12;
@@ -269,16 +275,22 @@ function radar_visualization(config) {
// draw title and legend (only in print layout)
if (config.print_layout) {
- // title]
-
- // NOTE: Here is commented for Kloia Website
-
- // radar.append("text")
- // .attr("transform", translate(title_offset.x, title_offset.y))
- // .text(config.title)
- // .style("font-family", "Arial, Helvetica")
- // .style("fill", "#002A61")
- // .style("font-size", "34");
+ // title
+ radar.append("text")
+ .attr("transform", translate(title_offset.x, title_offset.y))
+ .text(config.title)
+ .style("font-family", "Arial, Helvetica")
+ .style("font-size", "30")
+ .style("font-weight", "bold")
+
+ // date
+ radar
+ .append("text")
+ .attr("transform", translate(title_offset.x, title_offset.y + 20))
+ .text(config.date || "")
+ .style("font-family", "Arial, Helvetica")
+ .style("font-size", "14")
+ .style("fill", "#999")
// footer
radar.append("text")
@@ -286,8 +298,7 @@ function radar_visualization(config) {
.text("▲ moved up ▼ moved down")
.attr("xml:space", "preserve")
.style("font-family", "Arial, Helvetica")
- .style("fill", "#002A61")
- .style("font-size", "12");
+ .style("font-size", "10px");
// legend
var legend = radar.append("g");
@@ -299,27 +310,34 @@ function radar_visualization(config) {
))
.text(config.quadrants[quadrant].name)
.style("font-family", "Arial, Helvetica")
- .style("fill", "#002A61")
- .style("font-size", "24");
+ .style("font-size", "18px")
+ .style("font-weight", "bold");
for (var ring = 0; ring < 4; ring++) {
legend.append("text")
.attr("transform", legend_transform(quadrant, ring))
.text(config.rings[ring].name)
.style("font-family", "Arial, Helvetica")
- .style("font-size", "12")
- .style("fill", "#002A61")
- .style("font-weight", "bold");
+ .style("font-size", "12px")
+ .style("font-weight", "bold")
+ .style("fill", config.rings[ring].color);
legend.selectAll(".legend" + quadrant + ring)
.data(segmented[quadrant][ring])
.enter()
+ .append("a")
+ .attr("href", function (d, i) {
+ return d.link ? d.link : "#"; // stay on same page if no link was provided
+ })
+ // Add a target if (and only if) there is a link and we want new tabs
+ .attr("target", function (d, i) {
+ return (d.link && config.links_in_new_tabs) ? "_blank" : null;
+ })
.append("text")
- .attr("fill", "#002A61")
.attr("transform", function(d, i) { return legend_transform(quadrant, ring, i); })
.attr("class", "legend" + quadrant + ring)
.attr("id", function(d, i) { return "legendItem" + d.id; })
.text(function(d, i) { return d.id + ". " + d.label; })
.style("font-family", "Arial, Helvetica")
- .style("font-size", "11")
+ .style("font-size", "11px")
.on("mouseover", function(d) { showBubble(d); highlightLegendItem(d); })
.on("mouseout", function(d) { hideBubble(d); unhighlightLegendItem(d); });
}
@@ -376,12 +394,14 @@ function radar_visualization(config) {
function highlightLegendItem(d) {
var legendItem = document.getElementById("legendItem" + d.id);
- legendItem.style.fontSize = "15px";
+ legendItem.setAttribute("filter", "url(#solid)");
+ legendItem.setAttribute("fill", "white");
}
function unhighlightLegendItem(d) {
var legendItem = document.getElementById("legendItem" + d.id);
- legendItem.style.fontSize = "12px";
+ legendItem.removeAttribute("filter");
+ legendItem.removeAttribute("fill");
}
// draw blips on radar
@@ -399,9 +419,13 @@ function radar_visualization(config) {
var blip = d3.select(this);
// blip link
- if (!config.print_layout && d.active && d.hasOwnProperty("link")) {
+ if (d.active && Object.prototype.hasOwnProperty.call(d, "link") && d.link) {
blip = blip.append("a")
.attr("xlink:href", d.link);
+
+ if (config.links_in_new_tabs) {
+ blip.attr("target", "_blank");
+ }
}
// blip shape
@@ -428,7 +452,7 @@ function radar_visualization(config) {
.attr("text-anchor", "middle")
.style("fill", "#fff")
.style("font-family", "Arial, Helvetica")
- .style("font-size", function(d) { return blip_text.length > 2 ? "8" : "9"; })
+ .style("font-size", function(d) { return blip_text.length > 2 ? "8px" : "9px"; })
.style("pointer-events", "none")
.style("user-select", "none");
}
@@ -446,52 +470,5 @@ function radar_visualization(config) {
.nodes(config.entries)
.velocityDecay(0.19) // magic number (found by experimentation)
.force("collision", d3.forceCollide().radius(12).strength(0.85))
- .alpha(0.1)
- .alphaMin(0.2)
- .on("tick", ticked)
- .on("end", convertSvgToImage);
-
-}
-
-const getSvgDataUrl = (svgData) => {
- const canvas = document.createElement('canvas');
- const context = canvas.getContext('2d');
- const image = new Image();
-
- image.onload = () => {
- canvas.width = image.width;
- canvas.height = image.height;
- context.drawImage(image, 0, 0);
-
- try {
- const dataUrl = canvas.toDataURL('image/png');
- image.src = dataUrl;
- } catch (error) {
- console.error('Failed to convert SVG to image:', error);
- } finally {
- URL.revokeObjectURL(image.src);
- }
- };
-
- const blob = new Blob([svgData], { type: 'image/svg+xml' });
- image.src = URL.createObjectURL(blob);
-
- return image.src; // Return the data URL
-};
-
-
-const convertSvgToImage = () => {
- const svgElement = document.getElementById('radar');
- const svgData = new XMLSerializer().serializeToString(svgElement);
- const imageSource = getSvgDataUrl(svgData);
-
- const imageElement = new Image();
- imageElement.onload = () => {
- // Append the image element to the desired location in the DOM
- document.body.prepend(imageElement); // or any other DOM element you want to append to
- };
- imageElement.onerror = (error) => {
- console.error('Failed to load image:', error);
- };
- imageElement.src = imageSource;
-};
+ .on("tick", ticked);
+}
\ No newline at end of file
diff --git a/docs/release/radar-0.1.js b/docs/release/radar-0.1.js
deleted file mode 100644
index 357ed9a..0000000
--- a/docs/release/radar-0.1.js
+++ /dev/null
@@ -1,388 +0,0 @@
-// The MIT License (MIT)
-
-// Copyright (c) 2017 Zalando SE
-
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
-
-
-function radar_visualization(config) {
-
- // custom random number generator, to make random sequence reproducible
- // source: https://stackoverflow.com/questions/521295
- var seed = 42;
- function random() {
- var x = Math.sin(seed++) * 10000;
- return x - Math.floor(x);
- }
-
- function random_between(min, max) {
- return min + random() * (max - min);
- }
-
- function normal_between(min, max) {
- return min + (random() + random()) * 0.5 * (max - min);
- }
-
- // radial_min / radial_max are multiples of PI
- const quadrants = [
- { radial_min: 0, radial_max: 0.5, factor_x: 1, factor_y: 1 },
- { radial_min: 0.5, radial_max: 1, factor_x: -1, factor_y: 1 },
- { radial_min: -1, radial_max: -0.5, factor_x: -1, factor_y: -1 },
- { radial_min: -0.5, radial_max: 0, factor_x: 1, factor_y: -1 }
- ];
-
- const rings = [
- { radius: 130 },
- { radius: 220 },
- { radius: 310 },
- { radius: 400 }
- ];
-
- const title_offset =
- { x: -675, y: -420 };
-
- const legend_offset = [
- { x: 450, y: 90 },
- { x: -675, y: 90 },
- { x: -675, y: -310 },
- { x: 450, y: -310 }
- ];
-
- function polar(cartesian) {
- var x = cartesian.x;
- var y = cartesian.y;
- return {
- t: Math.atan2(y, x),
- r: Math.sqrt(x * x + y * y)
- }
- }
-
- function cartesian(polar) {
- return {
- x: polar.r * Math.cos(polar.t),
- y: polar.r * Math.sin(polar.t)
- }
- }
-
- function bounded_interval(value, min, max) {
- var low = Math.min(min, max);
- var high = Math.max(min, max);
- return Math.min(Math.max(value, low), high);
- }
-
-
- function bounded_ring(polar, r_min, r_max) {
- return {
- t: polar.t,
- r: bounded_interval(polar.r, r_min, r_max)
- }
- }
-
- function bounded_box(point, min, max) {
- return {
- x: bounded_interval(point.x, min.x, max.x),
- y: bounded_interval(point.y, min.y, max.y)
- }
- }
-
- function segment(quadrant, ring) {
- var polar_min = {
- t: quadrants[quadrant].radial_min * Math.PI,
- r: ring == 0 ? 30 : rings[ring - 1].radius
- };
- var polar_max = {
- t: quadrants[quadrant].radial_max * Math.PI,
- r: rings[ring].radius
- };
- var cartesian_min = {
- x: 15 * quadrants[quadrant].factor_x,
- y: 15 * quadrants[quadrant].factor_y
- };
- var cartesian_max = {
- x: rings[3].radius * quadrants[quadrant].factor_x,
- y: rings[3].radius * quadrants[quadrant].factor_y
- };
- return {
- clipx: function(d) {
- var c = bounded_box(d, cartesian_min, cartesian_max);
- var p = bounded_ring(polar(c), polar_min.r + 15, polar_max.r - 15);
- d.x = cartesian(p).x; // adjust data too!
- return d.x;
- },
- clipy: function(d) {
- var c = bounded_box(d, cartesian_min, cartesian_max);
- var p = bounded_ring(polar(c), polar_min.r + 15, polar_max.r - 15);
- d.y = cartesian(p).y; // adjust data too!
- return d.y;
- },
- random: function() {
- return cartesian({
- t: random_between(polar_min.t, polar_max.t),
- r: normal_between(polar_min.r, polar_max.r)
- });
- }
- }
- }
-
- // position each entry randomly in its segment
- for (var i = 0; i < config.entries.length; i++) {
- var entry = config.entries[i];
- entry.segment = segment(entry.quadrant, entry.ring);
- var point = entry.segment.random();
- entry.x = point.x;
- entry.y = point.y;
- entry.color = entry.active || config.print_layout ?
- config.rings[entry.ring].color : config.colors.inactive;
- }
-
- // partition entries according to segments
- var segmented = new Array(4);
- for (var quadrant = 0; quadrant < 4; quadrant++) {
- segmented[quadrant] = new Array(4);
- for (var ring = 0; ring < 4; ring++) {
- segmented[quadrant][ring] = [];
- }
- }
- for (var i=0; i