Quartz 4

POC: Layout Multi-Pannello Dinamico con Lightweight Charts

2 min read

Transclude of test_layout_multichart

Contesto Durante l’implementazione del layout dinamico multi-pannello, il nostro codice Python, sebbene logicamente corretto, produceva un risultato visivo errato: tutti gli indicatori venivano disegnati sovrapposti sul grafico principale. Questo suggeriva un’incomprensione fondamentale dell’API di Lightweight Charts, in particolare riguardo all’ordine delle operazioni e alla configurazione delle scale di prezzo.

Per risolvere il problema alla radice, è stato necessario creare un ambiente di test isolato, libero da qualsiasi complessità dell’applicazione FIRE, per interagire direttamente con la libreria JavaScript e stabilire la sequenza di comandi corretta.

Decisione

È stato creato un POC HTML/JavaScript autonomo (test_layout_multichart.html) che dimostra in modo inequivocabile la sequenza di passaggi obbligatoria per un corretto rendering multi-pannello.

Il POC è interattivo e suddiviso in 3 passaggi, che devono essere eseguiti in ordine:

  1. Crea Grafico Base: Inizializza il grafico e la serie principale (prezzo).
  2. Aggiungi Indicatori: Crea tutte le serie degli indicatori, assegnando a ciascuna il proprio priceScaleId univoco (es. rsi_scale, macd_scale). In questo momento, le scale vengono create ma non ancora posizionate.
  3. Configura Scale: SOLO ALLA FINE, dopo che tutte le serie esistono, applica le opzioni scaleMargins a ciascuna scala (right, rsi_scale, macd_scale) per definire la geometria del layout.

Questo test ha rivelato il bug critico nella nostra implementazione: stavamo tentando di configurare i margini contemporaneamente alla creazione della serie, un’operazione che Lightweight Charts ignora.

Conseguenze

Positive

  • Diagnosi Definitiva: Il POC ha fornito la “pistola fumante”, dimostrando che il problema non era nella logica di calcolo ma nell’ordine di esecuzione dei comandi JavaScript.
  • Guida all’Implementazione: Il codice del POC è servito come “ricetta” esatta per rifattorizzare il LWCOverlayManager in Python, garantendo che la nuova versione replicasse la sequenza corretta.
  • Conoscenza Consolidata: Ha chiarito una sfumatura critica dell’API di Lightweight Charts (separazione tra configurazione della Scala e della Serie), una lezione che ora è documentata e farà parte delle nostre best practice.
  • Strumento di Debug Futuro: Il file HTML rimane una risorsa preziosa per testare rapidamente nuove feature di charting o diagnosticare futuri problemi di rendering in un ambiente controllato.

Negative / Limitazioni

  • Nessuna. Il POC ha raggiunto il suo obiettivo al 100%.

Graph View