Dashboard Interattiva in Oracle APEX

Una dashboard, chiamata anche cruscotto, è uno strumento usato principalmente per visualizzare indicatori aziendali utili per avere un’indicazione immediata su un particolare aspetto di una realtà aziendale.

A chi serve una dashboard?

Ad esempio, è utile a chi deve controllare o mostrare dati di processi in evoluzione, come nel caso della contabilità aziendale, nella gestione della produzione, della logistica, della gestione dei progetti e molto altro.

In una dashboard le informazioni vengono generalmente rappresentate tramite dei grafici che permettono di rendere accessibili a colpo d’occhio ed in tempo reale molte informazioni anche di diversa natura e complessità.

Una cosa importante da tenere a mente è la differenza sostanziale che c’è tra una dashboard e un report, quest’ultimo tipicamente molto più dettagliato e con molte più informazioni.

Oracle APEX dispone di numerosi componenti che consentono di creare dashboard ed in questo articolo desidero spiegarti come fare.

In particolare imparerai:

• come strutturare una dashboard
• come configurare alcuni tipi di grafici (scoprirai che la libreria che APEX mette a disposizione è davvero ragguardevole)
• come implementare i filtri e rendere una dashboard interattiva

Inoltre, collegandoti a questo link puoi visualizzare una dashboard di esempio che ho preparato per questo tutorial.

Applicazione Customer Satisfaction

Supponiamo di essere una azienda che vende prodotti tramite il proprio store online.

I potenziali clienti possono raggiungere il nostre e-commerce tramite una ricerca organica (Organic Search) in Internet oppure tramite campagne di advertising (Advertising).

Ovviamente ci sono anche i clienti già fidelizzati che fanno acquisiti regolari (Returning Customers).

All’interno del nostro gestionale siamo in grado di tracciare per ogni ordine di vendita ricevuto, se è stato spedito nei tempi previsti, se il cliente ha fatto un reso ed anche il modo con il quale è venuto in contatto con noi.

Quello che vogliamo fare è creare una applicazione in APEX che grazie una dashboard interattiva permetta di visualizzare le seguenti performance aziendali:

• andamento delle vendite negli anni
• percentuale di spedizioni eseguite nei tempi previsti
• percentuale dei resi
• indice di soddisfazione del cliente

Se lo desideri, puoi scaricare da qui un file excel con dei dati di esempio che ho preparato per questo tutorial.

Ora che hai qualche dato di test, possiamo iniziare con la cosa più facile, ovvero la creazione di una applicazione APEX.

• Accedi all’APP Builder e premi Create APP
• Seleziona l’opzione Create an Application From File per creare una APP da un file excel.
• Per comodità, chiameremo la tabella del database dove andremo a caricare i dati SAMPLE_DATA

• Completa gli step di creazione dell’applicazione ed avvia l’APP
• Quello dovresti ottenere fin da subito è una applicazione già funzionante dotata, tra l’altro, di una pagina Dashboard

• Infatti, Oracle APEX ha creato automaticamente una serie di grafici basandosi sui dati che ha letto dalla tabella SAMPLE_DATA.

Ovviamente tutto ciò è molto bello perché in pochi minuti già hai creato una applicazione web completa che dispone di molte funzionalità utili.

Ma a noi non basta.

Vogliamo creare una dashboard interattiva più bella ed evoluta.

Creare una dashboard in Oracle APEX: da dove iniziare?

Creare una dashboard in Oracle APEX non è un lavoro complicato: ti basta avere qualche conoscenza di base di SQL e un’idea chiara di cosa vuoi fare.

A tal proposito, mi sento di dire che non esiste un metodo esatto per creare la dashboard perfetta perché dipende sia dal contesto ma anche e soprattutto dale esigenze degli utenti.

Ecco perché voglio suggerirti alcune regole da tenere a mente quando progetti una dashboard in Oracle APEX.

Regola 1: definisci gli obiettivi

Ovvero dovresti rispondere alla domanda: qual è l’obiettivo della dashboard?

Devi sapere che lo scopo principale di una dashboard è quello di aiutare a prendere delle decisioni oppure focalizzare l’attenzione su un particolare aspetto o numero.

