From 8c97d8280f6d12a32e05248f9d032ad67feff057 Mon Sep 17 00:00:00 2001
From: sirsandmann <florian@sander-net.de>
Date: Tue, 12 Dec 2017 21:20:09 +0100
Subject: [PATCH] Added Start Positions and Colors

---
 css/main.css    |  3 +--
 js/diagrams.js  |  5 +++--
 js/processor.js | 17 ++++++++++++++---
 js/util.js      | 34 ++++++++++++++++++++++------------
 4 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/css/main.css b/css/main.css
index ce06fc0..cb71753 100644
--- a/css/main.css
+++ b/css/main.css
@@ -34,6 +34,5 @@ body {
 
 .line {
   fill: none;
-  stroke: steelblue;
-  stroke-width: 2px;
+  stroke-width: 4px;
 }
diff --git a/js/diagrams.js b/js/diagrams.js
index 9776cba..d8eb4e2 100644
--- a/js/diagrams.js
+++ b/js/diagrams.js
@@ -15,7 +15,7 @@ function createLineGraph(containerId, raceData){
   var x = d3.scaleLinear().range([0, width]);
   var y = d3.scaleLinear().range([height, 0]);
 
-  var allLineData = raceDataToLineData(raceData);
+  var allLineData = transformRaceDataToLineData(raceData);
 
   // defines how the passed in Data, at "svg.append" shall be interpreted
   var lineDataDefinition = d3.line()
@@ -37,10 +37,11 @@ function createLineGraph(containerId, raceData){
   y.domain([raceData.drivers.length, 1]);
 
   // Adds all lines
-  allLineData.forEach((singleLineData) => {
+  allLineData.forEach((singleLineData, i) => {
     svg.append("path")
         .data([singleLineData])
         .attr("class", "line")
+        .attr("stroke", getColorValue(i, allLineData.length) )
         .attr("d", lineDataDefinition);
   });
 
diff --git a/js/processor.js b/js/processor.js
index d08fbe8..1fb68d2 100644
--- a/js/processor.js
+++ b/js/processor.js
@@ -4,14 +4,14 @@ var processor = {
 
   getRace: function(raceId) {
     var race =  {
-      drivers: null,  
+      drivers: null,
       lapTimes: null,
       pitStops: null,
       qualifying: null,
       results: null,
       raceInfo: null
     };
-    
+
     race.drivers = queries.getDriversByRaceId(raceId);
     race.lapTimes = queries.getLapDataByRaceId(raceId);
     race.qualifying = queries.getQualifingDataByRaceId(raceId);
@@ -25,5 +25,16 @@ var processor = {
   getRacesByYear: function(year) {
     var races = queries.getRacesByYear(year);
     return races.map(race => processor.getRace(race.raceId));
-  }
+  },
+
+  //Gets the position of Driver with driverid in specific lap
+  getPositionOfDriver: function(driver, lap, defaultReturn){
+    var lapEntryWithDrivId =lap.filter( drivLap => drivLap.driverId == driver.driverId );
+    if(lapEntryWithDrivId.length > 0){
+      return lapEntryWithDrivId[0].position;
+    }else{
+      return defaultReturn;
+    }
+  },
+
 };
diff --git a/js/util.js b/js/util.js
index 0664f04..db4dcae 100644
--- a/js/util.js
+++ b/js/util.js
@@ -38,27 +38,37 @@ var loadingDialog = {
   },
 };
 
-//Gets the position of Driver with driverid in specific lap
-function getPositionOfDriver(driver, lap, defaultReturn){
-  var lapEntryWithDrivId =lap.filter( drivLap => drivLap.driverId == driver.driverId );
-  if(lapEntryWithDrivId.length > 0){
-    return lapEntryWithDrivId[0].position;
-  }else{
-    return defaultReturn;
-  }
-}
-
 // transforms the raceData to a format, with which lineDataDefinition can work
-function raceDataToLineData(raceData){
+function transformRaceDataToLineData(raceData){
   // define the lines
   var lineData = [];
   raceData.drivers.forEach((driver, drivIn)=>{
     lineData.push();
     var lapsOfDriverInLineDataFormat = [];
+    lapsOfDriverInLineDataFormat.push({'lap': 0, 'position': getPositionOfQualifying(raceData, driver) });
     raceData.lapTimes.forEach((lap, lapIn) => {
-        lapsOfDriverInLineDataFormat.push({ 'lap': lapIn, 'position':  getPositionOfDriver(driver, lap, raceData.drivers.length)});
+      var drivPos = processor.getPositionOfDriver(driver, lap, raceData.drivers.length + 1 );
+      if( drivPos < raceData.drivers.length + 1 ){
+        lapsOfDriverInLineDataFormat.push({ 'lap': lapIn, 'position':  processor.getPositionOfDriver(driver, lap, raceData.drivers.length + 1 )});
+      }
     });
     lineData.splice(drivIn, 0, lapsOfDriverInLineDataFormat);
   });
   return lineData;
 }
+
+function getPositionOfQualifying(raceData, driver){
+  var qualData = raceData.qualifying.filter( qualData => qualData.driverId == driver.driverId);
+  return qualData[0].position;
+}
+
+function getColorValue(index, all){
+  var r = 0;
+  var g = 0;
+  var b = 0;
+
+  var step = 255*3 / all;
+  var colorValue = index * step;
+
+  return "hsl(" + colorValue + ", " + 100 + "%, 35% )";
+}