--- a/alcatel/static/js/treemap.js Mon Jul 22 14:56:35 2013 +0200
+++ b/alcatel/static/js/treemap.js Wed Aug 14 16:36:41 2013 +0200
@@ -1,146 +1,384 @@
-/* Génération de données aléatoires */
+//$(function(){
-var data = [],
- startcolor = [ 0, 0, 255 ],
- endcolor = [ 255, 255, 0 ]
- elementcount = 8;
+ var IDEALRATIO = 1.33;
+
+ function cuttree(data, x, y, w, h, cut, ratio, callback) {
+
+ function f(subdata, subx, suby, subw, subh) {
+ if (subdata.length == 1) {
+ subdata[0].x = subx;
+ subdata[0].y = suby;
+ subdata[0].w = subw;
+ subdata[0].h = subh;
+ } else {
+ callback(subdata, subx, suby, subw, subh)
+ }
+ }
+
+ var first = _(data).first(cut), rest = _(data).rest(cut);
+ if (!first.length || !rest.length) {
+ return;
+ }
+ if (w/h > IDEALRATIO) {
+ var leftw = w * ratio;
+ f(first, x, y, leftw, h);
+ f(rest, x + leftw, y, w - leftw, h);
+ } else {
+ var toph = h * ratio;
+ f(first, x, y, w, toph);
+ f(rest, x, y + toph, w, h - toph);
+ }
+ }
-for (var i = 0; i < elementcount; i++) {
- var r = i/elementcount,
- col = _(endcolor).map(function(e,i) {
- var s = startcolor[i]
- return Math.floor(r*e + (1-r)*s)
- });
- data.push({
- label: "Cluster " + (1+i),
- i: i+1,
- color: "rgb("+col.join(",")+")",
- value: 1+Math.pow(Math.random(),2)*5
- });
-}
-
-/* Génération du Treemap */
+ function pivot(data, x, y, w, h) {
+ if (data.length == 1) {
+ data[0].x = x;
+ data[0].y = x;
+ data[0].w = w;
+ data[0].h = h;
+ return;
+ }
+ var cut = 1, cumul = 0, bestcumul = 0, total = _(data).reduce(function(a,b){return a+b.value},0), bestcut = Infinity;
+ for (var i = 0; i < data.length - 1; i++) {
+ cumul += data[i].value;
+ var delta = Math.abs(cumul - total/2);
+ if (delta < bestcut) {
+ bestcut = delta;
+ bestcumul = cumul;
+ cut = i+1;
+ } else {
+ break;
+ }
+ }
+ cuttree(data, x, y, w, h, cut, bestcumul / total, pivot);
+ }
-data = _(data).sortBy(function(d) { return -d.value; });
-
-var IDEALRATIO = 1.25;
-
-function cuttree(data, x, y, w, h, cut, ratio, callback) {
-
- function f(subdata, subx, suby, subw, subh) {
- if (subdata.length == 1) {
- subdata[0].x = subx;
- subdata[0].y = suby;
- subdata[0].w = subw;
- subdata[0].h = subh;
- } else {
- callback(subdata, subx, suby, subw, subh)
+ function squarify(data, x, y, w, h) {
+ if (data.length == 1) {
+ data[0].x = x;
+ data[0].y = x;
+ data[0].w = w;
+ data[0].h = h;
+ return;
}
+ var cut = 1, cumul = 0, bestcumul = 0, total = _(data).reduce(function(a,b){return a+b.value},0), bestcut = Infinity;
+ for (var i = 0; i < data.length - 1; i++) {
+ cumul += data[i].value;
+ cuttree(data, x, y, w, h, i+1, cumul / total, pivot);
+ var ratio = Math.abs(Math.log(IDEALRATIO*data[0].h/data[0].w));
+ if (ratio < bestcut) {
+ bestcut = ratio;
+ bestcumul = cumul;
+ cut = i+1;
+ } else {
+ break;
+ }
+ }
+ cuttree(data, x, y, w, h, cut, bestcumul / total, squarify);
}
- var first = _(data).first(cut), rest = _(data).rest(cut);
- if (!first.length || !rest.length) {
- return;
- }
- if (w/h > IDEALRATIO) {
- var leftw = w * ratio;
- f(first, x, y, leftw, h);
- f(rest, x + leftw, y, w - leftw, h);
- } else {
- var toph = h * ratio;
- f(first, x, y, w, toph);
- f(rest, x, y + toph, w, h - toph);
- }
-}
-function pivot(data, x, y, w, h) {
- var cut = 1, cumul = 0, bestcumul = 0, total = _(data).reduce(function(a,b){return a+b.value},0), bestcut = Infinity;
- for (var i = 0; i < data.length - 1; i++) {
- cumul += data[i].value;
- var delta = Math.abs(cumul - total/2);
- if (delta < bestcut) {
- bestcut = delta;
- bestcumul = cumul;
- cut = i+1;
- } else {
- break;
- }
- }
- cuttree(data, x, y, w, h, cut, bestcumul / total, pivot);
-}
-
-function squarify(data, x, y, w, h) {
- var cut = 1, cumul = 0, bestcumul = 0, total = _(data).reduce(function(a,b){return a+b.value},0), bestcut = Infinity;
- for (var i = 0; i < data.length - 1; i++) {
- cumul += data[i].value;
- cuttree(data, x, y, w, h, i+1, cumul / total, pivot);
- var ratio = Math.abs(Math.log(IDEALRATIO*data[0].h/data[0].w));
- if (ratio < bestcut) {
- bestcut = ratio;
- bestcumul = cumul;
- cut = i+1;
- } else {
- break;
- }
- }
- cuttree(data, x, y, w, h, cut, bestcumul / total, squarify);
-}
-
-/* Template des éléments à insérer */
-var actu =
- '<div class="actu" style="left: <%=x%>px; top: <%=y%>px; width: <%=w%>px; height: <%=h%>px; background: <%=color%>">'+
- '<a href="#">'+
- '<img src="img/home-visuel-<%-i%>.jpg" alt="" />'+
- '</a>'+
+ /* Templates des éléments à insérer */
+
+ var articleTemplate = _(
+ '<div class="cluster-article" style="left: <%=x%>px; top: <%=y%>px; width: <%=w%>px; height: <%=h%>px;">'+
+ '<img src="<%=image_url%>" />' +
+ '</div>'
+ ).template();
+
+ var clusterTemplate = _(
+ '<div class="actu" style="left: <%=x%>px; top: <%=y%>px; width: <%=w - 1%>px; height: <%=h - 1%>px; background: #ffffff" data-cluster-id="<%=id%>">'+
+ '<%=articles%>'+ // Pour l'image composite
+ '<img src="<%=image_url%>" />' + // Pour l'image de cluster
+ '<div class="voile"></div>'+
'<div class="inner-actu">'+
- '<h2><a href="#"><%-label%></a></h2>'+
+ '<h2><a href="http://localhost:8000/<%=query_id%>/<%=id%>/0/12/0"><%-label%></a></h2>'+
'<div class="links">'+
'<ul>'+
- '<li><a href="#" title="Supprimer le cluster" class="trash"></a></li>'+
- '<li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li>'+
- '<li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li>'+
+ '<li><a href="#" title="<%=annotation_count%> Annotations sur ce cluster" class="file"><span><%=annotation_count%></span></a></li>'+
+ '</ul>'+
+ '</div>'+
+ '</div>'+
+ '<p class="abstract"><%= abstract %></p>'+
+ '</div>'
+ ).template();
+
+ /* Templates pour la vue liste */
+
+ var clusterListeTemplate = _(
+ '<div class="article" data-cluster-id="<%= id %>">'+
+ '<div class="inner-article clearfix">'+
+ '<h2><a href="http://localhost:8000/<%=query_id%>/<%=id%>/0/12/0" title="Lire l\'article" > <%= title %> »</a></h2>'+
+ '<p class="number-article">'+
+ '<a href="http://localhost:8000/<%=query_id%>/<%=id%>/0/12/0"><%= documents_number %> articles | <%= annotations.length %> annotations </a>'+
+ '<a title="ajouter une annotation" class="add-annotation" href="#"></a>'+
+ '</p>'+
+ '<div class="article-annotations">'+
+ '<a title="48 annotations" class="blue" href="#" style="width:20%;"></a>'+
+ '<a title="title" class="green" href="#" style="width:20%;"></a>'+
+ '<a title="title" class="red" href="#" style="width:40%;"></a>'+
+ '<a title="title" class="empty" href="#" style="width:20%;"></a>'+
+ '</div>'+
+ '<div class="article-content">'+
+ '<p class="resume"><%= abstract %></p>'+
+ '<ul class="links">'+
+ '<ul>'+
+ '<% _(documents).each(function(d) { print("<li><a href=\'" + d.url_document + "\'>" + d.title.replace(/(^.{30,60})[\s].+$/m,\'$1…\') + "</a></li>"); }) %>'+
+ '</ul>'+
+ '</ul>'+
+ '</div>'+
+ '</div>'+
+ '</div>'
+ ).template();
+
+ var clusterListeTemplateDossierDoc = _(
+ '<div class="article" data-cluster-id="<%= id %>">'+
+ '<div class="inner-article clearfix">'+
+ '<h2><a href="http://localhost:8000/documentary_files/<%=user%>/<%=id%>/0/12/<%=doc_id%>" title="Lire l\'article" > <%= title %> »</a></h2>'+
+ '<p class="number-article">'+
+ '<a href="http://localhost:8000/documentary_files/<%=user%>/<%=id%>/0/12/<%=doc_id%>"><%= documents_number %> articles | <%= annotations.length %> annotations </a>'+
+ '<a title="ajouter une annotation" class="add-annotation" href="#"></a>'+
+ '</p>'+
+ '<div class="article-annotations">'+
+ '<a title="48 annotations" class="blue" href="#" style="width:20%;"></a>'+
+ '<a title="title" class="green" href="#" style="width:20%;"></a>'+
+ '<a title="title" class="red" href="#" style="width:40%;"></a>'+
+ '<a title="title" class="empty" href="#" style="width:20%;"></a>'+
+ '</div>'+
+ '<div class="article-content">'+
+ '<p class="resume"><%= abstract %></p>'+
+ '<ul class="links">'+
+ '<ul>'+
+ '<% _(documents).each(function(d) { print("<li><a href=\'" + d.url_document + "\'>" + d.title.replace(/(^.{30,60})[\s].+$/m,\'$1…\') + "</a></li>"); }) %>'+
+ '</ul>'+
+ '</ul>'+
+ '</div>'+
+ '</div>'+
+ '</div>'
+ ).template();
+
+ var clusterTemplateDossierDoc = _(
+ '<div class="actu" style="left: <%=x%>px; top: <%=y%>px; width: <%=w - 1%>px; height: <%=h - 1%>px; background: #ffffff" data-cluster-id="<%=id%>">'+
+ '<%=articles%>'+ // Pour l'image composite
+ '<img src="<%=image_url%>" />' + // Pour l'image de cluster
+ '<div class="voile"></div>'+
+ '<div class="inner-actu">'+
+ '<h2><a href="http://localhost:8000/documentary_files/<%=user%>/<%=id%>/0/12/<%=doc_id%>"><%-label%></a></h2>'+
+ '<div class="links">'+
+ '<ul>'+
+ '<li><a href="#" title="<%=annotation_count%> Annotations sur ce cluster" class="file"><span><%=annotation_count%></span></a></li>'+
'</ul>'+
'</div>'+
'</div>'+
- '</div>';
-var tmpl = _.template(actu);
-
-squarify(data,0,0,760,358);
-
-document.getElementById('treemap1').innerHTML = _(data).reduce(function(mem, d) {
- return mem + tmpl(d);
-},"");
+ '<p class="abstract"><%= abstract %></p>'+
+ '</div>'
+ ).template();
+ /* var clusterListeTemplate = _(
+ '<div class="article" data-cluster-id="<%= id %>">'+
+ '<div class="inner-article clearfix">'+
+ '<h2><a onClick="getDocumentsWithAnnotations();" title="Lire l\'article" style="cursor:pointer;"> <%= title %> »</a></h2> <form id="ajaxgetdocuments" method="post" action="/<%=query_id%>/<%=id%>/0/10"> <input type="hidden" id="requestType" name="requestType" value="documents"/></form>'+
+ '<p class="number-article">'+
+ '<a href="http://localhost:8000/documents_cluster/<%=query_id%>/<%=id%>/0/10"><%= documents_number %> articles | <%= annotations.length %> annotations </a>'+
+ '<a title="ajouter une annotation" class="add-annotation" href="#"></a>'+
+ '</p>'+
+ '<div class="article-annotations">'+
+ '<a title="48 annotations" class="blue" href="#" style="width:20%;"></a>'+
+ '<a title="title" class="green" href="#" style="width:20%;"></a>'+
+ '<a title="title" class="red" href="#" style="width:40%;"></a>'+
+ '<a title="title" class="empty" href="#" style="width:20%;"></a>'+
+ '</div>'+
+ '<div class="article-content">'+
+ '<p class="resume"><%= abstract %></p>'+
+ '<ul class="links">'+
+ '<ul>'+
+ '<% _(documents).each(function(d) { print("<li><a href=\'" + d.url_document + "\'>" + d.title.replace(/(^.{30,60})[\s].+$/m,\'$1…\') + "</a></li>"); }) %>'+
+ '</ul>'+
+ '</ul>'+
+ '</div>'+
+ '</div>'+
+ '</div>'
+ ).template();
+ */
+ var hTreemap = 600;//à définir
+ $('#treemap').height(hTreemap);
+
+ function showResults(results)
+ {
+
+ if (typeof (results.clusters) == 'undefined')
+ {
+ $('#create-dossierDoc').hide();
+ }
+ else
+ {
+ $('#create-dossierDoc').show();
+ }
+ $(".articles").empty();
+ $(".articles").html(_(results.clusters).reduce(function(mem, c) { return mem + clusterListeTemplate(c); },''));
+ var data = _(results.clusters).map(function(cluster, i) {
+ var hue = (parseInt(cluster.id)%6)/6
+ return {
+ id: cluster.id,
+ query_id: cluster.query_id,
+ label: cluster.title,
+ abstract : cluster.abstract,
+ value: parseFloat(cluster.weight),
+ annotation_count: cluster.annotations.length,
+ image_url: cluster.url_image || false,
+ articles: cluster.documents.filter(function(article) {
+ return !!article.url_image
+ })
+ .map(function(article, j) {
+ return {
+ value: parseFloat(article.weight),
+ image_url: article.url_image || false
+ }
+ })
+ }
+ });
+ data = _(data).sortBy(function(d) {
+ return -d.value;
+ });
+ squarify(data,0,0,760,hTreemap);
+ _(data).each(function(cluster) {
+ squarify(cluster.articles, 0, 0, cluster.w - 1, cluster.h - 1);
+ _(cluster.articles).sortBy(function(d) {
+ return -d.value;
+ });
+ cluster.articles = _(cluster.articles).reduce(function(mem, a) {
+ return mem + articleTemplate(a);
+ }, "");
+ });
+ var treemapHtml = _(data).reduce(function(mem, d) {
+ return mem + clusterTemplate(d);
+ },"");
+ $('#treemap #actus').empty();
+ $('#treemap #actus').html(treemapHtml);
-//redimensionnement d'image
-$(".actu").each(function(k,v){
- var wActu = $(this).width();
- var hActu = $(this).height();
- var img = $(this).find('img');
- var wImg = img.width();
- var hImg = img.height();
+ //redimensionnement d'image
+ $(".actu img").each(function()
+ {
+
+ var img = $(this),
+ div = $(this).parent();
+ $(this).load(function() {
+ var iw = $(this).width(),
+ ih = $(this).height(),
+ dw = $(this).parent().width(),
+ dh = $(this).parent().height(),
+ scale = Math.max(dw/iw, dh/ih),
+ niw = iw * scale,
+ nih = ih * scale;
+ img.css({
+ width: niw,
+ height: nih,
+ "margin-left": (dw - niw) / 2,
+ "margin-top": (dh - nih) / 3
+ });
+ });
+ });
+
+ /* $(".cluster").html(data.reduce(function(mem, c) {
+ return mem + '<li><a href="http://localhost:8000/'+c.query_id+'/'+c.id+'/0/12/0" title="Afficher le cluster" data-cluster-id="' + c.id + '">' + c.label + '</a></li>'
+ }, ''));
+
+ $(".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"));
+ }
+ )*/
+
+
+ }
+
+ function showResultsDossierDoc(results)
+ {
+ $(".articles").empty();
+ $(".articles").html(_(results.clusters).reduce(function(mem, c) { return mem + clusterListeTemplateDossierDoc(c); },''));
+ var data = _(results.clusters).map(function(cluster, i) {
+ var hue = (parseInt(cluster.id)%6)/6
+ return {
+ id: cluster.id,
+ doc_id: cluster.doc_id,
+ user: cluster.user,
+ label: cluster.title,
+ abstract : cluster.abstract,
+ value: parseFloat(cluster.weight),
+ annotation_count: cluster.annotations.length,
+ image_url: cluster.url_image || false,
+ articles: cluster.documents.filter(function(article) {
+ return !!article.url_image
+ })
+ .map(function(article, j) {
+ return {
+ value: parseFloat(article.weight),
+ image_url: article.url_image || false
+ }
+ })
+ }
+ });
+
+ data = _(data).sortBy(function(d) {
+ return -d.value;
+ });
- var ratioImg = wImg/hImg;
- img.css('height',hActu);
- img.css('width',hActu*ratioImg);
- wImg = img.width();
- hImg = img.height();
+ squarify(data,0,0,760,hTreemap);
+ _(data).each(function(cluster) {
+ squarify(cluster.articles, 0, 0, cluster.w - 1, cluster.h - 1);
+ _(cluster.articles).sortBy(function(d) {
+ return -d.value;
+ });
+ cluster.articles = _(cluster.articles).reduce(function(mem, a) {
+ return mem + articleTemplate(a);
+ }, "");
+ });
+ var treemapHtml = _(data).reduce(function(mem, d) {
+ return mem + clusterTemplateDossierDoc(d);
+ },"");
+ $('#treemap #actus').empty();
+ $('#treemap #actus').html(treemapHtml);
- if(wActu>wImg){
- var ratioImg = hImg/wImg;
- img.css('width', wActu);
- img.css('height',wActu*ratioImg);
- wImg = img.width();
- hImg = img.height();
+ //redimensionnement d'image
+ $(".actu img").each(function()
+ {
+ var img = $(this),
+ div = $(this).parent();
+ var loadThisImage = function() {
+ var iw = img.width(),
+ ih = img.height(),
+ dw = div.width(),
+ dh = div.height(),
+ scale = Math.max(dw/iw, dh/ih),
+ niw = iw * scale,
+ nih = ih * scale;
+ img.css({
+ width: niw,
+ height: nih,
+ "margin-left": (dw - niw) / 2,
+ "margin-top": (dh - nih) / 3
+ });
+ }
+ if (this.width) {
+ loadThisImage();
+ } else {
+ img.load(loadThisImage);
+ }
+ });
+
+ /*$("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");
+ });*/
}
- if (wImg<wActu) {
- img.css('margin-left',(wActu-wImg)/2);
- }else{
- img.css('margin-left',-(wImg-wActu)/2);
- }
- if (hImg<hActu) {
- img.css('margin-top',(hActu-hImg)/2);
- }else{
- img.css('margin-top',-(hImg-hActu)/2);
- }
-});
\ No newline at end of file
+
+ $("#liste").hide();
+//})
\ No newline at end of file