فهرست منبع

Fix touch interaction in top models chart

Adam 3 ماه پیش
والد
کامیت
e3a6255c72
2فایلهای تغییر یافته به همراه31 افزوده شده و 1 حذف شده
  1. 16 1
      packages/stats/app/src/routes/index.css
  2. 15 0
      packages/stats/app/src/routes/index.tsx

+ 16 - 1
packages/stats/app/src/routes/index.css

@@ -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;
   }
 }
 

+ 15 - 0
packages/stats/app/src/routes/index.tsx

@@ -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>