Tutorial pentru dezvoltarea unui tablou de bord avansat al stocurilor pentru S&P 500 pentru concursul de tabel de poziții 2025

Acest tutorial detaliază dezvoltarea unei aplicații R Shiny intitulată Tabloul de bord de monitorizare S&P 500 pentru tabloul de bord 2025 Posit Table. Această aplicație combină în mod eficient vizualizarea interactivă a datelor financiare (plotly), frumoase tabele de date (gt, gtExtras), răzuire web (rvest), și integrarea API externă (riingo, ellmer/Gemeni AI) într-o temă întunecată personalizată și elegantă. Puteți accesa aplicația prin acest link

1. Prezentare generală a proiectului și tehnologii cheie

Această aplicație este împărțită în mai multe panouri funcționale:

1. Prezentare generală a pieței: Top 10 companii S&P 500 după capitalizarea pieței, prezentate în a gt tabel cu tendințe strălucitoare.
2. Detalii stoc: selecție interactivă, antet de preț în timp real, statistici cheie și un grafic de preț zilnic/comparativ (plotly).
3. Analiza fundamentală: Tabel sortabil cu valorile fundamentale cheie.
4. Știri de piață și inteligență artificială: Titluri de știri (riingo) cu analiza sentimentelor (sentimentr) și un asistent mare de model lingvistic (ellmer/Gemeni AI).
5. Calculator de portofoliu: Testare retrospectivă simplă a portofoliului și calcul metric.

📚 Pachete Core R utilizate

2. Configurarea funcțiilor de mediu și de ajutor

Aplicația începe prin încărcarea tuturor bibliotecilor necesare și definirea funcțiilor utilitare.

2.1. Configurare pictogramă și tematică

The ICON_MAP lista definește personalizarea font-awesome pictograme utilizate în casetele de statistici, setând stilul CSS inline pentru anumite culori.

2.2. Scraping web: get_sp500_tickers()

Această funcție de ajutor crucială șterge lista de ticker S&P 500 de pe Wikipedia.

