Support tooltip

src/SvelteHeatmap.svelte

@@ -1,4 +1,5 @@
-<svg viewBox={`0 0 ${width} ${height}`}>
+<div style="position: relative">
+    <svg viewBox={`0 0 ${width} ${height}`}>
     {#if view === 'monthly'}
         {#each chunks as chunk, index}
             <Month
@@ -14,6 +15,8 @@
                 monthGap={monthGap}
                 monthLabelHeight={monthLabelHeight}
                 monthLabels={monthLabels}
+                on:hover-cell="{event => onHoverCell(event, index)}"
+                on:leave-cell="{() => showTooltip = false}"
             />
         {/each}
     {:else}
@@ -39,6 +42,8 @@
                     days={chunk}
                     index={index}
                     monthLabelHeight={monthLabelHeight}
+                    on:hover-cell="{event => onHoverCell(event, index)}"
+                    on:leave-cell="{() => showTooltip = false}"
                 />
                 {#if monthLabelHeight > 0 && isNewMonth(chunks, index)}
                     <text
@@ -53,7 +58,11 @@
             {/each}
         </g>
     {/if}
-</svg>
+    </svg>
+    {#if showTooltip}
+        <Tooltip {...tooltipPoint}/>
+    {/if}
+</div>
 
 <script>
 import {
@@ -64,6 +73,7 @@ import {
 
 import Month from './views/Month.svelte';
 import Week from './views/Week.svelte';
+import Tooltip from './views/Tooltip.svelte';
 
 export let allowOverflow = false;
 export let cellGap = 2;
@@ -83,6 +93,10 @@ export let monthLabelHeight = 12;
 export let monthLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 export let startDate = null;
 export let view = 'weekly';
+export let enableTooltip = true;
+
+let tooltipPoint;
+let showTooltip = false;
 
 const isNewMonth = (chunks, index) => {
     const chunk = chunks[index];
@@ -125,4 +139,17 @@ $: width = view === 'monthly'
 $: dayLabelPosition = index => {
     return (cellRect * index) + (cellRect / 2) + monthLabelHeight;
 }
+
+let onHoverCell = (event, index) => {
+    if (enableTooltip) {
+        showTooltip = true;
+        tooltipPoint = event.detail;
+        if (view == "weekly") {
+             tooltipPoint.x = dayLabelWidth + cellRect * index;
+        } else {
+            let translation = (((7 * cellRect) - cellGap) + monthGap) * index;
+            tooltipPoint.x += translation;
+        }
+   }
+};
 </script>

src/utils/date.js

@@ -85,3 +85,24 @@ export function normalizeDate(value) {
 export function stringifyDate(date) {
     return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
 }
+
+/**
+ * Format a date as "yyyy-mm-dd".
+ * 
+ * @param {Date} date 
+ * 
+ * @returns {string}
+ */
+export function formatDate(date) {
+    let d = new Date(date),
+        month = '' + (d.getMonth() + 1),
+        day = '' + d.getDate(),
+        year = d.getFullYear();
+
+    if (month.length < 2) 
+        month = '0' + month;
+    if (day.length < 2) 
+        day = '0' + day;
+
+    return [year, month, day].join('-');
+}

src/views/Cell.svelte

@@ -7,9 +7,12 @@
     width={size}
     x={x}
     y={y}
+    on:mouseover="{onMouseOver}"
+    on:mouseout="{onMouseOut}"
 />
 
 <script>
+import { createEventDispatcher } from 'svelte';
 import { stringifyDate } from '../utils/date';
 
 export let color;
@@ -19,4 +22,13 @@ export let size;
 export let value;
 export let x;
 export let y;
+
+const dispatch = createEventDispatcher();
+
+const onMouseOver = () => {
+    dispatch('hover-cell', {x, y, value, date});
+};
+const onMouseOut = () => {
+    dispatch('leave-cell');
+};
 </script>

src/views/Month.svelte

@@ -8,6 +8,8 @@
             value={day.value}
             x={day.date.getDay() * cellRect}
             y={(getWeekIndex(day.date) * cellRect) + monthLabelHeight}
+            on:hover-cell
+            on:leave-cell
         />
     {/each}
     {#if monthLabelHeight > 0}

src/views/Tooltip.svelte

@@ -0,0 +1,31 @@
+<script>
+    import { onMount } from "svelte";
+    import { formatDate } from "../utils/date.js";
+
+    export let date;
+    export let value;
+    export let x;
+    export let y;
+    export let unit = {single: 'contribution', pural: 'contributions'};
+
+    onMount(()=> {
+        console.log($$props);
+    });
+</script>
+
+<div class="tooltip" style="left:{x}px; top: {y}px">
+    <span><strong>{value ? `${value} ${unit.pural}` : `No ${unit.single}`}</strong> on {formatDate(date)}</span>
+</div>
+
+<style>
+    .tooltip {
+        position: absolute;
+        z-index: 9999;
+        padding: 5px 9px;
+        color: #ffffff;
+        font-size: 12px;
+        background: rgba(0, 0, 0, 0.7);
+        border-radius: 3px;
+        text-align: center;
+    }
+</style>

src/views/Week.svelte

@@ -7,6 +7,8 @@
             size={cellSize}
             value={day.value}
             y={day.date.getDay() * cellRect}
+            on:hover-cell
+            on:leave-cell
         />
     {/each}
 </g>