113 lines
3.7 KiB
JavaScript
113 lines
3.7 KiB
JavaScript
( function() {
|
||
// Grab the data
|
||
var labels = [],
|
||
data = [];
|
||
jQuery( '#ab_chart_data tfoot th' ).each( function() {
|
||
labels.push( jQuery( this ).text() );
|
||
} );
|
||
jQuery( '#ab_chart_data tbody td' ).each( function() {
|
||
data.push( jQuery( this ).text() );
|
||
} );
|
||
|
||
// Draw
|
||
var width = jQuery( '#ab_chart' ).parent().width() + 8,
|
||
height = 140,
|
||
leftgutter = 0,
|
||
bottomgutter = 22,
|
||
topgutter = 22,
|
||
color = '#135e96',
|
||
r = Raphael( 'ab_chart', width, height ),
|
||
txt = { font: 'bold 12px "Open Sans", sans-serif', fill: '#1d2327' },
|
||
X = ( width - leftgutter * 2 ) / labels.length,
|
||
max = Math.max.apply( Math, data ),
|
||
Y = ( height - bottomgutter - topgutter ) / max;
|
||
|
||
// Max value
|
||
r
|
||
.text( 16, 16, max )
|
||
.attr(
|
||
{
|
||
font: 'normal 10px "Open Sans", sans-serif',
|
||
fill: '#a7aaad',
|
||
}
|
||
);
|
||
|
||
var path = r.path().attr( { stroke: color, 'stroke-width': 2, 'stroke-linejoin': 'round' } ),
|
||
bgp = r.path().attr( { stroke: 'none', opacity: .3, fill: color } ),
|
||
label = r.set(),
|
||
lx = 0,
|
||
ly = 0,
|
||
is_label_visible = false,
|
||
leave_timer,
|
||
blanket = r.set();
|
||
label.push( r.text( 60, 12, '' ).attr( txt ) );
|
||
label.push( r.text( 60, 27, '' ).attr( txt ).attr( { fill: color } ) );
|
||
label.hide();
|
||
var frame = r.popup( 100, 100, label, 'right' ).attr( { fill: '#fff', stroke: '#444', 'stroke-width': 1 } ).hide();
|
||
|
||
var p, bgpp;
|
||
for ( var i = 0, ii = labels.length; i < ii; i++ ) {
|
||
var y = Math.round( height - bottomgutter - Y * data[i] ),
|
||
x = Math.round( leftgutter + X * ( i + .5 ) );
|
||
if ( ! i ) {
|
||
p = [ 'M', x, y, 'C', x, y ];
|
||
bgpp = [ 'M', leftgutter + X * .5, height - bottomgutter, 'L', x, y, 'C', x, y ];
|
||
}
|
||
if ( i && i < ii - 1 ) {
|
||
var Y0 = Math.round( height - bottomgutter - Y * data[i - 1] ),
|
||
X0 = Math.round( leftgutter + X * ( i - .5 ) ),
|
||
Y2 = Math.round( height - bottomgutter - Y * data[i + 1] ),
|
||
X2 = Math.round( leftgutter + X * ( i + 1.5 ) );
|
||
var a = getAnchors( X0, Y0, x, y, X2, Y2 );
|
||
p = p.concat( [ a.x1, a.y1, x, y, a.x2, a.y2 ] );
|
||
bgpp = bgpp.concat( [ a.x1, a.y1, x, y, a.x2, a.y2 ] );
|
||
}
|
||
var dot = r.circle( x, y, 4 ).attr( { fill: '#fff', stroke: color, 'stroke-width': 1 } );
|
||
blanket.push( r.rect( leftgutter + X * i, 0, X, height - bottomgutter ).attr( { stroke: 'none', fill: '#fff', opacity: .2 } ) );
|
||
var rect = blanket[blanket.length - 1];
|
||
( function( x, y, data, date, dot ) {
|
||
var timer,
|
||
i = 0;
|
||
rect.hover( function() {
|
||
clearTimeout( leave_timer );
|
||
var side = 'right';
|
||
if ( x + frame.getBBox().width > width ) {
|
||
side = 'left';
|
||
}
|
||
// set label content to determine correct dimensions
|
||
label[0].attr( { text: date } );
|
||
label[1].attr( { text: data + '× Spam' } );
|
||
var ppp = r.popup( x, y, label, side, 1 ),
|
||
anim = Raphael.animation( {
|
||
path: ppp.path,
|
||
transform: [ 't', ppp.dx, ppp.dy ],
|
||
}, 200 * is_label_visible );
|
||
lx = label[0].transform()[0][1] + ppp.dx;
|
||
ly = label[0].transform()[0][2] + ppp.dy;
|
||
frame.show().stop().animate( anim );
|
||
|
||
label[0].show().stop().animateWith( frame, anim, { transform: [ 't', lx, ly ] }, 200 * is_label_visible );
|
||
label[1].show().stop().animateWith( frame, anim, { transform: [ 't', lx, ly ] }, 200 * is_label_visible );
|
||
dot.attr( 'r', 6 );
|
||
is_label_visible = true;
|
||
}, function() {
|
||
dot.attr( 'r', 4 );
|
||
leave_timer = setTimeout( function() {
|
||
frame.hide();
|
||
label[0].hide();
|
||
label[1].hide();
|
||
is_label_visible = false;
|
||
}, 1 );
|
||
} );
|
||
}( x, y, data[i], labels[i], dot ) );
|
||
}
|
||
p = p.concat( [ x, y, x, y ] );
|
||
bgpp = bgpp.concat( [ x, y, x, y, 'L', x, height - bottomgutter, 'z' ] );
|
||
path.attr( { path: p } );
|
||
bgp.attr( { path: bgpp } );
|
||
frame.toFront();
|
||
label[0].toFront();
|
||
label[1].toFront();
|
||
blanket.toFront();
|
||
}() );
|