New tabs and functions v3.0

app.py

@@ -63,25 +63,40 @@ with gr.Blocks(css=custom_css) as demo:
             metrics_out = gr.Dataframe(label="Portfolio Metrics", wrap=True)
             metrics_btn.click(fn=show_metrics_table, inputs=metrics_in, outputs=metrics_out)
 
-        # --- AlphaBTC Chart ---
-        with gr.TabItem("AlphaBTC Chart"):
-            chart_in = gr.Textbox(label="Portfolio ID", value="3852a354-e66e-4bc5-97e9-55124e31e687")
-            chart_btn = gr.Button("Generate Chart", variant="primary")
-            chart_out = gr.Plot(label="Alpha vs BTC")
-            chart_btn.click(fn=build_alpha_chart, inputs=chart_in, outputs=chart_out)
-
-        # --- Crypto Intelligence Dashboard (Coinlore, Plotly Edition) ---
+        # --- Multi Visualization (ECharts + Highcharts) ---
+        with gr.TabItem("Visual Comparison (ECharts / Highcharts)"):
+            gr.Markdown("### 🌐 Multi Visualization Demo — ECharts & Highcharts")
+
+            from core.multi_charts import build_echarts_line, build_highcharts_demo
+
+            with gr.Row(equal_height=True):
+                echarts_html = gr.HTML(label="ECharts BTC/USD")
+                highcharts_html = gr.HTML(label="Highcharts ETH/USD")
+
+
+            def render_all():
+                return build_echarts_line(), build_highcharts_demo()
+
+
+            render_btn = gr.Button("Generate Charts", variant="primary")
+            render_btn.click(fn=render_all, outputs=[echarts_html, highcharts_html])
+
+        # --- Crypto Intelligence Dashboard (Plotly Edition + KPI) ---
         with gr.TabItem("Crypto Intelligence Dashboard"):
             gr.Markdown("### 💹 Coinlore Market Dashboard (Plotly Edition)")
 
-            # --- Controls ---
+            # KPI row
+            with gr.Row():
+                kpi_html = gr.HTML(label="", elem_id="kpi_panel")
+
+            # 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)
 
-            # --- Layout: Treemap + AI sidebar ---
+            # Treemap + AI Summary
             with gr.Row(equal_height=True):
                 with gr.Column(scale=70):
                     treemap_plot = gr.Plot(label="Market Composition")
@@ -90,7 +105,7 @@ with gr.Blocks(css=custom_css) as demo:
                         label="AI Market Summary", lines=18, elem_id="ai_summary_sidebar"
                     )
 
-            # --- Layout: Lower charts (Movers + Scatter) ---
+            # Lower charts
             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)
@@ -99,13 +114,23 @@ with gr.Blocks(css=custom_css) as demo:
 
 
             def run_dash(n):
-                return build_crypto_dashboard(n)
+                figs = build_crypto_dashboard(n)
+                fig_treemap, fig_bar, fig_bubble, ai_comment, kpis = figs
+                kpi_html_str = "".join(
+                    f"<div class='kpi-card' style='border-left:4px solid {c['color']}'>"
+                    f"<span class='kpi-symbol'>{c['symbol']}</span>"
+                    f"<span class='kpi-price'>{c['price']}</span>"
+                    f"<span class='kpi-change' style='color:{c['color']}'>{c['change']}</span>"
+                    "</div>"
+                    for c in kpis
+                )
+                return fig_treemap, fig_bar, fig_bubble, ai_comment, kpi_html_str
 
 
             load_btn.click(
                 fn=run_dash,
                 inputs=top_slider,
-                outputs=[treemap_plot, movers_plot, scatter_plot, ai_box],
+                outputs=[treemap_plot, movers_plot, scatter_plot, ai_box, kpi_html],
                 show_progress="minimal",
             )
 

core/crypto_dashboard.py

@@ -1,25 +1,48 @@
 """
-Crypto Dashboard — Plotly Edition (Coinlore API)
-Power BI–style visualization with dense layout.
+Crypto Dashboard — Plotly Edition + KPI Cards
+Source: Coinlore API
+Visual: Dense Power BI–style dashboard with live metrics.
 """
 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 ===
+# === Load data ===
 def fetch_coinlore_data(limit=100):
     url = "https://api.coinlore.net/api/tickers/"
     data = requests.get(url).json()["data"]
     df = pd.DataFrame(data)
-    for col in ["price_usd", "market_cap_usd", "volume24",
-                "percent_change_1h", "percent_change_24h", "percent_change_7d"]:
+    for col in [
+        "price_usd", "market_cap_usd", "volume24",
+        "percent_change_1h", "percent_change_24h", "percent_change_7d"
+    ]:
         df[col] = pd.to_numeric(df[col], errors="coerce")
     return df.head(limit)
 
 