Ad esempio, una dashboard che ha come obiettivo quello di mostrare l’evoluzione delle vendite di uno o più prodotti potrebbe spiegare determinati andamenti usando indicatori come:

• la soddisfazione del cliente, misurabile con un indice di gradimento
• la percentuale delle spedizioni eseguite nei tempi previsti
• la percentuale di resi

Ovviamente, questo è solo un esempio.

La cosa importante da ricordare è che il primo punto da smarcare per costruire una dashboard efficace, che sia creata in Oracle APEX, Excel o Power BI, è avere bene chiaro in testa qual è il suo obiettivo e a cosa serve.

Regola 2: definisci una struttura

Dopo aver definito lo scopo della dashboard, devi pensare a come mostrare le informazioni.

L’obiettivo è quello di creare un modello facile da leggere e con un impatto visivo immediato, che focalizzi l’attenzione sugli indicatori più significativi.

Oracle APEX mette a disposizione una vasta scelta di componenti: grafici a torte, a barre, funnel, diagrammi di Pareto, ecc.. (clicca qui per l’elenco completo)

Un’altra cosa molto importante consiste nell’organizzare la struttura della tua dashboard affinché sia ben bilanciata e non dispersiva.

Regola 3: utilizza un layout pulito

Anche l’occhio vuole la sua parte.

Il mio consiglio è di usare pochi colori ed evitare orpelli grafici: in questo modo renderai la tua dashboard più comprensibile e facile da leggere.

L’enfasi va data ai numeri, che devono essere ben evidenti.

Inoltre ricorda che una dashboard efficace non deve mostrare tutte le informazioni (per quello ci sono i report), quindi cerca di costruire un layout sintetico e coerente, dal quale sia poi possibile eventualmente fare drill-down fino al singolo record.

Step 1: Crea una Dashboard Page

Bene, fatte le dovute premesse possiamo finalmente iniziare il lavoro.

• Accedi all’APP Builder di Oracle APEX
• Clicca Create Page e seleziona Blank Page

• Dai un nome alla dashboard page e premi Next

• Collega la Dashboard Page al Navigation Menu e premi Next e successivamente premi Finish per completare la creazione della pagina.
• Se lo desideri, puoi impostare la pagina che hai appena creato come Home Page della tua app.

Bene, adesso configuriamo il layout della pagina

• Dall’APP Builder seleziona la pagina Dashboard APP

• Seleziona la Page Root

• Vai alla sezione Appearance > Page Template e seleziona l’opzione Left Side Column

• Con questo tipo di layout utilizzeremo la sezione Left Column per implementare i filtri della dashboard mentre nel Body andremo ad inserire i vari grafici.

• Seleziona il nodo Body e crea due Page Region
  • Left Body
  • Right Body

• Per ciascuna delle due Page Region appena create vai in Appearance > Region Template e seleziona il template Blank with Attributes.

• Seleziona la Page Region Right Body e vai in Layout. Imposta la proprietà Start New Row a Off

• Seleziona la Page Region Left Body. Clicca il pulsante destro del mouse e seelziona Create Sub Region per creare tre nuove Static Region
  • Sales
  • Deliveries
  • Acquisition

• Seleziona la Page Region Acquisition

• Vai in Layout ed imposta la seguente proprietà
  • Start New Row = Off

• Seleziona la Page Region Right Body ed aggiungi una nuova Page Region di nome Satisfaction

• Seleziona la Page Region Right Body. Vai in Layout > Column Span ed imposta il valore a 5

Esegui la Page Preview. Se hai fatto tutto correttamente dovresti vedere le Page Regions organizzate in questo modo

Nel prossimo paragrafo andremo a costruire all’interno di ciascuna Page Region i grafici.

Step 2: Configura i Grafici (Charts)

Prima di buttarci a capofitto nella definizione di ogni singolo grafico, creiamo i Page Items che utilizzeremo per implementare i filtri della dashboard.

In questo modo possiamo fin da subito includerli nelle query che useremo per alimentare i vari Charts.

Nel paragrafo successivo di questo tutorial completeremo la loro configurazione.

Page Items

• Accedi all’APP Builder, posizionati sotto il componente Left Column e crea una nuova Page Region di nome Page Filters

