feat: radar style tweak ups

process-street · Jan 6, 2022 · 8930f32 · 8930f32
1 parent d6d4ead
commit 8930f32
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -22,10 +22,11 @@
   height: 1000,
   colors: {
     background: "#fff",
-    grid: "#bbb",
+    grid: '#dddde0',
     inactive: "#ddd"
   },
-  title: "Zalando Tech Radar — 2021.06",
+  title: "Zalando Tech Radar",
+  date: "2021.06",
   quadrants: [
     { name: "Languages" },
     { name: "Infrastructure" },

diff --git a/docs/radar.js b/docs/radar.js
@@ -245,7 +245,8 @@ function radar_visualization(config) {
         .text(config.rings[i].name)
         .attr("y", -rings[i].radius + 62)
         .attr("text-anchor", "middle")
-        .style("fill", "#e5e5e5")
+        .style("fill", config.rings[i].color)
+        .style("opacity", 0.35)
         .style("font-family", "Arial, Helvetica")
         .style("font-size", "42px")
         .style("font-weight", "bold")
@@ -274,7 +275,17 @@ function radar_visualization(config) {
       .attr("transform", translate(title_offset.x, title_offset.y))
       .text(config.title)
       .style("font-family", "Arial, Helvetica")
-      .style("font-size", "34px");
+      .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")
@@ -294,14 +305,16 @@ function radar_visualization(config) {
         ))
         .text(config.quadrants[quadrant].name)
         .style("font-family", "Arial, Helvetica")
-        .style("font-size", "18px");
+        .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", "12px")
-          .style("font-weight", "bold");
+          .style("font-weight", "bold")
+          .style("fill", config.rings[ring].color);
         legend.selectAll(".legend" + quadrant + ring)
           .data(segmented[quadrant][ring])
           .enter()