+# === KPI builder ===
+def build_kpi_cards(df):
+    tracked = ["BTC", "ETH", "SOL", "DOGE"]
+    cards = []
+    for sym in tracked:
+        coin = df[df["symbol"] == sym]
+        if coin.empty:
+            continue
+        price = float(coin["price_usd"])
+        change = float(coin["percent_change_24h"])
+        arrow = "▲" if change > 0 else "▼"
+        color = "#4ade80" if change > 0 else "#f87171"
+        cards.append({
+            "symbol": sym,
+            "price": f"${price:,.0f}",
+            "change": f"{arrow} {abs(change):.2f}%",
+            "color": color,
+        })
+    return cards
+
+
 # === Main Dashboard ===
 def build_crypto_dashboard(top_n=50):
     df = fetch_coinlore_data(top_n)
@@ -32,16 +55,16 @@ def build_crypto_dashboard(top_n=50):
         color="percent_change_24h",
         color_continuous_scale="RdYlGn",
         title="Market Composition by Market Cap (Top Coins)",
-        height=400,
+        height=360,
     )
     fig_treemap.update_layout(
         template="plotly_dark",
-        margin=dict(l=0, r=0, t=40, b=0),
+        margin=dict(l=10, r=10, t=25, b=10),
         paper_bgcolor="rgba(0,0,0,0)",
         plot_bgcolor="rgba(0,0,0,0)",
     )
 
-    # --- Top Gainers (24h) ---
+    # --- Top Gainers ---
     top = df.sort_values("percent_change_24h", ascending=False).head(12)
     fig_bar = px.bar(
         top,
@@ -51,16 +74,16 @@ def build_crypto_dashboard(top_n=50):
         color="percent_change_24h",
         color_continuous_scale="Blues",
         title="Top 12 Gainers (24h)",
-        height=350,
+        height=320,
     )
     fig_bar.update_layout(
         template="plotly_dark",
-        margin=dict(l=80, r=30, t=40, b=40),
+        margin=dict(l=60, r=20, t=25, b=25),
         paper_bgcolor="rgba(0,0,0,0)",
         plot_bgcolor="rgba(0,0,0,0)",
     )
 
-    # --- Market Cap vs Volume (Bubble) ---
+    # --- Market Cap vs Volume ---
     fig_bubble = px.scatter(
         df.head(60),
         x="market_cap_usd",
@@ -72,32 +95,31 @@ def build_crypto_dashboard(top_n=50):
         log_y=True,
         color_continuous_scale="RdYlGn",
         title="Market Cap vs 24h Volume",
-        height=350,
+        height=320,
     )
     fig_bubble.update_layout(
         template="plotly_dark",
-        margin=dict(l=60, r=30, t=40, b=40),
+        margin=dict(l=50, r=20, t=25, b=25),
         paper_bgcolor="rgba(0,0,0,0)",
         plot_bgcolor="rgba(0,0,0,0)",
     )
 
-    # --- AI Summary ---
+    # --- AI summary ---
     summary = _generate_ai_summary(df)
-
-    return fig_treemap, fig_bar, fig_bubble, summary
+    kpis = build_kpi_cards(df)
+    return fig_treemap, fig_bar, fig_bubble, summary, kpis
 
 
 def _generate_ai_summary(df):
     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"""
 Summarize today's crypto market based on Coinlore data.
 Top gainers: {', '.join(leaders)}.
 Top losers: {', '.join(laggards)}.
 Include:
-- overall market sentiment
-- volatility and liquidity notes
+- overall sentiment
+- volatility and liquidity
 - short-term outlook
 """
     summary = ""

core/multi_charts.py

@@ -0,0 +1,67 @@
+"""
+Multi Visualization Demo
+Includes:
+- ECharts (pyecharts)
+- Highcharts (HTML embed)
+"""
+from pyecharts.charts import Line
+from pyecharts import options as opts
+import pandas as pd, numpy as np, datetime, json
+
+
+def build_echarts_line():
+    """ECharts Line (BTC simulated data)"""
+    now = datetime.datetime.now()
+    dates = [now - datetime.timedelta(days=i) for i in range(90)][::-1]
+    prices = np.cumsum(np.random.randn(90)) + 42000
+
+    line = (
+        Line(init_opts=opts.InitOpts(bg_color="#0d1117", height="360px"))
+        .add_xaxis([d.strftime("%d %b") for d in dates])
+        .add_yaxis(
+            "BTC/USD",
+            prices.tolist(),
+            is_smooth=True,
+            linestyle_opts=opts.LineStyleOpts(width=2, color="#4f46e5"),
+            label_opts=opts.LabelOpts(is_show=False),
+            areastyle_opts=opts.AreaStyleOpts(opacity=0.15, color="#6366f1"),
+        )
+        .set_global_opts(
+            title_opts=opts.TitleOpts(
+                title="ECharts: BTC/USD (Simulated)",
+                title_textstyle_opts=opts.TextStyleOpts(color="#f0f6fc")
+            ),
+            xaxis_opts=opts.AxisOpts(axisline_opts=opts.AxisLineOpts(line_style=opts.LineStyleOpts(color="#30363d"))),
+            yaxis_opts=opts.AxisOpts(axisline_opts=opts.AxisLineOpts(line_style=opts.LineStyleOpts(color="#30363d"))),
+            tooltip_opts=opts.TooltipOpts(trigger="axis"),
+        )
+    )
+    return line.render_embed()
+
+
+def build_highcharts_demo():
+    """Highcharts HTML embed (ETH simulated data)"""
+    days = list(range(1, 91))
+    prices = (np.cumsum(np.random.randn(90)) * 15 + 2300).tolist()
+
+    js = f"""
+    <script src="https://code.highcharts.com/highcharts.js"></script>
+    <div id="highchart_eth" style="height:360px;"></div>
+    <script>
+    Highcharts.chart('highchart_eth', {{
+        chart: {{ backgroundColor: '#0d1117', style: {{ fontFamily: 'Inter' }} }},
+        title: {{ text: 'Highcharts: ETH/USD (Simulated)', style: {{ color: '#f0f6fc' }} }},
+        xAxis: {{ categories: {json.dumps(days)}, labels: {{ style: {{ color: '#9da5b4' }} }} }},
+        yAxis: {{ title: {{ text: 'Price (USD)', style: {{ color: '#9da5b4' }} }} }},
+        series: [{{
+            name: 'ETH/USD',
+            data: {json.dumps(prices)},
+            color: '#10b981',
+        }}],
+        legend: {{ itemStyle: {{ color: '#f0f6fc' }} }},
+        credits: {{ enabled: false }},
+        tooltip: {{ backgroundColor: '#161b22', borderColor: '#30363d', style: {{ color: '#f0f6fc' }} }}
+    }});
+    </script>
+    """
+    return js

