Merge pull request #150 from SoumayaMauthoorMOJ/new-blips-and-ring-de…

…scriptions Show new blips as stars and add table of ring descriptions
zalando · Jun 24, 2024 · 09b44ce · 09b44ce
2 parents 727bbf0 + 31c2cb6
commit 09b44ce
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 17 deletions.
diff --git 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
@@ -17,3 +17,9 @@ td {
   vertical-align: top;
   padding-right: 60px;
 }
+.hover-underline {
+  text-decoration: none;
+}
+.hover-underline:hover {
+  text-decoration: underline;
+}
diff --git 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();
+  }
 }