Support legend

Author: Folyd

index.html

@@ -120,6 +120,7 @@ <h1 class="text-3xl">svelte-heatmap</h1>
                     startDate: moment().subtract(5, 'months').toDate(),
                     endDate: moment().toDate(),
                     view: 'monthly',
+                    displayLegend: false,
                 },
                 target: document.querySelector('#monthly'),
             });

src/SvelteHeatmap.svelte

@@ -53,6 +53,16 @@
             {/each}
         </g>
     {/if}
+    {#if displayLegend}
+        <Legend 
+        translateX={width - (wholeColors.length + 5) * cellSize}
+        translateY={height - legendHeight / 2}
+        height={legendHeight}
+        colors={wholeColors} 
+        {cellSize}
+        {fontFamily}
+        {fontSize}/>
+    {/if}
 </svg>
 
 <script>
@@ -64,6 +74,7 @@ import {
 
 import Month from './views/Month.svelte';
 import Week from './views/Week.svelte';
+import Legend from './views/Legend.svelte';
 
 export let allowOverflow = false;
 export let cellGap = 2;
@@ -83,6 +94,8 @@ 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 displayLegend = true;
+export let legendHeight = 30;
 
 const isNewMonth = (chunks, index) => {
     const chunk = chunks[index];
@@ -114,9 +127,9 @@ $: chunks = view === 'monthly'
 
 $: weekRect = (7 * cellRect) - cellGap;
 
-$: height = view === 'monthly'
+$: height = (view === 'monthly'
     ? (6 * cellRect) - cellGap + monthLabelHeight // <- max of 6 rows in monthly view
-    : weekRect + monthLabelHeight;
+    : weekRect + monthLabelHeight) + (displayLegend? legendHeight: 0);
 
 $: width = view === 'monthly'
     ? ((weekRect + monthGap) * chunks.length) - monthGap
@@ -125,4 +138,6 @@ $: width = view === 'monthly'
 $: dayLabelPosition = index => {
     return (cellRect * index) + (cellRect / 2) + monthLabelHeight;
 }
+
+$: wholeColors = [emptyColor, ...colors];
 </script>

src/views/Legend.svelte

@@ -0,0 +1,42 @@
+<g transform="translate({translateX}, {translateY})">
+    {#each colors as color, index}
+        <rect
+            fill={color}
+            height={cellSize}
+            width={cellSize}
+            x={20 + cellSize * index}
+            {y}
+            alignment-baseline="middle"
+        />
+    {/each}
+    <text
+        x="0"
+        y={cellSize}
+        font-family={fontFamily}
+        font-size={fontSize}
+        alignment-baseline="middle"
+    >
+        Less
+    </text>
+    <text
+        x={15 + cellSize * (colors.length + 1)}
+        y={cellSize}
+        font-family={fontFamily}
+        font-size={fontSize}
+        alignment-baseline="middle"
+    >
+        More
+    </text>
+</g>
+
+<script>
+    export let translateX;
+    export let translateY;
+    export let height;
+    export let colors;
+    export let cellSize;
+    export let fontSize;
+    export let fontFamily;
+
+    $: y = (height - cellSize) / 4;
+</script>