Update app.py

app.py

@@ -48,12 +48,11 @@ default_end_date = datetime.today().date()
 default_start_date = default_end_date - timedelta(days=365)
 
 # Abstand nach unten hinzufügen, damit der Titel nicht direkt unter dem fixierten Logo ist
-st.markdown("<br><br><br>", unsafe_allow_html=True)  # Fügt 3 Zeilen Abstand hinzu
+st.markdown("<br><br><br>", unsafe_allow_html=True)
 
 # Titel der App
 st.title("📈 Interaktive Analyse von Aktienindizes")
 
-
 # Liste der wichtigsten Aktien-Indizes mit Yahoo Finance Ticker
 indices = {
     "S&P 500 (USA)": "^GSPC",
@@ -74,8 +73,12 @@ ticker2 = indices[ticker2_name]
 start_date = st.date_input("Startdatum", default_start_date)
 end_date = st.date_input("Enddatum", default_end_date)
 
+# Farben für die Linien (fixe Farben für Konsistenz)
+color_ticker1 = "#1f77b4"  # Blau
+color_ticker2 = "#ff7f0e"  # Orange
+
 # Button zum Laden der Daten
-if st.button("Daten abrufen & Diagramme anzeigen"):
+if st.button("GO"):
 
     # Daten abrufen
     data = {}
@@ -95,12 +98,14 @@ if st.button("Daten abrufen & Diagramme anzeigen"):
         fig1 = go.Figure()
 
         # Linke Achse (Ticker 1)
-        fig1.add_trace(go.Scatter(x=df_indices.index, y=df_indices[ticker1_name], mode='lines',
-                                  name=ticker1_name, yaxis='y1'))
+        fig1.add_trace(go.Scatter(
+            x=df_indices.index, y=df_indices[ticker1_name], mode='lines',
+            name=ticker1_name, yaxis='y1', line=dict(color=color_ticker1)))
 
         # Rechte Achse (Ticker 2)
-        fig1.add_trace(go.Scatter(x=df_indices.index, y=df_indices[ticker2_name], mode='lines',
-                                  name=ticker2_name, yaxis='y2'))
+        fig1.add_trace(go.Scatter(
+            x=df_indices.index, y=df_indices[ticker2_name], mode='lines',
+            name=ticker2_name, yaxis='y2', line=dict(color=color_ticker2)))
 
         # Layout mit zwei Achsen definieren
         fig1.update_layout(
@@ -118,10 +123,76 @@ if st.button("Daten abrufen & Diagramme anzeigen"):
         # --------- 2. INTERAKTIVER CHART: Normierter Vergleich ---------
         df_normalized = df_indices / df_indices.iloc[0] * 100
 
+        # Rendite berechnen (% Veränderung von Start bis Ende)
+        start_price_ticker1 = df_indices[ticker1_name].iloc[0]
+        end_price_ticker1 = df_indices[ticker1_name].iloc[-1]
+        return_ticker1 = ((end_price_ticker1 - start_price_ticker1) / start_price_ticker1) * 100
+        
+        start_price_ticker2 = df_indices[ticker2_name].iloc[0]
+        end_price_ticker2 = df_indices[ticker2_name].iloc[-1]
+        return_ticker2 = ((end_price_ticker2 - start_price_ticker2) / start_price_ticker2) * 100
+        
+        # Rundung auf 2 Nachkommastellen
+        return_ticker1 = round(return_ticker1, 2)
+        return_ticker2 = round(return_ticker2, 2)
+        
+        # Namen mit Rendite für die Legende anpassen
+        legend_ticker1 = f"{ticker1_name} = {return_ticker1}%"
+        legend_ticker2 = f"{ticker2_name} = {return_ticker2}%"
+        
+        # Diagramm 2 mit Renditen in der Legende anzeigen
         fig2 = px.line(df_normalized, x=df_normalized.index, y=df_normalized.columns,
-                       title=f"Normierter Vergleich der Close-Preise: {ticker1_name} vs. {ticker2_name}",
+                       title="Normierter Vergleich der Close-Preise",
                        labels={"value": "Index (Startwert = 100)", "variable": "Index"},
-                       template="plotly_white")
+                       template="plotly_white",
+                       color_discrete_map={ticker1_name: color_ticker1, ticker2_name: color_ticker2})
+        
+        # Legenden-Namen ändern
+        fig2.for_each_trace(lambda t: t.update(name=legend_ticker1 if t.name == ticker1_name else legend_ticker2))
+        
+        # Legendenposition anpassen (oben rechts, wie in Chart 1)
+        fig2.update_layout(legend=dict(x=0, y=1))
+
 
         # Streamlit: Interaktives Chart anzeigen
         st.plotly_chart(fig2, use_container_width=True)
+
+                # --------- 3. INTERAKTIVER CHART: Relative Performance (Differenz der normierten Werte) ---------
+        df_relative_performance = df_normalized[ticker1_name] - df_normalized[ticker2_name]
+        
+        # Berechnung der Gesamtrendite der relativen Performance von Start bis Ende
+        start_relative = df_relative_performance.iloc[0]
+        end_relative = df_relative_performance.iloc[-1]
+        relative_performance_change = end_relative - start_relative  # Direkte Differenz
+        
+        # Rundung auf 2 Nachkommastellen
+        relative_performance_change = round(relative_performance_change, 2)
+        
+        # Legenden-Text mit relativer Performance
+        legend_relative = f"{ticker1_name} - {ticker2_name} = {relative_performance_change} Punkte"
+        
+        # Chart für relative Performance erstellen
+        fig3 = px.line(x=df_relative_performance.index, y=df_relative_performance,
+                       title=f"Relative Performance: {ticker1_name} vs. {ticker2_name}",
+                       labels={"x": "Datum", "y": "Relative Performance"},
+                       template="plotly_white")
+        
+        # Farbe der Linie auf die gleiche wie Index 1 setzen
+        fig3.update_traces(line=dict(color=color_ticker1), name=legend_relative)
+        
+        # Legendenposition anpassen (oben rechts, wie in Chart 1 und 2)
+        fig3.update_layout(legend=dict(x=0, y=1))
+        
+        # Letzten Wert als Text direkt ins Chart einfügen
+        fig3.add_annotation(
+            x=df_relative_performance.index[-1],  # Letztes Datum
+            y=df_relative_performance.iloc[-1],  # Letzter Wert der Performance
+            text=f"{df_relative_performance.iloc[-1]:.2f}%",  # Formatierte Anzeige
+            showarrow=True,
+            arrowhead=2,
+            font=dict(size=14, color=color_ticker1),
+            ax=20, ay=-40  # Position der Anzeige leicht anpassen
+        )
+        
+        # Streamlit: Chart anzeigen
+        st.plotly_chart(fig3, use_container_width=True)