diff --git a/static/js/users.js b/static/js/users.js
index 878c13c..0c04401 100644
--- a/static/js/users.js
+++ b/static/js/users.js
@@ -2,8 +2,24 @@ var punchcardWidget;
var pieOrgWidget;
var pieApiWidget;
var overtimeWidget;
-
var div_day;
+
+function legendFormatter(label, series) {
+ // removing unwanted "
+ var label = label.replace(/\\"/g, "").replace(/\"/g, "");
+ // limiting size
+ if (label.length >= 50){
+ labelLimited = label.substring(0, 50) + '[...]';
+ } else {
+ labelLimited = label;
+ }
+ return '
';
+}
+
function highlight_punchDay() {
if (!(div_day === undefined)) {
div_day.removeClass('highlightDay');
@@ -55,6 +71,18 @@ function updateDatePieOrg() {
innerRadius: 0.5,
show: true
}
+ },
+ grid: {
+ hoverable: true
+ }
+ });
+ $('#pieOrg').bind("plothover", function (event, pos, item) {
+ if (item) {
+ $("#tooltip").html(legendFormatter(item.series.label))
+ .css({top: pos.pageY+5, left: pos.pageX+5})
+ .fadeIn(200);
+ } else {
+ $("#tooltip").hide();
}
});
}
@@ -163,4 +191,9 @@ $(document).ready(function () {
updateDatePieApi();
updateDateOvertime();
+ $("").css({
+ position: "absolute",
+ display: "none",
+ }).appendTo("body");
+
});
diff --git a/templates/users.html b/templates/users.html
index dc90b4d..d7ad981 100644
--- a/templates/users.html
+++ b/templates/users.html
@@ -48,6 +48,16 @@
box-shadow: black 0px 0px 2px;
}
+ .tagElem {
+ display: inline-block;
+ padding: 2px 4px;
+ font-size: 12px;
+ font-weight: bold;
+ line-height: 14px;
+ border-radius: 3px;
+ box-shadow: 3px 3px 3px #888888;
+ }
+
.panel {
margin-bottom: 10px;
}