Snippets

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

Created by Piotr Szrajber
//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();
})

Comments (0)

HTTPS SSH

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