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)}`;