New tabs and functions v2.5

app.py

@@ -70,24 +70,27 @@ with gr.Blocks(css=custom_css) as demo:
             chart_out = gr.Plot(label="Alpha vs BTC")
             chart_btn.click(fn=build_alpha_chart, inputs=chart_in, outputs=chart_out)
 
-        # --- Crypto Intelligence Dashboard (Refined layout) ---
+        # --- Crypto Intelligence Dashboard (Coinlore, Plotly Edition) ---
         with gr.TabItem("Crypto Intelligence Dashboard"):
-            gr.Markdown("### 💹 Coinlore Market Dashboard (Altair Edition)")
+            gr.Markdown("### 💹 Coinlore Market Dashboard (Plotly Edition)")
 
-            # Controls
+            # --- Controls ---
             with gr.Row():
                 top_slider = gr.Slider(
                     label="Top N coins", minimum=20, maximum=100, step=10, value=50, scale=70
                 )
                 load_btn = gr.Button("Generate Dashboard", variant="primary", scale=30)
 
-            # Main layout
+            # --- Layout: Treemap + AI sidebar ---
             with gr.Row(equal_height=True):
                 with gr.Column(scale=70):
                     treemap_plot = gr.Plot(label="Market Composition")
                 with gr.Column(scale=30):
-                    ai_box = gr.Textbox(label="AI Market Summary", lines=18, elem_id="ai_summary_sidebar")
+                    ai_box = gr.Textbox(
+                        label="AI Market Summary", lines=18, elem_id="ai_summary_sidebar"
+                    )
 
+            # --- Layout: Lower charts (Movers + Scatter) ---
             with gr.Row(equal_height=True):
                 movers_plot = gr.Plot(label="Top Movers", scale=50)
                 scatter_plot = gr.Plot(label="Market Cap vs Volume", scale=50)
@@ -95,7 +98,9 @@ with gr.Blocks(css=custom_css) as demo:
             from core.crypto_dashboard import build_crypto_dashboard
 
 
