diff --git a/js/diagrams.js b/js/diagrams.js index 0fc9488..eb0b00e 100644 --- a/js/diagrams.js +++ b/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; }