--- 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 += '<li><a href="http://localhost:8000/'+QUERYID+'/'+line.id+'/0/12/0" title="Afficher le cluster" data-cluster-id="' + line.id + '">' + line.title + '</a></li>';
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");
+})*/