From 209b9813357b09ba09b870ef3103dfa044e9234a Mon Sep 17 00:00:00 2001
From: Pascal van der Horst <pascal.van.der.horst@wigo4it.nl>
Date: Thu, 19 Dec 2024 21:22:12 +0100
Subject: [PATCH] radar.js aangepast voor application insight click traicking

---
 radar.js | 90 +++++++++++++++++++++++++++++++-------------------------
 1 file changed, 50 insertions(+), 40 deletions(-)

diff --git a/radar.js b/radar.js
index f845c85..42f8e74 100644
--- a/radar.js
+++ b/radar.js
@@ -142,19 +142,19 @@ function radar_visualization(config) {
       y: rings[3].radius * quadrants[quadrant].factor_y
     };
     return {
-      clipx: function(d) {
+      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) {
+      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() {
+      random: function () {
         return cartesian({
           t: random_between(polar_min.t, polar_max.t),
           r: normal_between(polar_min.r, polar_max.r)
@@ -183,17 +183,17 @@ function radar_visualization(config) {
       segmented[quadrant][ring] = [];
     }
   }
-  for (var i=0; i<config.entries.length; i++) {
+  for (var i = 0; i < config.entries.length; i++) {
     var entry = config.entries[i];
     segmented[entry.quadrant][entry.ring].push(entry);
   }
 
   // assign unique sequential id to each entry
   var id = 1;
-  for (var quadrant of [2,3,1,0]) {
+  for (var quadrant of [2, 3, 1, 0]) {
     for (var ring = 0; ring < 4; ring++) {
       var entries = segmented[quadrant][ring];
-      for (var i=0; i<entries.length; i++) {
+      for (var i = 0; i < entries.length; i++) {
         entries[i].id = "" + id++;
       }
     }
@@ -265,11 +265,11 @@ function radar_visualization(config) {
     }
   }
 
-  function legend_transform(quadrant, ring, index=null) {
+  function legend_transform(quadrant, ring, index = null) {
     var dx = ring < 2 ? 0 : 150; // ruimte tussen de legenda's
     var dy = (index == null ? -16 : index * 12);
     if (ring % 2 === 1) {
-      dy = dy + 36 + segmented[quadrant][ring-1].length * 12;
+      dy = dy + 36 + segmented[quadrant][ring - 1].length * 12;
     }
     return translate(
       legend_offset[quadrant].x + dx,
@@ -322,24 +322,34 @@ function radar_visualization(config) {
         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("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", "Raleway")
-              .style("font-size", "11px")
-              .attr("fill", config.colors.text)
-              .on("mouseover", function(d) { showBubble(d); highlightLegendItem(d); })
-              .on("mouseout", function(d) { hideBubble(d); unhighlightLegendItem(d); });
+          .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;
+          })
+          // add application insights link clicked event
+          .attr("data-custom-id", function (d, i) {
+            return d.label.replace(/\s+/g, '');
+          })
+          .attr("data-custom-name", function (d, i) {
+            return d.label;
+          })
+          .attr("data-custom-bhvr", function (d, i) {
+            return "NAVIGATION";
+          })
+          .append("text")
+          .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", "Raleway")
+          .style("font-size", "11px")
+          .attr("fill", config.colors.text)
+          .on("mouseover", function (d) { showBubble(d); highlightLegendItem(d); })
+          .on("mouseout", function (d) { hideBubble(d); unhighlightLegendItem(d); });
       }
     }
   }
@@ -388,7 +398,7 @@ function radar_visualization(config) {
 
   function hideBubble(d) {
     var bubble = d3.select("#bubble")
-      .attr("transform", translate(0,0))
+      .attr("transform", translate(0, 0))
       .style("opacity", 0);
   }
 
@@ -408,14 +418,14 @@ function radar_visualization(config) {
   var blips = rink.selectAll(".blip")
     .data(config.entries)
     .enter()
-      .append("g")
-        .attr("class", "blip")
-        .attr("transform", function(d, i) { return legend_transform(d.quadrant, d.ring, i); })
-        .on("mouseover", function(d) { showBubble(d); highlightLegendItem(d); })
-        .on("mouseout", function(d) { hideBubble(d); unhighlightLegendItem(d); });
+    .append("g")
+    .attr("class", "blip")
+    .attr("transform", function (d, i) { return legend_transform(d.quadrant, d.ring, i); })
+    .on("mouseover", function (d) { showBubble(d); highlightLegendItem(d); })
+    .on("mouseout", function (d) { hideBubble(d); unhighlightLegendItem(d); });
 
   // configure each blip
-  blips.each(function(d) {
+  blips.each(function (d) {
     var blip = d3.select(this);
 
     // blip link
@@ -431,11 +441,11 @@ function radar_visualization(config) {
     // blip shape
     if (d.status == 1) {
       blip.append("rect") //nieuw (vierkant)
-      .attr("x", -7)       // x-coordinate of the top-left corner
-      .attr("y", -6)       // y-coordinate of the top-left corner
-      .attr("width", 15) 
-      .attr("height", 15)
-      .attr("fill", d.color);
+        .attr("x", -7)       // x-coordinate of the top-left corner
+        .attr("y", -6)       // y-coordinate of the top-left corner
+        .attr("width", 15)
+        .attr("height", 15)
+        .attr("fill", d.color);
     } else if (d.status == 2) {
       blip.append("path")
         .attr("d", "M -11,5 11,5 0,-13 z") // verplaatst (driehoek)
@@ -454,7 +464,7 @@ function radar_visualization(config) {
         .attr("text-anchor", "middle")
         .style("fill", d.textColor)
         .style("font-family", "Raleway")
-        .style("font-size", function(d) { return blip_text.length > 2 ? "8px" : "9px"; })
+        .style("font-size", function (d) { return blip_text.length > 2 ? "8px" : "9px"; })
         .style("pointer-events", "none")
         .style("user-select", "none");
     }
@@ -462,7 +472,7 @@ function radar_visualization(config) {
 
   // make sure that blips stay inside their segment
   function ticked() {
-    blips.attr("transform", function(d) {
+    blips.attr("transform", function (d) {
       return translate(d.segment.clipx(d), d.segment.clipy(d));
     })
   }