@mrintel/villain-ui 0.8.0 → 0.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
<script lang="ts">
|
|
1
|
+
<script lang="ts">import Portal from '../utilities/Portal.svelte';
|
|
2
|
+
let { matrix, rowOrder, dayLabels, hourLabel = (h) => String(h), hourLabelEvery = 1, normalize = true, highlight, markNow = false, cellLabel, onCellSelect, selected = null, ariaLabel = 'Weekly traffic heatmap', class: className = '' } = $props();
|
|
2
3
|
const BASE_DAY_NAMES = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
|
|
3
4
|
const hours = Array.from({ length: 24 }, (_, h) => h);
|
|
4
5
|
// Captured once at init — a long-lived page drifts; accepted (matches hand-rolled versions).
|
|
@@ -15,11 +16,18 @@ function getCell(day, hour) {
|
|
|
15
16
|
return { day, hour, value, intensity };
|
|
16
17
|
}
|
|
17
18
|
function labelFor(cell, dayLabel, isNow) {
|
|
18
|
-
const text = cellLabel ? cellLabel(cell) : `${dayLabel} ${hourLabel(cell.hour)}
|
|
19
|
+
const text = cellLabel ? cellLabel(cell) : `${dayLabel} ${hourLabel(cell.hour)}: ${cell.value}`;
|
|
19
20
|
return isNow ? `${text} (now)` : text;
|
|
20
21
|
}
|
|
21
22
|
const fill = (intensity) => `color-mix(in srgb, var(--color-accent) ${intensity}%, var(--color-base-2))`;
|
|
22
|
-
|
|
23
|
+
// Single branded tooltip, portaled to <body> so it escapes the overflow-x
|
|
24
|
+
// scroll wrapper (a per-cell absolute tooltip would expand/scroll the grid).
|
|
25
|
+
let tip = $state(null);
|
|
26
|
+
function showTip(el, label) {
|
|
27
|
+
const r = el.getBoundingClientRect();
|
|
28
|
+
tip = { label, x: r.left + r.width / 2, y: r.top };
|
|
29
|
+
}
|
|
30
|
+
const hideTip = () => (tip = null);
|
|
23
31
|
</script>
|
|
24
32
|
|
|
25
33
|
{#if matrix.length > 0}
|
|
@@ -56,6 +64,10 @@ export {};
|
|
|
56
64
|
aria-label={label}
|
|
57
65
|
aria-pressed={isSel}
|
|
58
66
|
onclick={() => onCellSelect(cell)}
|
|
67
|
+
onmouseenter={(e) => showTip(e.currentTarget, label)}
|
|
68
|
+
onmouseleave={hideTip}
|
|
69
|
+
onfocus={(e) => showTip(e.currentTarget, label)}
|
|
70
|
+
onblur={hideTip}
|
|
59
71
|
></button>
|
|
60
72
|
{:else}
|
|
61
73
|
<div
|
|
@@ -63,14 +75,23 @@ export {};
|
|
|
63
75
|
class:is-highlight={hl}
|
|
64
76
|
class:is-ring={isNow || isSel}
|
|
65
77
|
style="background-color: {fill(cell.intensity)}"
|
|
66
|
-
title={label}
|
|
67
78
|
aria-hidden="true"
|
|
79
|
+
onmouseenter={(e) => showTip(e.currentTarget, label)}
|
|
80
|
+
onmouseleave={hideTip}
|
|
68
81
|
></div>
|
|
69
82
|
{/if}
|
|
70
83
|
{/each}
|
|
71
84
|
{/each}
|
|
72
85
|
</div>
|
|
73
86
|
</div>
|
|
87
|
+
|
|
88
|
+
{#if tip}
|
|
89
|
+
<Portal>
|
|
90
|
+
<div class="heatmap-tip panel-floating" style="left: {tip.x}px; top: {tip.y}px;">
|
|
91
|
+
{tip.label}
|
|
92
|
+
</div>
|
|
93
|
+
</Portal>
|
|
94
|
+
{/if}
|
|
74
95
|
{/if}
|
|
75
96
|
|
|
76
97
|
<style>
|
|
@@ -106,6 +127,18 @@ export {};
|
|
|
106
127
|
padding: 0;
|
|
107
128
|
}
|
|
108
129
|
|
|
130
|
+
.heatmap-tip {
|
|
131
|
+
position: fixed;
|
|
132
|
+
transform: translate(-50%, calc(-100% - 8px));
|
|
133
|
+
z-index: var(--z-50, 50);
|
|
134
|
+
pointer-events: none;
|
|
135
|
+
white-space: nowrap;
|
|
136
|
+
padding: 0.4rem 0.75rem;
|
|
137
|
+
border-radius: var(--radius-md);
|
|
138
|
+
font-size: 0.8rem;
|
|
139
|
+
color: var(--color-text);
|
|
140
|
+
}
|
|
141
|
+
|
|
109
142
|
button.heatmap-cell {
|
|
110
143
|
cursor: pointer;
|
|
111
144
|
}
|
package/package.json
CHANGED