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 d58f4ad timechart: legend formatting fix for dual-axis widgets
d58f4ad is described below
commit d58f4adf3743cb1afc61355cb3e82c4b4d736442
Author: Wu Sheng <[email protected]>
AuthorDate: Tue May 12 22:27:38 2026 +0800
timechart: legend formatting fix for dual-axis widgets
Dual-axis line charts (MQ Consume rate + latency) now annotate each
legend label with its unit — operators can tell at a glance which
series sits on which axis. 'count' becomes 'count (/min)', 'latency'
becomes 'latency (ms)'. Single-axis widgets keep bare labels since
the y-axis already carries the unit.
Legend layout: itemGap 10 → 14 so the longer annotated labels don't
crowd, type: 'scroll' so the legend ellipses + arrows when the
chart is too narrow to fit every chip on one row (the dashboard's
span-3 widgets get tight at narrow viewports).
---
apps/ui/src/components/charts/TimeChart.vue | 16 +++++++++++-----
1 file changed, 11 insertions(+), 5 deletions(-)
diff --git a/apps/ui/src/components/charts/TimeChart.vue
b/apps/ui/src/components/charts/TimeChart.vue
index 233cdeb..51fa2d5 100644
--- a/apps/ui/src/components/charts/TimeChart.vue
+++ b/apps/ui/src/components/charts/TimeChart.vue
@@ -112,12 +112,14 @@ function buildOption(): echarts.EChartsCoreOption {
show: props.series.length > 1,
top: 2,
left: 4,
+ right: 4,
padding: [0, 0, 0, 0],
textStyle: { color: '#94a3b8', fontSize: 10, lineHeight: 12 },
itemWidth: 10,
itemHeight: 8,
- itemGap: 10,
+ itemGap: 14,
icon: 'roundRect',
+ type: 'scroll',
},
grid: {
left: 36,
@@ -166,13 +168,17 @@ function buildOption(): echarts.EChartsCoreOption {
return axes;
})(),
series: props.series.map((s, i) => {
- // First series uses the widget's accent color (resolved from a
- // CSS var); secondary lines cycle through SECONDARY. Single-series
- // widgets get a soft area fill in the accent tone.
const accentHex = cssVar(props.accent);
const color = i === 0 ? accentHex : SECONDARY[(i - 1) %
SECONDARY.length];
+ // For dual-axis widgets, append the per-series unit to the
+ // legend label so operators can tell which line is on which
+ // axis at a glance (e.g. "count (/min)" vs "latency (ms)").
+ // Single-axis widgets keep the bare label — unit lives on the
+ // single y-axis annotation already.
+ const hasDualAxis = props.series.some((x) => (x.yAxisIndex ?? 0) === 1);
+ const name = hasDualAxis && s.unit ? `${s.label} (${s.unit})` : s.label;
return {
- name: s.label,
+ name,
type: 'line',
smooth: true,
symbol: 'none',