core/ui_style.css

@@ -14,6 +14,46 @@ h2, h3, .gr-markdown {
     font-weight: 600 !important;
 }
 
+/* === KPI Panel === */
+#kpi_panel {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 12px 0 4px 0;
+}
+.kpi-card {
+    background-color: #161b22;
+    border-radius: 6px;
+    padding: 10px 14px;
+    width: 24%;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+    display: flex;
+    flex-direction: column;
+}
+.kpi-symbol {
+    font-weight: 700;
+    font-size: 15px;
+    color: #f0f6fc;
+}
+.kpi-price {
+    font-size: 20px;
+    font-weight: 600;
+    color: #f9fafb;
+}
+.kpi-change {
+    font-size: 13px;
+    margin-top: 2px;
+}
+
+/* === Chart Embed (ECharts + Highcharts) === */
+[data-testid="html"] {
+    width: 100% !important;
+    background: #0d1117 !important;
+    border: 1px solid #30363d !important;
+    border-radius: 6px !important;
+    overflow: hidden !important;
+}
+
 /* === Remove Gray Placeholder Icons === */
 [data-testid="plot-container"] svg {
     display: none !important;
@@ -23,28 +63,24 @@ h2, h3, .gr-markdown {
     box-shadow: none !important;
 }
 
-/* === Plot Size & Layout === */
+/* === Plot Layout === */
 [data-testid="plot-container"] {
     width: 100% !important;
-    margin: 0 auto 22px auto !important;
+    margin: 0 auto 16px auto !important;
 }
 [data-testid="plot-container"] canvas {
     width: 100% !important;
     height: auto !important;
 }
 
-/* --- Chart height tuning --- */
-#root [label="Market Composition"] canvas {
-    height: 400px !important;
-}
+/* === Chart Heights === */
+#root [label="Market Composition"] canvas { height: 360px !important; }
 #root [label="Top Movers"] canvas,
-#root [label="Market Cap vs Volume"] canvas {
-    height: 350px !important;
-}
+#root [label="Market Cap vs Volume"] canvas { height: 320px !important; }
 
-/* === Sidebar (AI Summary) === */
+/* === Sidebar === */
 #ai_summary_sidebar textarea {
-    height: 400px !important;
+    height: 360px !important;
     background-color: #161b22 !important;
     color: #f0f6fc !important;
     border: 1px solid #30363d !important;
@@ -56,7 +92,7 @@ h2, h3, .gr-markdown {
     resize: none !important;
 }
 
-/* === Buttons & Sliders === */
+/* === Controls === */
 .gr-button {
     border-radius: 6px !important;
     font-weight: 600 !important;
@@ -64,7 +100,7 @@ h2, h3, .gr-markdown {
     height: 52px !important;
     background: linear-gradient(90deg, #4f46e5, #6366f1) !important;
     border: none !important;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
     transition: all 0.2s ease-in-out;
 }
 .gr-button:hover {
@@ -78,7 +114,7 @@ h2, h3, .gr-markdown {
     background: #6366f1 !important;
 }
 
-/* === Tables & spacing === */
+/* === Table / Row spacing === */
 .gr-dataframe table {
     width: 100% !important;
     color: #c9d1d9 !important;
@@ -95,8 +131,4 @@ h2, h3, .gr-markdown {
     border-top: 1px solid #30363d !important;
     padding: 8px !important;
 }
-
-/* === Dashboard Layout === */
-.gr-row {
-    gap: 18px !important;
-}
+.gr-row { gap: 16px !important; }

requirements.txt

@@ -8,3 +8,5 @@ plotly
 yfinance>=0.2.43
 plotly>=6.3.1
 altair
+pyecharts
+jinja2