From f6134b16b956cb0824e6e0e74cfce8aa1d642681 Mon Sep 17 00:00:00 2001 From: Marcel Date: Fri, 22 Dec 2017 13:13:52 +0100 Subject: [PATCH 1/5] fixed the queries.getRaceById function, the course selector does now update correctly --- .gitignore | 1 + index.html | 21 +------------- js/diagrams.js | 8 ++--- js/main.js | 77 ++++++++++++++++++++++++++++++++----------------- js/processor.js | 4 ++- js/queries.js | 7 ++++- 6 files changed, 65 insertions(+), 53 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..dc528e5 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.Rhistory diff --git a/index.html b/index.html index 612c7fb..8d5d1fa 100644 --- a/index.html +++ b/index.html @@ -48,26 +48,7 @@
-
    -
  • test
    • -
  • test
    • -
  • test
    • -
  • test
    • -
  • test
    • -
  • test
    • -
  • test
    • -
  • test
    • -
  • test
    • -
  • test
    • -
  • test
    • -
  • test
    • -
  • test
    • -
  • test
    • -
  • test
    • -
  • test
    • -
  • test
    • -
  • test
    • -
  • test
    • +
diff --git a/js/diagrams.js b/js/diagrams.js index 0076e29..17daea1 100644 --- a/js/diagrams.js +++ b/js/diagrams.js @@ -2,7 +2,7 @@ // https://bl.ocks.org/mbostock/3884955 function createLineGraph(containerId, raceData){ - console.log(raceData); + //console.log(raceData); var height = 720; var width = 1080; @@ -38,7 +38,7 @@ function createLineGraph(containerId, raceData){ y.domain([raceData.drivers.length, 1]); var enhancedLapData = processor.getEnhancedLapDataPerDriver(raceData); - console.log(enhancedLapData); + //console.log(enhancedLapData); // Adds all lines enhancedLapData.forEach((driverLapData, driverIndex) => { @@ -102,7 +102,7 @@ function createLineGraph(containerId, raceData){ d3.axisLeft(y) .ticks(raceData.drivers.length) .tickFormat(function(d) { - console.log(getDriverCodeFromPosAndLap(raceData, 0, d) + " " + d); + //console.log(getDriverCodeFromPosAndLap(raceData, 0, d) + " " + d); return getDriverCodeFromPosAndLap(raceData, 0, d) + " " + d; }) ); @@ -112,7 +112,7 @@ function createLineGraph(containerId, raceData){ d3.axisRight(y) .ticks(raceData.drivers.length) .tickFormat(function(d) { - console.log(getDriverCodeFromPosAndLap(raceData, raceData.lapTimes.size, d) + " " + d); + //console.log(getDriverCodeFromPosAndLap(raceData, raceData.lapTimes.size, d) + " " + d); return d + " " + getDriverCodeFromPosAndLap(raceData, raceData.lapTimes.size, d) ; }) ) diff --git a/js/main.js b/js/main.js index 5652d8f..49d791e 100644 --- a/js/main.js +++ b/js/main.js @@ -4,35 +4,58 @@ * This file contains the main control flow. */ -preprocessor.load(function(data) { - var $frame = $('.strecken-selector'); - var $slidee = $frame.children('ul').eq(0); - var $wrap = $frame.parent(); - var options = { - horizontal: 1, - itemNav: 'basic', - smart: 1, - activateOn: 'click', - mouseDragging: 1, - touchDragging: 1, - releaseSwing: 1, - startAt: 3, - scrollBar: $wrap.find('.scrollbar'), - scrollBy: 1, - pagesBar: $wrap.find('.pages'), - activatePageOn: 'click', - speed: 300, - elasticBounds: 1, - dragHandle: 1, - dynamicHandle: 1, - clickBar: 1, - }; - $('.frame').sly(options); +var slyelement = { + obj: {}, + el: '.frame', + options: { + horizontal: 1, + itemNav: 'basic', + smart: 1, + activateOn: 'click', + mouseDragging: 1, + touchDragging: 1, + releaseSwing: 1, + startAt: 3, + scrollBar: $('.strecken-selector').parent().find('.scrollbar'), + scrollBy: 1, + pagesBar: $('.strecken-selector').parent().find('.pages'), + activatePageOn: 'click', + speed: 300, + elasticBounds: 1, + dragHandle: 1, + dynamicHandle: 1, + clickBar: 1, + } +}; + + +preprocessor.load(function(data) { + slyelement.obj = new Sly($(slyelement.el), slyelement.options); + slyelement.obj.init(); + // Some sample code for a year selector - TODO: Improve a lot and move somewhere else var yearSelector = $("#seasonByYearSelector"); - var seasons = processor.getSeasonsWithLapData(); - for(var season in seasons){ yearSelector.append(""); } - createLineGraph("#lineGraphBox", processor.getRace(970)); + var seasons = processor.getSeasonsWithLapData(); + + for(var season in seasons){ yearSelector.append(""); } + + // Someone chose a year + yearSelector.change(function(event) { + var selectedYear = $(event.target).val(); + var races = processor.getRacesByYear(selectedYear); + $("#courseSelection").empty(); + for(var race in races) { + $("#courseSelection").append("
  • " + races[race].raceInfo.name +" " + races[race].raceInfo.date + "
    • "); + } + slyelement.obj.reload(); + var raceData = races[0]; + createLineGraph("#lineGraphBox", processor.getRace(974)); + }); + + $(window).resize(function(e) { + slyelement.obj.reload(); + }); + }); diff --git a/js/processor.js b/js/processor.js index 9dabd99..73b1abb 100644 --- a/js/processor.js +++ b/js/processor.js @@ -62,7 +62,9 @@ var processor = { getRacesByYear: function(year) { var races = queries.getRacesByYear(year); - return races.map(race => processor.getRace(race.raceId)); + var racesUnsorted = races.map(race => processor.getRace(race.raceId)); + racesUnsorted.sort((o1,o2) => o1["raceInfo"]["round"] - o2["raceInfo"]["round"]); + return racesUnsorted; }, //Gets the position of Driver with driverid in specific lap diff --git a/js/queries.js b/js/queries.js index 6bc0cac..761666d 100644 --- a/js/queries.js +++ b/js/queries.js @@ -112,7 +112,12 @@ var queries = { getRaceById: function(raceId){ var rawData = preprocessor.getResults(); - return rawData.races[raceId]; + for(var key in rawData.races){ + if(rawData.races[key].raceId == raceId){ + return rawData.races[key]; + } + } + return null; }, getRacesByYear: function(year){ From c64c839ff7fefd54fc1ccfe3d577131eb96ef41d Mon Sep 17 00:00:00 2001 From: Jan Philipp Timme Date: Fri, 22 Dec 2017 13:31:32 +0100 Subject: [PATCH 2/5] Add small fix for missing qualifying data --- js/processor.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/js/processor.js b/js/processor.js index 9dabd99..2375242 100644 --- a/js/processor.js +++ b/js/processor.js @@ -34,7 +34,17 @@ var processor = { //Attach Qualifying Data lapData.qualifying = processor.getQualifyingForDriver(raceData, driver); //add Qualifying Data to the Laps - var lap0 = {'driverId': driver.driverId, 'lap': 0, 'position': lapData.qualifying.position}; + var lap0 = {'driverId': driver.driverId, 'lap': 0}; + // Figure out the position of that driver + if (lapData.qualifying !== undefined) { + // Use qualifying data, if available + lap0['position'] = lapData.qualifying.position; + } else { + // TODO: Easy fallback. + // Maybe just take result from first lap - Future: Perhaps leave out that data point at all + lap0['position'] = 0; + } + var endResult = raceData.results.filter(res => res.driverId == driver.driverId && res.laps == 0); if(endResult.length > 0){ lap0.finished = endResult[0]; From 49ff9cecb6549b50e54c4202841834729555883f Mon Sep 17 00:00:00 2001 From: Marcel Date: Fri, 22 Dec 2017 13:31:34 +0100 Subject: [PATCH 3/5] Added simple click event for course selection --- js/main.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/js/main.js b/js/main.js index 49d791e..ef1a9fa 100644 --- a/js/main.js +++ b/js/main.js @@ -47,11 +47,16 @@ preprocessor.load(function(data) { var races = processor.getRacesByYear(selectedYear); $("#courseSelection").empty(); for(var race in races) { - $("#courseSelection").append("
  • " + races[race].raceInfo.name +" " + races[race].raceInfo.date + "
    • "); + $("#courseSelection").append("
  • " + races[race].raceInfo.name +" " + races[race].raceInfo.date + "
    • "); } + $("#courseSelection li").click(function(event) { + var race = event.target.attributes.data.value; + $("#lineGraphBox").empty(); + createLineGraph("#lineGraphBox", processor.getRace(race)); + }); slyelement.obj.reload(); var raceData = races[0]; - createLineGraph("#lineGraphBox", processor.getRace(974)); + }); $(window).resize(function(e) { From e86c3724f28bce23bd4e36c2d82d5abf893a8be0 Mon Sep 17 00:00:00 2001 From: Marcel Date: Fri, 22 Dec 2017 13:46:11 +0100 Subject: [PATCH 4/5] added sorting of lapdata --- js/processor.js | 1 + 1 file changed, 1 insertion(+) diff --git a/js/processor.js b/js/processor.js index 73b1abb..42e665e 100644 --- a/js/processor.js +++ b/js/processor.js @@ -55,6 +55,7 @@ var processor = { } }); }); + lapData.laps.sort((o1,o2) => o1["lap"] - o2["lap"]); result.push(lapData); }); return result; From cc6f6751958bfddff56e5e1f048f844a13acb85c Mon Sep 17 00:00:00 2001 From: Marcel Date: Fri, 22 Dec 2017 13:57:42 +0100 Subject: [PATCH 5/5] optimized loading of the race data --- js/main.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/js/main.js b/js/main.js index ef1a9fa..d1d1454 100644 --- a/js/main.js +++ b/js/main.js @@ -6,6 +6,7 @@ var slyelement = { obj: {}, + curRaces: {}, el: '.frame', options: { horizontal: 1, @@ -44,19 +45,19 @@ preprocessor.load(function(data) { // Someone chose a year yearSelector.change(function(event) { var selectedYear = $(event.target).val(); - var races = processor.getRacesByYear(selectedYear); + slyelement.curRaces = processor.getRacesByYear(selectedYear); $("#courseSelection").empty(); - for(var race in races) { - $("#courseSelection").append("
  • " + races[race].raceInfo.name +" " + races[race].raceInfo.date + "
    • "); + for(var race in slyelement.curRaces) { + var raceD = slyelement.curRaces[race]; + $("#courseSelection").append("
  • " + raceD.raceInfo.name +" " + raceD.raceInfo.date + "
    • "); } $("#courseSelection li").click(function(event) { - var race = event.target.attributes.data.value; + var raceI = event.target.attributes.data.value; + var rdata = slyelement.curRaces.filter(r => r.raceInfo.raceId == raceI)[0]; $("#lineGraphBox").empty(); - createLineGraph("#lineGraphBox", processor.getRace(race)); + createLineGraph("#lineGraphBox", rdata); }); - slyelement.obj.reload(); - var raceData = races[0]; - + slyelement.obj.reload(); }); $(window).resize(function(e) {