fix: merge

src/js/chart.js

@@ -125,13 +125,18 @@ Chart.prototype = {
     markersArray.map(function(marker) {
       var markerElem = document.createElementNS('http://www.w3.org/2000/svg', 'g');
       var textElem = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+      var connector = document.createElementNS('http://www.w3.org/2000/svg', 'path');
       var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
       var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
       circle.setAttribute('cx', marker.x);
       circle.setAttribute('cy', marker.y);
       circle.setAttribute('r', 5);
       circle.setAttribute('fill', 'grey');
       circle.setAttribute('class', 'marker-' + marker.markerCount);
+      var slidertopX = (self.width+self.margin.right+self.margin.left)/2 - 30;
+      var slidertopY = self.height+self.margin.bottom+1;
+      connector.setAttribute('d', 'M' + marker.x + " " + marker.y + " L" + slidertopX  + " " + slidertopY);
+      connector.setAttribute('fill', '#FF1744');
       text.innerHTML = marker.label;
       text.setAttribute('x', marker.x + 15);
       text.setAttribute('y', marker.y);
@@ -140,6 +145,7 @@ Chart.prototype = {
       markerElem.setAttribute('class', 'marker-' + marker.markerCount);
       textElem.setAttribute('class', 'text-' + marker.markerCount);
 
+      markerElem.appendChild(connector);
       markerElem.appendChild(circle);
       textElem.appendChild(text);
 

src/js/data.js

@@ -101,6 +101,7 @@ DataFactory.prototype = {
    * @returns {undefined}
    */
   get: function(file) {
+    file = file ? file.data.url : undefined
     return new Promise(function(resolve, reject) {
       var req = new XMLHttpRequest();
       req.open("GET", file, true)
@@ -127,12 +128,29 @@ DataFactory.prototype = {
   fetchData: function(config) {
     var self = this;
     return new Promise(function(resolve, reject) {
-      self.get(config.data.url).then(function(response) {
-        parse(response, {'columns': true}, function(err, data) {
-          resolve(self.createDataObj(data, config))
+      self.get(config)
+        .then(function(response) {
+          parse(response, {'columns': true}, function(err, data) {
+            resolve(self.createDataObj(data, config))
+          })
+        }, function(reason) {
+          debugger;
+          self.errorMessage = reason
+          self.errorLog()
         })
-      })
     })
+  },
+  errorLog: function() {
+    var mustache = require('mustache');
+    const template =
+      "<div class='error'>" +
+        "<h3><span class='error-message'>{{ errorMessage }}</span></h3>" +
+      "</div>"
+    var rendered = mustache.render(template, this),
+        parser = new DOMParser(),
+        doc = parser.parseFromString(rendered, "text/html");
+
+    storyline.elem.append(doc.body.children[0])
   }
 }
 

src/js/slider.js

@@ -104,7 +104,6 @@ Slider.prototype = {
     for(var i = 0; i < this.cards.length; i++) {
       this.cardsElem.children[i].children[0].style.height = (this.height - this.NAV_HEIGHT - this.MARGIN*2) + "px";
       this.cardsElem.children[i].style.width = w + "px";
-      this.cardsElem.children[i].style.border = this.MARGIN + "px solid white";
     }
   },
   goToCard: function(number) {

src/scss/_chart.scss

@@ -0,0 +1,5 @@
+svg {
+  &.canvas {
+    vertical-align: top;
+  }
+}

src/scss/_line.scss

@@ -7,7 +7,7 @@ line {
 }
 
 path {
-  stroke: $color-grey--lighter !important;
+  stroke: $color-grey--lighter;
   stroke-width: 2px;
   z-index:0;
 }
@@ -39,7 +39,7 @@ circle[class^="marker"] {
 }
 
 g[class^="marker-"], g[class^="text-"] {
-  text {
+  text, path {
     opacity: 0;
   }
   &.active {
@@ -54,5 +54,9 @@ g[class^="marker-"], g[class^="text-"] {
       opacity: 1;
       stroke: $color-circle-active;
     }
+    path {
+      stroke: $color-circle-active;
+      opacity: 1;
+    }
   }
 }

src/scss/_slider.scss

@@ -13,6 +13,9 @@
   max-width: 500px;
   box-sizing: border-box;
   text-align: center;
+  &:not(:last-child) {
+    border-right: 20px solid white;
+  }
 
   @media(max-width: 20em) {
     width: 1000px;

src/scss/storyline.scss

@@ -4,3 +4,4 @@
 @import "default";
 @import "line";
 @import "slider";
+@import "chart";