diff --git a/docs/index.html b/docs/index.html
index ea4ea04b..0e1f4ea3 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -23,14 +23,7 @@
return response.json();
}).then(function(data) {
radar_visualization({
- svg_id: "radar",
- width: 1450,
- height: 1000,
- colors: {
- background: "#fff",
- grid: '#dddde0',
- inactive: "#ddd"
- },
+ repo_url: "https://github.com/zalando/tech-radar",
title: "Zalando Tech Radar",
date: data.date,
quadrants: [
@@ -45,9 +38,6 @@
{ name: "ASSESS", color: "#c7ba00" },
{ name: "HOLD", color: "#e09b96" }
],
- print_layout: true,
- links_in_new_tabs: true,
- // zoomed_quadrant: 0,
entries: data.entries
});
}).catch(function(err) {
diff --git a/docs/radar.css b/docs/radar.css
index 7537b34e..267e185d 100644
--- a/docs/radar.css
+++ b/docs/radar.css
@@ -17,3 +17,9 @@ td {
vertical-align: top;
padding-right: 60px;
}
+.hover-underline {
+ text-decoration: none;
+}
+.hover-underline:hover {
+ text-decoration: underline;
+}
\ No newline at end of file
diff --git a/docs/radar.js b/docs/radar.js
index 5bf3689c..02736ccd 100644
--- a/docs/radar.js
+++ b/docs/radar.js
@@ -23,6 +23,19 @@
function radar_visualization(config) {
+ config.svg_id = config.svg || "radar";
+ config.width = config.width || 1450;
+ config.height = config.height || 1000;
+ config.colors = config.colors || {
+ background: "#fff",
+ grid: '#dddde0',
+ inactive: "#ddd"
+ };
+ config.print_layout = config.print_layout || true;
+ config.links_in_new_tabs = config.links_in_new_tabs || true;
+ config.repo_url = config.repo_url || '#';
+ config.print_ring_descriptions_table = config.print_ring_descriptions_table || null;
+
// custom random number generator, to make random sequence reproducible
// source: https://stackoverflow.com/questions/521295
var seed = 42;
@@ -58,7 +71,7 @@ function radar_visualization(config) {
{ x: -675, y: -420 };
const footer_offset =
- { x: -675, y: 420 };
+ { x: -150, y: 450 };
const legend_offset = [
{ x: 450, y: 90 },
@@ -279,8 +292,11 @@ function radar_visualization(config) {
if (config.print_layout) {
// title
- radar.append("text")
+ radar.append("a")
+ .attr("href", config.repo_url)
.attr("transform", translate(title_offset.x, title_offset.y))
+ .append("text")
+ .attr("class", "hover-underline") // add class for hover effect
.text(config.title)
.style("font-family", config.font_family)
.style("font-size", "30")
@@ -298,10 +314,10 @@ function radar_visualization(config) {
// footer
radar.append("text")
.attr("transform", translate(footer_offset.x, footer_offset.y))
- .text("▲ moved up ▼ moved down")
+ .text("▲ moved up ▼ moved down ★ new 〇 no change")
.attr("xml:space", "preserve")
.style("font-family", config.font_family)
- .style("font-size", "10px");
+ .style("font-size", "12px");
// legend
var legend = radar.append("g");
@@ -432,14 +448,18 @@ function radar_visualization(config) {
}
// blip shape
- if (d.moved > 0) {
+ if (d.moved == 1) {
blip.append("path")
.attr("d", "M -11,5 11,5 0,-13 z") // triangle pointing up
.style("fill", d.color);
- } else if (d.moved < 0) {
+ } else if (d.moved == -1) {
blip.append("path")
.attr("d", "M -11,-5 11,-5 0,13 z") // triangle pointing down
.style("fill", d.color);
+ } else if (d.moved == 2) {
+ blip.append("path")
+ .attr("d", d3.symbol().type(d3.symbolStar).size(200))
+ .style("fill", d.color);
} else {
blip.append("circle")
.attr("r", 9)
@@ -474,4 +494,54 @@ function radar_visualization(config) {
.velocityDecay(0.19) // magic number (found by experimentation)
.force("collision", d3.forceCollide().radius(12).strength(0.85))
.on("tick", ticked);
+
+ function ringDescriptionsTable() {
+ var table = d3.select("body").append("table")
+ .attr("class", "radar-table")
+ .style("border-collapse", "collapse")
+ .style("margin-top", "20px")
+ .style("margin-left", "50px")
+ .style("margin-right", "50px")
+ .style("font-family", config.font_family)
+ .style("font-size", "13px")
+ .style("text-align", "left");
+
+ var thead = table.append("thead");
+ var tbody = table.append("tbody");
+
+ // define fixed width for each column
+ var columnWidth = `${100 / config.rings.length}%`;
+
+ // create table header row with ring names
+ var headerRow = thead.append("tr")
+ .style("border", "1px solid #ddd");
+
+ headerRow.selectAll("th")
+ .data(config.rings)
+ .enter()
+ .append("th")
+ .style("padding", "8px")
+ .style("border", "1px solid #ddd")
+ .style("background-color", d => d.color)
+ .style("color", "#fff")
+ .style("width", columnWidth)
+ .text(d => d.name);
+
+ // create table body row with descriptions
+ var descriptionRow = tbody.append("tr")
+ .style("border", "1px solid #ddd");
+
+ descriptionRow.selectAll("td")
+ .data(config.rings)
+ .enter()
+ .append("td")
+ .style("padding", "8px")
+ .style("border", "1px solid #ddd")
+ .style("width", columnWidth)
+ .text(d => d.description);
+ }
+
+ if (config.print_ring_descriptions_table) {
+ ringDescriptionsTable();
+ }
}