RanchiMall/php-mpos
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

re-adding tooltips for graphs

Browse Source
This commit is contained in:
Sebastian Grewe 2013-06-13 22:00:28 +02:00
parent 538c5ead88
commit d9886d8dca
2 changed files with 901 additions and 806 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
public/site_assets/mmcFE/js/jquery.tooltip.visualize.js Normal file
View File

@ -0,0 +1,106 @@
/**
* --------------------------------------------------------------------
* Tooltip plugin for the jQuery-Plugin "Visualize"
* Tolltip by Iraê Carvalho, irae@irae.pro.br, http://irae.pro.br/en/
* Copyright (c) 2010 Iraê Carvalho
* Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) and GPL (filamentgroup.com/examples/gpl-license.txt) licenses.
*
* Visualize plugin by Scott Jehl, scott@filamentgroup.com
* Copyright (c) 2009 Filament Group, http://www.filamentgroup.com
*
* --------------------------------------------------------------------
*/
(function($){
$.visualizePlugins.push(function visualizeTooltip(options,tableData) {
//configuration
var o = $.extend({
tooltip: false,
tooltipalign: 'auto', // also available 'left' and 'right'
tooltipvalign: 'top',
tooltipclass: 'visualize-tooltip',
tooltiphtml: function(data){
if(options.multiHover) {
var html='';
for(var i=0;i<data.point.length;i++){
html += '<p>'+data.point[i].value+' - '+data.point[i].yLabels[0]+'</p>';
}
return html;
} else {
return '<p>'+data.point.value+' - '+data.point.yLabels[0]+'</p>';
}
},
delay:false
},options);
// don't go any further if we are not to show anything
if(!o.tooltip) {return;}
var self = $(this),
canvasContain = self.next(),
scroller = canvasContain.find('.visualize-scroller'),
scrollerW = scroller.width(),
tracker = canvasContain.find('.visualize-interaction-tracker');
// IE needs background color and opacity white or the tracker stays behind the tooltip
tracker.css({
backgroundColor:'white',
opacity:0,
zIndex:100
});
var tooltip = $('<div class="'+o.tooltipclass+'"/>').css({
position:'absolute',
display:'none',
zIndex:90
})
.insertAfter(scroller.find('canvas'));
var usescroll = true;
if( typeof(G_vmlCanvasManager) != 'undefined' ){
scroller.css({'position':'absolute'});
tracker.css({marginTop:'-'+(o.height)+'px'});
}
self.bind('vizualizeOver',function visualizeTooltipOver(e,data){
if(data.canvasContain.get(0) != canvasContain.get(0)) {return;} // for multiple graphs originated from same table
if(o.multiHover) {
var p = data.point[0].canvasCords;
} else {
var p = data.point.canvasCords;
}
var left,right,top,clasRem,clasAd,bottom,x=Math.round(p[0]+data.tableData.zeroLocX),y=Math.round(p[1]+data.tableData.zeroLocY);
if(o.tooltipalign == 'left' || ( o.tooltipalign=='auto' && x-scroller.scrollLeft()<=scrollerW/2 ) ) {
if($.browser.msie && ($.browser.version == 7 || $.browser.version == 6) ) {usescroll=false;} else {usescroll=true;}
left = (x-(usescroll?scroller.scrollLeft():0))+'px';
right = '';
clasAdd="tooltipleft";
clasRem="tooltipright";
} else {
if($.browser.msie && $.browser.version == 7) {usescroll=false;} else {usescroll=true;}
left = '';
right = (Math.abs(x-o.width)- (o.width-(usescroll?scroller.scrollLeft():0)-scrollerW) )+'px';
clasAdd="tooltipright";
clasRem="tooltipleft";
}
tooltip
.addClass(clasAdd)
.removeClass(clasRem)
.html(o.tooltiphtml(data))
.css({
display:'block',
top: y+'px',
left: left,
right: right
});
});
self.bind('vizualizeOut',function visualizeTooltipOut(e,data){
tooltip.css({display:'none'});
});
});
})(jQuery);

