Merge pull request #50 from TechpriestV/overview-tooltip-information

fixed fallback image zoom-in
vceder · Mar 6, 2018 · 4cd7f0d · 4cd7f0d
2 parents 6eee123 + 5cb2744
commit 4cd7f0d
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 7 deletions.
diff --git a/client/src/assets/style/global.scss b/client/src/assets/style/global.scss
@@ -15,6 +15,10 @@ body {
   overflow: visible;
 }
 
+#analytic {
+  margin-bottom: 5%;
+}
+
  /* .staticHeadline och .changingValues behöver nice */
 
 .staticHeadline{
@@ -24,10 +28,12 @@ body {
   font-size: 15px;
 }
 .changingValues{
+  position:relative;
   color: #E81B5F;
   font-family: Lato;
   font-weight: 300;
   font-size: 20px;
+  float: right;
 }
 
 .route_button {
@@ -52,7 +58,7 @@ body {
   font-size: 1.2vw;
   letter-spacing: 3px;
   font-weight: 700;
-  text-align: right;
+  text-align: left;
   float: right;
   text-transform: uppercase;
 }

diff --git a/client/src/components/ScatterPlot.vue b/client/src/components/ScatterPlot.vue
@@ -277,7 +277,7 @@ export default {
         .append('circle')
         .merge(circleGroup)
         .attr('class', function(d, i) {
-          return 'streamer ' + d.display_name;
+          return 'streamer a' + d.display_name;
         })
         .attr('cx', function(d) {
           return xScale(d.view_count);
@@ -298,7 +298,7 @@ export default {
       //Hide the tooltip when the mouse moves away
       function removeTooltip(d, i) {
         //Save the chosen circle (so not the voronoi)
-        const element = d3.selectAll('.streamer.' + d.display_name);
+        const element = d3.selectAll('.streamer.a' + d.display_name);
 
         //Fade out the bubble again
         element.style('opacity', opacityCircles);
@@ -322,8 +322,11 @@ export default {
       //Show the tooltip on the hovered over slice
       function showTooltip(d, i) {
         //Save the chosen circle (so not the voronoi)
-        const element = d3.select('.streamer.' + d.display_name),
+        const element = d3.select('.streamer.a' + d.display_name),
           el = element._groups[0];
+					if (d.offline_image_url == ""){
+						d.offline_image_url = 'https://static-cdn.jtvnw.net/ttv-boxart/404_boxart-80x112.jpg';
+					}
         tooltip.html(
           '<h2 id="zoom_tooltip">' +
             d.display_name +

diff --git a/client/src/views/About.vue b/client/src/views/About.vue
@@ -36,7 +36,7 @@
 </div>
 <div class="teamContainer">
   <div class="teamImageRight"><img class="image" src="../assets/img/petter.png"></div>
-  <div class="teamBioRight"><h2>Petter</h2><h4>FULL STACK DEVELOPER / HATER OF MERGING<br/><br/>A developer with a soft spot for details and affinity for structure, it was thanks to him that our team got a second wind as we neared the final stretch of this project. He basically forced us to allocate as much time as possible to this project. Moving from the back-end team to the front-end team he, on countless occasions, pushed his machine to the limit to make sure Plot Twitch navigation and routing makes as much sense to you as it made to us.</h4></div>
+  <div class="teamBioRight"><h2>Petter</h2><h4>FULL STACK DEVELOPER / VUE SURFER <br/><br/>A developer with a soft spot for details and affinity for structure, it was thanks to him that our team got a second wind as we neared the final stretch of this project. He basically forced us to allocate as much time as possible to this project. Moving from the back-end team to the front-end team he, on countless occasions, pushed his machine to the limit to make sure Plot Twitch navigation and routing makes as much sense to you as it made to us.</h4></div>
 </div>
 </div>
 </template>
diff --git a/client/src/views/Analytic.vue b/client/src/views/Analytic.vue
@@ -1,4 +1,4 @@
-<template><html>
+<template><div>
   <div class="about">
     <h3>Analytic Trail</h3>
     <div class="menuItems">
@@ -17,5 +17,5 @@ The top 100 streams are in a scatterplot-like view where the currently played ga
 When you hover on a cluster you get information to your right about the game and the total amount of viewers. When you click on a cluster, you are zoomed in and focused on that particular game. Here you see another scatterplot, with its axes visible and a clear visual aid on hover
 </div>
   </div>
-  </html>
+  </div>
 </template>