From 75d8567b6018d4bb6d14ff097bd3ce29b3af9029 Mon Sep 17 00:00:00 2001 From: Mark Velez Date: Mon, 27 Oct 2014 22:46:50 -0400 Subject: [PATCH 1/2] Prevent tooltips getting cut off (fixes #2) by using bootstrap --- css/achilles.css | 10 +++++++--- js/app/reports/condition_era.js | 27 ++++++++++++++------------ js/app/reports/condition_occurrence.js | 27 ++++++++++++++------------ js/app/reports/drug_era.js | 27 ++++++++++++++------------ js/app/reports/drug_exposure.js | 27 ++++++++++++++------------ js/app/reports/observation.js | 27 ++++++++++++++------------ js/app/reports/procedure_occurrence.js | 27 ++++++++++++++------------ js/app/reports/visit_occurrence.js | 27 ++++++++++++++------------ js/modules/d3/jnj.chart.js | 24 +++++++++++------------ 9 files changed, 123 insertions(+), 100 deletions(-) diff --git a/css/achilles.css b/css/achilles.css index 4970121..1a7f584 100644 --- a/css/achilles.css +++ b/css/achilles.css @@ -291,19 +291,19 @@ div.personSummary .row div { .pathleaf { font-size: 14px; - color: #fff; + color: #333; font-weight: bold; margin-bottom: 3px; } .pathleafstat { font-size: 12px; - color: #ddd; + color: #666; font-family: "Courier New"; margin-bottom: 2px; } .pathstep { font-size: 12px; - color: #aaa; + color: #333; margin-bottom: 1px; } hr.path { @@ -388,3 +388,7 @@ table.dataTable tbody tr.odd.selected { .sorting_3 { background-color: rgba(89, 159, 216, 0.1) !important; } +.popover { + max-width: 800px; + z-index: 1040; +} \ No newline at end of file diff --git a/js/app/reports/condition_era.js b/js/app/reports/condition_era.js index cdce972..3baa2e1 100644 --- a/js/app/reports/condition_era.js +++ b/js/app/reports/condition_era.js @@ -242,23 +242,26 @@ getcolorvalue: function (node) { return node.length_of_era; }, + getcontent: function (node) { + var result = '', + steps = node.path.split('||'), + i = steps.length - 1; + result += '
' + steps[i] + '
'; + result += '
Prevalence: ' + format_pct(node.pct_persons) + '
'; + result += '
Number of People: ' + format_comma(node.num_persons) + '
'; + result += '
Length of Era: ' + format_fixed(node.length_of_era) + '
'; + return result; + }, gettitle: function (node) { - title = ''; - steps = node.path.split('||'); - for (i = 0; i < steps.length; i++) { - if (i == steps.length - 1) { - title += '
'; - title += '
' + steps[i] + '
'; - title += '
Prevalence: ' + format_pct(node.pct_persons) + '
'; - title += '
Number of People: ' + format_comma(node.num_persons) + '
'; - title += '
Length of Era: ' + node.length_of_era + '
'; - } else { - title += '
' + Array(i + 1).join('  ') + steps[i] + '
'; - } + var title = '', + steps = node.path.split('||'); + for (i = 0; i < steps.length - 1; i++) { + title += '
' + Array(i + 1).join('  ') + steps[i] + '
'; } return title; } }); + $('[data-toggle="popover"]').popover(); } }); diff --git a/js/app/reports/condition_occurrence.js b/js/app/reports/condition_occurrence.js index 7799b66..eaf107c 100644 --- a/js/app/reports/condition_occurrence.js +++ b/js/app/reports/condition_occurrence.js @@ -244,23 +244,26 @@ getcolorvalue: function (node) { return node.records_per_person; }, + getcontent: function (node) { + var result = '', + steps = node.path.split('||'), + i = steps.length - 1; + result += '
' + steps[i] + '
'; + result += '
Prevalence: ' + format_pct(node.pct_persons) + '
'; + result += '
Number of People: ' + format_comma(node.num_persons) + '
'; + result += '
Length of Era: ' + format_fixed(node.length_of_era) + '
'; + return result; + }, gettitle: function (node) { - title = ''; - steps = node.path.split('||'); - for (i = 0; i < steps.length; i++) { - if (i == steps.length - 1) { - title += '
'; - title += '
' + steps[i] + '
'; - title += '
Prevalence: ' + format_pct(node.pct_persons) + '
'; - title += '
Number of People: ' + format_comma(node.num_persons) + '
'; - title += '
Records per Person: ' + format_fixed(node.records_per_person) + '
'; - } else { - title += '
' + Array(i + 1).join('  ') + steps[i] + '
'; - } + var title = '', + steps = node.path.split('||'); + for (i = 0; i < steps.length - 1; i++) { + title += '
' + Array(i + 1).join('  ') + steps[i] + '
'; } return title; } }); + $('[data-toggle="popover"]').popover(); } }); diff --git a/js/app/reports/drug_era.js b/js/app/reports/drug_era.js index 9d10d20..ade5427 100644 --- a/js/app/reports/drug_era.js +++ b/js/app/reports/drug_era.js @@ -240,23 +240,26 @@ getcolorvalue: function (node) { return node.length_of_era; }, + getcontent: function (node) { + var result = '', + steps = node.path.split('||'), + i = steps.length - 1; + result += '
' + steps[i] + '
'; + result += '
Prevalence: ' + format_pct(node.pct_persons) + '
'; + result += '
Number of People: ' + format_comma(node.num_persons) + '
'; + result += '
Length of Era: ' + format_fixed(node.length_of_era) + '
'; + return result; + }, gettitle: function (node) { - title = ''; - steps = node.path.split('||'); - for (i = 0; i < steps.length; i++) { - if (i == steps.length - 1) { - title += '
'; - title += '
' + steps[i] + '
'; - title += '
Prevalence: ' + format_pct(node.pct_persons) + '
'; - title += '
Number of People: ' + format_comma(node.num_persons) + '
'; - title += '
Length of Era: ' + format_fixed(node.length_of_era) + '
'; - } else { - title += '
' + Array(i + 1).join('  ') + steps[i] + '
'; - } + var title = '', + steps = node.path.split('||'); + for (i = 0; i < steps.length - 1; i++) { + title += '
' + Array(i + 1).join('  ') + steps[i] + '
'; } return title; } }); + $('[data-toggle="popover"]').popover(); } }); diff --git a/js/app/reports/drug_exposure.js b/js/app/reports/drug_exposure.js index 3fa3377..4d7685c 100644 --- a/js/app/reports/drug_exposure.js +++ b/js/app/reports/drug_exposure.js @@ -256,23 +256,26 @@ getcolorvalue: function (node) { return node.records_per_person; }, + getcontent: function (node) { + var result = '', + steps = node.path.split('||'), + i = steps.length - 1; + result += '
' + steps[i] + '
'; + result += '
Prevalence: ' + format_pct(node.pct_persons) + '
'; + result += '
Number of People: ' + format_comma(node.num_persons) + '
'; + result += '
Length of Era: ' + format_fixed(node.length_of_era) + '
'; + return result; + }, gettitle: function (node) { - title = ''; - steps = node.path.split('||'); - for (i = 0; i < steps.length; i++) { - if (i == steps.length - 1) { - title += '
'; - title += '
' + steps[i] + '
'; - title += '
Prevalence: ' + format_pct(node.pct_persons) + '
'; - title += '
Number of People: ' + format_comma(node.num_persons) + '
'; - title += '
Records per Person: ' + format_fixed(node.records_per_person) + '
'; - } else { - title += '
' + Array(i + 1).join('  ') + steps[i] + '
'; - } + var title = '', + steps = node.path.split('||'); + for (i = 0; i < steps.length - 1; i++) { + title += '
' + Array(i + 1).join('  ') + steps[i] + '
'; } return title; } }); + $('[data-toggle="popover"]').popover(); } }); diff --git a/js/app/reports/observation.js b/js/app/reports/observation.js index baa3f6e..a8316e4 100644 --- a/js/app/reports/observation.js +++ b/js/app/reports/observation.js @@ -413,23 +413,26 @@ getcolorvalue: function (node) { return node.records_per_person; }, + getcontent: function (node) { + var result = '', + steps = node.path.split('||'), + i = steps.length - 1; + result += '
' + steps[i] + '
'; + result += '
Prevalence: ' + format_pct(node.pct_persons) + '
'; + result += '
Number of People: ' + format_comma(node.num_persons) + '
'; + result += '
Length of Era: ' + format_fixed(node.length_of_era) + '
'; + return result; + }, gettitle: function (node) { - title = ''; - steps = node.path.split('||'); - for (i = 0; i < steps.length; i++) { - if (i == steps.length - 1) { - title += '
'; - title += '
' + steps[i] + '
'; - title += '
Prevalence: ' + format_pct(node.pct_persons) + '
'; - title += '
Number of People: ' + format_comma(node.num_persons) + '
'; - title += '
Records per Person: ' + format_fixed(node.records_per_person) + '
'; - } else { - title += '
' + Array(i + 1).join('  ') + steps[i] + '
'; - } + var title = '', + steps = node.path.split('||'); + for (i = 0; i < steps.length - 1; i++) { + title += '
' + Array(i + 1).join('  ') + steps[i] + '
'; } return title; } }); + $('[data-toggle="popover"]').popover(); } }); diff --git a/js/app/reports/procedure_occurrence.js b/js/app/reports/procedure_occurrence.js index 8274dcc..9a41fcc 100644 --- a/js/app/reports/procedure_occurrence.js +++ b/js/app/reports/procedure_occurrence.js @@ -238,23 +238,26 @@ getcolorvalue: function (node) { return node.records_per_person; }, + getcontent: function (node) { + var result = '', + steps = node.path.split('||'), + i = steps.length - 1; + result += '
' + steps[i] + '
'; + result += '
Prevalence: ' + format_pct(node.pct_persons) + '
'; + result += '
Number of People: ' + format_comma(node.num_persons) + '
'; + result += '
Length of Era: ' + format_fixed(node.length_of_era) + '
'; + return result; + }, gettitle: function (node) { - title = ''; - steps = node.path.split('||'); - for (i = 0; i < steps.length; i++) { - if (i == steps.length - 1) { - title += '
'; - title += '
' + steps[i] + '
'; - title += '
Prevalence: ' + format_pct(node.pct_persons) + '
'; - title += '
Number of People: ' + format_comma(node.num_persons) + '
'; - title += '
Records per Person: ' + format_fixed(node.records_per_person) + '
'; - } else { - title += '
' + Array(i + 1).join('  ') + steps[i] + '
'; - } + var title = '', + steps = node.path.split('||'); + for (i = 0; i < steps.length - 1; i++) { + title += '
' + Array(i + 1).join('  ') + steps[i] + '
'; } return title; } }); + $('[data-toggle="popover"]').popover(); } }); diff --git a/js/app/reports/visit_occurrence.js b/js/app/reports/visit_occurrence.js index 78114b1..ed92a0e 100644 --- a/js/app/reports/visit_occurrence.js +++ b/js/app/reports/visit_occurrence.js @@ -237,23 +237,26 @@ getcolorvalue: function (node) { return node.records_per_person; }, + getcontent: function (node) { + var result = '', + steps = node.path.split('||'), + i = steps.length - 1; + result += '
' + steps[i] + '
'; + result += '
Prevalence: ' + format_pct(node.pct_persons) + '
'; + result += '
Number of People: ' + format_comma(node.num_persons) + '
'; + result += '
Length of Era: ' + format_fixed(node.length_of_era) + '
'; + return result; + }, gettitle: function (node) { - title = ''; - steps = node.path.split('||'); - for (i = 0; i < steps.length; i++) { - if (i == steps.length - 1) { - title += '
'; - title += '
' + steps[i] + '
'; - title += '
Prevalence: ' + format_pct(node.pct_persons) + '
'; - title += '
Number of People: ' + format_comma(node.num_persons) + '
'; - title += '
Records per Person: ' + format_fixed(node.records_per_person) + '
'; - } else { - title += '
' + Array(i + 1).join('  ') + steps[i] + '
'; - } + var title = '', + steps = node.path.split('||'); + for (i = 0; i < steps.length - 1; i++) { + title += '
' + Array(i + 1).join('  ') + steps[i] + '
'; } return title; } }); + $('[data-toggle="popover"]').popover(); } }); diff --git a/js/modules/d3/jnj.chart.js b/js/modules/d3/jnj.chart.js index 7c7b1da..726b957 100644 --- a/js/modules/d3/jnj.chart.js +++ b/js/modules/d3/jnj.chart.js @@ -1659,14 +1659,6 @@ .domain([color_range[0], color_range[1]]) .range(["#E4FF7A", "#FC7F00"]); - var tip = d3.tip() - .attr('class', 'd3-tip') - .offset([-10, 0]) - .html(function (d) { - return options.gettitle(d); - }) - svg.call(tip); - var cell = svg.selectAll("g") .data(nodes) .enter().append("svg:g") @@ -1682,17 +1674,23 @@ .attr("height", function (d) { return Math.max(0, d.dy - 1); }) - .attr("title", function (d) { - return options.gettitle(d); - }) .attr("id", function (d) { return d.id; }) .style("fill", function (d) { return color(options.getcolorvalue(d)); }) - .on('mouseover', tip.show) - .on('mouseout', tip.hide) + .attr("data-container", "body") + .attr("data-toggle", "popover") + .attr("data-trigger", "hover") + .attr("data-placement", "top") + .attr("data-html", true) + .attr("data-title", function (d) { + return options.gettitle(d); + }) + .attr("data-content", function (d) { + return options.getcontent(d); + }) .on('click', function (d) { if (d3.event.altKey) { zoom(root); From 8506fec4600ca9f4439a2e19c1c260102fe230cb Mon Sep 17 00:00:00 2001 From: Chris Knoll Date: Fri, 31 Oct 2014 10:39:27 -0400 Subject: [PATCH 2/2] Fixed copy-paste issue of tooltips for reports that show 'lenght of era' instead of 'records per person' --- js/app/reports/condition_occurrence.js | 2 +- js/app/reports/drug_exposure.js | 2 +- js/app/reports/observation.js | 2 +- js/app/reports/procedure_occurrence.js | 2 +- js/app/reports/visit_occurrence.js | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/js/app/reports/condition_occurrence.js b/js/app/reports/condition_occurrence.js index eaf107c..f5ad393 100644 --- a/js/app/reports/condition_occurrence.js +++ b/js/app/reports/condition_occurrence.js @@ -251,7 +251,7 @@ result += '
' + steps[i] + '
'; result += '
Prevalence: ' + format_pct(node.pct_persons) + '
'; result += '
Number of People: ' + format_comma(node.num_persons) + '
'; - result += '
Length of Era: ' + format_fixed(node.length_of_era) + '
'; + result += '
Records per Person: ' + format_fixed(node.records_per_person) + '
'; return result; }, gettitle: function (node) { diff --git a/js/app/reports/drug_exposure.js b/js/app/reports/drug_exposure.js index 4d7685c..af295bd 100644 --- a/js/app/reports/drug_exposure.js +++ b/js/app/reports/drug_exposure.js @@ -263,7 +263,7 @@ result += '
' + steps[i] + '
'; result += '
Prevalence: ' + format_pct(node.pct_persons) + '
'; result += '
Number of People: ' + format_comma(node.num_persons) + '
'; - result += '
Length of Era: ' + format_fixed(node.length_of_era) + '
'; + result += '
Records per Person: ' + format_fixed(node.records_per_person) + '
'; return result; }, gettitle: function (node) { diff --git a/js/app/reports/observation.js b/js/app/reports/observation.js index a8316e4..48d7348 100644 --- a/js/app/reports/observation.js +++ b/js/app/reports/observation.js @@ -420,7 +420,7 @@ result += '
' + steps[i] + '
'; result += '
Prevalence: ' + format_pct(node.pct_persons) + '
'; result += '
Number of People: ' + format_comma(node.num_persons) + '
'; - result += '
Length of Era: ' + format_fixed(node.length_of_era) + '
'; + result += '
Records per Person: ' + format_fixed(node.records_per_person) + '
'; return result; }, gettitle: function (node) { diff --git a/js/app/reports/procedure_occurrence.js b/js/app/reports/procedure_occurrence.js index 9a41fcc..45d420f 100644 --- a/js/app/reports/procedure_occurrence.js +++ b/js/app/reports/procedure_occurrence.js @@ -245,7 +245,7 @@ result += '
' + steps[i] + '
'; result += '
Prevalence: ' + format_pct(node.pct_persons) + '
'; result += '
Number of People: ' + format_comma(node.num_persons) + '
'; - result += '
Length of Era: ' + format_fixed(node.length_of_era) + '
'; + result += '
Records per Person: ' + format_fixed(node.records_per_person) + '
'; return result; }, gettitle: function (node) { diff --git a/js/app/reports/visit_occurrence.js b/js/app/reports/visit_occurrence.js index ed92a0e..4c3b78f 100644 --- a/js/app/reports/visit_occurrence.js +++ b/js/app/reports/visit_occurrence.js @@ -244,7 +244,7 @@ result += '
' + steps[i] + '
'; result += '
Prevalence: ' + format_pct(node.pct_persons) + '
'; result += '
Number of People: ' + format_comma(node.num_persons) + '
'; - result += '
Length of Era: ' + format_fixed(node.length_of_era) + '
'; + result += '
Records per Person: ' + format_fixed(node.records_per_person) + '
'; return result; }, gettitle: function (node) {