Skip to content

Commit

Permalink
radar.js aangepast voor application insight click traicking
Browse files Browse the repository at this point in the history
  • Loading branch information
Pascal van der Horst committed Dec 19, 2024
1 parent 59d5bdf commit 209b981
Showing 1 changed file with 50 additions and 40 deletions.
90 changes: 50 additions & 40 deletions radar.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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++;
}
}
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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); });
}
}
}
Expand Down Expand Up @@ -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);
}

Expand All @@ -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
Expand All @@ -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)
Expand All @@ -454,15 +464,15 @@ 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");
}
});

// 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));
})
}
Expand Down

0 comments on commit 209b981

Please sign in to comment.