• Crea i seguenti Page Items dove X è il page number della tua pagina APEX. Per il momento lascia questi Page Items di tipo Text Field poi successivamente andremo a configurarli nel dettaglio
  • PX_YEAR
  • PX_CUSTOMER_ACQUISITION
  • PX_PRODUCT
  • PX_STATE

Sales

Il primo grafico che creiamo ha come obiettivo quello di mostrare l’andamento dei ricavi nel tempo.

• Crea una nuova Page Region di nome Sales Chart

• Seleziona la Page Region Sales Chart ed imposta il tipo a Chart

• Dopo aver seleziona il tipo Chart, Oracle APEX mostrerà le opzioni di configurazione di questo tipo di Page Region. In particolare verrà mostrato un oggetto di tipo Serie di nome New all’interno del quale andremo a specificare l’Origine Dati che il grafico deve utilizzare.

• Seleziona l’oggetto Serie che APEX ha creato e rinominalo in Sales

• Seleziona la Serie e vai Source per configurarne le proprietà
  • Type: SQL Query
  • SQL Query: inserisci la seguente query SQL (ricordati sostituire i parametri con i nomi dei Page Items che hai creato pochi minuti fa)
  • Page Items to Submit: specifica i Page Items della pagina: PX_YEAR, PX_CUSTOMER_ACQUISITION, PX_PRODUCT, PX_STATE

select revenue_date, revenue, to_char(revenue_date,'MON-YY') chart_label
from (select trunc(revenue_date,'MONTH') revenue_date, sum(revenue) revenue
      from sample_data
     where 1=1
       and (instr(':'||:p2_year||':',':'|| EXTRACT(YEAR FROM revenue_date) ||':') > 0 or :p2_year is null)
       and (instr(':'||:p2_customer_acquisition||':',':'|| customer_acquisition_type ||':') > 0 or :p2_customer_acquisition is null)
       and (instr(':'||:p2_product||':',':'|| product ||':') > 0 or :p2_product is null)
       and (instr(':'||:p2_state||':',':'|| state ||':') > 0 or :p2_state is null)
  group by trunc(revenue_date,'MONTH')
) order by revenue_date

• Vai in Column Mapping e configura le seguenti proprietà
  • Label: CHART_LABEL
  • Value: REVENUE

Così configurato, il grafico è già funzionante: è sufficiente lanciare la Page Preview per rendersene conto:

Completiamo la sua configurazione.

• Seleziona il grafico

• Vai in Appearance > Template e seleziona l’opzione Blank with Attributes

• L’effetto sarà quello di mascherare la region del grafico all’interno della Page Region Sales

• Apri la sezione Attributes e seleziona l’opzione Chart > Type: Line

• Imposta l’altezza massima del Layout a 250 pixels

• Esegui la Page Preview per vedere il risultato

Deliveries

Nella sezione Deliveries mostreremo 2 indicatori:

• La percentuale delle spedizioni eseguite nei tempi previsti (on-time)
• La percentuale dei resi cliente (returns)

• Clicca sulla Page Region Deliveries e crea 2 Sub Region
  • On Time Chart
  • Returns Chart

On Time Chart

• Identification > Type: Chart
• Appearance > Region Template: Blank with Attributes
• Attributes > Chart > Type: Status Meter Gauge

• Layout
  • Maximum Width: blank
  • Height: 150 pixels

• Gauge
  • Orientation: Circular
  • Indicator Size: 2
  • Inner Radius: 0.9

• Value
  • Value Type: Percent
  • Format: Percent
  • Decimal Places: 2

• Seleziona lao Serie e rinominala in On Time.

Configuriamo le proprietà della Serie On Time

• Source > SQL Query: inserisci la query seguente tenendo a mente che devi sostituire i suoi parametri con in nomi dai Page Items che hai creato precedentemente

