Fix touch interaction in top models chart
This commit is contained in:
@@ -2061,7 +2061,22 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
[data-page="stats"] [data-section="top-models"] [data-component="chart-tooltip"] {
|
[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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -447,6 +447,11 @@ function TopModelsChart(props: { data: UsagePoint[]; range: UsageRange }) {
|
|||||||
data-active={activeIndex() === dayIndex() ? "true" : undefined}
|
data-active={activeIndex() === dayIndex() ? "true" : undefined}
|
||||||
data-muted={activeIndex() !== undefined && activeIndex() !== dayIndex() ? "true" : undefined}
|
data-muted={activeIndex() !== undefined && activeIndex() !== dayIndex() ? "true" : undefined}
|
||||||
style={{ "--top-models-bar-height": `${getTopModelsBarHeight(usageTotal(day), maxTotal())}%` }}
|
style={{ "--top-models-bar-height": `${getTopModelsBarHeight(usageTotal(day), maxTotal())}%` }}
|
||||||
|
onPointerDown={(event) => {
|
||||||
|
if (event.pointerType !== "touch") return
|
||||||
|
setActiveIndex(dayIndex())
|
||||||
|
setActiveSegment(undefined)
|
||||||
|
}}
|
||||||
onPointerEnter={() => {
|
onPointerEnter={() => {
|
||||||
setActiveIndex(dayIndex())
|
setActiveIndex(dayIndex())
|
||||||
setActiveSegment(undefined)
|
setActiveSegment(undefined)
|
||||||
@@ -490,6 +495,16 @@ function TopModelsChart(props: { data: UsagePoint[]; range: UsageRange }) {
|
|||||||
setActiveIndex(dayIndex())
|
setActiveIndex(dayIndex())
|
||||||
setActiveSegment(item.index)
|
setActiveSegment(item.index)
|
||||||
}}
|
}}
|
||||||
|
onPointerDown={(event) => {
|
||||||
|
event.stopPropagation()
|
||||||
|
setActiveIndex(dayIndex())
|
||||||
|
setActiveSegment(item.index)
|
||||||
|
}}
|
||||||
|
onClick={(event) => {
|
||||||
|
event.stopPropagation()
|
||||||
|
setActiveIndex(dayIndex())
|
||||||
|
setActiveSegment(item.index)
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</For>
|
</For>
|
||||||
|
|||||||
Reference in New Issue
Block a user