ProduChart Producer Chart

1. ProduChart • Producer Chart • Linguaggio per la produzione di grafici Linguaggi e modelli computazionali LS Pierpaolo Giuliani Matr. 290007 Prof: Enrico Denti

2. Obiettivo • Realizzazione di un semplice linguaggio per produrre grafici • Occorre: • Progettare un linguaggio che sia in grado di esprimere le caratteristiche di un particolare grafico. • Realizzare un tool che supporti tale linguaggio: • accetti in ingresso una descrizione del grafico nel linguaggio realizzato; • esegua un’analisi sintattica al fine di riconoscere se lo schema è scritto in modo lecito per il linguaggio; • esegua le azioni corrispondenti alla semantica dello schema immesso. • Realizzare uno strumento grafico che: • visualizzi il risultato finale del grafico prodotto

3. Grammatica - esempio Grafico { tipo grafico{'Categoria','Valore',VERT,NORMAL_AREA, { }; nome finestra{grafico}; titolo grafico{'grafico Area'}; sottotitolo{[Il grafico area permette di rappre-sentare serie di dati….],CORSIVO,15,ALTO}; sfondo finestra{BIANCO}; sfondo grafico{GRIGIOCHIARO}; } { Prima,GIALLO, [ Categoria1,1.0] [ Categoria2,4.0] [ Categoria3,3.0] [ Categoria4,5.0] [ Categoria5,5.0] } { Seconda,VERDE, [ Categoria1,5.0] [ Categoria2,7.0] [ Categoria3,6.0] [ Categoria4,8.0] [ Categoria5,4.0] } { Terza,ROSSO, [ Categoria1,4.0] [ Categoria2,3.0] [ Categoria3,2.0] [ Categoria4,3.0] [ Categoria5,6.0] }

4. Token della grammatica (1) • Parte lessicale • TOKEN : • { • <CATEGORYCHART: "NORMAL_AREA" | "AREA_STACKED" | "BAR_STACKED" | "DUALDIM_BAR" | "TRIDIM_BAR" | "LINE“ | "POPULATION_BAR" > • | <XYCHART: "INTERVAL_XY_BAR" | "COLLECTION_XY_AREA" > • | <PIE: "PIE"> • | <STEP_LINE: "STEP_LINE"> • | <DIFFERENCE: "DIFFERENCE"> • | <TIME_SERIES: "TIME_SERIES"> • | <GANTT:"GANTT"> • | <HISTOGRAM:"HISTOGRAM"> • | <DIM: "2D" | "3D”> • | <ORIENTAZIONE: "ORIZZ" | "VERT" > • | <COLORE: "NERO" | "ROSSO" | "BLU" | "CIANO" | "BIANCO" | "GRIGIOCHIARO" |"GRIGIO” | "GRIGIOSCURO" | "ROSA" | "VERDE" | "MAGENTA" |"ARANCIONE" | "GIALLO" > Tipologie di grafico

5. Token della grammatica (1) • TOKEN : • { • <CATEGORYCHART: "NORMAL_AREA" | "AREA_STACKED" | "BAR_STACKED" | "DUALDIM_BAR" | "TRIDIM_BAR" | "LINE“ | "POPULATION_BAR" > • | <XYCHART: "INTERVAL_XY_BAR" | "COLLECTION_XY_AREA" > • | <PIE: "PIE"> • | <STEP_LINE: "STEP_LINE"> • | <DIFFERENCE: "DIFFERENCE"> • | <TIME_SERIES: "TIME_SERIES"> • | <GANTT:"GANTT"> • | <HISTOGRAM:"HISTOGRAM"> • | <DIM: "2D" | "3D”> • | <ORIENTAZIONE: "ORIZZ" | "VERT" > • | <COLORE: "NERO" | "ROSSO" | "BLU" | "CIANO" | "BIANCO" | "GRIGIOCHIARO" |"GRIGIO” | "GRIGIOSCURO" | "ROSA" | "VERDE" | "MAGENTA" |"ARANCIONE" | "GIALLO" > Grafici ottenibili

6. Token della grammatica (1) • TOKEN : • { • <CATEGORYCHART: "NORMAL_AREA" | "AREA_STACKED" | "BAR_STACKED" | "DUALDIM_BAR" | "TRIDIM_BAR" | "LINE“ | "POPULATION_BAR" > • | <XYCHART: "INTERVAL_XY_BAR" | "COLLECTION_XY_AREA" > • | <PIE: "PIE"> • | <STEP_LINE: "STEP_LINE"> • | <DIFFERENCE: "DIFFERENCE"> • | <TIME_SERIES: "TIME_SERIES"> • | <GANTT:"GANTT"> • | <HISTOGRAM:"HISTOGRAM"> • | <DIM: "2D" | "3D”> • | <ORIENTAZIONE: "ORIZZ" | "VERT" > • | <COLORE: "NERO" | "ROSSO" | "BLU" | "CIANO" | "BIANCO" | "GRIGIOCHIARO" |"GRIGIO” | "GRIGIOSCURO" | "ROSA" | "VERDE" | "MAGENTA" |"ARANCIONE" | "GIALLO" > Caratteristiche del grafico

7. Token della grammatica (2) | <STILE: "GRASSETTO" | "CORSIVO" | "NORMALE" > | <POSIZIONE: "SINISTRA" | "DESTRA" | "ALTO" | "BASSO" > | <MESE: "GEN" | "FEB" | "MAR" | "APR" | "MAG" | "GIU" | "LUG" | "AGO" | "SET" | "OTT" | "NOV" | "DIC" > | <CIFRA: ["0"-"9"]> | <NUM: ["1"-"9"] (<CIFRA>)* | "0"> | <NUMVIRG: ("+" | "-")? <NUM> "." (<CIFRA>)*> | <CARATTERE: ["a"-"z", "A"-"Z" ] | <CARATVARI> | <CIFRA> > | <CARATVARI: ["_", "\'", "!", "$“ ]> | <STRINGA: (<CARATTERE>)+ > Associare caratteristiche alla descrizione del grafico

8. Token della grammatica (2) | <STILE: "GRASSETTO" | "CORSIVO" | "NORMALE" > | <POSIZIONE: "SINISTRA" | "DESTRA" | "ALTO" | "BASSO" > | <MESE: "GEN" | "FEB" | "MAR" | "APR" | "MAG" | "GIU" | "LUG" | "AGO" | "SET" | "OTT" | "NOV" | "DIC“ > | <CIFRA: ["0"-"9"]> | <NUM: ["1"-"9"] (<CIFRA>)* | "0"> | <NUMVIRG: ("+" | "-")? <NUM> "." (<CIFRA>)*> | <CARATTERE: ["a"-"z", "A"-"Z" ] | <CARATVARI> | <CIFRA> > | <CARATVARI: ["_", "\'", "!", "$“ ]> | <STRINGA: (<CARATTERE>)+ > Caratteristiche temporali

9. Token della grammatica (2) | <STILE: "GRASSETTO" | "CORSIVO" | "NORMALE" > | <POSIZIONE: "SINISTRA" | "DESTRA" | "ALTO" | "BASSO" > | <MESE: "GEN" | "FEB" | "MAR" | "APR" | "MAG" | "GIU" | "LUG" | "AGO" | "SET" | "OTT" | "NOV" | "DIC" > | <CIFRA: ["0"-"9"]> | <NUM: ["1"-"9"] (<CIFRA>)* | "0"> | <NUMVIRG: ("+" | "-")? <NUM> "." (<CIFRA>)*> | <CARATTERE: ["a"-"z", "A"-"Z" ] | <CARATVARI> | <CIFRA> > | <CARATVARI: ["_", "\'", "!", "$“ ]> | <STRINGA: (<CARATTERE>)+ > Valori presenti nel grafico

10. Token della grammatica (2) | <STILE: "GRASSETTO" | "CORSIVO" | "NORMALE" > | <POSIZIONE: "SINISTRA" | "DESTRA" | "ALTO" | "BASSO" > | <MESE: "GEN" | "FEB" | "MAR" | "APR" | "MAG" | "GIU" | "LUG" | "AGO" | "SET" | "OTT" | "NOV" | "DIC" > | <CIFRA: ["0"-"9"]> | <NUM: ["1"-"9"] (<CIFRA>)* | "0"> | <NUMVIRG: ("+" | "-")? <NUM> "." (<CIFRA>)*> | <CARATTERE: ["a"-"z", "A"-"Z" ] | <CARATVARI> | <CIFRA> > | <CARATVARI: ["_", "\'", "!", "$“ ]> | <STRINGA: (<CARATTERE>)+ > Rappresentazione stringhe presenti nel grafico

11. Grammatica - Scope • Il simbolo inizialeScopedella grammatica Scope ::= "Grafico" "{" "tipo grafico" "{" Tipo "}" ";" "nome finestra" "{" ( StringaComposta )? "}" ";" "titolo grafico" "{" ( StringaComposta )? "}" ";" "sottotitolo" "{" ( Sottotitolo )? "}" ";" "sfondo finestra" "{" ( <COLORE> )? "}" ";" "sfondo grafico“ "{" ( <COLORE> )? "}" ";" "}" <EOF> • Lo Scope della grammatica richiede: • tipo grafico descrizione del grafico da realizzare • nome finestra • titolo grafico • sottotitolo • sfondo finestra • sfondo grafico StringaComposta ::= <STRINGA> ( <STRINGA> )* permettono il settaggio di parametri generali relativi alla visualizzazione del grafico stesso

12. Grammatica – Parametri generali • Descrizione del sottotitolo Sottotitolo ::= "[" StringaComposta "]" "," ProprietaCarattere ",“ <POSIZIONE> ProprietaCarattere ::= <STILE> "," <NUM> Esempio: sottotitolo{ [DifferenceChart permette di realizzare grafici di Differenza], GRASSETTO, 15, BASSO }; <STILE: "GRASSETTO" |"CORSIVO“|"NORMALE" > <POSIZIONE: "SINISTRA" |"DESTRA" |"ALTO" |"BASSO" >

13. Grammatica – costruzione grafico (1) • Tipo – costruzione del grafico • Classificazione Grafici: • SingleVal: serie che compongono il grafico a singolo valore • MultiVal: serie che compongono il grafico a più valori, suddivisi in: • Orientati • Non orientati Tipo ::= ( SingleVal | MultiVal ) SingleVal ::= <PIE> ",“ <DIM> "," <NUM> "," ( "[" SerieCategVal "]" <COLORE> )+ MultiVal ::= NomeAssi "," ( ( <ORIENTAZIONE> "," ConOrient | NoOrient ) ) NomeAssi ::= StringaComposta "," StringaComposta

14. Grammatica – costruzione grafico (2) • Due categorie di grafici multival: • Grafici orientati Grafico = parametro generale + serie dati ConOrient ::= ( Category | XY | StepLine | Histogram ) Grafico = tipologia "," ( attributi generali serie ( serie dati)+ )+ • Grafici non orientati NoOrient ::= ( TimeSeries | Difference | Gantt ) GenSerie ::= <STRINGA> ",“ ( <COLORE> )? • Stringa descrittiva serie • Colore serie

15. Grammatica – costruzione grafico (2) • Modellazione dei Dati delle Serie: SerieCategVal ::= <STRINGA> "," <NUMVIRG> [ Categoria1 , 3.24] SerieXY ::= <NUMVIRG> "," <NUMVIRG> [1.13 , 700.2] [ Ottenere_Approvazione, 9-APR-2010 ,10-APR-2010] GanttData ::= <STRINGA> "," Data "," Data DataValore ::= Data "," <NUMVIRG> [ 2-MAG-2009 , 124.1] [19-FEB-2010 , 8.0 , 16:0] SerieStepData ::= DataValore "," Orario [4.6; 6.6; 3.0; 7.3;] HistogramData ::= <NUMVIRG> ";" Data ::= <NUM> "-" <MESE> "-" <NUM> Orario ::= <NUM> “:” <NUM>

16. Grammatica – costruzione grafico (2) Category ::= <CATEGORYCHART> "," ( "{" GenSerie "," ( "[" SerieCategVal "]" )+ "}" )+ • Grafici orientati • Raggruppa diverse tipologie di grafici: • Barre • 2D / 3D • stacked • Area • Classica • Stacked • Line • Population ConOrient ::= ( Category | XY | StepLine | Histogram ) • Grafici non orientati NoOrient ::= ( TimeSeries | Difference | Gantt )

17. Grammatica – costruzione grafico (2) XY ::= <XYCHART> "," ( "{" GenSerie "," ( "[" SerieXY "]" )+ "}" )+ • Grafici orientati • Raggruppa 2 tipologie di grafici: • Area XY • Barre XY ConOrient ::= ( Category | XY | StepLine | Histogram ) • Grafici non orientati NoOrient ::= ( TimeSeries | Difference | Gantt )

18. Grammatica – costruzione grafico (2) • Grafici orientati StepLine ::= <STEP_LINE> "," ( "{" GenSerie "," ( "[" SerieStepData "]" )+ "}" "," "tratteggio:" <NUMVIRG> "," "spessore:“ <NUMVIRG> )+ ConOrient ::= ( Category | XY | StepLine | Histogram ) • Grafici non orientati NoOrient ::= ( TimeSeries | Difference | Gantt )

19. Grammatica – costruzione grafico (2) Histogram ::= <HISTOGRAM> "," ( "{" GenSerie "," "[" ( HistogramData )+ "]" "," <NUM> "}")+ • Grafici orientati ConOrient ::= ( Category | XY | StepLine | Histogram ) • Grafici non orientati NoOrient ::= ( TimeSeries | Difference | Gantt )

20. Grammatica – costruzione grafico (2) TimeSeries ::= <TIME_SERIES> "," ( "{" GenSerie "," ( "[" DataValore "]" )+ "}" )+ • Grafici orientati ConOrient ::= ( Category | XY | StepLine | Histogram ) • Grafici non orientati NoOrient ::= ( TimeSeries | Difference | Gantt )

21. Grammatica – costruzione grafico (2) Difference ::= <DIFFERENCE> "," DifferenceData DifferenceData "MINORE" "{" <COLORE> "}" "," "MAGGIORE" "{" <COLORE> "}" • Grafici orientati ConOrient ::= ( Category | XY | StepLine | Histogram ) DifferenceData ::= "{" GenSerie "," ( "[" DataValore "]" )+ "}" • Grafici non orientati NoOrient ::= ( TimeSeries | Difference | Gantt )

22. Grammatica – costruzione grafico (2) • Grafici orientati Gantt ::= <GANTT> "," ( "{" GenSerie "," ( "[" GanttData "]" )+ "}" )+ ConOrient ::= ( Category | XY | StepLine | Histogram ) • Grafici non orientati NoOrient ::= ( TimeSeries | Difference | Gantt )

23. Proprietà della grammatica • La grammatica è di Tipo 2 (context-free) secondo la classificazione di Chomsky, in quanto tutte le produzioni risultano essere nella forma • Il linguaggio generato dalla grammatica risulta essere di Tipo 3 (regolare) in quanto la grammatica non contiene self-embedding, ovvero non prevede simboli non terminali autoinclusivi del tipo: A → β A δ dove A є VN e δ,β є V+ A α con α (VT VN)*, A VN Non c’è vincolo α != є

24. Osservazioni sulla grammatica • La grammatica è LL(1): • Ogni metasimbolo a sinistra di più produzioni ha starter simbolsdelle parti destre di produzioni alternative disgiunti (NECESSARIA) • il riconoscitore utilizza al più un simbolo per riconoscere con certezza la produzione da scegliere • Nessunmetasimbolo genera stringa vuota (SUFFICIENTE)

25. Flusso d’esecuzione e Interpretazione • Analisi lessicale (Lexer o Scanner) • Data una sequenza di caratteri restituisce i token che compaiono • Analisi sintattica-semantica (Parser) • Data una sequenza token verifica attinenza alle regole grammaticali • Produce l’ AST • Visitor • Percorre l’albero APT mediante la tecnica del doubledispatch Specifica del grafico secondo grammatica • Scanner • Parser • Specifica • AST • Visitor

26. Package dell’applicazione • Chart • Contiene le classi per la gestione generale del grafico e dei diversi dataset • ChartCreator • Contiene tutte le classi per realizzare il grafico • Dataset • Contiene tutte le classi per gestire correttamente le diverse serie dati dei differenti grafici • ProduChart.gui • Contiene le interfacce grafiche ed il manager dell’applicazione • Visitor • Contiene i Visitor creati da JTB in automatico • ProduChartVisitor • Contiene i visitor realizzati che estendono la classe DepthFirstVisitor • syntaxTree • Contiene le classi necessarie per la costruzione dell’AST • parser • Contiene le classi per lo scanning, il parsing

27. Package dell’applicazione

28. Diagramma delle classi –Dataset • Dataset • Contiene tutte le classi per gestire correttamente le diverse serie dati dei differenti grafici

29. Diagramma delle classi –Creazione grafici • ChartCreator • Contiene tutte le classi per realizzare il grafico

30. Diagramma delle classi –classi JavaCC Lexer: - contiene il metodo getNextToken - riconosce i token descritti dalle espressioni regolari Parser: chiama il lexer ogni volta che necessita del prossimo token. Contiene un metodo per ogni simbolo non terminale presente nella specifica della grammatica Ogni chiamata al metodo getNextToken() restituisce un oggetto di questa classe

31. Diagramma delle classi –classi Visitor Automaticamente generato da JTB Pattern visitor: Ciascun visitor realizza una visita di tipo depth-first avvalendosi del meccanismo doubledispatch. I visitor hanno un metodo visit per ogni classe rappresentante un nodo dell’ APT. Le classi visitate accetteranno la visita richiamando il metodo visit con argomento “this”. Esempio di classe della tassonomia

32. Diagramma delle classi –classi Visitor Automaticamente generato da JTB • ProduChartVisitor • Percorre l’albero ed istanzia tutti gli oggetti neces-sari per produrre il grafico • Effettua gli opportuni controlli semantici • Correttezza delle date: • Correttezza degli orari: • ProduChartXmlVisitor • Percorre l’albero e costruisce un documento XML • ProduChartTreeVisitor • Percorre l’albero e costruisce una struttura TreeNode Data ::= <NUM> "-" <MESE> "-" <NUM> Orario ::= <NUM> “:” <NUM>

33. Funzionalità aggiuntive • Ulteriori funzionalità: • Salvataggio del programma in XML • “ Più si struttura l’informazione, meno fatica si fa ad elaborarla “ • Salvataggio del grafico prodotto in PDF • Esportare il grafico come immagine

34. Limiti e sviluppi futuri • Oltre al salvataggio, prevedere la lettura dei dati delle serie da XML • Ampliare il numero dei grafici supportati • Ampliare le funzionalità esprimibili dall’utente mediante il linguaggio • Console per la scelta del colore • Stili del grafico (tratteggio,ecc.) • WIZARD per una definizione più semplice del file del grafico nel linguaggio realizzato • Inserimento di più grafici contemporaneamente • Per confronto • Per modellare diversi aspetti afferenti a grafici diversi

35. Strumenti utilizzati • Linguaggio: Java(jdk1.6.0_10) • Ambiente di sviluppo: NetBeans IDE 6.8 • Generazione automatica parser: JavaCC 5.0 • Strumento per la generazione automatica delle classi necessarie a creare l’albero sintattico (AST) e per l’implementazione di Visitor che operano depth-first: Java Tree Builder 1.3.2 • Strumento di produzione grafici: JFreeChart

36. Demo