select 
(select performace 
  from (select delivery_performance, count(delivery_performance) performace 
          from sample_data 
         where 1=1
           and (instr(':'||:p2_year||':',':'|| EXTRACT(YEAR FROM revenue_date) ||':') > 0 or :p2_year is null)
           and (instr(':'||:p2_customer_acquisition||':',':'|| customer_acquisition_type ||':') > 0 or :p2_customer_acquisition is null)
           and (instr(':'||:p2_product||':',':'|| product ||':') > 0 or :p2_product is null)
           and (instr(':'||:p2_state||':',':'|| state ||':') > 0 or :p2_state is null)
      group by delivery_performance)
where delivery_performance = 'on-time') value,
(select count(1)
   from sample_data 
  where 1=1
    and (instr(':'||:p2_year||':',':'|| EXTRACT(YEAR FROM revenue_date) ||':') > 0 or :p2_year is null)
    and (instr(':'||:p2_customer_acquisition||':',':'|| customer_acquisition_type ||':') > 0 or :p2_customer_acquisition is null)
    and (instr(':'||:p2_product||':',':'|| product ||':') > 0 or :p2_product is null)
    and (instr(':'||:p2_state||':',':'|| state ||':') > 0 or :p2_state is null)
    ) max_value,
'ON-TIME' as label
from dual

• Page Items to Submit: specifica i Page Items della pagina: PX_YEAR, PX_CUSTOMER_ACQUISITION, PX_PRODUCT, PX_STATE

• Column Mapping:
  • Label: LABEL
  • Value: VALUE
  • Maximum Value: MAX_VALUE

• Label:
  • Show: Yes
  • Font Style: Normal
  • Font Size: 18

Returns Chart

Questo grafico andrà configurato esattamente nello stesso modo di quello precedente, ad eccezione della query SQL.

• Identification > Type: Chart
• Appearance > Region Template: Blank with Attributes
• Layout > Start New Row: No

• Attributes > Chart > Type: Status Meter Gauge

• Attributes > Layout:
  • Maximum Width: blank
  • Height: 150 pixels

• Attributes > Gauge
  • Indicator Size: 2
  • Inner Radius: 0.9

• Seleziona la Serie e rinominalo Returns. In modo del tutto simile a quanto fatto per la serie On Time andiamo ad impostare le sue proprietà come indicato negli step successivi

• Source > SQL Query: inserisci la query seguente tenendo a mente che devi sostituire i suoi parametri con in nomi dai Page Items che hai creato precedentemente

select 
(select performace 
  from (select return, count(return) performace 
          from sample_data 
         where 1=1
           and (instr(':'||:p2_year||':',':'|| EXTRACT(YEAR FROM revenue_date) ||':') > 0 or :p2_year is null)
           and (instr(':'||:p2_customer_acquisition||':',':'|| customer_acquisition_type ||':') > 0 or :p2_customer_acquisition is null)
           and (instr(':'||:p2_product||':',':'|| product ||':') > 0 or :p2_product is null)
           and (instr(':'||:p2_state||':',':'|| state ||':') > 0 or :p2_state is null)
      group by return)
where return = 'yes') value,
(select count(1)
   from sample_data 
  where 1=1
    and (instr(':'||:p2_year||':',':'|| EXTRACT(YEAR FROM revenue_date) ||':') > 0 or :p2_year is null)
    and (instr(':'||:p2_customer_acquisition||':',':'|| customer_acquisition_type ||':') > 0 or :p2_customer_acquisition is null)
    and (instr(':'||:p2_product||':',':'|| product ||':') > 0 or :p2_product is null)
    and (instr(':'||:p2_state||':',':'|| state ||':') > 0 or :p2_state is null)
    ) max_value,
'RETURNS' as label
from dual

• Page Items to Submit: specifica i soliti Page Items della pagina: PX_YEAR, PX_CUSTOMER_ACQUISITION, PX_PRODUCT, PX_STATE

• Column Mapping:
  • Label: LABEL
  • Value: VALUE
  • Maximum Value: MAX_VALUE

• Label:
  • Show: Yes
  • Font Style: Normal
  • Font Size: 18

Questo è il risultato finale. Iniziamo a vedere la nostra dashboard!

Acquisition

Nella sezione Acquisition della dashboard visualizzeremo con un grafico a barre quali sono le modalità di acquisizione dei clienti (Organic Search, Advertising, Returning).

• Crea una nuova Page Region di tipo Chart

• Clicca su Region e configura le seguenti proprietà
  • Identification > Title : Acquisition Chart
  • Identification > Type: Chart
  • Appearance > Template: Blank with Attributes

