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(); + } }