@mrintel/villain-ui 0.8.1 → 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,4 @@
|
|
|
1
|
-
<script lang="ts">import
|
|
1
|
+
<script lang="ts">import Portal from '../utilities/Portal.svelte';
|
|
2
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();
|
|
3
3
|
const BASE_DAY_NAMES = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
|
|
4
4
|
const hours = Array.from({ length: 24 }, (_, h) => h);
|
|
@@ -20,6 +20,14 @@ function labelFor(cell, dayLabel, isNow) {
|
|
|
20
20
|
return isNow ? `${text} (now)` : text;
|
|
21
21
|
}
|
|
22
22
|
const fill = (intensity) => `color-mix(in srgb, var(--color-accent) ${intensity}%, var(--color-base-2))`;
|
|
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}
|
|
@@ -46,34 +54,44 @@ const fill = (intensity) => `color-mix(in srgb, var(--color-accent) ${intensity}
|
|
|
46
54
|
{@const isNow = markNow && row.day === nowDay && hour === nowHour}
|
|
47
55
|
{@const isSel = !!selected && selected.day === row.day && selected.hour === hour}
|
|
48
56
|
{@const label = labelFor(cell, row.label, isNow)}
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
57
|
+
{#if onCellSelect}
|
|
58
|
+
<button
|
|
59
|
+
type="button"
|
|
60
|
+
class="heatmap-cell"
|
|
61
|
+
class:is-highlight={hl}
|
|
62
|
+
class:is-ring={isNow || isSel}
|
|
63
|
+
style="background-color: {fill(cell.intensity)}"
|
|
64
|
+
aria-label={label}
|
|
65
|
+
aria-pressed={isSel}
|
|
66
|
+
onclick={() => onCellSelect(cell)}
|
|
67
|
+
onmouseenter={(e) => showTip(e.currentTarget, label)}
|
|
68
|
+
onmouseleave={hideTip}
|
|
69
|
+
onfocus={(e) => showTip(e.currentTarget, label)}
|
|
70
|
+
onblur={hideTip}
|
|
71
|
+
></button>
|
|
72
|
+
{:else}
|
|
73
|
+
<div
|
|
74
|
+
class="heatmap-cell"
|
|
75
|
+
class:is-highlight={hl}
|
|
76
|
+
class:is-ring={isNow || isSel}
|
|
77
|
+
style="background-color: {fill(cell.intensity)}"
|
|
78
|
+
aria-hidden="true"
|
|
79
|
+
onmouseenter={(e) => showTip(e.currentTarget, label)}
|
|
80
|
+
onmouseleave={hideTip}
|
|
81
|
+
></div>
|
|
82
|
+
{/if}
|
|
73
83
|
{/each}
|
|
74
84
|
{/each}
|
|
75
85
|
</div>
|
|
76
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}
|
|
77
95
|
{/if}
|
|
78
96
|
|
|
79
97
|
<style>
|
|
@@ -102,8 +120,6 @@ const fill = (intensity) => `color-mix(in srgb, var(--color-accent) ${intensity}
|
|
|
102
120
|
}
|
|
103
121
|
|
|
104
122
|
.heatmap-cell {
|
|
105
|
-
display: block;
|
|
106
|
-
width: 100%;
|
|
107
123
|
height: var(--heatmap-cell-size, 1.5rem);
|
|
108
124
|
min-width: var(--heatmap-cell-size, 1.5rem);
|
|
109
125
|
border-radius: 2px;
|
|
@@ -111,6 +127,18 @@ const fill = (intensity) => `color-mix(in srgb, var(--color-accent) ${intensity}
|
|
|
111
127
|
padding: 0;
|
|
112
128
|
}
|
|
113
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
|
+
|
|
114
142
|
button.heatmap-cell {
|
|
115
143
|
cursor: pointer;
|
|
116
144
|
}
|
package/package.json
CHANGED