spider plot chart

app.py

@@ -88,6 +88,9 @@ with open(JSON_PATH / "app_column_config.json", "r") as f:
 with open(JSON_PATH / "app_column_config.json", "r") as f:
     caracteristicas_etf = json.load(f)["cols_tabla_etfs"]
 
+with open(JSON_PATH / "app_column_config.json", "r") as f:
+    company_details_cols = json.load(f)["company_details_cols"]
+
 with open(JSON_PATH / "cat_cols.json", "r") as f:
     cat_cols = json.load(f)["cat_cols"]
 
@@ -367,28 +370,52 @@ with gr.Blocks(title="Swift Stock Screener, by Reddgr") as front:
                 )
 
         # ---- TAB 2: COMPANY --------------------------------------------------
+        '''
         with gr.TabItem("Company details")as company_tab: ####
             company_title   = gr.Markdown(f"## {init_name}" if init_name else "### Company Name")
             company_summary = gr.Markdown(init_summary)
             company_details = gr.Dataframe(value=init_details, interactive=False)
+        '''
+
+        with gr.TabItem("Company details") as company_tab:
+            with gr.Row():
+                with gr.Column(scale=1):
+                    company_title = gr.Markdown(f"## {init_name}" if init_name else "### Company Name")
+                    company_summary = gr.Markdown(init_summary)
+                    company_details = gr.Dataframe(value=init_details, interactive=False)
+                with gr.Column(scale=1):
+                    company_chart_title = gr.Markdown("## Key Metrics Radar Chart")
+                    company_plot = gr.Plot(visible=True)
 
     def on_company_tab(evt: gr.SelectData):
         global selected_ticker
         if evt.selected and selected_ticker:
-            maestro_details = maestro.copy()
-            maestro_details.drop(columns=["embeddings"], inplace=True, errors="ignore")
+            maestro_details = maestro[company_details_cols].copy()
+            # maestro_details.drop(columns=["embeddings"], inplace=True, errors="ignore")
             name, summary, details_df = utils.get_company_info(maestro_details, selected_ticker, rename_columns)
+            
+            # Create spider plot figure
+            fig = None
+            try:
+                if not details_df.empty:
+                    fig = utils.get_spider_plot_fig(details_df)
+            except Exception as e:
+                print(f"Error creating spider plot: {e}")          
+            
+            
+            
             return (
                 gr.update(value=f"## {name}"),
                 gr.update(value=summary),
-                gr.update(value=details_df)
+                gr.update(value=details_df),
+                gr.update(value=fig) 
             )
-        return gr.update(), gr.update(), gr.update()
+        return gr.update(), gr.update(), gr.update(), gr.update()
 
     company_tab.select(
         on_company_tab,
         inputs=[],
-        outputs=[company_title, company_summary, company_details]
+        outputs=[company_title, company_summary, company_details, company_plot]
     )
 
             
@@ -415,6 +442,17 @@ with gr.Blocks(title="Swift Stock Screener, by Reddgr") as front:
         name, summary, details_df = utils.get_company_info(
             maestro, ticker, rename_columns
         )
+
+        # Create spider plot figure
+        fig = None
+        try:
+            if not details_df.empty:
+                fig = utils.get_spider_plot_fig(details_df)
+        except Exception as e:
+            print(f"Error creating spider plot: {e}")
+
+
+        # details_df.to_pickle(ROOT / "pkl" / "details_df_test.pkl")
         print(f"DEBUG ➡ selected ticker={ticker}, name={name}")
         return (
             last_result_df,
@@ -424,7 +462,8 @@ with gr.Blocks(title="Swift Stock Screener, by Reddgr") as front:
             gr.update(selected=1),         # ← change here
             gr.update(value=f"## {name}"),
             gr.update(value=summary),
-            gr.update(value=details_df)
+            gr.update(value=details_df),
+            gr.update(value=fig)
         )
 
 