• Se foloseste rvest::read_html() şi rvest::html_table() pentru a extrage datele.
• Include o gestionare robustă a erorilor (tryCatch) și un hardcoded lista alternativă dacă răzuirea eșuează.
• Generarea logo-ului: folosește o adresă URL a serviciului Google Favicon (https://www.google.com/s2/favicons?sz=64&domain=...) pentru a genera dinamic logo-uri ale companiei pe baza domeniului lor, sporind atractivitatea vizuală a intrărilor și tabelelor de selecție.

2.3. Recuperarea datelor și Sparklines

• pf_get_prices_for_sparkline(): Utilizări quantmod::getSymbols(src = "https://www.r-bloggers.com/2025/10/tutorial-for-developing-an-advanced-stock-dashboard-for-the-sp-500-for-the-2025-posit-table-contest/yahoo") pentru a prelua ultimele 30 de zile de prețuri de închidere pentru o listă de tickere, stocând datele ca o listă de vectori numerici pentru utilizare în gt sclipici.
• spark_area_svg(): Această funcție complexă folosește ggplot2 şi svglite::stringSVG() pentru a genera un URI de date care conține codul SVG pentru o zonă colorată sparkline. Acest lucru este esențial pentru redarea strălucitoarelor direct în interiorul gt celule de tabel fără găzduire externă de imagini.

3. Interfața de utilizare întunecată personalizată (ui.R)

Aspectul premium al tabloului de bord este realizat în întregime prin CSS personalizat în cadrul tags$head secțiunea ui.

3.1. Tema CSS personalizată

CSS (încorporat folosind tags$style(HTML(...))):

• Setează un albastru închis/negru liniar-gradient fundal pentru body.
• Folosește fonturi moderne, cum ar fi ‘Inter’ şi „JetBrains Mono” (un font monospațiu folosit adesea pentru finanțare/codificare) pentru un aspect elegant și tehnic.
• Aplică culori distincte de fundal (#131722, #1e2431, #252b3d) și culorile de bord (#2a2e39) la diverse elemente (.main-container, .stock-header, .stat-card, .selectize-input) pentru a crea un design stratificat, separat vizual.
• Definește culori distincte pentru modificările de preț: verde (#26a69a) pentru sus şi Roșu (#ef5350) pentru jos.
• Personalizează barele de defilare, intrările (selectize-input), și fix app-footer pentru consecvență.

3.2. Structura aspectului

The fluidPage folosește un simplu aspect pe trei coloane în cadrul main-container (care este un stil personalizat div):

• Jumătatea de sus (stânga): Tabelul cu capitalizarea pieței, Tabelul cu valori fundamentale.
• Jumătatea superioară (dreapta): Selector de stoc, Antet personalizat (uiOutput("top_header_ui")), carduri cu statistici cheie, tabele de prețuri (gt_output), și diagrama principală (plotlyOutput).
• Jumătatea de jos: Riingo News (gt_output) și AI Chat (chat_mod_ui).
• Global de jos: Panoul Calculator portofoliu.

4. Logica serverului (server.R)

Serverul gestionează preluarea datelor, calculele reactive și redarea tuturor rezultatelor.

4.1. Date de stoc Reactive

• stock_data1 şi stock_data2: Acestea reactive apelul obiectelor get_stock_data() (care folosește quantmod::getSymbols) pentru a obține prețurile acțiunilor pe baza simbolurilor selectate și a intervalului de timp. Ele sunt declanșate de schimbări în ticker1, intervalsau manualul ACTUALIZARE DATE butonul (input$refresh).

• output$top_header_ui: Aceasta renderUI funcția generează în mod dinamic antetul HTML, inclusiv sigla companiei, numele și ultimul preț formatat și modificarea zilnică.
  • make_stock_header() preia sigla si numele.
  • make_price_bar() calculează ultimul preț și modificarea procentuală zilnică, atribuind a .price-up (verde) sau .price-down (roșu) clasă CSS pentru feedback vizual.
• Statistica renderText ieșirile (Volum, 52 W ridicat/ scăzut, volum mediu) folosesc stock_data1() reactiv.

4.3. Redare avansată a tabelului GT

Tabloul de bord folosește trei majore gt mese, fiecare cu personalizare puternică:

A. Tabel cu statistici cheie (output$key_stats_table)

Acest tabel prezintă capitalizarea pieței, venitul și o tendință de preț pe 30 de zile pentru cele mai importante acțiuni.

• Pregătirea datelor: Datele provin din get_market_cap_data()care răzuiește un site web de analiză a stocurilor folosind rvest.
• Formatare logo/nume: The Name_Logo coloana este transformată folosind gt::text_transform pentru a încorpora imaginea siglei ( tag) lângă numele companiei, datorită HTML/CSS personalizat utilizat.
• Vizualizarea capitalizării pieței: gtExtras::gt_plt_bar() creează o diagramă cu bare simplă în interiorul celulei pentru a arăta capitalizarea de piață relativă.
• Vizualizarea veniturilor: gtExtras::gt_color_box() adaugă o casetă de culoare de fundal pe baza valorii veniturilor.
• Trend Sparkline: Aceasta folosește gt::text_transform a numi obiceiul spark_area_svg() ajutor, încorporând URI-ul de date SVG generat ca conținut al celulei.

B. Tabelul prețurilor zilnice (output$price_table1)

Acest tabel arată ultimele 5 zile ale OHLC (Deschidere, Ridicată, Scăzută, Închidere) și indicatorii tehnici cheie (RSI, MACD).

• Calculul indicatorului: Înăuntru create_table()analiza tehnică se realizează folosind quantmod::RSI() şi quantmod::MACD().
• Formatare condiționată:
  • Modificare/Modificare %: Folosește un complex text_transform pentru a afișa săgețile verzi (▲) sau roșii (▼) și culoarea textului în funcție de mișcarea prețului.
  • RSI: Utilizări gt::tab_style cu gt::cells_body pentru a evidenția fundalul celulei când RSI este supracumparat (>= 70) sau supravândut (<= 30).

C. Riingo News Table (output$riingo_news_gt)

Acest tabel afișează titlurile de știri în funcție de tickerul și sursa selectate.

• Preluare știri: riingo_news_data() utilizări riingo::riingo_news() (necesită un token API Tiingo, care este codificat în acest exemplu: TIINGO_TOKEN <- "8c7094ec74e7fc1ceca99a468fc4770df03dd0ec")
• Analiza sentimentelor: sentimentr::sentiment_by() este folosit pentru a clasifica rapid sentimentul din titlu ca „Pozitiv”, „Negativ” sau „Neutral”.
• Vizualizarea:
  • Logo sursă: A text_transform încorporează sigla sursei de știri ( etichetă).
  • Evidențierea sentimentelor: gt::tab_style colorează condiționat fundalul și textul Sentiment coloană bazată pe eticheta calculată (verde/roșu/gri).

4.4. Plot interactiv (output$price_plot)

• Diagramă cu lumânări (fără comparare): Când input$compare_mode este FALSEcodul folosește plotly::plot_ly(type = "candlestick") pentru a afișa datele OHLC, setând culori personalizate de creștere/scădere (#26a69a / #ef5350).
• Comparație normalizată (mod comparare): Când TRUEcalculează modificare procentuală din prima zi atât pentru stocurile selectate, cât și pentru utilizări plotly::add_lines() pentru a-și trasa curbele de performanță pe aceeași axă Y normalizată, care este practica standard pentru compararea performanței.

4.5. Backtesting portofoliu

The Calculator de portofoliu secțiunea implementează logica clasică de backtesting financiar:

• pf_get_prices(): Descarcă prețurile de închidere pentru tickerele selectate.
• pf_returns(): Calculează randamente zilnice ($R_t = frac{P_t}{P_{t-1}} – 1$).
• pf_port_ret(): calculează randamentul zilnic al portofoliului ($sum w_i R_{i,t}$) pe baza ponderilor introduse de utilizator (pf_weights()).
• pf_equity(): Calculează valoarea cumulativă a portofoliului în timp pe baza capitalului inițial ($Equity_t = Capital times prod (1 + R_{port,t})$).
• Metrici: calculează indicatorii cheie de performanță:
  • CAGR (Rata de creștere anuală compusă): Randament anualizat.
  • Volatilitate: Abaterea standard anualizată a randamentelor.
  • Rata Sharpe: Măsoară randamentul pe unitatea de risc ($frac{Rentabilitatea anuală – Rată fără risc}{Volatilitate anuală}$).
• output$pf_alloc_table: Afișează alocarea finală folosind personalizarea weight_pill_html() funcția, care creează o bară de progres umplută dinamic pentru procentul de greutate din cadrul gt masă.

4.6. Integrare AI Chat

• Codul stabilește un reactiv chat_client folosind ellmer::chat_google_gemini() funcția de la ellmer pachet.
• Utilizatorii trebuie să introducă Cheia API Gemini și faceți clic SETARE CHEIA API pentru a initializa clientul.
• The system_prompt este folosit pentru a instrui AI să acționeze ca „expert consilier financiar și analist bursier”, asigurând răspunsuri relevante.
• chat_mod_server("stock_chat", chat_client()) conectează clientul AI inițializat la shinychat Modulul UI, făcând funcționalitatea de chat live.