1. Introduzione
Google Data Studio ti consente di creare dashboard dinamiche e interattive con visualizzazioni dei dati accattivanti, il tutto senza costi. Le visualizzazioni della community sono una funzionalità di Data Studio che ti consente di creare visualizzazioni personalizzate con JavaScript che si integrano con i tuoi report di Data Studio.
Obiettivi didattici
In questo codelab imparerai:
- Come funziona una visualizzazione della community di Google Data Studio
- Come creare una visualizzazione della community con il nostro strumento di modelli a riga di comando
- Come utilizzare le librerie di visualizzazione JavaScript per creare visualizzazioni della community
- Come integrare la visualizzazione della community in una dashboard di Data Studio
Che cosa ti serve
Per completare questo codelab, ti serviranno:
- Accesso a internet, a un browser web e a un terminale, nonché al tuo editor di testo preferito
- Un Account Google
- Accesso a un bucket Google Cloud Storage
- Familiarità con JavaScript, Node.js e la riga di comando
Questo codelab presuppone:
- Hai già creato una visualizzazione della community (TODO link first codelab)
- Hanno familiarità con Google Cloud Storage
Per iniziare, crea una copia di questo report facendo clic su 
nell'angolo in alto a destra. Tienila aperta in un'altra scheda mentre segui il codelab.
2. Sondaggio rapido
Perché hai scelto questo codelab?
Come prevedi di utilizzare questo codelab/tutorial?
Come valuteresti la tua esperienza con Data Studio?
Quale opzione descrive meglio il tuo background?
Passa alla pagina successiva per inviare le informazioni del sondaggio.
3. Sviluppo di visualizzazioni della community con dscc-gen
dscc-gen
dscc-gen è uno strumento a riga di comando che fornisce modelli e workflow basati su opinioni per le visualizzazioni e i connettori della community. Il modello di visualizzazione della community fornisce una visualizzazione funzionante e un flusso di lavoro che ti consente di vedere immediatamente le modifiche al codice della visualizzazione e gli script per convalidare, creare e implementare le visualizzazioni.
Configurazione
dscc-gen utilizza gsutil negli script di deployment e npm e webpack per creare il codice JavaScript della visualizzazione della community.
- Installa npm sul computer locale.
- Segui la guida rapida di gsutil e configura un bucket Google Cloud Storage.
- Vai a una directory locale in cui vuoi individuare il progetto.
4. Avviare un nuovo progetto di visualizzazione della community dscc-gen
Apri un terminale ed esegui il comando:
npx @google/dscc-gen viz
dscc-gen ti chiederà un nome di progetto, una posizione di archiviazione GCS "dev" e una posizione di archiviazione "prod". Inserisci la posizione come URI con il protocollo gs, ad esempio gs://my-gs-project/example-dev. Una "posizione" può essere un bucket Cloud Storage o una cartella all'interno di quel bucket. Le due posizioni di archiviazione devono essere diverse. Lo strumento verificherà che tu abbia accesso ai valori inseriti. Se le posizioni non esistono, verranno create automaticamente.
Una volta creata una nuova visualizzazione della community, dscc-gen stampa le istruzioni su come iniziare. Il terminale avrà un aspetto simile al seguente (il tuo input in corsivo in grassetto):
$ npx @google/dscc-gen viz
npx: installed 345 in 14.957s
? Project name barchart
? What is your GCS dev directory? gs://community-visualizations-codelab/barchart-dev
? What is your GCS prod directory? gs://community-visualizations-codelab/barchart-prod
Installing dependencies...
Created new community viz: barchart
cd barchart and npm run start to begin working on your viz!
Modificherai i file in src/, in particolare index.js, index.json e index.css, per scrivere la visualizzazione.
I file in dist/ ti consentono di visualizzare l'anteprima della visualizzazione localmente in un browser. webpack.config.js viene utilizzato per eseguire la visualizzazione in locale. README.md fornisce una panoramica dei file e dei comandi del modello.
5. Visualizzare l'anteprima della visualizzazione in locale
Segui le istruzioni suggerite ed esegui questi comandi nel terminale:
cd <folder name>
npm run start
Si aprirà un browser con una pagina web simile a questa:
Scopri di più nel passaggio successivo.
6. [Info] Come dovrebbe funzionare il flusso di lavoro dscc-gen
Il modello di visualizzazione dscc-gen include una visualizzazione funzionante e istruzioni su come utilizzare il modello. Ecco la funzionalità principale:
Aggiorna il messaggio locale:nel modello è incluso un messaggio di esempio, ma è probabile che non rifletta il caso d'uso che vuoi supportare. Devi scaricare dati di esempio che riflettano la visualizzazione che vuoi creare.
Flusso di lavoro di sviluppo locale: utilizza i dati di Aggiorna i dati locali, scrivi e testa il codice localmente.
Crea ed esegui il deployment della visualizzazione: crea il codice e caricalo nei bucket Google Cloud Storage.
Carica la visualizzazione in Data Studio:aggiungi la visualizzazione al report di Data Studio.
7. Definisci una configurazione
Il file di configurazione è il contratto tra te (lo sviluppatore della visualizzazione) e l'editor del report che utilizza la visualizzazione. Definisce le opzioni disponibili una volta caricata la visualizzazione in Data Studio.
Per questa visualizzazione del grafico a barre, la configurazione avrà una dimensione e una metrica, nonché un elemento di stile che consente all'editor del report di modificare lo stile del grafico a barre.
Sostituisci i contenuti di src/index.json con quanto segue. Assicurati di includere tutte le parentesi. Se lo stai digitando di nuovo, presta attenzione alla differenza tra parentesi quadre e graffe e alla struttura di nidificazione.
index.json
{
"data": [
{
"id": "concepts",
"label": "Concepts",
"elements": [
{
"id": "dimension",
"label": "Dimensions",
"type": "DIMENSION",
"options": {
"min": 1,
"max": 1
}
},
{
"id": "metric",
"label": "Metric",
"type": "METRIC",
"options": {
"min": 1,
"max": 1
}
}
]
}
],
"style": [
{
"id": "barStyling",
"label": "Bar Styles",
"elements": [
{
"id": "barColor",
"label": "Bar Color",
"type": "FILL_COLOR",
"defaultValue": {
"color": "#1E555C"
}
}
]
}
]
}
8. Scarica il messaggio aggiornato
Per aggiornare i dati memorizzati localmente, esegui:
npm run update_message
Il terminale dovrebbe avere un aspetto simile a questo:
barchart $ npm run update_message
> @ update message /Users/Code/barchart
> dscc-scripts viz update_message -f object
Copying file://build/index.js [Content-Type=application/javascript]...
Copying file://build/index.css [Content-Type=text/css]...
Copying file://build/manifest.json [Content-Type=application/json]...
Copying file://build/index.json [Content-Type=application/json]...
\ [4 files][ 48.5 KiB/ 48.5 KiB]
Operation completed over 4 objects/48.5 KiB.
Viz deployed to gs://community-visualizations-codelabs/barchart-dev
Questo comando esegue il deployment di una visualizzazione in Data Studio che stampa i dati ricevuti in una visualizzazione locale. Gli script stampano la posizione di deployment della visualizzazione (evidenziata sopra). Utilizzerai questa posizione per caricare la visualizzazione in Data Studio.
Per caricare la visualizzazione, apri il report che hai copiato in precedenza.
- Vai a "Modifica report".
- Fai clic su "Visualizzazioni e componenti della community" nella barra degli strumenti.
- Fai clic su "Scopri di più".
- Fai clic su "Crea la tua visualizzazione".
- Inserisci il percorso manifest (la posizione
gs://...stampata nel terminale) e fai clic su Invia.
- Fai clic sulla scheda di cui è stato eseguito il rendering per aggiungerla al report.
La visualizzazione dovrebbe eseguire il rendering di JSON simile al seguente:
Copia l'intero messaggio facendo clic con il tasto destro del mouse e selezionando tutto, quindi sostituisci i contenuti di src/localMessage.js con quelli appena copiati. Salva il file.
La visualizzazione in esecuzione localmente nel browser non dovrebbe più essere visualizzata e, se guardi nella console, vedrai un errore.
9. Scrivi JavaScript per un grafico a barre
Innanzitutto, esegui questo comando per aggiungere d3.js come dipendenza.
npm install d3
Quindi, sostituisci src/index.js con il seguente codice. Le modifiche apportate rispetto al passaggio precedente sono in grassetto.
src/index.js
const d3 = require('d3');
const dscc = require('@google/dscc');
const local = require('./localMessage.js');
// change this to 'true' for local development
// change this to 'false' before deploying
export const LOCAL = true;
const drawViz = (message) => {
const margin = { left: 20, right: 20, top: 20, bottom: 20 };
const height = dscc.getHeight() - 10;
const width = dscc.getWidth();
const chartHeight = height - margin.top - margin.bottom;
const chartWidth = width - margin.left - margin.right;
// remove existing svg
d3.select("body")
.selectAll("svg")
.remove();
// make a canvas
const svg = d3
.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// make an svg for the bar chart
const chartSvg = svg
.append("svg")
.attr("x", margin.left)
.attr("y", margin.top)
.attr("width", chartWidth)
.attr("height", chartHeight);
// xScale to distribute bars
const xScale = d3
.scaleBand()
.domain(message.tables.DEFAULT.map(d => d.dimension[0]))
.range([0, chartWidth])
.paddingInner(0.3);
// yScale to size bars
const yScale = d3
.scaleLinear()
.domain([0, d3.max(message.tables.DEFAULT.map(d => d.metric[0]))])
.range([0, chartHeight]);
// add bars
const bars = chartSvg
.append("g")
.attr("class", "bars")
.selectAll("rect.bars")
.data(message.tables.DEFAULT)
.enter()
.append("rect")
.attr("x", d => xScale(d.dimension[0]))
.attr("y", d => chartHeight - yScale(d.metric[0]))
.attr("width", xScale.bandwidth())
.attr("height", d => yScale(d.metric[0]));
// add text
const text = svg
.append("g")
.selectAll("text")
.data(message.tables.DEFAULT)
.enter()
.append("text")
.attr(
"x",
d => xScale(d.dimension[0]) + xScale.bandwidth() / 2 + margin.left
)
.attr("y", height - margin.bottom / 4)
.attr("text-anchor", "middle")
.text(d => d.dimension[0]);
};
// renders locally
if (LOCAL) {
drawViz(local.message);
} else {
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});
}
Se il server locale è ancora in esecuzione, controlla il browser. La pagina web di sviluppo locale dovrebbe ora mostrare un grafico a barre, come quello riportato di seguito.
10. Aggiorna manifest (facoltativo)
Il manifest della visualizzazione contiene i metadati relativi alla visualizzazione, nonché la posizione dei file JavaScript, di configurazione e CSS della visualizzazione. Aggiorna i valori nel manifest, che verranno utilizzati per fornire all'utente finale informazioni sulla visualizzazione.
Modifica src/manifest.json per descrivere la visualizzazione. Di seguito è riportato un esempio di file manifest.
src/manifest.json
{
"name": "Bar Chart",
"organization": "[My name]",
"description": "Bar chart",
"logoUrl": "https://storage.googleapis.com/community-visualizations-codelabs/barchart/bar_chart.png",
"organizationUrl": "https://github.com/googledatastudio/",
"supportUrl": "http://github.com/googledatastudio/community-visualizations",
"privacyPolicyUrl": "http://github.com/googledatastudio/community-visualizations",
"termsOfServiceUrl": "http://github.com/googledatastudio/community-visualizations",
"packageUrl": "",
"devMode": "DEVMODE_BOOL",
"components": [
{
"id": "Bar chart",
"name": "Bar chart",
"description": "My first Community Visualization",
"iconUrl": "https://storage.googleapis.com/community-visualizations-codelabs/table/table_icon.png",
"resource": {
"js": "YOUR_GCS_BUCKET/index.js",
"config": "YOUR_GCS_BUCKET/index.json",
"css": "YOUR_GCS_BUCKET/index.css"
}
}
]
}
11. Esegui il deployment della visualizzazione
In src/index.js, modifica const LOCAL in "false". La visualizzazione nel browser dovrebbe smettere di funzionare. La riga di codice modificata è in grassetto. Questo valore booleano configura se il codice deve utilizzare un file di dati "locale" o i dati ricevuti da Data Studio.
src/index.js (abridged)
const d3 = require('d3');
const dscc = require('@google/dscc');
const local = require('./localMessage.js');
// change this to 'true' for local development
// change this to 'false' before deployment
export const LOCAL = false;
const drawViz = (message) => {...}
Poi, nel terminale, esegui:
npm run build:dev
npm run push:dev
Il comando build:dev raggruppa le dipendenze JavaScript in un output non compresso e sostituisce i valori nel manifest per disattivare la memorizzazione nella cache e puntare al bucket "dev" configurato in precedenza.
Il comando push:dev carica le risorse di visualizzazione nel bucket "dev" che hai configurato nel passaggio 1 e stampa la posizione del bucket nella console.
Aggiorna il report di Data Studio. Dovresti visualizzare un grafico a barre. Prova a modificare le opzioni di dati e stile nel riquadro delle proprietà. La modifica dei dati cambierà le barre. Tuttavia, il selettore dello stile del colore della barra non funzionerà ancora.
12. Utilizzare le selezioni di colore dell'editor di report nel grafico a barre
Per modificare il codice localmente, aggiorna prima la variabile costante LOCAL in src/index.js a true. Quindi, aggiungi una nuova funzione chiamata styleVal() e aggiorna il codice in drawViz(). Il file src/index.js dovrebbe avere questo aspetto:
src/index.js
const d3 = require('d3');
const dscc = require('@google/dscc');
const local = require('./localMessage.js');
// change this to 'true' for local development
// change this to 'false' before deploying
export const LOCAL = false;
// parse the style value
const styleVal = (message, styleId) => {
if (typeof message.style[styleId].defaultValue === "object") {
return message.style[styleId].value.color !== undefined
? message.style[styleId].value.color
: message.style[styleId].defaultValue.color;
}
return message.style[styleId].value !== undefined
? message.style[styleId].value
: message.style[styleId].defaultValue;
};
const drawViz = message => {
const margin = { left: 20, right: 20, top: 20, bottom: 20 };
const height = dscc.getHeight() - 10;
const width = dscc.getWidth();
const chartHeight = height - margin.top - margin.bottom;
const chartWidth = width - margin.left - margin.right;
// remove existing svg
d3.select("body")
.selectAll("svg")
.remove();
// make a canvas
const svg = d3
.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// make an svg for the bar chart
const chartSvg = svg
.append("svg")
.attr("x", margin.left)
.attr("y", margin.top)
.attr("width", chartWidth)
.attr("height", chartHeight);
// xScale to distribute bars
const xScale = d3
.scaleBand()
.domain(message.tables.DEFAULT.map(d => d.dimension[0]))
.range([0, chartWidth])
.paddingInner(0.3);
// yScale to size bars
const yScale = d3
.scaleLinear()
.domain([0, d3.max(message.tables.DEFAULT.map(d => d.metric[0]))])
.range([0, chartHeight]);
// get the user-selected bar color
let barColor = styleVal(message, "barColor");
// add bars
const bars = chartSvg
.append("g")
.attr("class", "bars")
.selectAll("rect.bars")
.data(message.tables.DEFAULT)
.enter()
.append("rect")
.attr("x", d => xScale(d.dimension[0]))
.attr("y", d => chartHeight - yScale(d.metric[0]))
.attr("width", xScale.bandwidth())
.attr("height", d => yScale(d.metric[0]))
.attr("fill", barColor);
// add text
const text = svg
.append("g")
.selectAll("text")
.data(message.tables.DEFAULT)
.enter()
.append("text")
.attr(
"x",
d => xScale(d.dimension[0]) + xScale.bandwidth() / 2 + margin.left
)
.attr("y", height - margin.bottom / 4)
.attr("text-anchor", "middle")
.attr("fill", barColor)
.text(d => d.dimension[0]);
};
// renders locally
if (LOCAL) {
drawViz(local.message);
} else {
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});
}
Salva src/index.js, quindi torna alla sessione del browser locale. Visualizzalo in esecuzione in locale, poi modifica di nuovo la costante LOCAL impostandola su false.
Carica i file aggiornati su Google Cloud Storage eseguendo:
npm run build:dev
npm run push:dev
Aggiorna il report di Data Studio. Ora dovresti essere in grado di cambiare il colore delle barre.
13. Deployment di produzione
Deployment di produzione
Quando la visualizzazione ti soddisfa, assicurati che const LOCAL in src/index.js sia false, quindi esegui.
npm run build:prod
npm run push:prod
I file verranno implementati nella posizione del bucket GCS "prod". Inoltre, la memorizzazione nella cache verrà attivata e il JavaScript in bundle verrà minimizzato in modo appropriato.
Come in precedenza, la posizione del deployment verrà stampata nella console. Utilizza questo "percorso del manifest" per caricare la visualizzazione "prod" in un report di Data Studio.
Complimenti! Hai appena creato la tua prima visualizzazione della community con lo strumento dscc-gen.
14. Passaggi successivi
Estendere la visualizzazione
- Aggiungere interazioni alla visualizzazione
- Scopri di più sugli elementi di stile disponibili e aggiungi uno stile aggiuntivo alla visualizzazione.
Ottieni il massimo dalle visualizzazioni della community
- Consulta i riferimenti per la libreria helper dscc, il manifest e il file di configurazione.
- Invia la tua visualizzazione alla nostra Galleria delle visualizzazioni della community.
- Crea un connettore della community per Data Studio.
Risorse aggiuntive
Di seguito sono riportate varie risorse a cui puoi accedere per approfondire il materiale trattato in questo codelab.
Tipo di risorsa | Funzionalità utente | Funzionalità per sviluppatori |
Documentazione | ||
Notizie e aggiornamenti | Registrati in Data Studio > Impostazioni utente | |
Fai domande | Stack Overflow [google-data-studio]Forum per gli sviluppatori di Data Studio | |
Video | Prossimamente | |
Esempi |