Legend tooltips

src/lib/components/EventTooltip.svelte

@@ -7,6 +7,8 @@
     export let hoveredEventData;
     export let width;
 
+    $: console.log(hoveredEventData)
+
   </script>
   
   <div
@@ -25,7 +27,6 @@
   <style>
     .event-tooltip {
       position: fixed;
-      /*border: 1px solid #ccc;*/
       background: rgba(255, 255, 255, 0.95);
       box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
       padding: 5px;

src/lib/components/Legend.svelte

@@ -3,6 +3,10 @@
     export let margins
     export let radiusScale
     export let opacityScale
+    export let tooltipX
+    export let tooltipY
+    export let hoveredLegendData
+    export let showLegendTooltip
 
     $: minOpacity = opacityScale.domain()[0]
     $: maxOpacity = opacityScale.domain()[1]
@@ -16,16 +20,39 @@
         maxOpacity]
 
     let height = 70
+
+    const tooltipContent = {
+        "breakout_scale": "Breakout Scale represents a range from Category One to Category Six. The smallest point on the visualization represents 'Not Applicable', indicating attributions which lack suitable evidence to justify a Breakout Scale classification.",
+        "attribution_score": "The opacity of attributions corresponds to the 18-point Attribution Score which attempts to qualify the credibility of an attribution."
+    }
+
+    function handleMouseOver(event, id) {
+        console.log(id)
+		showLegendTooltip = true;
+		tooltipX = event.clientX;
+		tooltipY = event.clientY;
+		hoveredLegendData = tooltipContent[id];
+	}
+	function handleMouseOut() {
+		showLegendTooltip = false;
+	}
 </script>
 
 <svg {width} height={height}>
-    <g transform={`translate(${margins.left},${0})`}>
-        <a href="#break-out-scale">
+    <g
+        transform={`translate(${margins.left},${0})`}
+    >
+    <g
+        on:mouseover={(e) => handleMouseOver(e, "breakout_scale")}
+        on:focus={(e) => handleMouseOver(e, "breakout_scale")}
+        on:mouseout={handleMouseOut}
+        on:blur={handleMouseOut}    
+    >
     <text
         x={72}
         y={12}
         text-anchor={'middle'}
-    >Breakout Scale</text></a>
+    >Breakout Scale</text>
     {#each radiusScale.domain() as rad,i}
         <circle
             cx={12 - radiusScale(rad) + i*30}
@@ -34,6 +61,8 @@
             fill={'#555555'}
         ></circle>
     {/each}
+</g>
+
     <text
         x={(width - margins.left - margins.right)/2}
         y={12}
@@ -53,6 +82,13 @@
         r={9}
         fill={'#555555'}
     ></circle>
+
+    <g
+    on:mouseover={(e) => handleMouseOver(e, "attribution_score")}
+    on:focus={(e) => handleMouseOver(e, "attribution_score")}
+    on:mouseout={handleMouseOut}
+    on:blur={handleMouseOut}    
+>
     <text
         x={width - margins.left - margins.right - 72}
         y={12}
@@ -67,6 +103,7 @@
             opacity={opacityScale(op)}
         ></circle>
     {/each}
+    </g>
     <line
         x1={0}
         x2={width}

src/lib/components/LegendTooltip.svelte

@@ -0,0 +1,52 @@
+<script>
+    import { fade } from 'svelte/transition';
+    import { utcFormat } from 'd3-time-format';
+
+    export let tooltipX;
+    export let tooltipY;
+    export let hoveredLegendData;
+    export let width;
+
+  </script>
+  
+  <div
+    transition:fade="{{ duration: 250 }}"
+    class="event-tooltip"
+    style="
+        top:{tooltipY}px;
+        left:{tooltipX < width - 300 ? tooltipX + 10 : tooltipX - 300 - 10}px;
+      "
+  >
+      <!--p class="date">{utcFormat('%B %d, %Y')(hoveredEventData.date)}</p>
+      <h2>{hoveredEventData.Title}</h2-->
+      <p class="description">{hoveredLegendData}</p>
+  </div>
+  
+  <style>
+    .event-tooltip {
+      position: fixed;
+      background: rgba(255, 255, 255, 0.95);
+      box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
+      padding: 5px;
+      box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
+      transform: translate(0%, -50%);
+      z-index: 1000;
+      max-width: 300px;
+      max-height: 400px;
+      overflow-y: scroll;
+    }
+    .date {
+    font-size: 0.7rem;
+  }
+
+  h2 {
+    margin: 0.2rem 0;
+    font-size: 0.9rem;
+    font-weight: bold;
+  }
+
+  .description {
+    font-size: 0.8rem;
+    line-height: 1.5;
+  }
+  </style>

src/lib/components/Timeline.svelte

@@ -9,6 +9,7 @@
 	import Square from '$lib/components/Square.svelte';
 	import Tooltip from '$lib/components/Tooltip.svelte';
 	import EventTooltip from '$lib/components/EventTooltip.svelte';
+	import LegendTooltip from '$lib/components/LegendTooltip.svelte';
 	import { actorNationFilter, timeRangeFilter } from '../../stores/filters';
 	import Legend from './Legend.svelte';
 
@@ -122,14 +123,25 @@
 	// Tooltip
 	let showTooltip = false;
 	let showEventTooltip = false;
+	let showLegendTooltip = false;
 	let hoveredCaseData;
 	let hoveredEventData;
+	let hoveredLegendData;
 	let tooltipX;
 	let tooltipY;
 </script>
 
 <div class="timeline-container" bind:clientWidth={width}>
-	<Legend {width} {margins} {radiusScale} {opacityScale}></Legend>
+	<Legend
+		{width}
+		{margins}
+		{radiusScale}
+		{opacityScale}
+		bind:tooltipX
+		bind:tooltipY
+		bind:hoveredLegendData
+		bind:showLegendTooltip
+		></Legend>
 	<svg {width} {height}>
 		{#if xScale}
 			<g transform={`translate(${margins.left},${margins.top})`}>
@@ -323,6 +335,9 @@
 	{#if showEventTooltip}
 		<EventTooltip {tooltipX} {tooltipY} {hoveredEventData} {width} />
 	{/if}
+	{#if showLegendTooltip}
+		<LegendTooltip {tooltipX} {tooltipY} {hoveredLegendData} {width} />
+	{/if}
 </div>
 
 <style>