diff --git a/src/rust/lqosd/src/node_manager/js_build/src/graphs/queuing_activity_waveform.js b/src/rust/lqosd/src/node_manager/js_build/src/graphs/queuing_activity_waveform.js index 6f9a103a..b8e18221 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/graphs/queuing_activity_waveform.js +++ b/src/rust/lqosd/src/node_manager/js_build/src/graphs/queuing_activity_waveform.js @@ -180,10 +180,11 @@ function ceilingSeriesData(samples, direction, windowStart, windowEnd) { const ceilingBps = toNumber(ceilingData[i][1], 0); const throughputBps = toNumber(throughputData[i][1], 0); const atCeiling = ceilingBps > 0 && throughputBps >= (ceilingBps * 0.95); + const activeTimestamp = i > 0 ? timestamp : windowStart; if (base.length === 0) { base.push([timestamp, ceilingBps]); - active.push([timestamp, atCeiling ? ceilingBps : null]); + active.push([activeTimestamp, atCeiling ? ceilingBps : null]); } base.push([nextTimestamp, ceilingBps]); @@ -375,7 +376,7 @@ export class QueuingActivityWaveform extends DashboardGraph { yAxisIndex: 0, showSymbol: false, smooth: false, - step: "end", + step: "start", lineStyle: { width: 2.4, color: this.colors.throughputLine, @@ -435,7 +436,7 @@ export class QueuingActivityWaveform extends DashboardGraph { showSymbol: false, connectNulls: false, smooth: false, - step: "end", + step: "start", lineStyle: { width: 2.1, color: this.colors.qooLine, diff --git a/src/rust/lqosd/src/node_manager/static2/node_manager.css b/src/rust/lqosd/src/node_manager/static2/node_manager.css index dcbc93df..19f58160 100644 --- a/src/rust/lqosd/src/node_manager/static2/node_manager.css +++ b/src/rust/lqosd/src/node_manager/static2/node_manager.css @@ -521,6 +521,7 @@ html[data-bs-theme="light"] .sidebar .navbar-toggler-icon { 0 0 0 1px color-mix(in srgb, var(--lqos-border) 30%, transparent); } .lqos-circuit-activity-chart { + position: relative; height: 338px; width: 100%; border: 1px solid color-mix(in srgb, var(--lqos-border) 82%, transparent); @@ -533,6 +534,18 @@ html[data-bs-theme="light"] .sidebar .navbar-toggler-icon { inset 0 -24px 60px rgba(5, 10, 18, 0.42); overflow: hidden; } +.lqos-circuit-activity-chart::after { + content: ""; + position: absolute; + top: 0; + right: 0; + width: 4px; + height: 100%; + pointer-events: none; + background: + radial-gradient(circle at 0 0, rgba(35, 74, 95, 0.18) 0%, rgba(12, 20, 31, 0) 42%), + linear-gradient(180deg, #111b28 0%, #0b1420 100%); +} [data-bs-theme="light"] .lqos-circuit-activity-panel { background: linear-gradient( 180deg, @@ -576,6 +589,11 @@ html[data-bs-theme="light"] .sidebar .navbar-toggler-icon { inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -18px 34px rgba(177, 193, 214, 0.12); } +[data-bs-theme="light"] .lqos-circuit-activity-chart::after { + background: + radial-gradient(circle at 0 0, rgba(108, 160, 184, 0.12) 0%, rgba(255, 255, 255, 0) 42%), + linear-gradient(180deg, #f8fbff 0%, #edf3f9 100%); +} .lqos-circuit-activity-kpi { height: 100%; border: 1px solid color-mix(in srgb, var(--lqos-border) 80%, transparent);