259
public/site_assets/mmcFE/js/jquery.visualize.js
View File

@ -13,47 +13,30 @@
return $(this).each(function(){
//configuration
var o = $.extend({
type: 'bar',
//also available: area, pie, line
width: $(this).width(),
//height of canvas - defaults to table height
height: $(this).height(),
//height of canvas - defaults to table height
appendTitle: true,
//table caption text is added to chart
title: null,
//grabs from table caption if null
appendKey: true,
//color key is added to chart
type: 'bar', //also available: area, pie, line
width: $(this).width(), //height of canvas - defaults to table height
height: $(this).height(), //height of canvas - defaults to table height
appendTitle: true, //table caption text is added to chart
title: null, //grabs from table caption if null
appendKey: true, //color key is added to chart
colors: ['#be1e2d','#666699','#92d5ea','#ee8310','#8d10ee','#5a3b16','#26a4ed','#f45a90','#e9e744'],
textColors: [],
//corresponds with colors array. null/undefined items will fall back to CSS
parseDirection: 'x',
//which direction to parse the table data
pieMargin: 10,
//pie charts only - spacing around pie
textColors: [], //corresponds with colors array. null/undefined items will fall back to CSS
parseDirection: 'x', //which direction to parse the table data
pieMargin: 10, //pie charts only - spacing around pie
pieLabelsAsPercent: true,
pieLabelPos: 'inside',
lineWeight: 4,
//for line and area - stroke weight
lineDots: false,
//also available: 'single', 'double'
dotInnerColor: "#ffffff",
// only used for lineDots:'double'
lineMargin: (options.lineDots ? 15 : 0),
//for line and area - spacing around lines
lineWeight: 4, //for line and area - stroke weight
lineDots: false, //also available: 'single', 'double'
dotInnerColor: "#ffffff", // only used for lineDots:'double'
lineMargin: (options.lineDots?15:0), //for line and area - spacing around lines
barGroupMargin: 10,
chartId: '',
xLabelParser: null,
// function to parse labels as values
valueParser: null,
// function to parse values. must return a Number
xLabelParser: null, // function to parse labels as values
valueParser: null, // function to parse values. must return a Number
chartId: '',
chartClass: '',
barMargin: 1,
//space around bars in bar chart (added to both sides of bar)
yLabelInterval: 30,
//distance between y labels
barMargin: 1, //space around bars in bar chart (added to both sides of bar)
yLabelInterval: 30, //distance between y labels
interaction: false // only used for lineDots != false -- triggers mouseover and mouseout on original table
},options);
@ -85,7 +68,8 @@
labels[j][i] = $(this).text()
})
});
} else {
}
else {
self.find('tbody tr').each(function(i){
$(this).find('th').each(function(j) {
if(!labels[i]) {
@ -105,9 +89,7 @@
dataGroups[i] = {};
dataGroups[i].points = [];
dataGroups[i].color = colors[i];
if (textColors[i]) {
dataGroups[i].textColor = textColors[i];
}
if(textColors[i]){ dataGroups[i].textColor = textColors[i]; }
$(tr).find('td').each(function(j,td){
dataGroups[i].points.push( {
value: fnParse($(td).text()),
@ -122,9 +104,7 @@
dataGroups[i] = {};
dataGroups[i].points = [];
dataGroups[i].color = colors[i];
if (textColors[i]) {
dataGroups[i].textColor = textColors[i];
}
if(textColors[i]){ dataGroups[i].textColor = textColors[i]; }
self.find('tbody tr').each(function(j){
dataGroups[i].points.push( {
value: $(this).find('td').eq(i).text()*1,
@ -214,13 +194,11 @@
var yLabels = tableData.yLabels = [];
var numLabels = Math.floor((o.height - 2*o.lineMargin) / 30);
var loopInterval = tableData.totalYRange / numLabels; //fix provided from lab
loopInterval = Math.round(parseFloat(loopInterval)/5)*5;
loopInterval = Math.max(loopInterval, 1);
// var start =
for (var j = Math.round(parseInt(tableData.bottomValue) / 5) * 5; j <= tableData.topValue - loopInterval; j += loopInterval) {
for(var j=Math.round(parseInt(tableData.bottomValue)/5)*5; j<=tableData.topValue+loopInterval; j+=loopInterval){
yLabels.push(j);
}
if(yLabels[yLabels.length-1] > tableData.topValue+loopInterval) {
@ -241,9 +219,7 @@
});
});
try {
console.log(tableData);
} catch (e) {}
try{console.log(tableData);}catch(e){}
var charts = {};
@ -263,24 +239,25 @@
if(drawHtml) {
canvasContain.addClass('visualize-pie');
if (o.pieLabelPos == 'outside') {
canvasContain.addClass('visualize-pie-outside');
}
if(o.pieLabelPos == 'outside'){ canvasContain.addClass('visualize-pie-outside'); }
var toRad = function (integer) {
return (Math.PI / 180) * integer;
};
var labels = $('<ul class="visualize-labels"></ul>').insertAfter(canvas);
var toRad = function(integer){ return (Math.PI/180)*integer; };
var labels = $('<ul class="visualize-labels"></ul>')
.insertAfter(canvas);
}
//draw the pie pieces
$.each(dataGroups, function(i,row){
var fraction = row.groupTotal / dataSum;
if (fraction <= 0 || isNaN(fraction)) return;
if (fraction <= 0 || isNaN(fraction))
return;
ctx.beginPath();
ctx.moveTo(centerx, centery);
ctx.arc(centerx, centery, radius, counter * Math.PI * 2 - Math.PI * 0.5, (counter + fraction) * Math.PI * 2 - Math.PI * 0.5, false);
ctx.arc(centerx, centery, radius,
counter * Math.PI * 2 - Math.PI * 0.5,
(counter + fraction) * Math.PI * 2 - Math.PI * 0.5,
false);
ctx.lineTo(centerx, centery);
ctx.closePath();
ctx.fillStyle = dataGroups[i].color;
@ -304,16 +281,20 @@
if(percentage){
var labelval = (o.pieLabelsAsPercent) ? percentage + '%' : row.groupTotal;
var labeltext = $('<span class="visualize-label">' + labelval + '</span>').css(leftRight, 0).css(topBottom, 0);
if (labeltext) var label = $('<li class="visualize-label-pos"></li>').appendTo(labels).css({
left: labelx,
top: labely
}).append(labeltext);
labeltext.css('font-size', radius / 8).css('margin-' + leftRight, -labeltext.width() / 2).css('margin-' + topBottom, -labeltext.outerHeight() / 2);
var labeltext = $('<span class="visualize-label">' + labelval +'</span>')
.css(leftRight, 0)
.css(topBottom, 0);
if(labeltext)
var label = $('<li class="visualize-label-pos"></li>')
.appendTo(labels)
.css({left: labelx, top: labely})
.append(labeltext);
labeltext
.css('font-size', radius / 8)
.css('margin-'+leftRight, -labeltext.width()/2)
.css('margin-'+topBottom, -labeltext.outerHeight()/2);
if (dataGroups[i].textColor) {
labeltext.css('color', dataGroups[i].textColor);
}
if(dataGroups[i].textColor){ labeltext.css('color', dataGroups[i].textColor); }
}
}
@ -341,27 +322,29 @@
setup: function(area){
if (area) {
canvasContain.addClass('visualize-area');
} else {
canvasContain.addClass('visualize-line');
}
if(area){ canvasContain.addClass('visualize-area'); }
else{ canvasContain.addClass('visualize-line'); }
//write X labels
var xlabelsUL = $('<ul class="visualize-labels-x"></ul>').width(canvas.width()).height(canvas.height()).insertBefore(canvas);
var xlabelsUL = $('<ul class="visualize-labels-x"></ul>')
.width(canvas.width())
.height(canvas.height())
.insertBefore(canvas);
if(!o.customXLabels) {
xInterval = (canvas.width() - 2*o.lineMargin) / (xLabels.length -1);
$.each(xLabels, function(i){
var thisLi = $('<li><span>' + this + '</span></li>').prepend('<span class="line" />').css('left', o.lineMargin + xInterval * i).appendTo(xlabelsUL);
var thisLi = $('<li><span>'+this+'</span></li>')
.prepend('<span class="line" />')
.css('left', o.lineMargin + xInterval * i)
.appendTo(xlabelsUL);
var label = thisLi.find('span:not(.line)');
var leftOffset = label.width()/-2;
if (i == 0) {
leftOffset = -20;
} else if (i == xLabels.length - 1) {
leftOffset = -label.width() + 20;
}
label.css('margin-left', leftOffset).addClass('label');
if(i == 0){ leftOffset = 0; }
else if(i== xLabels.length-1){ leftOffset = -label.width(); }
label
.css('margin-left', leftOffset)
.addClass('label');
});
} else {
o.customXLabels(tableData,xlabelsUL);
@ -369,7 +352,9 @@
//write Y labels
var liBottom = (canvas.height() - 2*o.lineMargin) / (yLabels.length-1);
var ylabelsUL = $('<ul class="visualize-labels-y"></ul>').width(canvas.width()).height(canvas.height())
var ylabelsUL = $('<ul class="visualize-labels-y"></ul>')
.width(canvas.width())
.height(canvas.height())
// .css('margin-top',-o.lineMargin)
.insertBefore(scroller);
@ -379,7 +364,8 @@
if(posB >= o.height-1 || posB < 0) {
return;
}
var thisLi = $('<li><span>' + value + '</span></li>').css('bottom', posB);
var thisLi = $('<li><span>'+value+'</span></li>')
.css('bottom', posB);
if(Math.abs(posB) < o.height-1) {
thisLi.prepend('<span class="line" />');
}
@ -388,13 +374,12 @@
var label = thisLi.find('span:not(.line)');
var topOffset = label.height()/-2;
if(!o.lineMargin) {
if (i == 0) {
topOffset = -label.height();
} else if (i == yLabels.length - 1) {
topOffset = 0;
if(i == 0){ topOffset = -label.height(); }
else if(i== yLabels.length-1){ topOffset = 0; }
}
}
label.css('margin-top', topOffset).addClass('label');
label
.css('margin-top', topOffset)
.addClass('label');
});
//start from the bottom left
@ -429,12 +414,7 @@
});
});
// fire custom event so we can enable rich interaction
self.trigger('vizualizeBeforeDraw', {
options: o,
table: self,
canvasContain: canvasContain,
tableData: tableData
});
self.trigger('vizualizeBeforeDraw',{options:o,table:self,canvasContain:canvasContain,tableData:tableData});
// draw lines and areas
$.each(dataGroups,function(h){
// Draw lines
@ -453,16 +433,16 @@
// Draw fills
if(area){
var integer = this.points[this.points.length-1].canvasCords[0];
if (isFinite(integer)) ctx.lineTo(integer, 0);
if (isFinite(integer))
ctx.lineTo(integer,0);
ctx.lineTo(o.lineMargin,0);
ctx.closePath();
ctx.fillStyle = this.color;
ctx.globalAlpha = .3;
ctx.fill();
ctx.globalAlpha = 1.0;
} else {
ctx.closePath();
}
else {ctx.closePath();}
});
// draw points
if(o.lineDots) {
@ -516,10 +496,17 @@
var xInterval = canvas.width() / (bottomLabels.length - (horizontal ? 1 : 0));
var xlabelsUL = $('<ul class="visualize-labels-x"></ul>').width(canvas.width()).height(canvas.height()).insertBefore(canvas);
var xlabelsUL = $('<ul class="visualize-labels-x"></ul>')
.width(canvas.width())
.height(canvas.height())
.insertBefore(canvas);
$.each(bottomLabels, function(i){
var thisLi = $('<li><span class="label">' + this + '</span></li>').prepend('<span class="line" />').css('left', xInterval * i).width(xInterval).appendTo(xlabelsUL);
var thisLi = $('<li><span class="label">'+this+'</span></li>')
.prepend('<span class="line" />')
.css('left', xInterval * i)
.width(xInterval)
.appendTo(xlabelsUL);
if (horizontal) {
var label = thisLi.find('span.label');
@ -534,7 +521,10 @@
var leftLabels = horizontal ? xLabels : yLabels;
var liBottom = canvas.height() / (leftLabels.length - (horizontal ? 0 : 1));
var ylabelsUL = $('<ul class="visualize-labels-y"></ul>').width(canvas.width()).height(canvas.height()).insertBefore(canvas);
var ylabelsUL = $('<ul class="visualize-labels-y"></ul>')
.width(canvas.width())
.height(canvas.height())
.insertBefore(canvas);
$.each(leftLabels, function(i){
var thisLi = $('<li><span>'+this+'</span></li>').prependTo(ylabelsUL);
@ -557,10 +547,7 @@
'max-height': liBottom + 1,
'vertical-align': 'middle'
});
thisLi.css({
'top': liBottom * i,
'min-height': liBottom
});
thisLi.css({'top': liBottom * i, 'min-height': liBottom});
var r = label[0].getClientRects()[0];
if (r.bottom - r.top == liBottom) {
@ -573,7 +560,8 @@
* so we use r.bottom - r.top rather than r.height.)
*/
label.css('line-height', parseInt(liBottom) + 'px');
} else {
}
else {
/*
* If there is more than one line of text, then we shouldn't
* touch the line height, but we should make sure the text
@ -581,7 +569,8 @@
*/
label.css("overflow", "hidden");
}
} else {
}
else {
thisLi.css('bottom', liBottom * i).prepend('<span class="line" />');
label.css('margin-top', -label.height() / 2)
}
@ -593,18 +582,21 @@
draw: function() {
// Draw bars
if (horizontal) {
// for horizontal, keep the same code, but rotate everything 90 degrees
// clockwise.
ctx.rotate(Math.PI / 2);
} else {
}
else {
// for vertical, translate to the top left corner.
ctx.translate(0, zeroLocY);
}
// Don't attempt to draw anything if all the values are zero,
// otherwise we will get weird exceptions from the canvas methods.
if (totalYRange <= 0) return;
if (totalYRange <= 0)
return;
var yScale = (horizontal ? canvas.width() : canvas.height()) / totalYRange;
var barWidth = horizontal ? (canvas.height() / xLabels.length) : (canvas.width() / (bottomLabels.length));
@ -623,6 +615,7 @@
if (points[i].value != 0) {
var xVal = (integer-o.barGroupMargin)+(h*linewidth)+linewidth/2;
xVal += o.barGroupMargin*2;
ctx.moveTo(xVal, 0);
ctx.lineTo(xVal, Math.round(-points[i].value*yScale));
}
@ -640,7 +633,8 @@
//create new canvas, set w&h attrs (not inline styles)
var canvasNode = document.createElement("canvas");
var canvas = $(canvasNode).attr({
var canvas = $(canvasNode)
.attr({
'height': o.height,
'width': o.width
});
@ -649,13 +643,18 @@
var title = o.title || self.find('caption').text();
//create canvas wrapper div, set inline w&h, append
var canvasContain = (container || $('<div ' + (o.chartId ? 'id="' + o.chartId + '" ' : '') + 'class="visualize ' + o.chartClass + '" role="img" aria-label="Chart representing data from the table: ' + title + '" />')).height(o.height).width(o.width);
var canvasContain = (container || $('<div '+(o.chartId?'id="'+o.chartId+'" ':'')+'class="visualize '+o.chartClass+'" role="img" aria-label="Chart representing data from the table: '+ title +'" />'))
.height(o.height)
.width(o.width);
var scroller = $('<div class="visualize-scroller"></div>').appendTo(canvasContain).append(canvas);
var scroller = $('<div class="visualize-scroller"></div>')
.appendTo(canvasContain)
.append(canvas);
//title/key container
if(o.appendTitle || o.appendKey){
var infoContain = $('<div class="visualize-info"></div>').appendTo(canvasContain);
var infoContain = $('<div class="visualize-info"></div>')
.appendTo(canvasContain);
}
//append title
@ -668,7 +667,8 @@
if(o.appendKey){
var newKey = $('<ul class="visualize-key"></ul>');
$.each(yAllLabels, function(i,label){
$('<li><span class="visualize-key-color" style="background: ' + dataGroups[i].color + '"></span><span class="visualize-key-label">' + label + '</span></li>').appendTo(newKey);
$('<li><span class="visualize-key-color" style="background: '+dataGroups[i].color+'"></span><span class="visualize-key-label">'+ label +'</span></li>')
.appendTo(newKey);
});
newKey.appendTo(infoContain);
};
@ -678,12 +678,14 @@
// sets the canvas to track interaction
// IE needs one div on top of the canvas since the VML shapes prevent mousemove from triggering correctly.
// Pie charts needs tracker because labels goes on top of the canvas and also messes up with mousemove
var tracker = $('<div class="visualize-interaction-tracker"/>').css({
var tracker = $('<div class="visualize-interaction-tracker"/>')
.css({
'height': o.height + 'px',
'width': o.width + 'px',
'position':'relative',
'z-index': 200
}).insertAfter(canvas);
})
.insertAfter(canvas);
var triggerInteraction = function(overOut,data) {
var data = $.extend({
@ -693,9 +695,7 @@
self.trigger('vizualize'+overOut,data);
};
var over = false,
last = false,
started = false;
var over=false, last=false, started=false;
tracker.mousemove(function(e){
var x,y,x1,y1,data,dist,i,current,selector,zLabel,elem,color,minDist,found,ev=e.originalEvent;
@ -721,9 +721,7 @@
y = found.canvasCords[1] + (o.type=="pie"?0:zeroLocY);
found = [found];
$.each(charts[o.type].interactionPoints,function(i,current){
if (current == found[0]) {
return;
}
if(current == found[0]) {return;}
x1 = current.canvasCords[0] + zeroLocX;
y1 = current.canvasCords[1] + zeroLocY;
dist = Math.sqrt( (x1 - x)*(x1 - x) + (y1 - y)*(y1 - y) );
@ -737,19 +735,13 @@
if(over != last) {
if(over) {
if(last) {
triggerInteraction('Out', {
point: last
});
triggerInteraction('Out',{point:last});
}
triggerInteraction('Over', {
point: over
});
triggerInteraction('Over',{point:over});
last = over;
}
if(last && !over) {
triggerInteraction('Out', {
point: last
});
triggerInteraction('Out',{point:last});
last=false;
}
started=true;
@ -765,13 +757,8 @@
}
//append new canvas to page
if (!container) {
canvasContain.insertAfter(this);
}
if (typeof (G_vmlCanvasManager) != 'undefined') {
G_vmlCanvasManager.init();
G_vmlCanvasManager.initElement(canvas[0]);
}
if(!container){canvasContain.insertAfter(this); }
if( typeof(G_vmlCanvasManager) != 'undefined' ){ G_vmlCanvasManager.init(); G_vmlCanvasManager.initElement(canvas[0]); }
//set up the drawing board
var ctx = canvas[0].getContext('2d');
@ -804,3 +791,5 @@
$.visualizePlugins = [];
})(jQuery);