Snippets

Piotr Szrajber M.App Studio - add text inside heatmap cells

Created by Piotr Szrajber
View revision

File custom.js Added

  • Ignore whitespace
  • Hide word diff 
+//TODO: This is just a POC. It works for MobileAlert layout (7 days and 6 timeslots). I am absolutely sure that there is a better way of computing this!
+var yForKey = (d) => ({
+    "20:00-24:00": 0,
+    "16:00-20:00": 1,
+    "12:00-16:00": 2,
+    "08:00-12:00": 3,
+    "04:00-08:00": 4,
+    "00:00-04:00": 5
+} [d.key[1]] * 30 + 10);
+var xForKey = (d) => +d.key[0] * 56 + 10;
+
+// add all the waiting logic from my other examples so that this code doesn't execute before there are actual widgets
+gsp.bi.stage.findWidgets({
+    descriptors: [{
+        chartM: {
+            chart: "heatmap"
+        }
+    }]
+}, function(widgets) {
+    var ch = widgets[0].chart;
+    var orig = ch.redraw;
+    ch.redraw = function() {
+        orig.call(this);
+
+        // remove all text elements
+        this.svg()
+            .selectAll(".box-group")
+            .select("text")
+            .remove();
+
+        //draw text containing "count" measure value
+        this.svg()
+            .selectAll(".box-group")
+            .append("text")
+            .text(d => d.value.count)
+            .attr("fill", "white")
+            .attr("font-size", "10px")
+            .attr("y", yForKey)
+            .attr("x", xForKey)
+            .attr("dy", 12);
+    };
+    ch.redraw();
+})
HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.