From 914108e5750bc39700a0ad8283afc80e004872cf Mon Sep 17 00:00:00 2001
From: Martino Ferrari <martinogiordano.ferrari@iter.org>
Date: Fri, 19 Jun 2026 07:57:42 +0200
Subject: [PATCH] Plot fix

---
 web/src/styles.css             | 7 +++++++
 web/src/widgets/PlotWidget.tsx | 3 ++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/web/src/styles.css b/web/src/styles.css
index 3d0ea13..4b59653 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -1024,6 +1024,13 @@ body {
 .chart-area .u-legend { color: #94a3b8; font-size: 0.75rem; }
 .chart-area .u-value { color: #e2e8f0; }
 
+/* Legend position for the uPlot (timeseries) chart. uPlot always renders its
+   legend below the canvas, so to honour "top" we make the chart root a flex
+   column and reorder the legend above the plot. ECharts plots position their
+   own legend internally (see echartsOption), so these rules don't apply there. */
+.plot-widget.legend-top .chart-area .uplot { display: flex; flex-direction: column; }
+.plot-widget.legend-top .chart-area .u-legend { order: -1; }
+
 /* ── Edit Mode layout ──────────────────────────────────────────────────── */
 
 .edit-mode-layout {
diff --git a/web/src/widgets/PlotWidget.tsx b/web/src/widgets/PlotWidget.tsx
index 2811011..89df8ca 100644
--- a/web/src/widgets/PlotWidget.tsx
+++ b/web/src/widgets/PlotWidget.tsx
@@ -70,6 +70,7 @@ export default function PlotWidget({ widget, onContextMenu, timeRange }: Props)
   // Stable primitive deps so the effect re-runs when plotType or signals change.
   const timeRangeKey = timeRange ? `${timeRange.start}|${timeRange.end}` : 'live';
   const plotType = widget.options['plotType'] ?? 'timeseries';
+  const legendPos = widget.options['legend'] ?? 'bottom';
   const signalsKey = widget.signals.map(s => `${s.ds}:${s.name}${s.color ?? ''}`).join(',');
 
   useEffect(() => {
@@ -436,7 +437,7 @@ export default function PlotWidget({ widget, onContextMenu, timeRange }: Props)
 
   return (
     <div
-      class="plot-widget"
+      class={`plot-widget legend-${legendPos}`}
       ref={outerRef}
       style={`left:${widget.x}px;top:${widget.y}px;width:${widget.w}px;height:${widget.h}px;`}
       onContextMenu={onContextMenu}