@@ -433,7 +472,7 @@ with gr.Blocks(title="Swift Stock Screener, by Reddgr") as front:
         inputs=[],
         outputs=[
             output_df, pagination_label, page_state, summary_display,
-            main_tabs, company_title, company_summary, company_details
+            main_tabs, company_title, company_summary, company_details, company_plot
         ]
     )
 
@@ -450,18 +489,29 @@ with gr.Blocks(title="Swift Stock Screener, by Reddgr") as front:
         if new_ticker != selected_ticker:
             selected_ticker = new_ticker
             name, summary, details_df = utils.get_company_info(maestro, selected_ticker, rename_columns)
+            
+            # Create spider plot figure
+            fig = None
+            try:
+                if not details_df.empty:
+                    fig = utils.get_spider_plot_fig(details_df)
+            except Exception as e:
+                print(f"Error creating spider plot: {e}")
+            
             return (
                 gr.update(value=f"## {name}"),
                 gr.update(value=summary),
-                gr.update(value=details_df)
+                gr.update(value=details_df),
+                gr.update(value=fig)
             )
+            
         # otherwise leave components as‑is
-        return gr.update(), gr.update(), gr.update()
+        return gr.update(), gr.update(), gr.update(), gr.update()
 
     output_df.change(
         on_df_first_row_change,
         inputs=[output_df],
-        outputs=[company_title, company_summary, company_details]
+        outputs=[company_title, company_summary, company_details, company_plot]
     )
 
     # ---------------------- EXCLUSION FILTER TOGGLES --------------------------------
@@ -565,12 +615,22 @@ with gr.Blocks(title="Swift Stock Screener, by Reddgr") as front:
     def on_tab_change(tab_index):
         if tab_index == 1 and selected_ticker:
             name, summary, details_df = utils.get_company_info(maestro, selected_ticker, rename_columns)
+            
+            # Create spider plot figure
+            fig = None
+            try:
+                if not details_df.empty:
+                    fig = utils.get_spider_plot_fig(details_df)
+            except Exception as e:
+                print(f"Error creating spider plot: {e}")
+            
             return (
                 gr.update(value=f"## {name}"),
                 gr.update(value=summary),
-                gr.update(value=details_df)
+                gr.update(value=details_df),
+                gr.update(value=fig)
             )
-        return gr.update(), gr.update(), gr.update()
+        return gr.update(), gr.update(), gr.update(), gr.update()
 
 
     # ---------------------- FILTERS BY COLUMN ------------------ #

html/front_layout.html

@@ -3,7 +3,7 @@
   Swift Stock Screener
 </h1>
 <p style="margin-left:10px">
-  Browse and search over 12,000 stocks. Search assets by theme, filter, sort, analyze, and get ideas to build portfolios and indices. Search by <b>ticker symbol</b> to display a ranked list of similar companies based on fundamentals and performance. Enter any keyword in <b>thematic search</b> to search companies by theme. Click on <u>country names</u> or <u>GICS sectors</u> for strict filtering. <b>Reset</b> the search and <b>sort</b> all assets by any of the displayed metrics.
+  Browse and search over 12,000 stocks. Search assets by theme, filter, sort, analyze, and get ideas to build portfolios and indices. Search by <b>ticker symbol</b> to display a list of ranked related companies. Enter any keyword in <b>thematic search</b> to search by theme. Click on <u>country names</u> or <u>GICS sectors</u> for strict filtering. <b>Reset</b> the search and <b>sort</b> all assets by any of the displayed metrics.
 
 <style>
   /* Botón de tamaño contenido */
@@ -21,95 +21,95 @@
   }
 
   /* cap the Gradio table + keep pagination row below */
