This is an automated email from the ASF dual-hosted git repository.
wu-sheng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-horizon-ui.git
The following commit(s) were added to refs/heads/main by this push:
new 6e36f07 timechart: show value dots + escape clipped tooltip
6e36f07 is described below
commit 6e36f07856e805845654f24fdab04a2b64c15d3e
Author: Wu Sheng <[email protected]>
AuthorDate: Tue May 12 22:50:06 2026 +0800
timechart: show value dots + escape clipped tooltip
Two readability fixes for line widgets:
1. Tooltip popup was getting clipped by the widget card's
overflow:hidden whenever a chart sat near the card edge. Set
ECharts tooltip.appendToBody = true so the tooltip DOM goes onto
document.body instead of nesting inside the chart container —
the popup now renders cleanly over whatever's adjacent.
2. Lines now carry visible value dots on every data point
(symbol: 'circle', size 4). Without dots, hover felt like
guesswork; with them, each bucket is visually anchored. On
emphasis (hover) the active point flips to a white-fill outlined
marker so it stands out among the surrounding dots.
---
apps/ui/src/components/charts/TimeChart.vue | 23 +++++++++++++++++++++--
1 file changed, 21 insertions(+), 2 deletions(-)
diff --git a/apps/ui/src/components/charts/TimeChart.vue
b/apps/ui/src/components/charts/TimeChart.vue
index 51fa2d5..f959537 100644
--- a/apps/ui/src/components/charts/TimeChart.vue
+++ b/apps/ui/src/components/charts/TimeChart.vue
@@ -103,6 +103,11 @@ function buildOption(): echarts.EChartsCoreOption {
backgroundColor: 'rgba(20,20,24,0.92)',
borderColor: 'rgba(255,255,255,0.08)',
textStyle: { color: '#e5e7eb', fontSize: 11 },
+ // Append to document.body so the popup isn't clipped by the
+ // widget card's overflow:hidden. Otherwise the tooltip cuts off
+ // at the card edge whenever a chart sits near the boundary.
+ appendToBody: true,
+ confine: false,
valueFormatter: (v: unknown) =>
typeof v === 'number' && Number.isFinite(v)
? `${v.toFixed(2)}${props.unit ? ` ${props.unit}` : ''}`
@@ -181,11 +186,25 @@ function buildOption(): echarts.EChartsCoreOption {
name,
type: 'line',
smooth: true,
- symbol: 'none',
+ // Small circle markers on every data point so values are
+ // visually anchored even before hover; the marker grows on
+ // emphasis (hover) for the active point.
+ symbol: 'circle',
+ symbolSize: 4,
+ showSymbol: true,
yAxisIndex: s.yAxisIndex ?? 0,
lineStyle: { width: 1.5 },
data: s.data.map((v) => (v === null ? '-' : v)),
- itemStyle: { color },
+ itemStyle: { color, borderColor: color, borderWidth: 1 },
+ emphasis: {
+ focus: 'series',
+ scale: false,
+ itemStyle: {
+ borderColor: color,
+ borderWidth: 2,
+ color: '#fff',
+ },
+ },
areaStyle:
props.series.length === 1
? { color: accentHex, opacity: 0.12 }