-            def run_dash(n): return build_crypto_dashboard(n)
+            def run_dash(n):
+                return build_crypto_dashboard(n)
+
 
             load_btn.click(
                 fn=run_dash,

core/crypto_dashboard.py

@@ -1,10 +1,15 @@
 """
-Coinlore Dashboard — Power BI style (Altair)
+Crypto Dashboard — Plotly Edition (Coinlore API)
+Power BI–style visualization with dense layout.
 """
-import requests, pandas as pd, altair as alt
+import requests
+import pandas as pd
+import plotly.express as px
+import plotly.graph_objects as go
 from services.llm_client import llm_service
 
 
+# === Fetch data from Coinlore ===
 def fetch_coinlore_data(limit=100):
     url = "https://api.coinlore.net/api/tickers/"
     data = requests.get(url).json()["data"]
@@ -15,60 +20,90 @@ def fetch_coinlore_data(limit=100):
     return df.head(limit)
 
 
+# === Main Dashboard ===
 def build_crypto_dashboard(top_n=50):
     df = fetch_coinlore_data(top_n)
 
-    # === 1️⃣ Treemap imitation ===
-    base = alt.Chart(df).mark_rect().encode(
-        x=alt.X('symbol:N', title=None, axis=None),
-        y=alt.Y('market_cap_usd:Q', title=None, axis=None),
-        color=alt.Color('percent_change_24h:Q',
-                        scale=alt.Scale(scheme='redyellowgreen'),
-                        title='24h Change %'),
-        tooltip=['symbol', 'price_usd', 'market_cap_usd', 'percent_change_24h']
-    ).properties(title="Market Composition (Top Coins)", height=300)
+    # --- Treemap ---
+    fig_treemap = px.treemap(
+        df,
+        path=["symbol"],
+        values="market_cap_usd",
+        color="percent_change_24h",
+        color_continuous_scale="RdYlGn",
+        title="Market Composition by Market Cap (Top Coins)",
+        height=400,
+    )
+    fig_treemap.update_layout(
+        template="plotly_dark",
+        margin=dict(l=0, r=0, t=40, b=0),
+        paper_bgcolor="rgba(0,0,0,0)",
+        plot_bgcolor="rgba(0,0,0,0)",
+    )
 
-    # === 2️⃣ Bar chart (Top Movers 24h) ===
-    movers = df.sort_values("percent_change_24h", ascending=False).head(15)
-    bar = alt.Chart(movers).mark_bar(cornerRadiusEnd=4).encode(
-        x=alt.X('percent_change_24h:Q', title='Change %'),
-        y=alt.Y('symbol:N', sort='-x', title=None),
-        color=alt.Color('percent_change_24h:Q', scale=alt.Scale(scheme='greenblue')),
-        tooltip=['symbol', 'price_usd', 'percent_change_24h']
-    ).properties(title="Top 15 Gainers (24h)", height=300)
+    # --- Top Gainers (24h) ---
+    top = df.sort_values("percent_change_24h", ascending=False).head(12)
+    fig_bar = px.bar(
+        top,
+        x="percent_change_24h",
+        y="symbol",
+        orientation="h",
+        color="percent_change_24h",
+        color_continuous_scale="Blues",
+        title="Top 12 Gainers (24h)",
+        height=350,
+    )
+    fig_bar.update_layout(
+        template="plotly_dark",
+        margin=dict(l=80, r=30, t=40, b=40),
+        paper_bgcolor="rgba(0,0,0,0)",
+        plot_bgcolor="rgba(0,0,0,0)",
+    )
 
-    # === 3️⃣ Scatter (Market Cap vs Volume) ===
-    scatter = alt.Chart(df).mark_circle(size=70).encode(
-        x=alt.X('market_cap_usd:Q', scale=alt.Scale(type='log')),
-        y=alt.Y('volume24:Q', scale=alt.Scale(type='log')),
-        color=alt.Color('percent_change_7d:Q',
-                        scale=alt.Scale(scheme='redyellowgreen'),
-                        title='7d %'),
-        tooltip=['symbol', 'price_usd', 'market_cap_usd', 'volume24', 'percent_change_7d']
-    ).properties(title="Market Cap vs 24h Volume", height=350)
+    # --- Market Cap vs Volume (Bubble) ---
+    fig_bubble = px.scatter(
+        df.head(60),
+        x="market_cap_usd",
+        y="volume24",
+        size="price_usd",
+        color="percent_change_7d",
+        hover_name="symbol",
+        log_x=True,
+        log_y=True,
+        color_continuous_scale="RdYlGn",
+        title="Market Cap vs 24h Volume",
+        height=350,
+    )
+    fig_bubble.update_layout(
+        template="plotly_dark",
+        margin=dict(l=60, r=30, t=40, b=40),
+        paper_bgcolor="rgba(0,0,0,0)",
+        plot_bgcolor="rgba(0,0,0,0)",
+    )
 
-    # === LLM summary ===
-    ai_comment = _generate_ai_summary(df)
+    # --- AI Summary ---
+    summary = _generate_ai_summary(df)
 
-    return base, bar, scatter, ai_comment
+    return fig_treemap, fig_bar, fig_bubble, summary
 
 
 def _generate_ai_summary(df):
-    leaders = df.sort_values("percent_change_24h", ascending=False).head(3)
-    laggards = df.sort_values("percent_change_24h").head(3)
+    leaders = df.sort_values("percent_change_24h", ascending=False).head(3)["symbol"].tolist()
+    laggards = df.sort_values("percent_change_24h").head(3)["symbol"].tolist()
+
     prompt = f"""
-Provide a brief professional summary of today's crypto market based on Coinlore data.
-Top gainers: {', '.join(leaders['symbol'].tolist())}.
-Top losers: {', '.join(laggards['symbol'].tolist())}.
+Summarize today's crypto market based on Coinlore data.
+Top gainers: {', '.join(leaders)}.
+Top losers: {', '.join(laggards)}.
 Include:
-- general sentiment
-- volatility trend
-- short-term outlook (bullish/bearish)
+- overall market sentiment
+- volatility and liquidity notes
+- short-term outlook
 """
-    text = ""
+    summary = ""
     for delta in llm_service.stream_chat(
         messages=[{"role": "user", "content": prompt}],
-        model="meta-llama/Meta-Llama-3.1-8B-Instruct"
+        model="meta-llama/Meta-Llama-3.1-8B-Instruct",
     ):
-        text += delta
-    return text
+        summary += delta
+    return summary

core/ui_style.css

@@ -14,7 +14,7 @@ h2, h3, .gr-markdown {
     font-weight: 600 !important;
 }
 
-/* === Remove Gray Placeholder Icons (Plot Artefacts) === */
+/* === Remove Gray Placeholder Icons === */
 [data-testid="plot-container"] svg {
     display: none !important;
 }
@@ -23,36 +23,28 @@ h2, h3, .gr-markdown {
     box-shadow: none !important;
 }
 
-/* === Plot Sizing and Spacing === */
+/* === Plot Size & Layout === */
 [data-testid="plot-container"] {
     width: 100% !important;
     margin: 0 auto 22px auto !important;
-    background: transparent !important;
-    border: none !important;
 }
 [data-testid="plot-container"] canvas {
     width: 100% !important;
     height: auto !important;
 }
 
-/* === Dashboard Layout === */
-.gr-row { gap: 18px !important; }
-
-/* Верхний график (Treemap) */
+/* --- Chart height tuning --- */
 #root [label="Market Composition"] canvas {
-    height: 360px !important;
+    height: 400px !important;
 }
-
-/* Нижние графики (Movers + Scatter) */
 #root [label="Top Movers"] canvas,
 #root [label="Market Cap vs Volume"] canvas {
-    height: 320px !important;
+    height: 350px !important;
 }
 
 /* === Sidebar (AI Summary) === */
-#ai_summary_sidebar textarea,
-#llm_comment_box textarea {
-    height: 360px !important;
+#ai_summary_sidebar textarea {
+    height: 400px !important;
     background-color: #161b22 !important;
     color: #f0f6fc !important;
     border: 1px solid #30363d !important;
@@ -64,7 +56,7 @@ h2, h3, .gr-markdown {
     resize: none !important;
 }
 
-/* === Sliders, Buttons, Text === */
+/* === Buttons & Sliders === */
 .gr-button {
     border-radius: 6px !important;
     font-weight: 600 !important;
@@ -86,7 +78,7 @@ h2, h3, .gr-markdown {
     background: #6366f1 !important;
 }
 
-/* === Tables === */
+/* === Tables & spacing === */
 .gr-dataframe table {
     width: 100% !important;
     color: #c9d1d9 !important;
@@ -103,3 +95,8 @@ h2, h3, .gr-markdown {
     border-top: 1px solid #30363d !important;
     padding: 8px !important;
 }
+
+/* === Dashboard Layout === */
+.gr-row {
+    gap: 18px !important;
+}