Tooltips and clean up

package-lock.json

@@ -16,6 +16,7 @@
 				"archieml": "^0.5.0",
 				"d3-array": "^3.2.4",
 				"d3-fetch": "^3.0.1",
+				"d3-format": "^3.1.0",
 				"d3-scale": "^4.0.2",
 				"d3-shape": "^3.2.0",
 				"d3-time-format": "^4.1.0",

package.json

@@ -19,6 +19,7 @@
 		"archieml": "^0.5.0",
 		"d3-array": "^3.2.4",
 		"d3-fetch": "^3.0.1",
+		"d3-format": "^3.1.0",
 		"d3-scale": "^4.0.2",
 		"d3-shape": "^3.2.0",
 		"d3-time-format": "^4.1.0",

src/lib/components/CaseCard.svelte

@@ -19,7 +19,7 @@
 	let scoreQuestionsExpanded = false;
 </script>
 
-<div class="card" transition:fade id={'case-' + cardData.attribution_id}>
+<div class="card" transition:fade>
 	<div class="header">
 		<div class="card-header-title">
 			<h2 class="is-size-5">{cardData.short_title}</h2>

src/lib/components/DateRangeSlider.svelte

@@ -49,7 +49,6 @@
                          Math.round(scale.invert(pos.right), 0)]);
     } else {
       dispatch('changed', [scale.invert(pos.left), scale.invert(pos.right)]);
-      console.log(convertScale.invert(scale.invert(pos.left)))
       $timeRangeFilter = [convertScale.invert(scale.invert(pos.left)), convertScale.invert(scale.invert(pos.right))]
     }
   }

src/lib/components/EventTooltip.svelte

@@ -11,7 +11,7 @@
   
   <div
     transition:fade="{{ duration: 250 }}"
-    class="tooltip"
+    class="event-tooltip"
     style="
         top:{tooltipY}px;
         left:{tooltipX < width - 300 ? tooltipX + 10 : tooltipX - 300 - 10}px;
@@ -23,7 +23,7 @@
   </div>
   
   <style>
-    .tooltip {
+    .event-tooltip {
       position: fixed;
       /*border: 1px solid #ccc;*/
       background: rgba(255, 255, 255, 0.95);

src/lib/components/ScoreQuestions.svelte

@@ -1,9 +1,6 @@
 <script>
     import { questions } from '$lib/inputs/scores';
-  
     export let cardData;
-    console.log(cardData)
-
   </script>
 
   <div class="score-questions">

src/lib/components/Square.svelte

@@ -19,7 +19,7 @@
 		hoveredEventData = eventData;
 	}
 	function handleMouseOut() {
-		showEventTooltip = false;
+		//showEventTooltip = false;
 	}
 </script>
 

src/lib/components/Timeline.svelte

@@ -1,6 +1,7 @@
 <script>
 	import { scaleUtc, scalePoint, scaleOrdinal, scaleLinear, scaleTime } from 'd3-scale';
 	import { utcFormat } from 'd3-time-format';
+	import { format } from 'd3-format';
 	import { area, stack, curveNatural } from 'd3-shape';
 	import { max, union, index } from 'd3-array';
 	import { fade } from 'svelte/transition';
@@ -116,7 +117,8 @@
 				{/each}
 				{#each cases as attrCase}
 					{#if attrCase.show}
-						<a href={'#case-' + attrCase.attribution_id} transition:fade>
+						<!--a href={'#case-' + attrCase.attribution_id} transition:fade-->
+						<g transition:fade>
 							{#if attrCase.offline_mobilization == '1'}
 								<circle
 									cx={xScale(new Date(attrCase.attribution_date))}
@@ -142,7 +144,8 @@
 								bind:tooltipY
 								bind:showTooltip
 							></Bubble>
-						</a>
+						</g>
+						<!-- /a-->
 					{/if}
 				{/each}
 			</g>
@@ -162,11 +165,12 @@
 						stroke-width={1}
 					></line>
 					<text
+						class={'y-tick'}
 						x={-18}
 						y={yScaleStack(tick) + 4}
 						text-anchor={'end'}
 						fill={'#777777'}
-					>{tick}</text>
+					>{format("~s")(tick)}</text>
 				{/each}
 				{#if stackedMetrics.length > 0 && areaGenerator}
 					{#each stackedMetrics as serie}
@@ -174,6 +178,12 @@
 						</path>
 					{/each}
 				{/if}
+				<text
+						class={'metrics-label'}
+						x={12}
+						y={20}
+						color={'#000000'}
+				>Social media posts</text>
 			</g>
 		{/if}
 	</svg>
@@ -253,7 +263,7 @@
 		font-size: 0.9rem;
 		fill: #777777;
 	}
-	.event-title {
-		font-weight: bold;
+	.y-tick, .metrics-label {
+		font-size: 0.9rem;
 	}
 </style>

src/lib/components/Tooltip.svelte

@@ -8,7 +8,7 @@
     export let width;
     export let showTooltip;
 
-    function handleMouseOut() {
+    function handleMouseLeave() {
       showTooltip = false;
     }
 
@@ -21,7 +21,7 @@
         top:{tooltipY}px;
         left:{tooltipX < width - 500 ? tooltipX + 10 : tooltipX - 500 - 10}px;
       "
-      on:mouseout={handleMouseOut}
+      on:mouseleave={handleMouseLeave}
   >
       <CaseCard cardData={hoveredCaseData} expanded={true}></CaseCard>
   </div>