Merge branch 'master' of https://github.com/F1Vis/f1vis
This commit is contained in:
Marcel
commit
887c438d20
136
js/diagrams.js
136
js/diagrams.js
|
|
@ -13,7 +13,6 @@ function createLineGraph(containerId, raceData){
|
|||
|
||||
var enhancedLapData = processor.getEnhancedLapDataPerDriver(raceData);
|
||||
|
||||
|
||||
// Configuration
|
||||
var height = 720;
|
||||
var width = 1080;
|
||||
|
|
@ -21,6 +20,14 @@ function createLineGraph(containerId, raceData){
|
|||
var rectSize = 10;
|
||||
var amountClickedLines = 0;
|
||||
|
||||
//ElemTypes of this graph
|
||||
var elemTypes = {
|
||||
line: "line",
|
||||
linepoint: "linepoint",
|
||||
pitstoppoint: "pitstoppoint",
|
||||
endpoint: "endpoint"
|
||||
};
|
||||
|
||||
// set the dimensions and margins of the graph
|
||||
var margin = {top: 50, right: 100, bottom: 50, left: 100},
|
||||
width = width - margin.left - margin.right,
|
||||
|
|
@ -61,6 +68,7 @@ function createLineGraph(containerId, raceData){
|
|||
.attr("data-line", driverLapData.driver.driverId)// custom data to Specify the line
|
||||
.attr("data-opacitychange", 1)
|
||||
.attr("data-highlighted", 0)
|
||||
.attr("data-elemtype", elemTypes.line)
|
||||
.attr("stroke", getColorValue(driverIndex, enhancedLapData.length) )
|
||||
.attr("d", lineDataDefinition);
|
||||
|
||||
|
|
@ -69,13 +77,30 @@ function createLineGraph(containerId, raceData){
|
|||
.data(driverLapData.laps)
|
||||
.enter().append("circle") // Uses the enter().append() method
|
||||
.attr("class", "dot linedot") // Assign a class for styling
|
||||
.attr("id", function(d, i) { return "circle-linepoint-" + d.lap + "-" + d.driverId; })
|
||||
.attr("data-line", driverLapData.driver.driverId)
|
||||
.attr("data-opacitychange", 0)
|
||||
.attr("data-highlighted", 0)
|
||||
.attr("data-elemtype", elemTypes.linepoint)
|
||||
.attr("fill", getColorValue(driverIndex, enhancedLapData.length))
|
||||
.attr("cx", function(d, i) {return x(d.lap) })
|
||||
.attr("cy", function(d, i) { return y(d.position) })
|
||||
.attr("r", linePointSize)
|
||||
.style("opacity", 0);
|
||||
|
||||
//Appends a circle for each datapoint
|
||||
svg.selectAll(".invisiblelinepoint")
|
||||
.data(driverLapData.laps)
|
||||
.enter().append("circle") // Uses the enter().append() method
|
||||
.attr("class", "dot linedot") // Assign a class for styling
|
||||
.attr("circle-id", function(d, i) { return "circle-linepoint-" + d.lap + "-" + d.driverId; })
|
||||
.attr("data-line", driverLapData.driver.driverId)
|
||||
.attr("data-opacitychange", 0)
|
||||
.attr("data-highlighted", 0)
|
||||
.attr("fill", getColorValue(driverIndex, enhancedLapData.length))
|
||||
.attr("cx", function(d, i) {return x(d.lap) })
|
||||
.attr("cy", function(d, i) { return y(d.position) })
|
||||
.attr("r", linePointSize)
|
||||
.attr("r", linePointSize*2.4)
|
||||
.on("click", handleClickOnPoint)
|
||||
.on("mouseover", handleMouseOverLinePoint)
|
||||
.on("mouseout", handleMouseOutLinePoint)
|
||||
|
|
@ -87,10 +112,11 @@ function createLineGraph(containerId, raceData){
|
|||
svg.selectAll(".pitstoppoint")
|
||||
.data([singleLap])
|
||||
.enter().append("circle") // Uses the enter().append() method
|
||||
.attr("class", "dot pitstopdot") // Assign a class for styling
|
||||
.attr("class", "dot pitstoppoint") // Assign a class for styling
|
||||
.attr("data-line", driverLapData.driver.driverId)
|
||||
.attr("data-opacitychange", 1)
|
||||
.attr("data-highlighted", 0)
|
||||
.attr("data-elemtype", elemTypes.pitstoppoint)
|
||||
.attr("fill", getColorValue(driverIndex, enhancedLapData.length))
|
||||
.attr("cx", function(d, i) {return x(d.lap) })
|
||||
.attr("cy", function(d, i) { return y(d.position) })
|
||||
|
|
@ -104,9 +130,7 @@ function createLineGraph(containerId, raceData){
|
|||
// in case the driver ended the race too early, get the status why he quit
|
||||
/*TODO: Mouseover for Rectangle*/
|
||||
var resultOfDriver = raceData.results.filter((result) => { return result.driverId == driverLapData.driver.driverId; });
|
||||
console.log(resultOfDriver);
|
||||
if(resultOfDriver.length > 0 && getValidEndingStatusIds().indexOf(resultOfDriver[0].statusId) < 0){
|
||||
console.log("not ended properly");
|
||||
var triangle = d3.symbol()
|
||||
.type(d3.symbolTriangle)
|
||||
.size(25);
|
||||
|
|
@ -114,15 +138,19 @@ function createLineGraph(containerId, raceData){
|
|||
svg.selectAll(".endpoint")
|
||||
.data([driverLapData.laps[driverLapData.laps.length - 1]])
|
||||
.enter().append("rect") // Uses the enter().append() method
|
||||
.attr("class", "dot pitstopdot") // Assign a class for styling
|
||||
//.attr("class", "endpoint") // Assign a class for styling
|
||||
.attr("data-line", driverLapData.driver.driverId)
|
||||
.attr("data-opacitychange", 1)
|
||||
.attr("data-highlighted", 0)
|
||||
.attr("data-elemtype", elemTypes.endpoint)
|
||||
.attr("fill", getColorValue(driverIndex, enhancedLapData.length))
|
||||
.attr("x", function(d, i) {return x(d.lap) - rectSize * 1/2 })
|
||||
.attr("y", function(d, i) { return y(d.position) - rectSize * 1/2 })
|
||||
.attr("height", rectSize)
|
||||
.attr("width", rectSize);
|
||||
.attr("width", rectSize)
|
||||
.on("click", handleClickOnPoint)
|
||||
.on("mouseover", handleMouseOverLinePoint)
|
||||
.on("mouseout", handleMouseOutLinePoint);
|
||||
|
||||
/* tried with Cross, didn't work, don't know why
|
||||
svg.selectAll(".endpoint")
|
||||
|
|
@ -157,13 +185,19 @@ function createLineGraph(containerId, raceData){
|
|||
d3.axisRight(y)
|
||||
.ticks(raceData.drivers.length)
|
||||
.tickFormat(function(d) {
|
||||
return d + " " + getDriverCodeFromPosAndLap(raceData, raceData.lapTimes.size, d) ;
|
||||
var driverCode = "";
|
||||
if(getDriverCodeFromPosAndLap(raceData, raceData.lapTimes.size, d)){
|
||||
driverCode = getDriverCodeFromPosAndLap(raceData, raceData.lapTimes.size, d);
|
||||
}else{
|
||||
driverCode = getDriverCodeFromPosAndLap(raceData, raceData.lapTimes.size - 1, d);
|
||||
}
|
||||
return d + " " + driverCode ;
|
||||
})
|
||||
)
|
||||
.attr("transform", "translate( " + (width) + ", 0 )");
|
||||
|
||||
function handleClickOnPoint(d,i){
|
||||
|
||||
console.log(d);
|
||||
//select elements that are highlightable but are not highlighted
|
||||
d3.selectAll("[data-opacitychange='" + 1 +"'][data-highlighted='" + 0 +"']")
|
||||
.style("opacity", 0.3);
|
||||
|
|
@ -194,22 +228,28 @@ function createLineGraph(containerId, raceData){
|
|||
}
|
||||
|
||||
function handleMouseOverLinePoint(d, i) {
|
||||
// Add interactivity
|
||||
// Use D3 to select element, change color and size
|
||||
if(!d.pitStop){
|
||||
d3.select(this)
|
||||
.style("opacity", 1);
|
||||
}else{
|
||||
d3.select(this)
|
||||
.attr("r", linePointSize * 2);
|
||||
}
|
||||
|
||||
var dataType = d3.select(this).attr("data-elemtype");
|
||||
//depending on Pitstop and lap different Texts
|
||||
var textArr = [];
|
||||
if(d.pitStop){
|
||||
textArr = getPitStopTextArray(raceData,d);
|
||||
}else{
|
||||
var circleId = "circle-linepoint-" + d.lap + "-" + d.driverId;
|
||||
var circle = d3.select("#" + circleId);
|
||||
|
||||
// Add interactivity
|
||||
// Use D3 to select element, change color and size
|
||||
if(dataType === elemTypes.linepoint){
|
||||
circle
|
||||
.style("opacity", 1);
|
||||
textArr = getLapTextArray(raceData,d);
|
||||
}else if(dataType === elemTypes.pitstoppoint){
|
||||
circle
|
||||
.attr("r", linePointSize * 2);
|
||||
textArr = getPitStopTextArray(raceData,d);
|
||||
}else if(dataType === elemTypes.endpoint){
|
||||
d3.select(this)
|
||||
.attr("height", rectSize * 1.3)
|
||||
.attr("width", rectSize * 1.3);
|
||||
textArr = getEndPointTextArray(raceData,d);
|
||||
}
|
||||
|
||||
//Necessary to add Text for each Line
|
||||
|
|
@ -228,22 +268,28 @@ function createLineGraph(containerId, raceData){
|
|||
}
|
||||
|
||||
function handleMouseOutLinePoint(d, i) {
|
||||
// Use D3 to select element, change color back to normal
|
||||
if(!d.pitStop){
|
||||
d3.select(this)
|
||||
.attr("r", linePointSize)
|
||||
.style("opacity", 0);
|
||||
}else{
|
||||
d3.select(this)
|
||||
.attr("r", linePointSize);
|
||||
}
|
||||
|
||||
var dataType = d3.select(this).attr("data-elemtype");
|
||||
//depending on Pitstop and lap different Texts
|
||||
var textArr = [];
|
||||
if(d.pitStop){
|
||||
textArr = getPitStopTextArray(raceData,d);
|
||||
}else{
|
||||
var circleId = "circle-linepoint-" + d.lap + "-" + d.driverId;
|
||||
var circle = d3.select("#" + circleId);
|
||||
|
||||
// Use D3 to select element, change color back to normal
|
||||
if(dataType === elemTypes.linepoint){
|
||||
circle
|
||||
.attr("r", linePointSize)
|
||||
.style("opacity", 0);
|
||||
textArr = getLapTextArray(raceData,d);
|
||||
}else if(dataType === elemTypes.pitstoppoint){
|
||||
circle
|
||||
.attr("r", linePointSize);
|
||||
textArr = getPitStopTextArray(raceData,d);
|
||||
}else if(dataType === elemTypes.endpoint){
|
||||
d3.select(this)
|
||||
.attr("height", rectSize)
|
||||
.attr("width", rectSize);
|
||||
textArr = getEndPointTextArray(raceData,d);
|
||||
}
|
||||
|
||||
textArr.forEach((text, textIndex)=> {
|
||||
|
|
@ -253,7 +299,7 @@ function createLineGraph(containerId, raceData){
|
|||
}
|
||||
|
||||
function getLapTextArray(raceData, d){
|
||||
var driverText = getDriverCodeById(raceData,d.driverId)
|
||||
var driverText = getDriverCodeById(raceData,d.driverId);
|
||||
var lapText = "Lap: " + d.lap;
|
||||
var posText = "Pos: " + d.position;
|
||||
var timeText = "Time: " + d.time;
|
||||
|
|
@ -267,6 +313,24 @@ function createLineGraph(containerId, raceData){
|
|||
return lapTextArr;
|
||||
}
|
||||
|
||||
function getEndPointTextArray(raceData, d){
|
||||
var status = "";
|
||||
var endTextArr = getLapTextArray(raceData,d);
|
||||
var allStatus = queries.getStatus();
|
||||
|
||||
for(var key in allStatus){
|
||||
if(key === undefined) continue;
|
||||
if(allStatus[key].statusId === d.finished.statusId){
|
||||
status = allStatus[key].status;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
endTextArr.push("Reason: " + status);
|
||||
|
||||
return endTextArr;
|
||||
}
|
||||
|
||||
function getDriverCodeFromPosAndLap(raceData, lapNr, pos){
|
||||
var driverCode = "";
|
||||
if(lapNr == 0){
|
||||
|
|
@ -279,7 +343,9 @@ function createLineGraph(containerId, raceData){
|
|||
driverCode = getDriverCodeById(raceData,raceData.results[pos -1].driverId);
|
||||
}
|
||||
}else{
|
||||
//TODO hier Adden
|
||||
if(raceData.lapTimes.get(lapNr)[pos-1]){
|
||||
driverCode = getDriverCodeById(raceData, raceData.lapTimes.get(lapNr)[pos-1].driverId);
|
||||
}
|
||||
}
|
||||
return driverCode;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue