Tooltip added to bar charts (#1022)

Author: gskjold

lib/SvelteUi/app/dist/index.css

@@ -188,3 +188,22 @@ svg {
   display: block;
   text-align: center;
 }
+
+.tooltip {
+  border: 1px solid #ddd;
+  background: white;
+  border-radius: 4px;
+  padding: 4px;
+  position: absolute;
+}
+
+.tooltip::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -9px;
+  border-width: 9px;
+  border-style: solid;
+  border-color: #ddd transparent transparent transparent;
+}

lib/SvelteUi/app/dist/index.js

@@ -1,5 +1,6 @@
 <script>
     import { Link } from "svelte-navigator";
+	import { tooltip } from './tooltip';
 
     export let config;
 
@@ -83,7 +84,7 @@
             <g class='bars'>
                 {#each config.points as point, i}
                     {#if !isNaN(xScale(i)) && !isNaN(yScale(point.value))}
-                        <g>
+                        <g data-title="{point.title}" use:tooltip>
                         {#if point.value !== undefined}
                             <rect
                                 x="{xScale(i) + 2}"
@@ -102,9 +103,6 @@
                                     transform="translate({xScale(i) + barWidth/2} {yScale(point.value) > yScale(0) - labelOffset ? yScale(point.value) - labelOffset : yScale(point.value) + 10}) rotate({point.labelAngle ? point.labelAngle : barWidth < vertSwitch ? 90 : 0})"
 
                                 >{point.label}</text>
-                                {#if point.title}
-                                <title>{point.title}</title>
-                                {/if}
                             {/if}
                         {/if}
                         </g>

lib/SvelteUi/app/src/app.postcss

@@ -49,6 +49,7 @@
                 title = title + ': ' + peak.v.toFixed(2) + ' kWh';
                 points.push({
                     label: peak.v.toFixed(2), 
+                    title: peak.v.toFixed(2) + ' kWh', 
                     value: peak.v, 
                     title: title,
                     color: dark ? '#5c2da5' : '#7c3aed'

lib/SvelteUi/app/src/lib/BarChart.svelte

@@ -0,0 +1,14 @@
+<script>
+	export let title;
+	export let x;
+	export let y;
+
+    let width;
+    let height;
+</script>
+<div 
+    class="tooltip" 
+    style="top: {y - height - 10}px; left: {x - (width / 2)}px;"
+    bind:clientHeight={height}
+    bind:clientWidth={width}
+>{title}</div>

lib/SvelteUi/app/src/lib/TariffPeakChart.svelte

@@ -0,0 +1,41 @@
+import Tooltip from './Tooltip.svelte';
+
+export function tooltip(element) {
+	let title;
+	let tooltipComponent;
+	
+    function click(event) {
+        if(tooltipComponent) tooltipComponent.$destroy();
+
+		title = element.dataset.title || element.getAttribute('title');
+        var rect = element.getBoundingClientRect();
+
+		tooltipComponent = new Tooltip({
+			props: {
+				title: title,
+				x: rect.left + window.scrollX + (rect.width / 2),
+				y: rect.top + window.scrollY,
+			},
+			target: document.body,
+		});
+	}
+
+	function mouseLeave() {
+        if(tooltipComponent) {
+            setTimeout(() => {
+                tooltipComponent.$destroy();
+                tooltipComponent = null;
+            }, 500);
+        }
+	}
+	
+	element.addEventListener('click', click);
+    element.addEventListener('mouseleave', mouseLeave);
+	
+	return {
+		destroy() {
+			element.removeEventListener('click', click);
+			element.removeEventListener('mouseleave', mouseLeave);
+		}
+	}
+}