diff --git a/jm2l/static/js/programme.js b/jm2l/static/js/programme.js index 3ee7a3d..c7f014a 100644 --- a/jm2l/static/js/programme.js +++ b/jm2l/static/js/programme.js @@ -22,23 +22,23 @@ var Tasks = Array(); d3.json("le-prog-json", function(error, json) { if (error) return console.warn(error); - var Keys = Object.keys(json["all"]) + var Keys = Object.keys(json["all"]); // Build set of data in memory for (var k = 0; k < Keys.length; k++) { Salles[Keys[k]] = Array(); Areas[Keys[k]] = Array(); - Tasks[Keys[k]] = json["all"][Keys[k]] + Tasks[Keys[k]] = json["all"][Keys[k]]; // Fix Json to make date objects Tasks[Keys[k]].forEach(function(d) { d.startDate = new Date(d.startDate); d.endDate = new Date(d.endDate); - }) + }); // Build the list of Salles and Areas Tasks[Keys[k]].forEach(function(d) { Salles[Keys[k]].push( d.placeName ); Areas[Keys[k]].push( d.status ); - } ) + } ); Salles[Keys[k]] = d3.set(Salles[Keys[k]]).values(); Areas[Keys[k]] = d3.set(Areas[Keys[k]]).values(); // Create Controls to Handle user selection @@ -61,6 +61,10 @@ d3.json("le-prog-json", .style("margin-left", "5px") .text(TypeArea); }); + + d3.select("#Schedule_SVG_"+Keys[k]) + .append("br"); + // Create a dedicated SVG for it svg = d3.select("#Schedule_SVG_"+Keys[k]) .append("svg") @@ -69,7 +73,9 @@ d3.json("le-prog-json", //.attr("height", height + margin.top + margin.bottom) .attr("viewBox", "0 0 " + (width + margin.right + margin.left) + " " + (height + margin.top + margin.bottom) ) .attr("preserveAspectRatio", "xMidYMid meet"); - + // Add some gradient + header(svg); + // Create axis svg.append("g") .attr("class", "xAxis axis"); @@ -84,6 +90,82 @@ d3.json("le-prog-json", } }); +function header(svg) { + defs = svg.append("svg:defs"); + + conf = defs.append("svg:linearGradient") + .attr("id", "BoxGradient-Conference") + .attr("x1", "100%") + .attr("y1", "0%") + .attr("x2", "50%") + .attr("y2", "100%") + .attr("spreadMethod", "pad"); + + conf.append("svg:stop") + .attr("offset", "0%") + .attr("stop-color", "#EEE") + .attr("stop-opacity", 0); + + conf.append("svg:stop") + .attr("offset", "15%") + .attr("stop-color", "#BDF86B") + .attr("stop-opacity", .5); + + atlier = defs.append("svg:linearGradient") + .attr("id", "BoxGradient-Atelier") + .attr("x1", "100%") + .attr("y1", "0%") + .attr("x2", "50%") + .attr("y2", "100%") + .attr("spreadMethod", "pad"); + + atlier.append("svg:stop") + .attr("offset", "0%") + .attr("stop-color", "#EEE") + .attr("stop-opacity", 0); + + atlier.append("svg:stop") + .attr("offset", "15%") + .attr("stop-color", "#FF856E") + .attr("stop-opacity", .5); + + // append filter element + var filter = defs.append( 'filter' ) + .attr( 'id', 'dropshadow' ); /// !!! important - define id to reference it later + + // append gaussian blur to filter + filter.append( 'feGaussianBlur' ) + .attr( 'in', 'SourceAlpha' ) + .attr( 'stdDeviation', 3 ) // !!! important parameter - blur + .attr( 'result', 'blur' ); + + // append offset filter to result of gaussion blur filter + filter.append( 'feOffset' ) + .attr( 'in', 'blur' ) + .attr( 'dx', 2 ) // !!! important parameter - x-offset + .attr( 'dy', 2 ) // !!! important parameter - y-offset + .attr( 'result', 'offsetBlur' ); + + filter.append( 'feComponentTransfer' ) + .append( 'feFuncA' ) + .attr( "type", "linear" ) + .attr( "slope", "0.4" ); + + // merge result with original image + var feMerge = filter.append( 'feMerge' ); + + // first layer result of blur and offset + feMerge.append( 'feMergeNode' ) + .attr( 'in", "offsetBlur' ); + + // original image on top + feMerge.append( 'feMergeNode' ) + .attr( 'in', 'SourceGraphic' ); + // end filter stuff + +} + + var keyFunction = function(d) { return d.startDate + d.placeName + d.endDate; }; @@ -92,14 +174,14 @@ function HandleEvents(Ctrl) { d3.selectAll("input[name=OptTimetable-"+Ctrl+"]") .data(Areas[Ctrl]) .on("change", function(TypeData) { - ArrayChoice = Array() + ArrayChoice = Array(); checked = d3.selectAll("input[name=OptTimetable-"+Ctrl+"]")[0] .forEach( function(v) { if (d3.select(v).node().checked) - ArrayChoice.push(v.attributes['area'].value) + ArrayChoice.push(v.attributes['area'].value); } - ) + ); area_select = Array(); selection = Tasks[Ctrl].filter(function(v) { return ArrayChoice.indexOf(v.status)>=0; @@ -154,53 +236,18 @@ function displayit(Set_of_Task, Set_of_Area, key) { var svg = d3.select("#TimeTable-"+key); - var chart = svg.select(".timetable") - - var content = chart.selectAll("foreignObject") - .data(Set_of_Task, keyFunction); - - content.enter() - .insert("foreignObject",":first-child") - .append("xhtml:body") - .attr("class", "SvgBody") - .html(function(d) { - return '
' - }) - .transition() - .duration(750); - - content.transition() - .duration(750) - .attr("x", function(d){ - return xScale(d.placeName || "unk"); - }) - .attr("y", function(d){ - return yScale( d.startDate ); - }) - .attr("width", function(d) { - return xScale.rangeBand(); - }) - .attr("height", function(d) { - return (yScale( d.endDate ) - yScale( d.startDate )); - }); - - content.exit() - .transition() - .duration(300) - .style("opacity", 1e-6) - .remove(); + var chart = svg.select(".timetable"); var rect = chart.selectAll("rect") .data(Set_of_Task, keyFunction); rect.enter() - .insert("rect",":first-child") + .insert("rect") .attr("rx", 5) .attr("ry", 5) - .attr("filter", "url(/img/shadow.svg#dropshadow)") - .attr("style", function(d){ - return "fill:url(/img/shadow.svg#BoxGradient-"+ taskStatus[d.status] +")" + .attr("filter", "url(#dropshadow)") + .style("fill", function(d){ + return "url(#BoxGradient-"+ taskStatus[d.status] +")"; }) .attr("class", function(d){ if(taskStatus[d.status] == null) @@ -208,7 +255,7 @@ function displayit(Set_of_Task, Set_of_Area, key) { return taskStatus[d.status]; }) .transition() - .duration(750) + .duration(750); rect.transition() @@ -232,6 +279,42 @@ function displayit(Set_of_Task, Set_of_Area, key) { .style("opacity", 1e-6) .remove(); + var content = chart.selectAll("foreignObject") + .data(Set_of_Task, keyFunction); + + content.enter() + .insert("foreignObject") + .append("xhtml:div") + .attr("class", "SvgBody") + .html(function(d) { + return ''; + }) + .transition() + .duration(750); + + content.transition() + .duration(750) + .attr("x", function(d){ + return xScale(d.placeName || "unk"); + }) + .attr("y", function(d){ + return yScale( d.startDate ); + }) + .attr("width", function(d) { + return xScale.rangeBand(); + }) + .attr("height", function(d) { + return (yScale( d.endDate ) - yScale( d.startDate )); + }); +// .attr("transform" ,"scale(1)"); + + content.exit() + .transition() + .duration(300) + .style("opacity", 1e-6) + .remove(); + svg.select(".yAxis") .attr("transform", "translate("+ margin.left +","+ margin.top +")") .transition() diff --git a/jm2l/templates/Participer.mako b/jm2l/templates/Participer.mako index a41a63d..beb381d 100644 --- a/jm2l/templates/Participer.mako +++ b/jm2l/templates/Participer.mako @@ -55,7 +55,7 @@ DicForm ={ } %>