Indice articolo

Con questo articolo tratteremo il componente grafico Tag Cloud (TCL), il quale permette di visualizzare dati attraverso una forma di rappresentazione molto utilizzata sul web, denominata appunto tag cloud (nuvola di etichette).

La tag cloud è un gruppo di etichette di grandezza differente. Viene in particolare attribuito un font di dimensioni maggiori alle parole più importanti. Si tratta quindi di una lista pesata.

Le voci sono generalmente associate a link che portano ad una pagina collegata al tag visualizzato. Le tag cloud sono infatti spesso usate come strumenti di navigazione. Si pensi ad uno degli utilizzi più diffusi della tag cloud, ovvero mostrare gli argomenti più trattati all’interno di un sito web. Cliccando sull’argomento si viene poi reindirizzati alle pagine che lo riguardano. Lo stesso blog su cui è ospitato questo articolo ha sulla sua spalla destra una sezione in cui è presente la tag cloud dei termini più citati nel sito.  Se ne riporta qui sotto uno screenshot.

In Sme.UP il componente Tag Cloud recupera i dati da una matrice.

E’ necessario definire nel setup almeno gli attributi che identificano la colonna da cui ricavare le label (LabelCol) e la colonna di pesi di tipo numerico da cui ricavare la dimensione del font del tag (WeightCol).

Riportiamo qui un esempio di script minimale:

::G.SEZ Pos(1)
::G.SUB.TCL Tit="*NONE"
::G.SET.TCL LabelCol="TAG" WeightCol="PESO"
::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;WETEST_TCL) 2(;;TCL_001)

La matrice dell’esempio (generata dal servizio di prototipazione B£SER_46) è la seguente:

<Griglia>
 <Colonna Cod="TAG" Txt="Tag" Lun="30" IO="O" Ogg="**"/>
 <Colonna Cod="URL" Txt="Url" Lun="30" IO="O" Ogg="J9"/>
 <Colonna Cod="PESO" Txt="Peso" Lun="5" IO="O" Ogg="NR"/>
 </Griglia>
 <Righe>
 <Riga Fld="SMEUP|http://www.smeup.com|15|"/>
 <Riga Fld="PAYARA|http://www.payara.fish|3"/>
 <Riga Fld="PRIMEFACES|https://www.primefaces.org|5,99"/>
 <Riga Fld="UBUNTU|https://www.ubuntu.com|9"/>
 <Riga Fld="WINDOWS|https://www.microsoft.com/it-it/windows|0"/>
 <Riga Fld="ANGULAR||12"/>
 <Riga Fld="JAVA||aa"/>
 <Riga Fld="JAVASCRIPT||7"/>
 <Riga Fld="YARN||3,01"/>
 <Riga Fld="NPM||1,01"/>
 </Righe>

Il risultato è quello mostrato nell’immagine sottostante.

La dimensione dei tag (denominata strenght) può essere un valore intero tra 1 e 5 (su parametro di setup è ammessa anche la classe speciale 0). Quindi se la colonna di pesi non contiene valori dall’1 al 5 essi vengono riproporzionati dal sistema secondo tale scala.

Dinamismi

Può essere molto utile definire dinamismi al click di un item del Tag Cloud.

Questo è lo script dell’esempio precedente a cui è stato associato un dinamismo al click che mostra i dati dell’item cliccato nel componente Label della sezione 1B.

::G.SEZ Pos(1)
::G.SEZ Pos(1A)
::G.SUB.TCL Tit="*NONE"
::G.SET.TCL LabelCol="TAG" WeightCol="PESO" 
::G.DIN Where="Tg01" When="Click"
::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;WETEST_TCL) 2(;;TCL_001)

::G.SEZ Pos(1B)
::G.SUB.LAB Tit="TARGET DEL DINAMISMO AL CLICK." Id="Tg01" Load="D"
::D.OGG D(Riga con TAG = [TAG], URL = [URL], PESO = [PESO] cliccata alle [*NOW])

Dimensioni

L’altezza del componente TCL sarà sempre al 100%. E’ possibile variare la larghezza tramite l’attributo di setup Width. Si possono indicare percentuali o valori assoluti (in questo caso equivalgono a pixel). Il valore di default è 100%.

Algoritmi

Il riproporzionamento dei pesi alla scala di interi da 1 a 5 può essere effettuato secondo diversi algoritmi.

L’algoritmo utilizzato di default è stato chiamato RelativeLinear. Esso calcola pesi percentuali in base alla seguente formula: (number – minNumber)/(maxNumber – minNumber). I tag sono poi ripartiti nelle 5 seguenti classi: strenght = 1 se peso minore o uguale del 20%, strenght = 2 se peso minore o uguale del 40%, strenght = 3 se peso minore o uguale del 60%, strenght = 4 se peso minore o uguale del 80%, strenght = 5 se peso minore o uguale del 100%.

Tramite l’attributo di setup Algorithm è comunque possibile cambiare l’algoritmo. In particolare è possibile iniettare l’algorithm RelativeLogarithmic, simile a RelativeLinear con la differenza che i pesi percentuali sono calcolati come (Math.log(number) – Math.log(minNumber))/(Math.log(maxNumber) – Math.log(minNumber)). RelativeLogarithmic permette di distribuire i tags in maniera meno polarizzata rispetto a RelativeLinear in presenza di distribuzioni con pochi casi di tags con pesi molto elevati o molto piccoli rispetto a tutti gli altri.

E’ inoltre possibile iniettare anche un algoritmo Custom, quando si desidera utilizzare un proprio algoritmo per la renderizzazione delle strength. In questo caso l’algoritmo non effettuerà nessuna trasformazione ma utilizzerà direttamente i valori dei pesi di colonna come strength. Chiaramente in questo caso i valori dei pesi ammessi potranno essere solo interi da 1 a 5.

Altri parametri facoltativi

Esistono altri attributi di setup che permettono di raffinare la rappresentazione della tag cloud.

Ecco qualche esempio:

  • settando l’attributo MaxSize verranno visualizzati al massimo MaxSize tags, prendendoli tra quelli con peso più alto
  • settando l’attributo LowerAndEqualsThreshold verranno eliminati dalla visualizzazione tutti i tags con peso minore o uguale a tale valore
  • settando l’attributo MinNumber verrà preso quel valore nel calcolo della formula degli algoritmi RelativeLinear e RelativeLogarithmic

Note finali di utilizzo

Il componente Tag Cloud è funzionante solo in Web.UP, in Looc.UP il componente non è implementato.
Per ulteriori dettagli potete consultare lo Showcase di Web.UP alla sezione Tag Cloud!