solves the mini-issue of having column rollovers to help describe, pa…

…rt of w3c#180
shikhar-scs · Nov 25, 2014 · 2c02e7f · 2c02e7f
1 parent a769af8
commit 2c02e7f
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 63 deletions.
diff --git a/css/metricsgraphics.css b/css/metricsgraphics.css
@@ -322,6 +322,33 @@ th.data-table-th {
     text-align: right;
 }
 
+th.data-table-th .fa {
+    color: #ccc;
+    font-size: 14px;
+    padding-left: 4px;
+    vertical-align: top;
+}
+
+th.data-table-th .popover {
+    font-size: 12px;
+    font-weight:normal;
+}
+
+th.data-table-th .popover-content {
+    cursor: auto;
+    line-height: 17px;
+}
+
+th.data-table-th .popover.top {
+    margin-top: 0;
+}
+
+th.data-table-th
+
+.chart_title .fa.warning {
+    font-weight: 300;
+}
+
 .data-table .secondary-title {
     color: darkgray;
 }
@@ -335,4 +362,5 @@ td.data-table {
 td.table-text {
     opacity: 0.8;
     padding-left: 30px;
-}
+}
+
diff --git a/src/charts/table.js b/src/charts/table.js
@@ -112,16 +112,20 @@ function data_table(args){
 				.style('width', this_col.width)
 				.style('text-align', td_type=='title' ? 'left' : 'right')
 				.text(th_text);
-			// TODO - fix this.
-			// if (args.description){
-			// 	apply_popover_to({
-			// 		dom_element: 'th',
-			// 		class: 'column-title',
-			// 		target: th[0],
-			// 		title: th_text,
-			// 		description: this_col.description
-			// 	})
-			// }
+			if (this_col.description){
+				th.append('i')
+					.classed('fa', true)
+					.classed('fa-question-circle', true)
+					.classed('fa-inverse', true);
+				$(th[0]).popover({
+                    html: true,
+                    animation: false,
+                    content: this_col.description,
+                    trigger: 'hover',
+                    placement: 'top',
+                    container: $(th[0])
+                 })
+			}
 		}
 
 		for (var h=0;h<args.columns.length;h++){

diff --git a/src/common/chart_title.js b/src/common/chart_title.js
@@ -35,55 +35,4 @@ function chart_title(args) {
     if(args.error) {
         error(args);
     }
-}
-
-// function apply_popover_to(args){
-//     'use strict';
-//     //is chart title different than existing, if so, clear the fine 
-//     //gentleman, otherwise, move along
-//     // var currentTitle = $(args.target);
-//     // if(args.title && args.title !== currentTitle.text())
-//     //     currentTitle.remove();
-//     // else
-//     //     return;
-//     console.log('sdfoin');
-
-//     if (args.target && args.title) {
-//         var newTitle;
-
-//         //only show question mark if there's a description
-//         // var optional_question_mark = (args.description)
-//         //     ? '<i class="fa fa-question-circle fa-inverse"></i>'
-//         //     : '';
-
-//         newTitle = d3.select(args.target)
-//             .append(args.dom_element)
-//             .text(args.title);
-//         newTitle.append('i')
-//                 .classed('fa', true)
-//                 .classed('fa-question-circle', true)
-//                 .classed('fa-inverse', true)
-//         console.log(newTitle);
-//         // $(args.target).prepend('<'+ args.dom_element +' class="'+args.class+'">' 
-//         //     + args.title + optional_question_mark + '</'+args.dom_element+'>');
-//         // console.log('wtf')
-//         //activate the question mark if we have a description
-
-//         if (args.description){
-//             newTitle = $(newTitle[0]);
-//             //newTitle = $(args.target).find(args.dom_element + '.' + args.class);
-//                 newTitle.popover({
-//                     html: true,
-//                     animation: false,
-//                     content: args.description,
-//                     trigger: 'hover',
-//                     placement: 'top',
-//                     container: newTitle
-//                 });
-//         }   
-//     }
-
-//     if(error) {
-//         error(args);
-//     }
-// }
+}