From c0fa353a17fc91d800c044e41da5d5d42233c1cf Mon Sep 17 00:00:00 2001
From: Yinyin Liu <liu@innov.energy>
Date: Fri, 12 Jun 2026 12:38:38 +0200
Subject: [PATCH] zoom in and zoom out of price chart

---
 .../CurrentPriceChart.tsx                     | 44 ++++++++++++++++---
 typescript/frontend-marios2/src/lang/de.json  |  1 +
 typescript/frontend-marios2/src/lang/en.json  |  1 +
 typescript/frontend-marios2/src/lang/fr.json  |  1 +
 typescript/frontend-marios2/src/lang/it.json  |  1 +
 5 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/CurrentPriceChart.tsx b/typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/CurrentPriceChart.tsx
index bebdb4b24..6c0be17c9 100644
--- a/typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/CurrentPriceChart.tsx
+++ b/typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/CurrentPriceChart.tsx
@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { Box, Typography } from '@mui/material';
+import { Box, Button, Typography } from '@mui/material';
 import CircularProgress from '@mui/material/CircularProgress';
+import RestartAltIcon from '@mui/icons-material/RestartAlt';
 import { FormattedMessage, useIntl } from 'react-intl';
 import ReactApexChart from 'react-apexcharts';
-import { ApexOptions } from 'apexcharts';
+import ApexCharts, { ApexOptions } from 'apexcharts';
 import { I_S3Credentials } from 'src/interfaces/S3Types';
 import { UnixTime, TimeSpan } from 'src/dataCache/time';
 import {
@@ -17,6 +18,7 @@ interface CurrentPriceChartProps {
 }
 
 const HISTORY_DAYS = 7;
+const CHART_ID = 'current-price-history';
 
 function CurrentPriceChart(props: CurrentPriceChartProps) {
   const intl = useIntl();
@@ -49,6 +51,14 @@ function CurrentPriceChart(props: CurrentPriceChartProps) {
     };
   }, [props.id]);
 
+  // Snap the x-axis back to the full history window after the user drag-zooms.
+  const handleResetZoom = () => {
+    if (!series || series.data.length === 0) return;
+    const minX = series.data[0][0];
+    const maxX = series.data[series.data.length - 1][0];
+    ApexCharts.exec(CHART_ID, 'zoomX', minX, maxX);
+  };
+
   const title = (
     <Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 1 }}>
       <FormattedMessage
@@ -92,11 +102,13 @@ function CurrentPriceChart(props: CurrentPriceChartProps) {
 
   const options: ApexOptions = {
     chart: {
-      id: 'current-price-history',
+      id: CHART_ID,
       type: 'line',
       height: 300,
+      // Toolbar hidden — its zoom glyphs are easy to miss; we expose an explicit
+      // "Reset zoom" button instead. Drag-to-zoom still works via zoom.enabled.
       toolbar: { show: false },
-      zoom: { autoScaleYaxis: true }
+      zoom: { enabled: true, type: 'x', autoScaleYaxis: true }
     },
     dataLabels: { enabled: false },
     // Spot price is constant within each pricing interval -> stepped line
@@ -138,7 +150,29 @@ function CurrentPriceChart(props: CurrentPriceChartProps) {
 
   return (
     <Box sx={{ mb: 2 }}>
-      {title}
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          mb: 1
+        }}
+      >
+        <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
+          <FormattedMessage
+            id="currentPriceHistory"
+            defaultMessage="Current Price (last 7 days)"
+          />
+        </Typography>
+        <Button
+          size="small"
+          variant="outlined"
+          startIcon={<RestartAltIcon />}
+          onClick={handleResetZoom}
+        >
+          <FormattedMessage id="resetZoom" defaultMessage="Reset zoom" />
+        </Button>
+      </Box>
       <ReactApexChart
         options={options}
         series={chartSeries}
diff --git a/typescript/frontend-marios2/src/lang/de.json b/typescript/frontend-marios2/src/lang/de.json
index 8bd6a33fe..b1e5e495f 100644
--- a/typescript/frontend-marios2/src/lang/de.json
+++ b/typescript/frontend-marios2/src/lang/de.json
@@ -592,6 +592,7 @@
   "currentPrice": "Aktueller Preis",
   "currentPriceHistory": "Aktueller Preis (letzte 7 Tage)",
   "currentPriceNoData": "Keine Preishistorie für die letzten 7 Tage verfügbar.",
+  "resetZoom": "Zoom zurücksetzen",
   "priceToSell": "Verkaufspreis",
   "priceToBuy": "Kaufpreis",
   "timeToSell": "Verkaufszeit",
diff --git a/typescript/frontend-marios2/src/lang/en.json b/typescript/frontend-marios2/src/lang/en.json
index eebb29fba..b2fa41d69 100644
--- a/typescript/frontend-marios2/src/lang/en.json
+++ b/typescript/frontend-marios2/src/lang/en.json
@@ -340,6 +340,7 @@
   "currentPrice": "Current Price",
   "currentPriceHistory": "Current Price (last 7 days)",
   "currentPriceNoData": "No price history available for the last 7 days.",
+  "resetZoom": "Reset zoom",
   "priceToSell": "Price to Sell",
   "priceToBuy": "Price to Buy",
   "timeToSell": "Time to Sell",
diff --git a/typescript/frontend-marios2/src/lang/fr.json b/typescript/frontend-marios2/src/lang/fr.json
index 20790a221..055d306b7 100644
--- a/typescript/frontend-marios2/src/lang/fr.json
+++ b/typescript/frontend-marios2/src/lang/fr.json
@@ -592,6 +592,7 @@
   "currentPrice": "Prix actuel",
   "currentPriceHistory": "Prix actuel (7 derniers jours)",
   "currentPriceNoData": "Aucun historique de prix disponible pour les 7 derniers jours.",
+  "resetZoom": "Réinitialiser le zoom",
   "priceToSell": "Prix de vente",
   "priceToBuy": "Prix d'achat",
   "timeToSell": "Heure de vente",
diff --git a/typescript/frontend-marios2/src/lang/it.json b/typescript/frontend-marios2/src/lang/it.json
index d742ae504..7865ebf64 100644
--- a/typescript/frontend-marios2/src/lang/it.json
+++ b/typescript/frontend-marios2/src/lang/it.json
@@ -592,6 +592,7 @@
   "currentPrice": "Prezzo attuale",
   "currentPriceHistory": "Prezzo attuale (ultimi 7 giorni)",
   "currentPriceNoData": "Nessuno storico prezzi disponibile per gli ultimi 7 giorni.",
+  "resetZoom": "Reimposta zoom",
   "priceToSell": "Prezzo di vendita",
   "priceToBuy": "Prezzo di acquisto",
   "timeToSell": "Orario di vendita",