Changeset 93593488fe1718e071337be4a84f04664ccaeebb

Show
Ignore:
Timestamp:
03/20/09 19:25:53 (5 years ago)
Author:
Theo Schlossnagle <jesus@omniti.com>
git-committer:
Theo Schlossnagle <jesus@omniti.com> 1237577153 +0000
git-parent:

[59a630e99b6a78c0717912c2c7e7e70e1b05cba5]

git-author:
Theo Schlossnagle <jesus@omniti.com> 1237577153 +0000
Message:

considerable cleanup and make the tooltip sane

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved
  • ui/web/htdocs/css/style.css

    r59ef71f r9359348  
    592592} 
    593593div.tooltip { 
    594 background:white none repeat scroll 0 0; 
    595 border:1px solid #333; 
    596 padding:0; 
    597 
    598 div.tooltip div { 
    599 border:0; 
    600 padding:0 3px; 
     594    padding:10px; 
     595
     596div.tooltip .wrap{ 
     597    position:relative; 
     598    border:1px solid #000; 
     599
     600div.tooltip .tip { 
     601    padding: 0 4px 0 4px; 
     602
     603div.tooltip .point-up, 
     604div.tooltip .point-right, 
     605div.tooltip .point-down, 
     606div.tooltip .point-left{ 
     607    position:absolute; 
     608    background:url(../images/tooltip-diamond.gif) no-repeat 50% 0; 
     609
     610  
     611div.tooltip .point-up{ 
     612    top:-10px; 
     613    left:50%; 
     614    height:10px; 
     615    width:40px; 
     616    margin-left:-20px; 
     617    background-position:25% 0; 
     618
     619div.tooltip .point-right{ 
     620    top:50%; 
     621    right:-10px; 
     622    height:40px; 
     623    width:10px; 
     624    margin-top:-20px; 
     625    background-position:100% 50%; 
     626
     627div.tooltip .point-down{ 
     628    bottom:-10px; 
     629    left:50%; 
     630    height:10px; 
     631    width:40px; 
     632    margin-left:-20px; 
     633    background-position:50% 100%; 
     634
     635div.tooltip .point-left{ 
     636    top:50%; 
     637    left:-10px; 
     638    height:40px; 
     639    width:10px; 
     640    margin-top:-20px; 
     641    background-position:0 50%; 
    601642} 
    602643.graphlist p.paginate { 
  • ui/web/htdocs/js/recon.js

    r1adb126 r9359348  
    381381              // Emulate opacity on white 
    382382              if(! $("div.tooltip")[0]) { 
    383                 $('<div class="tooltip"></div>').appendTo($('body')); 
    384                 $("div.tooltip") 
     383                $('<div class="tooltip"><div class="wrap"></div></div>').appendTo($('body')); 
     384                $("div.tooltip .wrap") 
    385385                  .hover(function() {}, 
    386386                         function() { $("div.tooltip").remove(); }); 
    387387              } 
    388               $("div.tooltip") 
    389                 .css( { top: items[0].pageY - 15, 
    390                         left: items[0].pageX + 10, 
     388              var tt = $("div.tooltip"); 
     389              tt.css( { width: 'auto', 
    391390                        position: 'absolute', 
    392                         'z-index': 4000 }) 
    393                 .html(''); 
     391                        'z-index': 4000 }); 
     392              var ttw = $("div.tooltip .wrap"); 
     393              ttw.empty(); 
     394              ttw.append('<div class="point-down"></div>'); 
     395 
     396              items.sort(function(a,b) { return a.pageY - b.pageY; }); 
     397              var topitem = items[0]; 
    394398              for(var i = 0; i < items.length; i++) { 
     399                if(items[i].pageY < topitem.pageY) topitem = items[i]; 
    395400                var rgb = (items[i].series.color.match(/\((.+)\)/))[1].split(','); 
    396                 // blend it with white emulating 80% opacity 
    397                 rgb = rgb.map(function(a) { return Math.round(255-(255-a)*0.8); }); 
    398                 var soft = 'rgb(' + rgb.join(',') + ')'; 
     401                rgb = rgb.map(function(a) { return Math.round(255-(255-a)*1); }); 
     402                var soft = 'rgba(' + rgb.join(',') + ',0.8)'; 
    399403                var val = items[i].datapoint[1]; 
    400404                if(items[i].series.dataManip) { 
     
    408412 
    409413                var Y = 0.299 * rgb[0] + 0.587 * rgb[1]  + 0.114 * rgb[2]; 
    410                 var tt = $('<div><div/>') 
     414                var ttp = $('<div class="tip"><div/>') 
    411415                  .html((items[i].datapoint[2] ? items[i].datapoint[2] : val) + " (" + items[i].series.label + ")") 
    412416                  .css( { color: ( Y > 128 ? 'black' : 'white' ), backgroundColor: soft }); 
    413                 tt.appendTo($("div.tooltip")); 
     417                ttp.appendTo(ttw); 
    414418                hoverings.push(items[i]); 
    415419                plot.highlight(items[i].series, items[i].datapoint); 
    416420              } 
     421              tt.css( { width: tt.width() + 10 } ); 
     422              tt.css( { overflow: 'hidden', 
     423                        top: topitem.pageY - tt.height() - 25, 
     424                        left: topitem.pageX - Math.floor(tt.width()/2) - 10, 
     425                        display: 'block' } ); 
    417426              return true; 
    418427            }