@mrintel/villain-ui 0.8.0 → 0.8.1
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 Tooltip from '../overlays/Tooltip.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,10 @@ 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
|
-
export {};
|
|
23
23
|
</script>
|
|
24
24
|
|
|
25
25
|
{#if matrix.length > 0}
|
|
@@ -46,27 +46,30 @@ export {};
|
|
|
46
46
|
{@const isNow = markNow && row.day === nowDay && hour === nowHour}
|
|
47
47
|
{@const isSel = !!selected && selected.day === row.day && selected.hour === hour}
|
|
48
48
|
{@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
|
-
|
|
49
|
+
<!-- ponytail: one Tooltip per cell (168 total). Fine for a heatmap rendered
|
|
50
|
+
once per page; swap for a single hovered-cell-driven tooltip if it ever bites. -->
|
|
51
|
+
<Tooltip content={label}>
|
|
52
|
+
{#if onCellSelect}
|
|
53
|
+
<button
|
|
54
|
+
type="button"
|
|
55
|
+
class="heatmap-cell"
|
|
56
|
+
class:is-highlight={hl}
|
|
57
|
+
class:is-ring={isNow || isSel}
|
|
58
|
+
style="background-color: {fill(cell.intensity)}"
|
|
59
|
+
aria-label={label}
|
|
60
|
+
aria-pressed={isSel}
|
|
61
|
+
onclick={() => onCellSelect(cell)}
|
|
62
|
+
></button>
|
|
63
|
+
{:else}
|
|
64
|
+
<div
|
|
65
|
+
class="heatmap-cell"
|
|
66
|
+
class:is-highlight={hl}
|
|
67
|
+
class:is-ring={isNow || isSel}
|
|
68
|
+
style="background-color: {fill(cell.intensity)}"
|
|
69
|
+
aria-hidden="true"
|
|
70
|
+
></div>
|
|
71
|
+
{/if}
|
|
72
|
+
</Tooltip>
|
|
70
73
|
{/each}
|
|
71
74
|
{/each}
|
|
72
75
|
</div>
|
|
@@ -99,6 +102,8 @@ export {};
|
|
|
99
102
|
}
|
|
100
103
|
|
|
101
104
|
.heatmap-cell {
|
|
105
|
+
display: block;
|
|
106
|
+
width: 100%;
|
|
102
107
|
height: var(--heatmap-cell-size, 1.5rem);
|
|
103
108
|
min-width: var(--heatmap-cell-size, 1.5rem);
|
|
104
109
|
border-radius: 2px;
|
package/package.json
CHANGED