From dbfe8cbd7a4c887700663ebf3ced151cf6d4d1a7 Mon Sep 17 00:00:00 2001
From: Victor Herrero Otal <victor.herrero.otal@sap.com>
Date: Thu, 23 Jul 2026 14:07:17 +0200
Subject: [PATCH 1/2] feat(prometheus): add legend to the explorer graph tab

Signed-off-by: Victor Herrero Otal <victor.herrero.otal@sap.com>
---
 prometheus/src/explore/PrometheusExplorer.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/prometheus/src/explore/PrometheusExplorer.tsx b/prometheus/src/explore/PrometheusExplorer.tsx
index 3e51b6302..be2ffc430 100644
--- a/prometheus/src/explore/PrometheusExplorer.tsx
+++ b/prometheus/src/explore/PrometheusExplorer.tsx
@@ -45,7 +45,11 @@ function TimeSeriesPanel({ queries }: { queries: QueryDefinition[] }): ReactElem
           }}
           definition={{
             kind: 'Panel',
-            spec: { queries: queries, display: { name: '' }, plugin: { kind: 'TimeSeriesChart', spec: {} } },
+            spec: {
+              queries: queries,
+              display: { name: '' },
+              plugin: { kind: 'TimeSeriesChart', spec: { legend: { position: 'bottom', mode: 'list' } } },
+            },
           }}
         />
       </DataQueriesProvider>

From 1324120f651256a95181cf3cf0d314fa03969d59 Mon Sep 17 00:00:00 2001
From: Victor Herrero Otal <victor.herrero.otal@sap.com>
Date: Thu, 23 Jul 2026 14:23:27 +0200
Subject: [PATCH 2/2] feat(prometheus): add stacked/unstacked toggle to
 explorer graph tab

Signed-off-by: Victor Herrero Otal <victor.herrero.otal@sap.com>
---
 prometheus/src/explore/PrometheusExplorer.tsx | 70 ++++++++++++++-----
 1 file changed, 53 insertions(+), 17 deletions(-)

diff --git a/prometheus/src/explore/PrometheusExplorer.tsx b/prometheus/src/explore/PrometheusExplorer.tsx
index be2ffc430..ab43657b6 100644
--- a/prometheus/src/explore/PrometheusExplorer.tsx
+++ b/prometheus/src/explore/PrometheusExplorer.tsx
@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Box, Stack, Tab, Tabs } from '@mui/material';
+import { Box, Stack, Tab, Tabs, ToggleButton, ToggleButtonGroup } from '@mui/material';
 import { DataQueriesProvider, MultiQueryEditor, useSuggestedStepMs } from '@perses-dev/plugin-system';
 import { useExplorerManagerContext } from '@perses-dev/explore';
 import useResizeObserver from 'use-resize-observer';
@@ -33,27 +33,63 @@ const FILTERED_QUERY_PLUGINS = ['PrometheusTimeSeriesQuery'];
 function TimeSeriesPanel({ queries }: { queries: QueryDefinition[] }): ReactElement {
   const { width, ref: boxRef } = useResizeObserver();
   const height = PANEL_PREVIEW_HEIGHT;
+  const [stacked, setStacked] = useState(false);
 
   const suggestedStepMs = useSuggestedStepMs(width);
 
+  const chartSpec = stacked
+    ? { legend: { position: 'bottom', mode: 'list' }, visual: { stack: 'all', areaOpacity: 0.3 } }
+    : { legend: { position: 'bottom', mode: 'list' } };
+
   return (
-    <Box ref={boxRef} height={height}>
-      <DataQueriesProvider definitions={queries} options={{ suggestedStepMs, mode: 'range' }}>
-        <Panel
-          panelOptions={{
-            hideHeader: true,
-          }}
-          definition={{
-            kind: 'Panel',
-            spec: {
-              queries: queries,
-              display: { name: '' },
-              plugin: { kind: 'TimeSeriesChart', spec: { legend: { position: 'bottom', mode: 'list' } } },
+    <Stack>
+      <ToggleButtonGroup
+        value={stacked ? 'stacked' : 'unstacked'}
+        exclusive
+        onChange={(_, value) => setStacked(value === 'stacked')}
+        size="small"
+        sx={{
+          alignSelf: 'flex-end',
+          mt: 2,
+          backgroundColor: 'background.lighter',
+          borderRadius: 1,
+          p: 0.5,
+          '& .MuiToggleButton-root': {
+            border: 'none',
+            borderRadius: '4px !important',
+            px: 2,
+            color: 'text.secondary',
+            '&.Mui-selected': {
+              backgroundColor: 'background.default',
+              color: 'text.primary',
             },
-          }}
-        />
-      </DataQueriesProvider>
-    </Box>
+            '&:hover': {
+              backgroundColor: 'action.hover',
+            },
+          },
+        }}
+      >
+        <ToggleButton value="unstacked">Unstacked</ToggleButton>
+        <ToggleButton value="stacked">Stacked</ToggleButton>
+      </ToggleButtonGroup>
+      <Box ref={boxRef} height={height}>
+        <DataQueriesProvider definitions={queries} options={{ suggestedStepMs, mode: 'range' }}>
+          <Panel
+            panelOptions={{
+              hideHeader: true,
+            }}
+            definition={{
+              kind: 'Panel',
+              spec: {
+                queries: queries,
+                display: { name: '' },
+                plugin: { kind: 'TimeSeriesChart', spec: chartSpec },
+              },
+            }}
+          />
+        </DataQueriesProvider>
+      </Box>
+    </Stack>
   );
 }