TMetric - Projects Summary Chart - Tampermonkey Script

tmetric-charts.user.js

// ==UserScript==
// @name         TMetric Charts
// @namespace    http://aorcsik.com/
// @version      0.1
// @description  Add animated bars to Projects Summary tables
// @author       Antal Orcsik (http://aorcsik.com/)
// @match        https://app.tmetric.com/*
// @grant        none
// ==/UserScript==

(function($) {
    'use strict';

    window.setInterval(function() {
        var m = window.location.hash.match(/#\/reports\/(\d+)\/projects\?range=(.*)/);
        if (m) {
            var user_id = m[1];
            var range = m[2];

            if ($(".table-report-summary-project tr").length > 0 && $(".tmertic-chart").length === 0) {
                var sumMins = 0;
                var maxMins = 0;
                $(".table-report-summary-project tr").each(function() {
                    if ($(this).find("td").length == 3) {
                        var time = $(this).find("td").eq(2).text().trim().match(/(\d+)\s+h\s+(\d+)\s+min/);
                        if (time) {
                            var mins = parseInt(time[1]) * 60 + parseInt(time[2]);
                            sumMins += mins;
                            maxMins = Math.max(maxMins, mins);
                            $("<td>").addClass("tmertic-chart").data("mins", mins).appendTo($(this));
                        }
                    } else if ($(this).find("th").length > 0 && $(".tmetric-chart-header").length === 0) {
                        $("<th>").addClass("tmetric-chart-header").html("Chart").appendTo($(this));
                    }
                });

                $(".tmertic-chart").each(function() {
                    var absolutePercentage = Math.round($(this).data("mins") / sumMins * 10000) / 100;
                    var relativePercentage = $(this).data("mins") / maxMins;
                    var color = [0, 0, 0];

                    // 255, 0, 0 -> 255, 255, 0 -> 0, 255, 0
                    if (relativePercentage < 0.5) color = [255, Math.floor(200 * 2 * relativePercentage), 0];
                    else color = [Math.floor(255 - (255 * 2 * (relativePercentage - 0.5))), 200, 0];

                    var progressBarContainer = $("<div>").css({
                        width: 400
                    });
                    var progressBar = $("<div>").css({
                        width: "0%",
                        height: 15,
                        float: "left",
                        background: "rgba(" + color[0] + "," + color[1] + "," + color[2] + ", 1.00)"
                    });
                    var progressIndicator = $("<span>").css({
                        fontSize: "0.75em",
                        paddingLeft: "5px",
                        float: "left",
                        height: 15,
                        borderBottom: "2px solid rgba(" + color[0] + "," + color[1] + "," + color[2] + ", 1.00)"
                    }).html("0.00%");
                    progressBarContainer.append(progressBar).append(progressIndicator);

                    $(this).append(progressBarContainer);
                    progressBar.animate({
                        width: absolutePercentage + "%"
                    }, {
                        duration: 500,
                        step: function(num) {
                            progressIndicator.html((Math.floor(num * 100) / 100) + "%");
                        }
                    });
                });
            }
        }
    }, 1000);

})(jQuery);

@aorcsik
Hello Antal,

My name is Alexander, I'm the product manager in TMetric team.
We're working on adding graphics to our reports right now.

Could you explain what does your add-on visualize?
It would help us building a better feature.

Thanks in advance
Alexander Serdyuk
TMetric team

Hi @alexserdyuk

I start with calculating the sum and the max of displayed times per project, then I display the bars where length is actual / sum and color is actual / max. I use the latter to display the whole color spectrum, so the largest bar is green and the shortest is red.

What I wanted to see is the percentage of each project compared to all recorded time.