From 9877869f5badb4cd555644f3d48989feceb00d7a Mon Sep 17 00:00:00 2001 From: sirsandmann Date: Thu, 28 Dec 2017 14:59:07 +0100 Subject: [PATCH] Added Rectangle for not regular ended races --- js/diagrams.js | 52 +++++++++++++++++++++++++++++++++++++------------- js/queries.js | 20 ++++++++++++++----- js/util.js | 13 +++++++++++++ 3 files changed, 67 insertions(+), 18 deletions(-) diff --git a/js/diagrams.js b/js/diagrams.js index ff5d0b8..443a0c0 100644 --- a/js/diagrams.js +++ b/js/diagrams.js @@ -2,21 +2,12 @@ // https://bl.ocks.org/mbostock/3884955 function createLineGraph(containerId, raceData){ - // Rough input validation - if(raceData.raceInfo === undefined) { - console.error(["Sorry, that raceData is empty. :-(", raceData]); - return; // early return to avoid errors - } else { - console.log(raceData); - } + console.log(raceData); - var enhancedLapData = processor.getEnhancedLapDataPerDriver(raceData); - console.log(enhancedLapData); - - // Configuration var height = 720; var width = 1080; var linePointSize = 5; + var rectSize = 10; var amountClickedLines = 0; // set the dimensions and margins of the graph @@ -47,6 +38,9 @@ function createLineGraph(containerId, raceData){ x.domain([0, raceData.lapTimes.size]); y.domain([raceData.drivers.length, 1]); + var enhancedLapData = processor.getEnhancedLapDataPerDriver(raceData); + console.log(enhancedLapData); + // Adds all lines enhancedLapData.forEach((driverLapData, driverIndex) => { //console.log(driverLapData); @@ -96,6 +90,40 @@ 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); + //get Data for last round + 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("data-line", driverLapData.driver.driverId) + .attr("data-opacitychange", 1) + .attr("data-highlighted", 0) + .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); + + /* tried with Cross, didn't work, don't know why + svg.selectAll(".endpoint") + .data([driverLapData.laps[driverLapData.laps.length - 1]]) + .enter().append("symbolCircle") // Uses the enter().append() method + .attr("size", 300) + .attr("class", "endpoint") // Assign a class for styling + .attr("fill", getColorValue(driverIndex, enhancedLapData.length)) + .attr("transform", function(d) { return "translate(" + x(d.lap) + "," + y(d.position) + ")"; }); + */ + } + }); // Add the X Axis @@ -109,7 +137,6 @@ function createLineGraph(containerId, raceData){ d3.axisLeft(y) .ticks(raceData.drivers.length) .tickFormat(function(d) { - console.log(getDriverCodeFromPosAndLap(raceData, 0, d) + " " + d); return getDriverCodeFromPosAndLap(raceData, 0, d) + " " + d; }) ); @@ -119,7 +146,6 @@ function createLineGraph(containerId, raceData){ d3.axisRight(y) .ticks(raceData.drivers.length) .tickFormat(function(d) { - console.log(getDriverCodeFromPosAndLap(raceData, raceData.lapTimes.size, d) + " " + d); return d + " " + getDriverCodeFromPosAndLap(raceData, raceData.lapTimes.size, d) ; }) ) diff --git a/js/queries.js b/js/queries.js index 6bc0cac..5d24e0c 100644 --- a/js/queries.js +++ b/js/queries.js @@ -38,6 +38,11 @@ var queries = { return dataset; }, + getStatusById: function(statusId){ + var rawData = preprocessor.getResults(); + return rawData.drivers[driverId]; + }, + getDriverById: function(driverId) { var rawData = preprocessor.getResults(); return rawData.drivers[driverId]; @@ -129,22 +134,27 @@ var queries = { return races; }, - + getSeasons: function(){ var rawData = preprocessor.getResults(); return rawData.seasons; }, - + getLapTimes: function(){ var rawData = preprocessor.getResults(); return rawData.lapTimes; }, - + getRaces: function(){ - var rawData = preprocessor.getResults(); + var rawData = preprocessor.getResults(); return rawData.races; }, - + + getStatus: function(){ + var rawData = preprocessor.getResults(); + return rawData.status; + }, + getRaceIdWithLapTimes: function(){ return queries.getLapTimes().map(time => time.raceId).reduce(removeDuplicates,[]); }, diff --git a/js/util.js b/js/util.js index 24486be..93d84ae 100644 --- a/js/util.js +++ b/js/util.js @@ -95,6 +95,19 @@ function removeDuplicates(result,obj){ return result; } +function getValidEndingStatusIds(){ + var results = []; + var allStatus = queries.getStatus(); + results.push(1); + for(var key in allStatus){ + if(key === undefined) continue; + if(allStatus[key].status.match(/^\+[0-9]+/g)){ + results.push(parseInt(key)); + } + } + return results; +} + function getColorValue(index, all){ var r = 0; var g = 0;