1. Introduction
Google Data Studio vous permet de créer sans frais des tableaux de bord dynamiques et interactifs avec de superbes visualisations de données. La fonctionnalité de visualisation de la communauté de Data Studio vous permet de créer des visualisations personnalisées avec JavaScript pour vos rapports Data Studio.
Points abordés
Dans cet atelier de programmation, vous allez apprendre à:
- Fonctionnement d'une visualisation de la communauté Google Data Studio
- Créer une visualisation de la communauté avec notre outil de création de modèles de ligne de commande
- Utiliser des bibliothèques de visualisation JavaScript pour créer des visualisations de la communauté
- Intégrer votre visualisation de la communauté à un tableau de bord Data Studio
Prérequis
Voici les conditions à réunir pour effectuer cet atelier de programmation :
- Un accès à Internet, à un navigateur Web, à un terminal et à votre éditeur de texte préféré
- Un compte Google
- Accès à un bucket Google Cloud Storage
- Bonne connaissance de JavaScript, de Node.js et de la ligne de commande
Cet atelier de programmation présuppose:
- Vous avez déjà créé une visualisation de la communauté (premier atelier de programmation sous forme de lien TODO).
- Vous maîtrisez Google Cloud Storage.
Pour commencer, créez une copie de ce rapport en cliquant sur 
dans l'angle supérieur droit. Gardez-le ouvert dans un autre onglet tout au long de l'atelier de programmation.
2. Enquête rapide
Pourquoi avez-vous choisi cet atelier de programmation ?
<ph type="x-smartling-placeholder">Comment prévoyez-vous d'utiliser cet atelier de programmation/ce tutoriel ?
<ph type="x-smartling-placeholder">Comment évalueriez-vous votre expérience avec Data Studio ?
<ph type="x-smartling-placeholder">Qu'est-ce qui décrit le mieux votre parcours ?
<ph type="x-smartling-placeholder">Passez à la page suivante pour envoyer les informations de l'enquête.
3. Développement de visualisations de la communauté avec dscc-gen
dscc-gen
dscc-gen est un outil de ligne de commande qui fournit des modèles et des workflows avisés pour les visualisations de la communauté et les connecteurs de communauté. Le modèle de visualisation de la communauté fournit une visualisation fonctionnelle et un workflow qui vous permet de voir immédiatement les modifications apportées au code de votre visualisation, ainsi que des scripts pour valider, créer et déployer vos visualisations.
Configuration
dscc-gen utilise gsutil dans les scripts de déploiement, ainsi que npm et webpack pour créer du code JavaScript pour la visualisation de la communauté.
- Installez npm sur votre ordinateur local.
- Accéder au guide de démarrage rapide de gsutil et configurer un bucket Google Cloud Storage
- Accédez au répertoire local dans lequel vous souhaitez placer votre projet.
4. Démarrer un nouveau projet de visualisation de la communauté dscc-gen
Ouvrez un terminal et exécutez la commande suivante:
npx @google/dscc-gen viz
dscc-gen vous demandera un nom de projet, un « dev » un emplacement de stockage GCS et une "production" ; emplacement de stockage. Saisissez l'emplacement sous la forme d'un URI avec le protocole gs. Exemple : gs://my-gs-project/example-dev Un "lieu" peut être soit un bucket Cloud Storage, soit un dossier dans ce bucket. Les deux emplacements de stockage doivent être différents. L'outil vérifiera que vous avez accès aux valeurs que vous saisissez. Si les établissements n'existent pas, ils seront créés automatiquement.
Une fois que dscc-gen a créé une visualisation de la communauté, il affiche les instructions de démarrage. Votre terminal ressemblera à ceci (votre saisie en italique et gras):
$ 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!
Vous allez modifier les fichiers dans src/ (plus précisément, index.js, index.json et index.css) pour écrire votre visualisation.
Les fichiers dans dist/ vous permettent de prévisualiser votre visualisation localement dans un navigateur. webpack.config.js permet d'exécuter la visualisation en local. README.md présente les commandes et les fichiers de modèle.
5. Prévisualiser votre visualisation en local
Suivez les instructions suggérées et exécutez les commandes suivantes dans votre terminal:
cd <folder name>
npm run start
Une page Web semblable à celle-ci s'affiche dans le navigateur:
L'étape suivante vous donnera davantage d'informations.
6. [Info] Fonctionnement du workflow dscc-gen
Le modèle de visualisation dscc-gen est fourni avec une visualisation fonctionnelle et des instructions sur la façon de l'utiliser. Voici les principales fonctionnalités disponibles:
Mettez à jour votre message local:le modèle inclut un exemple de message, mais il ne reflète probablement pas le cas d'utilisation que vous souhaitez traiter. Vous devez télécharger des exemples de données reflétant la visualisation que vous souhaitez créer.
Workflow de développement local: à l'aide des données de la section Mettre à jour vos données locales, écrivez et testez votre code localement.
Conception et déployer votre visualisation: créer votre code et les importer dans vos buckets Google Cloud Storage.
Charger votre visualisation dans Data Studio:ajoutez la visualisation à votre rapport Data Studio.
7. Définir une configuration
Le fichier de configuration est le contrat entre vous (le développeur de la visualisation) et l'éditeur de rapports qui utilise la visualisation. Il définit les options disponibles une fois la visualisation chargée dans Data Studio.
Pour cette visualisation sous forme de graphique à barres, la configuration comportera une dimension et une métrique, ainsi qu'un élément de style permettant à l'éditeur de rapports de modifier le style du graphique à barres.
Remplacez le contenu de src/index.json par ce qui suit. Assurez-vous d'inclure tous les crochets. Si vous retapez la requête, soyez attentif à la différence entre les accolades et la structure d'imbrication.
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. Télécharger le message mis à jour
Pour mettre à jour vos données stockées localement, exécutez la commande suivante:
npm run update_message
Votre terminal devrait se présenter comme suit:
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
Cette commande déploie une visualisation dans Data Studio qui imprime les données reçues dans une visualisation locale. Les scripts affichent l'emplacement de déploiement de votre visualisation (en surbrillance ci-dessus). Vous utiliserez cet emplacement pour charger votre visualisation dans Data Studio.
Pour charger votre visualisation, ouvrez le rapport que vous avez copié précédemment.
- Accéder à "Modifier le rapport"
- Cliquez sur "Visualisations et composants de la communauté". dans la barre d'outils
- Cliquez sur "En savoir plus"
- Cliquez sur "Créer votre propre visualisation"
- Saisissez le chemin d'accès à votre fichier manifeste (l'emplacement
gs://...indiqué dans votre terminal), puis cliquez sur "Envoyer".
- Cliquez sur la fiche affichée pour l'ajouter à votre rapport.
La visualisation doit afficher un fichier JSON qui se présente comme suit:
Copiez l'intégralité du message en effectuant un clic droit et en sélectionnant tout, puis remplacez le contenu de src/localMessage.js par celui que vous venez de copier. Enregistrez le fichier.
La visualisation qui s'exécute localement dans votre navigateur ne devrait plus s'afficher et, si vous la consultez dans la console, un message d'erreur s'affichera.
9. Écrire du code JavaScript pour un graphique à barres
Commencez par exécuter la commande suivante pour ajouter d3.js en tant que dépendance.
npm install d3
Remplacez ensuite src/index.js par le code suivant. Les modifications apportées à la dernière étape sont affichées en gras.
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});
}
Si le serveur local est toujours en cours d'exécution, vérifiez votre navigateur. La page Web de développement local devrait maintenant afficher un graphique à barres, comme celui présenté ci-dessous.
10. Mettre à jour le fichier manifeste (facultatif)
Le fichier manifeste de votre visualisation contient des métadonnées concernant votre visualisation, ainsi que l'emplacement du code JavaScript, de la configuration et du CSS de votre visualisation. Mettez à jour les valeurs dans votre fichier manifeste. Elles seront utilisées pour fournir à l'utilisateur final des informations concernant votre visualisation.
Modifiez le fichier src/manifest.json pour décrire votre visualisation. Vous trouverez ci-dessous un exemple de fichier manifeste.
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. Déployer la visualisation
Dans src/index.js, remplacez la constante LOCAL sur "false". La visualisation dans votre navigateur devrait cesser de fonctionner. La ligne de code modifiée est en gras. Cette valeur booléenne détermine si le code doit utiliser ou non une valeur ou les données reçues de 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) => {...}
Ensuite, dans votre terminal, exécutez la commande suivante:
npm run build:dev
npm run push:dev
La commande build:dev regroupe vos dépendances JavaScript dans une sortie simplifiée et remplace les valeurs de votre fichier manifeste pour désactiver la mise en cache et pour pointer vers "dev". que vous avez configuré précédemment.
La commande push:dev importe vos ressources de visualisation dans le répertoire "dev" que vous avez configuré à l'étape 1 et affiche son emplacement sur la console.
Actualisez le rapport Data Studio. Vous devriez voir un graphique à barres. Essayez de modifier les options de données et de style dans le panneau des propriétés. Si vous modifiez les données, les barres seront également modifiées. Toutefois, le sélecteur de style de couleur de la barre ne fonctionnera pas encore.
12. Utiliser les sélections de couleurs de l'éditeur de rapports dans le graphique à barres
Pour modifier le code localement, commencez par mettre à jour la variable const LOCAL dans src/index.js sur true. Ajoutez ensuite une fonction appelée styleVal(), puis mettez à jour le code dans drawViz(). Le fichier src/index.js doit se présenter comme suit:
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});
}
Enregistrez le fichier src/index.js, puis revenez à votre session locale de navigateur. Observez-le s'exécuter localement, puis une nouvelle fois, remplacez const LOCAL sur false.
Importez vos fichiers mis à jour dans Google Cloud Storage en exécutant la commande suivante:
npm run build:dev
npm run push:dev
Actualisez votre rapport Data Studio. Vous devriez maintenant pouvoir modifier la couleur de vos barres.
13. Déploiements en production
Déploiements en production
Une fois que vous êtes satisfait de votre visualisation, assurez-vous que const LOCAL dans src/index.js est défini sur "false", puis exécutez-le.
npm run build:prod
npm run push:prod
Vos fichiers seront déployés dans votre "prod". Emplacement du bucket GCS. De plus, la mise en cache est activée et la taille du code JavaScript groupé est réduite de façon appropriée.
Comme précédemment, l'emplacement de votre déploiement sera imprimé dans la console. Utilisez ce "chemin d'accès au fichier manifeste" pour charger votre "prod" dans un rapport Data Studio.
Félicitations ! Vous venez de créer votre première visualisation de la communauté avec l'outil dscc-gen.
14. Étapes suivantes
Étendre votre visualisation
- Ajouter des interactions à votre visualisation
- Découvrez les éléments de style disponibles et ajoutez un style supplémentaire à votre visualisation.
Exploiter tout le potentiel des visualisations de la communauté
- Consultez les références de la bibliothèque d'aide dscc, du fichier manifeste et du fichier de configuration.
- Envoyez votre visualisation à notre Vitrine de la visualisation de la communauté.
- Créer un connecteur de communauté pour Data Studio
Ressources supplémentaires
Vous trouverez ci-dessous différentes ressources qui vous aideront à approfondir les sujets abordés dans cet atelier de programmation.
Type de ressource | Fonctionnalités pour les utilisateurs | Fonctionnalités pour les développeurs |
Documentation | ||
Actualités et Actualités | Inscrivez-vous dans Data Studio > Paramètres utilisateur | |
Poser des questions | Stack Overflow [google-data-studio]Forum des développeurs Data Studio | |
Vidéos | Bientôt disponible ! | |
Exemples |