From 8e7bc3eb5f7be47f126d4e7058667db291369fde Mon Sep 17 00:00:00 2001 From: Rinjani Analytics <209478350+rinjanianalytics@users.noreply.github.com> Date: Sun, 11 Oct 2026 09:33:40 +0700 Subject: [PATCH] console: make the lines and the Sankey links easier to see With the new colors, the lighter ones were hard to follow as thin lines, and the links of a Sankey graph were faint on both themes. - The lines graph draws its lines 3 pixels wide, up from 2. - The links of a Sankey graph use an opacity of 0.4, up from the default of 0.2. --- docs/99-changelog.md | 2 ++ web/src/components/visualize/graphs.tsx | 5 +++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/docs/99-changelog.md b/docs/99-changelog.md index fdafd5e3..14b3c35a 100644 --- a/docs/99-changelog.md +++ b/docs/99-changelog.md @@ -21,6 +21,8 @@ identified with a specific icon: - 🌱 *console*: units are written in words, the axis of a graph shows the unit, times use a 24-hour clock and the first ten series each get a color of their own +- 🌱 *console*: the lines of a graph are thicker and the links of a Sankey + graph are less transparent - 🌱 *console*: the home page shows the traffic now and its peak, ranks the top lists with the share of each entry, and groups the fields of the last flow. The fields without a value are behind a button diff --git a/web/src/components/visualize/graphs.tsx b/web/src/components/visualize/graphs.tsx index e63a6c35..b16f8836 100644 --- a/web/src/components/visualize/graphs.tsx +++ b/web/src/components/visualize/graphs.tsx @@ -247,7 +247,7 @@ function useLineOption(data: GraphLineResult, isDark: boolean): ECOption { type: "line", symbol: "none", itemStyle: { color: color(uniqIndex(row), false, theme) }, - lineStyle: { color: color(uniqIndex(row), false, theme), width: 2 }, + lineStyle: { color: color(uniqIndex(row), false, theme), width: 3 }, emphasis: { focus: "series" }, encode: { x: 0, @@ -523,7 +523,8 @@ function SankeyGraph({ data }: { data: GraphSankeyResult }) { animationDuration: 500, emphasis: { focus: "trajectory" as const }, label: { formatter: "{b}", color: chrome.ink, fontFamily: "Poppins" }, - lineStyle: { color: "gradient" as const, curveness: 0.5 }, + // Twice the default opacity: the links were faint on both themes. + lineStyle: { color: "gradient" as const, curveness: 0.5, opacity: 0.4 }, }; const bold = (value: number) => `${formatXps(value)}`;