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);

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.