From 11c5a739ace538b348acb0059bc622ac8333bc23 Mon Sep 17 00:00:00 2001
From: Stefan de Konink <stefan@konink.de>
Date: Mon, 8 Oct 2018 00:39:57 +0200
Subject: [PATCH] Fix issue #61

This adds the name of the first stop to StopArea.
And replaces StopAreaRefs into StopNames.
---
 src/js/models/stoparea.js               | 1 +
 src/js/viz_components/interactivemap.js | 5 +++--
 src/js/viz_components/mareydiagram.js   | 4 ++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/js/models/stoparea.js b/src/js/models/stoparea.js
index ed2b5c4..cf7b9e1 100644
--- a/src/js/models/stoparea.js
+++ b/src/js/models/stoparea.js
@@ -14,6 +14,7 @@ export default class StopArea {
     this.code = code;
     this.stops = stops;
     this.center = this.computeCenter();
+    this.name = stops[0].name; /* TODO: This might need to be improved */
   }
 
   /**
diff --git a/src/js/viz_components/interactivemap.js b/src/js/viz_components/interactivemap.js
index 90a216e..965e84d 100644
--- a/src/js/viz_components/interactivemap.js
+++ b/src/js/viz_components/interactivemap.js
@@ -219,7 +219,8 @@ export default class InteractiveMap {
     // Stoparea selection
     const stopAreasSel = this.stopAreasGroup.selectAll('g.stopArea')
       .data(
-        this.data.stopAreas.map(({ code, center }) => ({ code, center: this.mapToCanvas(center) })),
+        this.data.stopAreas.map(({ code, center, name }) =>
+          ({ code, center: this.mapToCanvas(center), name })),
         ({ code }) => code,
       );
 
@@ -248,7 +249,7 @@ export default class InteractiveMap {
       .append('text')
       .attr('x', 0)
       .attr('y', -1.5)
-      .text(({ code }) => code);
+      .text(({ name }) => name);
   }
 
   /**
diff --git a/src/js/viz_components/mareydiagram.js b/src/js/viz_components/mareydiagram.js
index ee3765d..aef0c13 100644
--- a/src/js/viz_components/mareydiagram.js
+++ b/src/js/viz_components/mareydiagram.js
@@ -472,7 +472,7 @@ export default class MareyDiagram {
         // Truncate the tick label if longer than maxChars chars
         const maxChars = 25;
         const stop = this.journeyPatternMix.referenceJP.stops[index];
-        let label = `${stop.code} ${stop.name}`;
+        let label = `${stop.name}`;
         if (label.length > maxChars) label = `${label.substr(0, maxChars - 3)}...`;
         return label;
       });
@@ -495,7 +495,7 @@ export default class MareyDiagram {
       this.xAxis = d3.axisTop(this.xScale)
         .tickSize(-this.dims.marey.innerHeight)
         .tickValues(this.journeyPatternMix.referenceJP.distances)
-        .tickFormat((_, index) => this.journeyPatternMix.referenceJP.stops[index].code);
+        .tickFormat((_, index) => this.journeyPatternMix.referenceJP.stops[index].name);
     }
 
     // Enhance vertical lines representing stops adding the stop code as attribute