Skip to content

Instantly share code, notes, and snippets.

@aorcsik
Last active May 20, 2017 09:11
Show Gist options
  • Save aorcsik/58556f5bd9d6e716ef53ff5c57e670b6 to your computer and use it in GitHub Desktop.
Save aorcsik/58556f5bd9d6e716ef53ff5c57e670b6 to your computer and use it in GitHub Desktop.
TMetric - Projects Summary Chart - Tampermonkey Script
// ==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);
@alexserdyuk
Copy link

@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

@aorcsik
Copy link
Author

aorcsik commented May 20, 2017

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment