Qualche giorno fa Corey Thompson ha provato ad aggiungere degli eventi ai grafici di un mio precedente tutorial. Ammetto di aver volutamente lasciato l’argomento. Ho però approfittato della domanda per indagare un po’ più a fondo su come rendere più interessanti i vari grafici. Ne è uscita una nuova versione della mia web app per analizzare le statistiche di Medium.
Innanzi tutto, ecco cosa voglio ottenere:
Si tratta, in sintesi, di due diverse azioni. La prima permette di cambiare lo zoom del grafico scatter plot usando due slider. Il secondo evento permette di recuperare i dati dell’elemento selezionato e di visualizzare alcune informazioni aggiuntive. Ma prima di poter fare questo occorre dare una ripulita al codice.
Pulire il codice
In questo post continuo il ragionamento cominciato qualche settimana fa in questa storia:
Tutto il codice, di questo tutorial e di quelli precedenti, è disponibile nel repository
Rispetto alla prima parte, ho modificato la struttura del progetto nel tentativo di semplificarla.
Per prima cosa ho deciso di non passare più i vari dati tramite props ma di usare direttamente uno store di Svelte. In questo modo posso raggruppare tutti i metodi in maniera più logica, semplificando la loro modifica ed eliminando i vari doppioni.
Creo il file StorePartnerProgram.ts e inizio a importare i tipi TS che mi servono, oltre al modulo writable:
Creo lo store e lo preparo per l’esportazione:
Raggruppo quindi tutti i vari metodi di cui ho già parlato in dei nuovi file e li importo:
Infine aggiungo i vari metodi allo store:
Dopo aver inglobato i vari metodi in partnerProgram posso richiamarli direttamente dai vari componenti.
Per esempio posso ricavare la lista degli articoli del mese scrivendo semplicemente:
Controllo lo zoom del grafico scatter plot
Dopo aver ripulito un po’ il codice posso cominciare a ragionare su come migliorare i vari grafici. La prima cosa che mi serve è qualcosa per vedere più in dettaglio il rapporto tra lunghezza dei vari post e la loro resa. Penso che la soluzione migliore possa essere aggiungere due slider, uno orizzontale, l’altro verticale.
La prima cosa è capire come creare i due slider. Possiamo divertirci a crearli da zero oppure affidarci a qualcosa di già pronto. Per il momento ho scelto la strada semplice. In Internet si possono trovare diversi componenti interessanti. Ho deciso di usare Range Slider di Simon Goellner.
Installo il componente nel mio progetto usando:
npm install svelte-range-slider-pips --save-dev
Quindi importo il componente in GoogleChartScatter.svelte:
L’utilizzo è abbastanza banale:
Ci sono solamente alcuni punti da comprendere. Devo stabilire qual è il range entro cui scegliere i numeri. Conviene calcolarli subito in modo da poter tornare alla visualizzazione originale in un secondo momento:
Il secondo punto riguarda come intercettare i due input. Per farlo creo un array con soli due elementi. Il primo indica il valore minore, il secondo il maggiore:
Poi non mi resta che unire i pezzi, usando la direttiva bind:property per legare i valori:
Questo per quanto riguarda gli slider. Devo modificare leggermente anche il grafico. O, meglio, le proprietà hAxis e vAxis legandole ai valori degli slider.
Aggiungere un evento quando selezioniamo un valore nel grafico
Il secondo evento che mi interessa è poter vedere alcune informazioni aggiuntive quando seleziono un elemento in un grafico. Passo quindi al grafico GoogleChartPie.svelte e comincio a modificarlo per ottenere questo:
Per generare eventi all’interno di un componente Svelte uso createEventDispatcher:
Posso creare un evento legato alla selezione di un elemento usando:
Uso l’evento select di Google Chart per recuperare i valori da passare fuori dal componente.
Prima di andare avanti un appunto sugli eventi di Google Charts. Ci sono 3 eventi che è possibile chiamare da (quasi) ogni grafico:
selecterrorready
Se però vogliamo usare altri eventi li dobbiamo registrare. Per esempio posso voler intercettare l’evento on mouse over:
Oppure l’evento onmouseout:
Mostro un’anteprima della storia
Quello che voglio ottenere è un metodo semplice e veloce per capire a quale post si riferisce un dato. Per farlo passo al grafico anche l’ID della storia:
Posso quindi modificare il componente nel file MonthlyAmounts.svelte
Per ricavare i dati del post a partire dal suo ID è sufficiente la funzione getStoryById:
Per visualizzare l’anteprima ho invece creato un componente CardStory.svelte:
Posso usare questo componente nelle varie pagine passandogli semplicemente i dati della storia da mostrare:
Bene, questo è tutto per oggi. Ricordo che è possibile vedere il codice del progetto su GitHub.
