(isHover = true)}
on:mouseleave={() => {
isHover = false;
isDragging = false;
}}
on:mouseenter={({ clientY, buttons }) => handleMouseEvent({ clientY, isDragging: !!buttons })}
on:mousemove={({ clientY }) => handleMouseEvent({ clientY })}
on:mousedown={({ clientY }) => handleMouseEvent({ clientY, isDragging: true })}
on:mouseup={({ clientY }) => handleMouseEvent({ clientY, isDragging: false })}
>
{#if isHover}
{/if}
{#each segments as segment, index (segment.timeGroup)}
{@const date = fromLocalDateTime(segment.timeGroup)}
{@const year = date.year}
{@const label = `${date.toLocaleString({ month: 'short' })} ${year}`}
{@const lastGroupYear = fromLocalDateTime(segments[index - 1]?.timeGroup).year}
{@const canRenderYear = segments.slice(index + 1, index + 3).reduce((_, curr) => {
const nextGroupYear = fromLocalDateTime(curr.timeGroup).year;
if (nextGroupYear !== year || curr.height < 1) {
return false;
}
return true;
}, true)}
(hoverLabel = label)}
>
{#if lastGroupYear !== year && canRenderYear}
{year}
{:else if segment.height > 5}
{/if}