diff -r bad0e6c60b63 -r 3848e1813a30 alcatel/static/js/streamgraph.js --- a/alcatel/static/js/streamgraph.js Mon Jul 22 14:56:35 2013 +0200 +++ b/alcatel/static/js/streamgraph.js Wed Aug 14 16:36:41 2013 +0200 @@ -1,39 +1,25 @@ -function Streamgraph($selector) { +function Streamgraph($selector, data/*, data2*/) +{ /* Constants */ var VMARGIN = 3, YEARSHEIGHT = 20, - STARTTIME = new Date(2007,6,1), - ENDTIME = new Date(), + STARTTIME = new Date(data.from_date), + ENDTIME = new Date(data.to_date), + DATASTART = new Date(data.from_date), + DATAEND = new Date(data.to_date), CURVE = .25, DATEPADDING = 10, - COLORS = [ "#943a23", "#fbee97", "#cfbb95", "#da9761", "#ba5036" ], + COLORS = [ "#51585E", "#12161C", "#457DAD", "#899DAA", "#0781BD" ], + QUERYID = data.query_id, SELECTEDCOLOR = "#c51810"; - - /* Generating random data */ - - var data = [], - clustercount = 12, - slicecount = 20, - maxdata = 10, - randpart = 4, - dampfactor = .333; - for (var i = 0; i < clustercount; i++) { - var line = [], - peaktime = Math.floor(Math.random() * slicecount); - for (var j = 0; j < slicecount; j++) { - var point = Math.min(maxdata, Math.max(0, (Math.random() - .5) * randpart + Math.max(0, maxdata * (1 - dampfactor * Math.abs(j - peaktime))))); - line.push(point); - } - data.push(line); - } - + /* Calculating scales and positions */ - + var width = $selector.width(), height = $selector.height(), - transp = _.zip.apply( _, data ), + transp = _.zip.apply( _, _(data.clusters).pluck("volumes") ), cumulative = _(transp).map(function(column) { var total = 0; return _(column).map(function(point) { @@ -45,22 +31,27 @@ }) maxcol = _(sums).max(), streamheight = height - YEARSHEIGHT, + streamwidth = width * (DATAEND - DATASTART) / (ENDTIME - STARTTIME), yscale = (streamheight - 2 * VMARGIN) / maxcol, centery = streamheight / 2, - xscale = width / (transp.length - 1), + xscale = streamwidth / (transp.length - 1), txscale = width / (ENDTIME - STARTTIME), - coords = _(data).map(function(line, lineindex) { + startx = txscale * (DATASTART - STARTTIME), + endx = txscale * (DATAEND - STARTTIME), + coords = _(data.clusters).map(function(line, lineindex) { return { - points : _(line).map(function(point, colindex) { + points : _(line.volumes).map(function(point, colindex) { var lowercumul = lineindex ? cumulative[colindex][lineindex - 1] : 0, uppercumul = cumulative[colindex][lineindex]; return { data: point, - x: xscale * colindex, + x: startx + xscale * colindex, lowery: centery + yscale * ( ( sums[colindex] / 2 ) - lowercumul ), uppery: centery + yscale * ( ( sums[colindex] / 2 ) - uppercumul ), } - }) + }), + id : line.id, + title: line.title } }), _(coords).each(function(line) { @@ -93,13 +84,23 @@ /* Drawing streamgraph*/ + $selector.empty(); + var paper = new Raphael($selector[0]); + paper.path("M0 " + (1+centery) + "L" + width + " " + (1+centery)).attr({ + stroke: "#000" + }) + _(coords).each(function(line, index) { line.color = COLORS[index % COLORS.length]; + //var hue = (parseInt(line.id)%6)/6; + //line.color = Raphael.hsl( hue, 1, .8 ); + //line.highlightColor = Raphael.hsl( hue, 1, .4 ); line.surface = paper.path(line.path); line.surface.attr({ - stroke: "none", + stroke: "#ffffff", + "stroke-width": .25, fill: line.color }); }); @@ -127,14 +128,14 @@ attrcarres = { fill: "#333333", "fill-opacity": .5, - stroke: SELECTEDCOLOR + stroke: "#c51810" }; carregauche.attr(attrcarres); carredroite.attr(attrcarres); var rangerect = paper.rect(0, (height - YEARSHEIGHT), width, YEARSHEIGHT); rangerect.attr({ - fill: SELECTEDCOLOR, + fill: "#c51810", stroke: "none" }); @@ -157,24 +158,94 @@ }); /* Redrawing time slices for rollover effect */ - + var mem = ''; _(coords).each(function(line, index) { - line.mousesurface = paper.path(line.path); - console.log(line.mousesurface); + line.mousesurface = paper.path(line.path); + mem += '
  • ' + line.title + '
    • '; line.mousesurface.attr({ - stroke: "none", + stroke: "none", fill: line.color, - opacity: .01 + opacity: .01, + title: line.title, + href: "http://localhost:8000/"+QUERYID+"/"+line.id+"/0/12/0" }).mouseover(function() { - line.surface.attr({ - fill: SELECTEDCOLOR - }) + //alert('mousse select'); + $("body").trigger("select-cluster", line.id); }).mouseout(function() { + //alert('mousse unselect'); + $("body").trigger("unselect-cluster", line.id); + + }); + // $(line.mousesurface.node).attr("data-cluster-id", line.id).parent().attr("data-cluster-id", line.id); + }); + + $(".cluster").html(mem) ; + /* if (typeof (data2) != 'undefined') + { + // alert('dat2not null'); + + + + var line = _(coords).find(function(line) + { + return line.id == 1; + }); + //alert(line.id); + if (line) + { + alert(line.id); + line.surface.attr({ fill: SELECTEDCOLOR }); + } + + + } + else + { + alert('dat2 null'); + }*/ + $(".actu, .cluster a, .article").hover + ( + function() { + $("body").trigger("select-cluster", $(this).attr("data-cluster-id")); + }, + function() { + $("body").trigger("unselect-cluster", $(this).attr("data-cluster-id")); + } + ) + + $("body").on("unselect-cluster", function(e, clusterid) { + $(".actu[data-cluster-id='" + clusterid + "'], .cluster a[data-cluster-id='" + clusterid + "'], .article[data-cluster-id='" + clusterid + "']").removeClass("selected"); + var line = _(coords).find(function(line) { + return line.id == clusterid; + }); + if (line) { line.surface.attr({ fill: line.color - }) + }); + } + }); + + + + $("body").on("select-cluster", function(e, clusterid) { + $(".actu[data-cluster-id='" + clusterid + "'], .cluster a[data-cluster-id='" + clusterid + "'], .article[data-cluster-id='" + clusterid + "']").addClass("selected"); + var line = _(coords).find(function(line) { + return line.id == clusterid; }); + if (line) { + line.surface.attr({ + fill: SELECTEDCOLOR //line.highlightColor + }); + } }); + + /*$("body").on("select-cluster", function(e, clusterid) + { + $(".actu[data-cluster-id='" + clusterid + "'], .cluster a[data-cluster-id='" + clusterid + "'], .article[data-cluster-id='" + clusterid + "']").addClass("selected"); + }); + $("body").on("unselect-cluster", function(e, clusterid) { + $(".actu[data-cluster-id='" + clusterid + "'], .cluster a[data-cluster-id='" + clusterid + "'], .article[data-cluster-id='" + clusterid + "']").removeClass("selected"); + });*/ /* Returning a handler for slide value change */ @@ -196,10 +267,24 @@ width: right - left }); } + + $("#slider-range").dragslider("values", [startx, endx]); + this.slidevalues(startx, endx); } -$(function() { - window.streamgraph = new Streamgraph($(".streamgraph")); - streamgraph.slidevalues.apply(streamgraph,$("#slider-range").dragslider("values")); -}) +function loadStreamgraph(data/*,data2*/) { + + $(".streamgraph").empty(); + delete window.streamgraph; + + //$.getJSON(url, function(data) { + window.streamgraph = new Streamgraph($(".streamgraph"), data/*,data2*/); + streamgraph.slidevalues.apply(streamgraph,$("#slider-range").dragslider("values")); + + //}); +} + +/*$(function() { + loadStreamgraph("data/json_streamgraph.json"); +})*/