• Clicca su Attributes e seleziona le seguenti opzioni
  • Attributes > Chart > Type: Bar
  • Attributes > Layout > Height: 150 pixels

• Esegui la Page Preview per vedere il risultato

Satisfaction

Completiamo la configurazione della dashboard APEX con l’ultimo grafico in cui mostreremo per ogni prodotto l’indice di gradimento dei clienti.

In questo caso vorrei usare un grafico a barre in pila perché permette di comparare meglio le differenze di gradimento tra un prodotto e l’altro.

• Vai alla Page Region Satisfaction e crea una nuova Page Region di tipo Chart

• Clicca sul tab Region e configura le sue proprietà di base
  • Identification > Title: Satisfaction Chart
  • Identification > Type: Chart
  • Appearance > Template: Blank with Attributes

• Clicca sul tab Attributes e seleziona le seguenti opzioni
  • Chart > Type: Bar
  • Appearance > Orientation: Horizontal
  • Stack: Yes
  • Stack Label: Yes

• Seleziona la Serie

• Vai alla sezione Source e imposta le seguenti proprietà
  • Type: SQL Query
  • Source Query: inserisci la query SQL riportata qui sotto
  • Page Items to Submit: PX_YEAR, PX_CUSTOMER_ACQUISITION, PX_PRODUCT, PX_STATE

select id, label, value, series,color from (
  select product as id,
         products.product as label,
         cust_satisfaction.customer_satisfaction as series,
        (select count(1) from sample_data 
          where sample_data.product = products.product 
            and sample_data.customer_satisfaction = cust_satisfaction.customer_satisfaction
            and (instr(':'||:p2_year||':',':'|| EXTRACT(YEAR FROM revenue_date) ||':') > 0 or :p2_year is null)
            and (instr(':'||:p2_customer_acquisition||':',':'|| customer_acquisition_type ||':') > 0 or :p2_customer_acquisition is null)
            and (instr(':'||:p2_product||':',':'|| product ||':') > 0 or :p2_product is null)
            and (instr(':'||:p2_state||':',':'|| state ||':') > 0 or :p2_state is null)
            ) value,
        (case cust_satisfaction.customer_satisfaction 
            when '(1) very low' then '#D62828'
            when '(2) low' then '#F77F00'
            when '(3) ok' then '#FFEEE2'
            when '(4) high' then '#7796CB'
            when '(5) very high' then '#0CCE6B'
            else null end) as color
   from (select distinct product from sample_data) products,
        (select distinct customer_satisfaction from sample_data) cust_satisfaction
  where 1=1
  order by products.product,cust_satisfaction.customer_satisfaction)
  order by id, series

• Vai alla sezione Column Mapping
  • Series Name: Series
  • Label: LABEL
  • Value: VALUE

• Seleziona l’asse Y

• Vai alla sezione Value ed imposta i seguenti valori
  • Minimum: 0
  • Maximum: 1
  • Format: Percent
  • Format Scaling: Automatic

• Esegui la Preview per vedere il risultato

Ci sei riuscito? Bene!

Hai costruito una bellissima dashboard in Oracle APEX.

Nel prossimo paragrafo andremo a configurare i filtri per rendere il tutto interattivo.

Step 3: Configura i Filtri

All’inizio del paragrafo precedente abbiamo creato quattro Page Items che abbiamo utilizzato nelle query dei grafici implementati nella dashboard.

Quello che faremo ora è completare la loro configurazione affinché non siano dei semplici Text Field ed implementeremo, inoltre, l’aggiornamento in tempo reale della dashboard.

Filtro Year

• Seleziona il Page Item PX_YEAR

• Vai alla sezione Identification e seleziona le seguenti opzioni
  • Type: Checkbox Group

• Vai alla sezione List of Values e specifica le seguenti informazioni
  • Type: SQL Query
  • SQL Query: inserisci la query seguente

select revenue_year display_value, revenue_year return_value from( 
    select distinct EXTRACT(YEAR FROM revenue_date) revenue_year  from sample_data
) order by revenue_year

• Vai alla sezione Appearance > Template Options
  • Stretch Form Item: Yes
  • Item Group Display: Display as Pill Button

• Esegui la Page Preview per verificare il risultato