-  .clickable-columns .dataframe-container {
+  .df-cells .dataframe-container {
     max-height: calc(100vh - 300px);  /* adjust px to match header+controls height */
     overflow-y: auto;
   }
 
   /* Columnas filtrables (click en la celda) */
-  .clickable-columns tbody td:nth-child(3),
-  .clickable-columns tbody td:nth-child(4) {
+  .df-cells tbody td:nth-child(3),
+  .df-cells tbody td:nth-child(4) {
       color: #1a0dab;              /* link blue for light theme */
       text-decoration: underline;  /* underline */
       cursor: pointer;             /* pointer cursor */
   }
 
   @media (prefers-color-scheme: dark) {
-    .clickable-columns tbody td:nth-child(3),
-    .clickable-columns tbody td:nth-child(4) {
+    .df-cells tbody td:nth-child(3),
+    .df-cells tbody td:nth-child(4) {
       color: #8ab4f8;              /* lighter blue for dark theme */
     }
   }
 
-  .clickable-columns span.negative-value {
+  .df-cells span.negative-value {
     color: red;
   }
 
     /* make the table use fixed layout so width rules apply */
-    .clickable-columns table {
+    .df-cells table {
     table-layout: fixed;
   }
 
   /* CONFIGURACIÓN DE ANCHO DE COLUMNAS */
   /* Ticker */
-  .clickable-columns table th:nth-child(1),
-  .clickable-columns table td:nth-child(1) {
+  .df-cells table th:nth-child(1),
+  .df-cells table td:nth-child(1) {
     min-width: 40px; max-width: 100px;
     overflow: hidden;
   }
-  .clickable-columns table th:nth-child(2),
-  .clickable-columns table td:nth-child(2) {
+  .df-cells table th:nth-child(2),
+  .df-cells table td:nth-child(2) {
     min-width: 75px; max-width: 220px;
     overflow: hidden;
   }
-  .clickable-columns table th:nth-child(3),
-  .clickable-columns table td:nth-child(3) {
+  .df-cells table th:nth-child(3),
+  .df-cells table td:nth-child(3) {
     min-width: 70px; max-width: 160px;
     overflow: hidden;
   }
-  .clickable-columns table th:nth-child(4),
-  .clickable-columns table td:nth-child(4) {
+  .df-cells table th:nth-child(4),
+  .df-cells table td:nth-child(4) {
     min-width: 70px; max-width: 200px;
     overflow: hidden;
   }
-  .clickable-columns table th:nth-child(5),
-  .clickable-columns table td:nth-child(5) {
+  .df-cells table th:nth-child(5),
+  .df-cells table td:nth-child(5) {
     min-width: 60px; max-width: 80px;
     overflow: hidden;
   }
   /* 1yr return */
-  .clickable-columns table th:nth-child(6),
-  .clickable-columns table td:nth-child(6) {
+  .df-cells table th:nth-child(6),
+  .df-cells table td:nth-child(6) {
     min-width: 60px; max-width: 80px;
     overflow: hidden;
   }
-  .clickable-columns table th:nth-child(7),
-  .clickable-columns table td:nth-child(7) {
+  .df-cells table th:nth-child(7),
+  .df-cells table td:nth-child(7) {
     min-width: 70px; max-width: 100px;
     overflow: hidden;
   }
-  .clickable-columns table th:nth-child(8),
-  .clickable-columns table td:nth-child(8) {
+  .df-cells table th:nth-child(8),
+  .df-cells table td:nth-child(8) {
     min-width: 70px; max-width: 100px;
     overflow: hidden;
   }
-  .clickable-columns table th:nth-child(9),
-  .clickable-columns table td:nth-child(9) {
+  .df-cells table th:nth-child(9),
+  .df-cells table td:nth-child(9) {
     min-width: 70px; max-width: 100px;
     overflow: hidden;
   }
-  .clickable-columns table th:nth-child(10),
-  .clickable-columns table td:nth-child(10) {
+  .df-cells table th:nth-child(10),
+  .df-cells table td:nth-child(10) {
     min-width: 70px; max-width: 100px;
     overflow: hidden;
   }
-  .clickable-columns table th:nth-child(11),
-  .clickable-columns table td:nth-child(11) {
+  .df-cells table th:nth-child(11),
+  .df-cells table td:nth-child(11) {
     min-width: 60px; max-width: 70px;
     overflow: hidden;
   }
-  .clickable-columns table th:nth-child(12),
-  .clickable-columns table td:nth-child(12) {
+  .df-cells table th:nth-child(12),
+  .df-cells table td:nth-child(12) {
     min-width: 50px; max-width: 70px;
     overflow: hidden;
   }

json/app_column_config.json

@@ -67,5 +67,24 @@
         "netExpenseRatio",
         "fundInceptionDate",
         "fundFamily"
+    ],
+	"company_details_cols": [
+        "ticker",
+        "security",
+        "country",
+        "sector",
+        "marketCap",
+        "ret_365",
+        "vol_365",
+        "trailingPE",
+        "revenueGrowth",
+        "dividendYield",
+        "beta",
+		"beta_norm",
+        "debtToEquity_norm",
+        "ret_365_norm",
+		"vol_365_norm",
+        "revenueGrowth_norm",
+        "trailingPE_norm"
     ]
 }

json/col_names_map.json

@@ -109,6 +109,12 @@
         "vol_365": "Volatility",
         "yield": "Yield",
         "ytdReturn": "YTD Return",
-        "zip": "Zip"
+        "zip": "Zip",
+		"beta_norm": "Beta norm.",
+        "debtToEquity_norm": "Debt to Equity norm.",
+        "ret_365_norm": "1-year Return norm.",
+		"vol_365_norm": "Volatility norm.",
+        "revenueGrowth_norm": "Revenue Growth norm.",
+        "trailingPE_norm": "Trailing PE norm."
     }
 }

src/app_utils.py

@@ -1,6 +1,7 @@
 import pandas as pd
 from typing import Tuple
-
+import numpy as np
+import plotly.graph_objects as go
 import re
 
 _NEG_COLOR = "red"
@@ -95,7 +96,7 @@ def get_company_info(
 
     # Round _norm fields to 3 decimal places
     for i, field in enumerate(df["Field"]):
-        if field.endswith("_norm"):
+        if field.endswith("norm."):
             value = df.iloc[i]["Value"]
             if isinstance(value, (int, float)) and not pd.isna(value):
                 df.iloc[i, df.columns.get_loc("Value")] = round(value, 3)
@@ -106,7 +107,7 @@ def get_company_info(
         numeric_indices = []
         
         for i, (display_field, value) in enumerate(zip(df["Field"], df["Value"])):
-            if not display_field.endswith("_norm") and isinstance(value, (int, float)) and not pd.isna(value):
+            if not display_field.endswith("norm.") and isinstance(value, (int, float)) and not pd.isna(value):
                 # Get original field name using inverse rename dictionary
                 orig_field = next((k for k, v in rename_columns.items() if v == display_field), display_field)
                 numeric_fields.append(orig_field)
@@ -127,3 +128,127 @@ def get_company_info(
         
 
     return name, summary, df
+
+
+def spider_plot(df: pd.DataFrame) -> None:
+    spider_plot_cols = ['Beta norm.', 'Debt to Equity norm.', '1-year Return norm.', 'Revenue Growth norm.', 'Volatility norm.']
+    plot_data = df[df['Field'].isin(spider_plot_cols)].set_index('Field')
+    values = plot_data.loc[spider_plot_cols, 'Value'].fillna(0.5).astype(float).tolist()
+    metrics_to_invert = ['Debt to Equity norm.', 'Beta norm.', 'Volatility norm.']
+    values = [1 - v if col in metrics_to_invert else v for v, col in zip(values, spider_plot_cols)]
+    categories = [s.replace(' norm.', '').replace('1-year', '1yr').replace('Debt to Equity', 'D/E') for s in spider_plot_cols]
+    fig = go.Figure()
+
+    fig.add_trace(go.Scatterpolar(
+        r=values,
+        theta=categories,
+        fill='toself',
+        name='Company Profile'
+    ))
+
+    fig.add_trace(go.Scatterpolar(
+        r=[0.5] * len(categories) + [0.5], # Append the first r value to close the loop
+        theta=categories + [categories[0]], # Append the first theta value to close the loop
+        mode='lines',
+        line=dict(dash='dot', color='grey'),
+        fill='toself', # Keep fill='none' if you only want the line
+        fillcolor='rgba(0,0,0,0)', # Make fill transparent if only line is desired
+        name='Median (0.5)'
+    ))
+
+    legend_text = (
+        "<b>Quantile Scale: 0 to 1</b><br>"
+        "D/E, Beta, and Volatility:<br>"
+        "0 is highest, 1 is lowest<br>"
+        "Rev. growth and 1yr return:<br>"
+        "0 is lowest, 1 is highest<br>"
+    )
+
+    fig.update_layout(
+    polar=dict(
+        radialaxis=dict(
+        visible=True,
+        range=[0, 1]  # Set the range from 0 to 1
+        )),
+    showlegend=True,
+    title='Normalized Company Metrics',
+    annotations=[
+            go.layout.Annotation(
+                text=legend_text,
+                align='right',
+                showarrow=False,
+                xref='paper',
+                yref='paper',
+                x=1.41, 
+                y=-0.1 
+            )
+        ],
+        margin=dict(b=120),
+        width=600,
+        height=500
+    )
+
+    fig.show()
+
+
+# Create a new function in app_utils.py that returns the figure instead of showing it
+def get_spider_plot_fig(df: pd.DataFrame):
+    spider_plot_cols = ['Beta norm.', 'Debt to Equity norm.', '1-year Return norm.', 'Revenue Growth norm.', 'Volatility norm.']
+    plot_data = df[df['Field'].isin(spider_plot_cols)].set_index('Field')
+    values = plot_data.loc[spider_plot_cols, 'Value'].fillna(0.5).astype(float).tolist()
+    metrics_to_invert = ['Debt to Equity norm.', 'Beta norm.', 'Volatility norm.']
+    values = [1 - v if col in metrics_to_invert else v for v, col in zip(values, spider_plot_cols)]
+    categories = [s.replace(' norm.', '').replace('1-year', '1yr').replace('Debt to Equity', 'D/E') for s in spider_plot_cols]
+    company_name = df.loc[df['Field'] == 'Name', 'Value'].values[0]
+    fig = go.Figure()
+
+    fig.add_trace(go.Scatterpolar(
+        r=values,
+        theta=categories,
+        fill='toself',
+        name='Company Profile'
+    ))
+
+    fig.add_trace(go.Scatterpolar(
+        r=[0.5] * len(categories) + [0.5], # Append the first r value to close the loop
+        theta=categories + [categories[0]], # Append the first theta value to close the loop
+        mode='lines',
+        line=dict(dash='dot', color='grey'),
+        fill='toself', # Keep fill='none' if you only want the line
+        fillcolor='rgba(0,0,0,0)', # Make fill transparent if only line is desired
+        name='Median (0.5)'
+    ))
+
+    legend_text = (
+        "<b>Quantile Scale: 0 to 1</b><br>"
+        "D/E, Beta, and Volatility:<br>"
+        "0 is highest, 1 is lowest<br>"
+        "Rev. growth and 1yr return:<br>"
+        "0 is lowest, 1 is highest<br>"
+    )
+
+    fig.update_layout(
+    polar=dict(
+        radialaxis=dict(
+        visible=True,
+        range=[0, 1]  # Set the range from 0 to 1
+        )),
+    showlegend=True,
+    title=f'{company_name} - Normalized Metrics',
+    annotations=[
+            go.layout.Annotation(
+                text=legend_text,
+                align='right',
+                showarrow=False,
+                xref='paper',
+                yref='paper',
+                x=1.41, 
+                y=-0.1 
+            )
+        ],
+        margin=dict(b=120),
+        width=600,
+        height=500
+    )
+
+    return fig