New tabs and functions v3.6

app.py

@@ -81,34 +81,54 @@ with gr.Blocks(css=base_css) as demo:
 
         # --- Crypto Intelligence Dashboard (Plotly Edition + KPI line) ---
         with gr.TabItem("Crypto Intelligence Dashboard"):
+            # Подключаем стили вкладки
             gr.HTML(f"<style>{crypto_css}</style>")
-            gr.Markdown("### 💹 Coinlore Market Dashboard (Plotly Edition)")
 
-            # KPI line (фиксированная строка, без скачков)
-            with gr.Row():
-                kpi_line = gr.HTML(elem_id="kpi_line")  # "BTC $xx (Δ%), ETH $xx (Δ%), ..."
-
-            # Controls
-            with gr.Row():
-                top_slider = gr.Slider(label="Top N coins", minimum=20, maximum=100, step=10, value=50, scale=70)
+            # KPI line (фиксированная строка без скачков, с минимальными отступами)
+            with gr.Row(elem_id="kpi_row"):
+                kpi_line = gr.HTML(elem_id="kpi_line")
+
+            # Controls (Top N slider + кнопка)
+            with gr.Row(elem_id="controls_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)
 
-            # Treemap + AI Summary
-            with gr.Row(equal_height=True):
+            # Основной контент — графики и текстовый инсайт
+            with gr.Row(equal_height=True, elem_id="main_charts_row"):
                 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")
-
-            # Lower charts
-            with gr.Row(equal_height=True):
+                    ai_box = gr.Textbox(
+                        label="AI Market Summary",
+                        lines=18,
+                        elem_id="ai_summary_sidebar",
+                    )
+
+            # Нижний ряд с двумя графиками
+            with gr.Row(equal_height=True, elem_id="bottom_charts_row"):
                 movers_plot = gr.Plot(label="Top Movers", scale=50)
                 scatter_plot = gr.Plot(label="Market Cap vs Volume", scale=50)
 
+
+            # === Callback ===
             def run_dash(n):
                 fig_treemap, fig_bar, fig_bubble, ai_comment, kpi_text = build_crypto_dashboard(n)
-                # kpi_text — уже готовая строка "BTC $.. (..%), ETH $.. (..%), ..."
-                return fig_treemap, fig_bar, fig_bubble, ai_comment, f"<div class='kpi-line'>{kpi_text}</div>"
+                # KPI-строка уже готова, возвращаем её с обёрткой <div>
+                return (
+                    fig_treemap,
+                    fig_bar,
+                    fig_bubble,
+                    ai_comment,
+                    f"<div class='kpi-line'>{kpi_text}</div>",
+                )
+
 
             load_btn.click(
                 fn=run_dash,

core/crypto_dashboard.py

@@ -1,6 +1,8 @@
 """
-Crypto Dashboard — Plotly Edition + KPI Line (clean version)
-Удалены встроенные заголовки из графиков.
+Crypto Dashboard — Plotly Edition (clean layout)
+• убраны colorbar заголовки (percent_change_*)
+• уменьшены отступы KPI
+• без глобального Markdown-заголовка
 """
 import requests
 import pandas as pd
@@ -19,7 +21,7 @@ def fetch_coinlore_data(limit=100):
 
 
 def _kpi_line(df) -> str:
-    """Возвращает строку KPI: BTC $xx (Δ%), ETH $yy (Δ%), ..."""
+    """Формирует компактную KPI-строку без лишних пробелов"""
     tracked = ["BTC", "ETH", "SOL", "DOGE"]
     parts = []
     for sym in tracked:
@@ -31,8 +33,8 @@ def _kpi_line(df) -> str:
         arrow = "↑" if ch > 0 else "↓"
         color = "#4ade80" if ch > 0 else "#f87171"
         parts.append(
-            f"<span class='kpi-item'><b>{sym}</b> ${price:,.0f} "
-            f"<span style='color:{color}'>{arrow} {abs(ch):.2f}%</span></span>"
+            f"<b>{sym}</b> ${price:,.0f} "
+            f"<span style='color:{color}'>{arrow} {abs(ch):.2f}%</span>"
         )
     return " , ".join(parts)
 
@@ -40,7 +42,7 @@ def _kpi_line(df) -> str:
 def build_crypto_dashboard(top_n=50):
     df = fetch_coinlore_data(top_n)
 
-    # === Treemap (чистый, без заголовка) ===
+    # === Treemap ===
     fig_treemap = px.treemap(
         df,
         path=["symbol"],
@@ -50,15 +52,15 @@ def build_crypto_dashboard(top_n=50):
         height=420,
     )
     fig_treemap.update_layout(
-        title=None,  # 🔹 Убираем встроенный заголовок
+        title=None,
         template="plotly_dark",
-        autosize=True,
+        coloraxis_colorbar=dict(title=None),  # 🔹 убираем надпись percent_change_24h
         margin=dict(l=5, r=5, t=5, b=5),
         paper_bgcolor="rgba(0,0,0,0)",
         plot_bgcolor="rgba(0,0,0,0)",
     )
 
-    # === Top Gainers (24h) ===
+    # === Bar chart (Top gainers) ===
     top = df.sort_values("percent_change_24h", ascending=False).head(12)
     fig_bar = px.bar(
         top,
@@ -70,15 +72,15 @@ def build_crypto_dashboard(top_n=50):
         height=320,
     )
     fig_bar.update_layout(
-        title=None,  # 🔹 убран встроенный title
+        title=None,
         template="plotly_dark",
-        autosize=True,
+        coloraxis_colorbar=dict(title=None),  # 🔹 убираем надпись percent_change_24h
         margin=dict(l=40, r=10, t=5, b=18),
         paper_bgcolor="rgba(0,0,0,0)",
         plot_bgcolor="rgba(0,0,0,0)",
     )
 
-    # === Market Cap vs Volume ===
+    # === Scatter (Market Cap vs Volume) ===
     fig_bubble = px.scatter(
         df.head(60),
         x="market_cap_usd",
@@ -92,18 +94,17 @@ def build_crypto_dashboard(top_n=50):
         height=320,
     )
     fig_bubble.update_layout(
-        title=None,  # 🔹 убран встроенный title
+        title=None,
         template="plotly_dark",
-        autosize=True,
+        coloraxis_colorbar=dict(title=None),  # 🔹 убираем надпись percent_change_7d
         margin=dict(l=36, r=10, t=5, b=18),
         paper_bgcolor="rgba(0,0,0,0)",
         plot_bgcolor="rgba(0,0,0,0)",
     )
 
-    # === AI summary ===
+    # === LLM summary ===
     summary = _ai_summary(df)
     kpi_text = _kpi_line(df)
-
     return fig_treemap, fig_bar, fig_bubble, summary, kpi_text
 
 

core/styles/crypto_dashboard.css

@@ -1,29 +1,51 @@
 /* === KPI fixed line (строка с метриками) === */
+#kpi_row {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  padding: 0 !important;
+}
 #kpi_line {
   width: 100%;
-  padding: 4px 8px;
+  margin: 0 !important;
+  padding: 2px 6px !important;
   background: transparent;
   color: #f0f6fc;
   font-family: 'JetBrains Mono', monospace;
+  font-size: 14px;
+  line-height: 1.2;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  min-height: 26px;
+  min-height: 24px;
   border-bottom: 1px solid #30363d;
+  transition: all 0.2s ease-in-out;
 }
+
+/* KPI items */
 .kpi-item {
-  margin-right: 16px;
-  font-size: 14px;
-  letter-spacing: 0.1px;
+  margin-right: 14px;
+  letter-spacing: 0.2px;
   transition: opacity 0.2s ease;
 }
 .kpi-item:hover {
   opacity: 0.85;
 }
 
+/* === Controls (slider + button) — минимальные отступы === */
+#controls_row {
+  margin-top: 2px !important;
+  margin-bottom: 2px !important;
+  padding: 0 !important;
+}
+#controls_row .gr-button,
+#controls_row .gr-slider {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
 /* === Plot containers — плотное выравнивание === */
 [data-testid="plot-container"] {
   width: 100% !important;
@@ -77,7 +99,7 @@
 
 /* === Ряды между графиками === */
 .gr-row {
-  gap: 12px !important;
-  margin-top: 4px !important;
-  margin-bottom: 4px !important;
+  gap: 10px !important;
+  margin-top: 2px !important;
+  margin-bottom: 2px !important;
 }