diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/top_movers.py | 112 |
1 files changed, 79 insertions, 33 deletions
diff --git a/components/top_movers.py b/components/top_movers.py index d50eee7..fcf64d4 100644 --- a/components/top_movers.py +++ b/components/top_movers.py @@ -12,65 +12,87 @@ def _toggle_mover_tab(state_key: str): st.session_state[state_key] = not st.session_state.get(state_key, False) -def _inject_styles(): +def _inject_styles(compact: bool = False): + row_template = ( + "minmax(60px, 0.95fr) minmax(0, 2.0fr) minmax(74px, 1fr) minmax(86px, 1fr)" + if compact + else "minmax(72px, 0.8fr) minmax(0, 2.6fr) minmax(90px, 1fr) minmax(110px, 1.1fr)" + ) + row_gap = "0.45rem" if compact else "0.85rem" + row_padding = "0.12rem 0" if compact else "0.18rem 0" + symbol_size = "0.75rem" if compact else "0.875rem" + name_size = "0.75rem" if compact else "0.8125rem" + price_size = "0.75rem" if compact else "0.8125rem" + change_size = "0.75rem" if compact else "0.8125rem" + change_meta_size = "10px" if compact else "11px" + st.markdown( """ <style> - .prism-mover-list { + .prism-mover-list {{ display: grid; gap: 0.12rem; - } - .prism-mover-row { + }} + .prism-mover-row {{ display: grid; - grid-template-columns: minmax(72px, 0.8fr) minmax(0, 2.6fr) minmax(90px, 1fr) minmax(110px, 1.1fr); - gap: 0.85rem; + grid-template-columns: {row_template}; + gap: {row_gap}; align-items: center; - padding: 0.18rem 0; - } - .prism-mover-symbol { + padding: {row_padding}; + }} + .prism-mover-symbol {{ font-family: 'IBM Plex Sans', sans-serif; - font-size: 0.875rem; + font-size: {symbol_size}; font-weight: 600; color: #F2ECDC; line-height: 1.1; - } - .prism-mover-name { + }} + .prism-mover-name {{ font-family: 'IBM Plex Sans', sans-serif; color: #8E8676; - font-size: 0.8125rem; + font-size: {name_size}; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - } - .prism-mover-price { + }} + .prism-mover-price {{ font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; - font-size: 0.8125rem; + font-size: {price_size}; color: #C7C0AE; line-height: 1.1; - } - .prism-mover-change { + }} + .prism-mover-change {{ font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; - font-size: 0.8125rem; + font-size: {change_size}; font-weight: 500; line-height: 1.1; - } - .prism-mover-change-meta { + }} + .prism-mover-change-meta {{ font-family: 'IBM Plex Mono', monospace; - font-size: 11px; + font-size: {change_meta_size}; color: #5E5849; margin-left: 0.2rem; - } - @media (max-width: 900px) { - .prism-mover-row { + }} + @media (max-width: 900px) {{ + .prism-mover-row {{ grid-template-columns: minmax(68px, 0.9fr) minmax(0, 2.2fr) minmax(82px, 1fr) minmax(96px, 1fr); gap: 0.55rem; - } - } + }} + }} </style> - """, + """.format( + row_template=row_template, + row_gap=row_gap, + row_padding=row_padding, + symbol_size=symbol_size, + name_size=name_size, + price_size=price_size, + change_size=change_size, + change_meta_size=change_meta_size, + ), unsafe_allow_html=True, ) @@ -150,8 +172,8 @@ def _render_mover_tab(screen: str, state_key: str): @st.fragment -def render_top_movers(): - _inject_styles() +def render_top_movers(compact: bool = False): + _inject_styles(compact=compact) st.markdown(""" <div style=" font-family:'IBM Plex Sans',sans-serif; @@ -170,10 +192,34 @@ def render_top_movers(): } with tab_gainers: - _render_mover_tab(screens["gainers"], "top_movers_gainers_expanded") + if compact: + quotes = _fetch_movers(screens["gainers"]) + if not quotes: + st.caption("No data available.") + else: + rows_html = "".join(_mover_row_html(q) for q in quotes[:DEFAULT_VISIBLE_MOVERS]) + st.markdown(f"<div class='prism-mover-list'>{rows_html}</div>", unsafe_allow_html=True) + else: + _render_mover_tab(screens["gainers"], "top_movers_gainers_expanded") with tab_losers: - _render_mover_tab(screens["losers"], "top_movers_losers_expanded") + if compact: + quotes = _fetch_movers(screens["losers"]) + if not quotes: + st.caption("No data available.") + else: + rows_html = "".join(_mover_row_html(q) for q in quotes[:DEFAULT_VISIBLE_MOVERS]) + st.markdown(f"<div class='prism-mover-list'>{rows_html}</div>", unsafe_allow_html=True) + else: + _render_mover_tab(screens["losers"], "top_movers_losers_expanded") with tab_active: - _render_mover_tab(screens["active"], "top_movers_active_expanded") + if compact: + quotes = _fetch_movers(screens["active"]) + if not quotes: + st.caption("No data available.") + else: + rows_html = "".join(_mover_row_html(q) for q in quotes[:DEFAULT_VISIBLE_MOVERS]) + st.markdown(f"<div class='prism-mover-list'>{rows_html}</div>", unsafe_allow_html=True) + else: + _render_mover_tab(screens["active"], "top_movers_active_expanded") |