|
@@ -22,23 +22,23 @@ var Tasks = Array(); |
|
|
d3.json("le-prog-json", |
|
|
d3.json("le-prog-json", |
|
|
function(error, json) { |
|
|
function(error, json) { |
|
|
if (error) return console.warn(error); |
|
|
if (error) return console.warn(error); |
|
|
var Keys = Object.keys(json["all"]) |
|
|
|
|
|
|
|
|
var Keys = Object.keys(json["all"]); |
|
|
// Build set of data in memory |
|
|
// Build set of data in memory |
|
|
for (var k = 0; k < Keys.length; k++) { |
|
|
for (var k = 0; k < Keys.length; k++) { |
|
|
Salles[Keys[k]] = Array(); |
|
|
Salles[Keys[k]] = Array(); |
|
|
Areas[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 |
|
|
// Fix Json to make date objects |
|
|
Tasks[Keys[k]].forEach(function(d) { |
|
|
Tasks[Keys[k]].forEach(function(d) { |
|
|
d.startDate = new Date(d.startDate); |
|
|
d.startDate = new Date(d.startDate); |
|
|
d.endDate = new Date(d.endDate); |
|
|
d.endDate = new Date(d.endDate); |
|
|
}) |
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
// Build the list of Salles and Areas |
|
|
// Build the list of Salles and Areas |
|
|
Tasks[Keys[k]].forEach(function(d) { |
|
|
Tasks[Keys[k]].forEach(function(d) { |
|
|
Salles[Keys[k]].push( d.placeName ); |
|
|
Salles[Keys[k]].push( d.placeName ); |
|
|
Areas[Keys[k]].push( d.status ); |
|
|
Areas[Keys[k]].push( d.status ); |
|
|
} ) |
|
|
|
|
|
|
|
|
} ); |
|
|
Salles[Keys[k]] = d3.set(Salles[Keys[k]]).values(); |
|
|
Salles[Keys[k]] = d3.set(Salles[Keys[k]]).values(); |
|
|
Areas[Keys[k]] = d3.set(Areas[Keys[k]]).values(); |
|
|
Areas[Keys[k]] = d3.set(Areas[Keys[k]]).values(); |
|
|
// Create Controls to Handle user selection |
|
|
// Create Controls to Handle user selection |
|
@@ -61,6 +61,10 @@ d3.json("le-prog-json", |
|
|
.style("margin-left", "5px") |
|
|
.style("margin-left", "5px") |
|
|
.text(TypeArea); |
|
|
.text(TypeArea); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
d3.select("#Schedule_SVG_"+Keys[k]) |
|
|
|
|
|
.append("br"); |
|
|
|
|
|
|
|
|
// Create a dedicated SVG for it |
|
|
// Create a dedicated SVG for it |
|
|
svg = d3.select("#Schedule_SVG_"+Keys[k]) |
|
|
svg = d3.select("#Schedule_SVG_"+Keys[k]) |
|
|
.append("svg") |
|
|
.append("svg") |
|
@@ -69,7 +73,9 @@ d3.json("le-prog-json", |
|
|
//.attr("height", height + margin.top + margin.bottom) |
|
|
//.attr("height", height + margin.top + margin.bottom) |
|
|
.attr("viewBox", "0 0 " + (width + margin.right + margin.left) + " " + (height + margin.top + margin.bottom) ) |
|
|
.attr("viewBox", "0 0 " + (width + margin.right + margin.left) + " " + (height + margin.top + margin.bottom) ) |
|
|
.attr("preserveAspectRatio", "xMidYMid meet"); |
|
|
.attr("preserveAspectRatio", "xMidYMid meet"); |
|
|
|
|
|
|
|
|
|
|
|
// Add some gradient |
|
|
|
|
|
header(svg); |
|
|
|
|
|
// Create axis |
|
|
svg.append("g") |
|
|
svg.append("g") |
|
|
.attr("class", "xAxis axis"); |
|
|
.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) { |
|
|
var keyFunction = function(d) { |
|
|
return d.startDate + d.placeName + d.endDate; |
|
|
return d.startDate + d.placeName + d.endDate; |
|
|
}; |
|
|
}; |
|
@@ -92,14 +174,14 @@ function HandleEvents(Ctrl) { |
|
|
d3.selectAll("input[name=OptTimetable-"+Ctrl+"]") |
|
|
d3.selectAll("input[name=OptTimetable-"+Ctrl+"]") |
|
|
.data(Areas[Ctrl]) |
|
|
.data(Areas[Ctrl]) |
|
|
.on("change", function(TypeData) { |
|
|
.on("change", function(TypeData) { |
|
|
ArrayChoice = Array() |
|
|
|
|
|
|
|
|
ArrayChoice = Array(); |
|
|
checked = d3.selectAll("input[name=OptTimetable-"+Ctrl+"]")[0] |
|
|
checked = d3.selectAll("input[name=OptTimetable-"+Ctrl+"]")[0] |
|
|
.forEach( function(v) |
|
|
.forEach( function(v) |
|
|
{ |
|
|
{ |
|
|
if (d3.select(v).node().checked) |
|
|
if (d3.select(v).node().checked) |
|
|
ArrayChoice.push(v.attributes['area'].value) |
|
|
|
|
|
|
|
|
ArrayChoice.push(v.attributes['area'].value); |
|
|
} |
|
|
} |
|
|
) |
|
|
|
|
|
|
|
|
); |
|
|
area_select = Array(); |
|
|
area_select = Array(); |
|
|
selection = Tasks[Ctrl].filter(function(v) { |
|
|
selection = Tasks[Ctrl].filter(function(v) { |
|
|
return ArrayChoice.indexOf(v.status)>=0; |
|
|
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 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 '<div class="EvtBox '+ taskStatus[d.status] +'"><a href="/event/'+ d.uid + |
|
|
|
|
|
'">' + d.desc + '</a></div>' |
|
|
|
|
|
}) |
|
|
|
|
|
.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") |
|
|
var rect = chart.selectAll("rect") |
|
|
.data(Set_of_Task, keyFunction); |
|
|
.data(Set_of_Task, keyFunction); |
|
|
|
|
|
|
|
|
rect.enter() |
|
|
rect.enter() |
|
|
.insert("rect",":first-child") |
|
|
|
|
|
|
|
|
.insert("rect") |
|
|
.attr("rx", 5) |
|
|
.attr("rx", 5) |
|
|
.attr("ry", 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){ |
|
|
.attr("class", function(d){ |
|
|
if(taskStatus[d.status] == null) |
|
|
if(taskStatus[d.status] == null) |
|
@@ -208,7 +255,7 @@ function displayit(Set_of_Task, Set_of_Area, key) { |
|
|
return taskStatus[d.status]; |
|
|
return taskStatus[d.status]; |
|
|
}) |
|
|
}) |
|
|
.transition() |
|
|
.transition() |
|
|
.duration(750) |
|
|
|
|
|
|
|
|
.duration(750); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
rect.transition() |
|
|
rect.transition() |
|
@@ -232,6 +279,42 @@ function displayit(Set_of_Task, Set_of_Area, key) { |
|
|
.style("opacity", 1e-6) |
|
|
.style("opacity", 1e-6) |
|
|
.remove(); |
|
|
.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 '<div class="EvtBox '+ taskStatus[d.status] +'"><a href="/event/'+ d.uid + |
|
|
|
|
|
'">' + d.desc + '</a></div>'; |
|
|
|
|
|
}) |
|
|
|
|
|
.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") |
|
|
svg.select(".yAxis") |
|
|
.attr("transform", "translate("+ margin.left +","+ margin.top +")") |
|
|
.attr("transform", "translate("+ margin.left +","+ margin.top +")") |
|
|
.transition() |
|
|
.transition() |
|
|