spx-graphs v0.0.31

GRAPHS DOCS (v0.1)

INTRO

La libreria si occuperà di disegnare il grafico all’interno di un nodo canvas e metterà a disposizione una serie di metodi per gestire alcune funzionalità. La legenda del grafico non viene inclusa nella libreria, ma saranno tutti componenti UI che dovranno essere gestiti esternamente.

METODI

init

Metodo di inizializzazione del grafico. restituirà un oggetto con esposti i metodi di interazione.

param:

{
  type: 'stackedColumns',
  containerId: string,
  onClick: function,
  scrollable: bool,
  animation: object,
  series: array,
  values: object,
}

• type: identifica la tipologia di grafico da istanziare. per ora disponibile solo stackedColumns
• containerId: id del nodo del DOM in cui verrà inserito il canvas e disegnato il grafico
• onClick: è una funzione che viene chiamata quando viene clickata una colonna del grafico, che avrà come parametro in ingresso il periodo selezionato (vedi oggetto values).
• scrollable: flag per abilitare/disabilitare lo scroll orizzontale

• animations: configurazione delle animazioni di visualizzazione del grafico. l'oggetto ha il seguente formato

  	```
  	{
  	  type: string,
  	  duration: int,
  	}
  
  	```
  
  	- `type`: selezione del tipo di animazione. i valori accettati sono `'none' / 'fade' / 'raise'` (disponibile solo `raise`)
  	- `duration`: durata in ms dell'animazione

• series: contiene la definizione delle serie temporali che si vogliono visualizzare. è un array di oggetti con il formato:

  	```
  	{
  	  seriesName: string,
  	  color: hex,
  	  gradient: bool,
  	  stackedViewIndex: int,
  	}
  	```
  
  	nello specifico: 
  	- `seriesName`: è il nome della serie. verrà utilizzato per identificare i valori da visualizzare (vedi `values`)
  	- `color`: valore esadecimale del colore della serie. 
  	- `gradient`: flag che abilita/disabilita il gradiente 
  	- `stackedVieewIndex`: intero che identifica in che posizione va visualizzato il valore sulla singola stacked column. 
  
  	esempio: 
  
  	```
  	{
  	  seriesName: "Balli e Concertini",
  	  color: 0x00FF00,
  	  gradient: false,
  	  stackedViewIndex: 1,
  	}
  	```	

• values: è un array di oggetti contenenti i dati ordinati da visualizzare. Gli oggetti avranno il seguente formato:

  	```
  	{
  categoryX: string,
  seriesName: value,
  seriesName: value,
  	  ...

  }

  	```
  
  	nello specifico: 
  
  	- `categoryX`: sarà la label da visualizzare sull'asse x. 
  	- `seriesName: value`: la key sarà il nome della serie specificato nella definizione.
  
  	esempio: 
  
  	```
  	[ 
  	  {
  	    categoryX: "2013-1"
  	    "Balli E Concertini": 70000,
  	    "Film E Telefilm": 8000,
  	    "Emittenza Tv E Radio": 8000,
  	    "Concerti Ed Altri Eventi Musicali": 4000,
  	    "Diritti Di Riproduzione E Registrazione": 6000,
  	    "Multimediale Online": 7000,
  	    "Estero": 8000,
  	    "Sempreverdi E Maggiorazioni": 6000,
  	    "Altre Ripartizioni Supplementari": 9000,
  	    "Copia Privata": 6000,
  	    "Musica D’ambiente": 6000,
  	    "Online": 8000,
  	    "Cinema": 7000,
  	    "Riproduzioni Su Supporti Audio E Video": 5000,
  	  },
  	  ...
  	]
  	```	

filter

Metodo utilizzato per applicare filtri sul grafico. Per il momento si potrà filtrare solo per categoria. (Esposto dall’oggetto ritornato dal metodo init)

param:

{
  seriesName: string
}

• seriesName: nome della serie da visualizzare

esempio:

{
  seriesName: ["Balli e Concertini"]
}

Passando un oggetto vuoto si resetta il filtro.

zoom

Metodo per applicare lo zoom sul grafico, triggerato contestualmente al cambio di selezione sullo slider. (Esposto dall’oggetto ritornato dal metodo init)

param:

{
  start: int,
  end: int
}

• start/end: indici degli elementi dell'array values che identificano il range da visualizzare

esempio:

{
  start: 2,
  end: 3
}

dispose

Metodo utilizzato per rimuovere tutti gli oggetti nel grafico e liberare memoria. Da usare prima dei cambi pagina. Non accetta parametri in ingresso.

enableMultiSelect

Metodo utilizzato per abilitare la selezione multipla delle colonne. Non accetta parametri in ingresso.

disableMultiSelect

Metodo utilizzato alla fine della selezione multipla delle colonne. Non accetta parametri in ingresso.

Ritorna un array contenente i nomi delle colonne selezionate, ovvero i valori del parametro categoryX dell'array config.values.

esempio:

['2017-1', '2017-2']