Filtro Customer Acquisition

• Seleziona il Page Item PX_CUSTOMER_ACQUISITION

• Vai alla sezione Identification e seleziona le seguenti opzioni
  • Type: Checkbox Group

• Vai alla sezione List of Values e specifica le seguenti informazioni
  • Type: SQL Query
  • SQL Query: inserisci la query seguente

select customer_acquisition_type dispaly_value, customer_acquisition_type return_value from (
select distinct customer_acquisition_type from sample_data)

• Vai alla sezione Appearance > Template Options
  • Stretch Form Item: Yes
  • Item Group Display: Display as Pill Button

• Esegui la Page Preview per verificare il risultato

Filtro Product

• Seleziona il Page Item PX_PRODUCT
• Seleziona il Type Popup LOV

• Vai in Settings
  • Display As: Inline Popup
  • Initial Fetch: Automatic
  • Multiple Values: Yes
  • Separator: ‘:’
  • Search as You Type: Yes
  • Minimum Characters: 0

• Configurazione della List of Values
  • Type: SQL Query
  • SQL Query:

select product dispaly_value, product return_value from (
select distinct product from sample_data)
order by product;

Filtro State

• Seleziona il Page Item PX_STATE

• Seleziona il Type Popup LOV

• Vai in Settings
  • Display As: Inline Popup
  • Initial Fetch: Automatic
  • Multiple Values: Yes
  • Separator: ‘:’
  • Search as You Type: Yes
  • Minimum Characters: 0

• Configurazione della List of Values
  • Type: SQL Query
  • SQL Query:

select state dispaly_value, state return_value from (
select distinct state from sample_data)
order by state;

Step 4: Configura il Refresh

• Dall’APP Builder, clicca sul tab Dynamic Action

• Clicca con il pulsante destro del mouse e seleziona l’opzione Create Dynamic Action

• Configura la Dynamic Action in questo modo
  • Name: Change Filter
  • Event: Change
  • Selection Type: Item(s)
  • Item(s): seleziona tutti i Page Items che abbiamo configurato nel paragrafo precedente
    • PX_YEAR
    • PX_CUSTOMER_ACQUISITION
    • PX_PRODUCT
    • PX_STATE

• Crea 5 Actions, ciascuna delle quali sarà di tipo Refresh. Ciascuna di queste Actions servirà per aggiornare uno specifico grafico.

• Action Refresh 1
  • Action: Refresh
  • Selection Type: Region
  • Region: Sales Chart

• Action Refresh 2
  • Action: Refresh
  • Selection Type: Region
  • Region: On Time Chart

• Action Refresh 3
  • Action: Refresh
  • Selection Type: Region
  • Region: Returns Chart

• Action Refresh 4
  • Action: Refresh
  • Selection Type: Region
  • Region: Acquisition Chart

• Action Refresh 5
  • Action: Refresh
  • Selection Type: Region
  • Region: Satisfaction Chart

• Se torni nella visualizzazione struttura della pagina, dovresti vedere la Dynamic Action che abbiamo creato legata a tutti i Page Items

• Esegui la Page Preview. Se hai fatto tutto correttamente, quando selezioni i filtri dovresti vedere la dashboard aggiornarsi dinamicamente in tempo reale.

Step 6: Ultimi Dettagli

Completiamo questo tutorial con due piccoli interventi che servono per impreziosire ulteriormente la pagina

Il primo consiste nel far si che APEX non mostri gli spinner quando scattano le Dynamic Actions: leggi come nascondere lo spinner quando viene eseguita una Dynamic Action.

La seconda cosa da fare consiste nel far sì che APEX non mostri questo warning quando decidi di lasciare la pagina.

• Seleziona la Page Root

• Vai in Navigation e disabilita l’opzione Warn on Unsaved Changes

Conclusioni

Bene, abbiamo finito.

Alla fine creare una dashboard non è una cosa così complicata, vero?

Certo, devi conoscere un po’ di linguaggio SQL, ma ammetterai che il risultato è sicuramente notevole.

Lascia un commento se hai trovato questo posto interessante o semplicemente per raccontarmi come crei i tuoi cruscotti aziendali in Oracle APEX.

Alla prossima,

Daniele