Fix touch interaction in top models chart

This commit is contained in:
Adam 2026-05-28 14:37:48 -05:00
parent 9f15715877
commit e3a6255c72
No known key found for this signature in database
GPG key ID: 9CB48779AF150E75
2 changed files with 31 additions and 1 deletions

View file

@ -2061,7 +2061,22 @@
}
[data-page="stats"] [data-section="top-models"] [data-component="chart-tooltip"] {
display: none;
position: fixed;
top: auto;
right: 12px;
bottom: 12px;
left: 12px;
z-index: 40;
width: auto;
min-width: 0;
max-height: min(320px, 48vh);
overflow: auto;
transform: none;
}
[data-page="stats"] [data-section="top-models"] [data-component="chart-tooltip"][data-placement] {
right: 12px;
left: 12px;
}
}

View file

@ -447,6 +447,11 @@ function TopModelsChart(props: { data: UsagePoint[]; range: UsageRange }) {
data-active={activeIndex() === dayIndex() ? "true" : undefined}
data-muted={activeIndex() !== undefined && activeIndex() !== dayIndex() ? "true" : undefined}
style={{ "--top-models-bar-height": `${getTopModelsBarHeight(usageTotal(day), maxTotal())}%` }}
onPointerDown={(event) => {
if (event.pointerType !== "touch") return
setActiveIndex(dayIndex())
setActiveSegment(undefined)
}}
onPointerEnter={() => {
setActiveIndex(dayIndex())
setActiveSegment(undefined)
@ -490,6 +495,16 @@ function TopModelsChart(props: { data: UsagePoint[]; range: UsageRange }) {
setActiveIndex(dayIndex())
setActiveSegment(item.index)
}}
onPointerDown={(event) => {
event.stopPropagation()
setActiveIndex(dayIndex())
setActiveSegment(item.index)
}}
onClick={(event) => {
event.stopPropagation()
setActiveIndex(dayIndex())
setActiveSegment(item.index)
}}
/>
)}
</For>