add tooltips to progress bars.

svelte-ui/src/components/GoalEntry.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { GoalResult } from "../models/goal";
   import type { ModalData } from "../stores/modal";
-import EveryMinute from "./EveryMinute.svelte";
+  import EveryMinute from "./EveryMinute.svelte";
   import Option from "./Option.svelte";
   import OptionRow from "./OptionRow.svelte";
   import ParentEntry from "./ParentEntry.svelte";
@@ -51,7 +51,7 @@ import EveryMinute from "./EveryMinute.svelte";
   {/if}
   <div class="progress">
     <Progress count={goal.completedAmount} target={goal.amount} />
-    <Progress thinner gray count={msElapsed} target={msLength} />
+    <Progress thinner gray count={msElapsed} target={msLength} titleTime />
   </div>
 </ParentEntry>
 

svelte-ui/src/components/Progress.svelte

@@ -15,12 +15,15 @@
   export let thin = false;
   export let thinner = false;
   export let gray = false;
+  export let titlePercentageOnly = false;
+  export let titleTime = false;
   
   let offClass = COLORS[0];
   let onClass = COLORS[1];
   let ons = 0;
   let offs = 1;
   let nonSegmented = false;
+  let title = "";
 
   $: {
     let level = Math.floor(count / target);
@@ -53,9 +56,30 @@
     // or a browser freeze if you set the target very high. 
     nonSegmented = (target >= 50);
   }
+
+  $: {
+    const percentage = ((count / target) * 100).toFixed(0);
+
+    if (titlePercentageOnly) {
+      title = `${percentage}%`;
+    } else if (titleTime) {
+      let unit = "days";
+      let progressTime = (count / 86400000);
+      let totaltTime = (target / 86400000);
+      if (totaltTime < 1) {
+        unit = "hours";
+        totaltTime *= 24;
+        progressTime *= 24;
+      }
+
+      title = `${progressTime.toFixed(1)} / ${totaltTime.toFixed(1)} ${unit} (${percentage}%)`;
+    } else {
+      title = `${count} / ${target} (${percentage}%)`
+    }
+  }
 </script>
 
-<div class="bar" class:thin class:thinner>
+<div class="bar" title="{title}" class:thin class:thinner>
   {#if nonSegmented}
     <div style="flex: {ons}" class={"non-segmented on " + onClass}></div>
     <div style="flex: {offs}" class={"non-segmented off " + offClass}></div>