1. Introduction
Google Data Studio vous permet de créer sans frais des tableaux de bord dynamiques et interactifs avec de magnifiques visualisations de données. Les visualisations de la communauté sont une fonctionnalité de Data Studio qui vous permet de créer des visualisations personnalisées avec JavaScript et de les intégrer à 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 modèle en ligne de commande
- Utiliser des bibliothèques de visualisation JavaScript pour créer des visualisations de la communauté
- Intégrer votre visualisation personnalisée à un tableau de bord Data Studio
Prérequis
Voici les conditions à réunir pour effectuer cet atelier de programmation :
- Accès à Internet, à un navigateur Web et à un terminal, ainsi qu'à votre éditeur de texte favori
- Un compte Google
- Accès à un bucket Google Cloud Storage
- Connaissance de JavaScript, de Node.js et de la ligne de commande
Pour suivre cet atelier de programmation, vous devez remplir les conditions ci-dessous :
- Vous avez déjà créé une visualisation de la communauté (TODO link first codelab).
- Connaître Google Cloud Storage
Pour commencer, créez une copie de ce rapport en cliquant sur 
en haut à droite. Gardez-le ouvert dans un autre onglet pendant que vous suivez l'atelier de programmation.
2. Enquête rapide
Pourquoi avez-vous choisi cet atelier de programmation ?
Comment prévoyez-vous d'utiliser cet atelier de programmation/tutoriel ?
Comment évalueriez-vous votre expérience avec Data Studio ?
Quelle est votre formation ?
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 pour les visualisations et les connecteurs de la 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, compiler et déployer vos visualisations.
Configuration
dscc-gen utilise gsutil dans les scripts de déploiement, ainsi que npm et webpack pour créer le code JavaScript de la visualisation de la communauté.
- Installer npm sur votre ordinateur local
- Suivez le guide de démarrage rapide gsutil et configurez un bucket Google Cloud Storage.
- Accédez à un répertoire local dans lequel vous souhaitez localiser votre projet.
4. Démarrer un 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 emplacement de stockage GCS "dev" et un emplacement de stockage "prod". Saisissez l'emplacement sous la forme d'un URI avec le protocole gs, par exemple gs://my-gs-project/example-dev. Un "emplacement" peut être un bucket Cloud Storage ou 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 lieux n'existent pas, ils seront créés pour vous.
Une fois que dscc-gen a créé une visualisation de la communauté, il affiche des instructions pour vous aider à vous lancer. Votre terminal se présentera comme suit (votre saisie est en italique 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 de dist/ vous permettent de prévisualiser votre visualisation localement dans un navigateur. webpack.config.js est utilisé pour exécuter la visualisation en local. README.md fournit une présentation des fichiers et des commandes 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
Un navigateur s'ouvre sur une page Web semblable à celle-ci :
Pour en savoir plus, passez à l'étape suivante.
6. [Info] Fonctionnement prévu du workflow dscc-gen
Le modèle de visualisation dscc-gen est fourni avec une visualisation fonctionnelle et des instructions sur la façon d'utiliser le modèle. Voici la principale fonctionnalité :
Mettez à jour votre message local : un exemple de message est inclus dans le modèle, mais il ne reflète probablement pas le cas d'utilisation que vous souhaitez prendre en charge. Vous devez télécharger des exemples de données représentatifs de 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 en local.
Créez et déployez votre visualisation : créez votre code et importez-le dans vos buckets Google Cloud Storage.
Chargez 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 visualisations) 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 de graphique à barres, la configuration comprendra une dimension et une métrique, ainsi qu'un élément de style qui permettra à l'éditeur de rapports de modifier le style du graphique à barres.
Remplacez le contenu de src/index.json par le code suivant : Veillez à inclure toutes les parenthèses. Si vous le saisissez à nouveau, veillez à faire attention à la différence entre les crochets et les accolades, ainsi qu'à 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 indiquent l'emplacement de déploiement de votre visualisation (mis en évidence 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 "Composants et visualisations de la communauté" dans la barre d'outils.
- Cliquez sur "Explorer plus".
- Cliquez sur "Créer votre propre visualisation".
- Saisissez le chemin d'accès au 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 code JSON qui ressemble à ceci :
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 ce que vous venez de copier. Enregistrez le fichier.
La visualisation exécutée localement dans votre navigateur ne devrait plus s'afficher. Si vous regardez dans la console, vous verrez une erreur.
9. Écrire du code JavaScript pour un graphique à barres
Commencez par exécuter la commande suivante pour ajouter d3.js comme dépendance.
npm install d3
Ensuite, remplacez src/index.js par le code suivant. Les modifications apportées à l'étape précédente sont indiqué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 doit maintenant afficher un graphique à barres, comme celui ci-dessous.
10. Fichier manifeste de mise à jour (facultatif)
Votre fichier manifeste de visualisation contient des métadonnées sur votre visualisation, ainsi que l'emplacement de votre visualisation JavaScript, de votre configuration et de votre CSS. Mettez à jour les valeurs de votre fichier manifeste. Elles seront utilisées pour fournir des informations à l'utilisateur final sur votre visualisation.
Modifiez 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 par "false". La visualisation dans votre navigateur devrait cesser de fonctionner. La ligne de code modifiée est en gras. Cette valeur booléenne permet de configurer si le code doit utiliser un fichier de données "local" 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 non minifiée et remplace les valeurs de votre fichier manifeste pour désactiver la mise en cache et pointer vers le bucket "dev" que vous avez configuré précédemment.
La commande push:dev importe vos ressources de visualisation dans le bucket "dev" que vous avez configuré à l'étape 1, et affiche l'emplacement du bucket dans la console.
Actualisez le rapport Data Studio. Un graphique à barres devrait s'afficher. 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 changeront. 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 remplacer la variable const LOCAL dans src/index.js par true. Ajoutez ensuite une fonction appelée styleVal() et mettez à jour le code dans drawViz(). Votre fichier src/index.js devrait ressembler à ceci :
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 src/index.js, puis revenez à votre session de navigateur local. Exécutez-le en local, puis remplacez la constante LOCAL par 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 de production
Déploiements de production
Une fois que vous êtes satisfait de votre visualisation, assurez-vous que la constante LOCAL dans src/index.js est définie sur "false", puis exécutez le code.
npm run build:prod
npm run push:prod
Vos fichiers seront alors déployés dans votre bucket GCS "prod". La mise en cache sera également activée et le JavaScript groupé sera correctement minimisé.
Comme avant, l'emplacement de votre déploiement sera indiqué dans la console. Utilisez ce "chemin du fichier manifeste" pour charger votre visualisation "prod" dans un rapport Data Studio.
Félicitations ! Vous venez de créer votre première visualisation personnalisée avec l'outil dscc-gen.
14. Étapes suivantes
Élargir votre visualisation
- Ajouter des interactions à votre visualisation
- En savoir plus sur les éléments de style disponibles et ajouter du style à votre visualisation
Exploiter tout le potentiel des visualisations de la communauté
- Consultez les références de la bibliothèque d'assistance dscc, du manifeste et du fichier de configuration.
- Envoyez votre visualisation à notre vitrine des visualisations de la communauté.
- Créez un connecteur de communauté pour Data Studio.
Ressources supplémentaires
Vous trouverez ci-dessous diverses ressources pouvant vous aider à explorer plus en détail les aspects abordés dans cet atelier de programmation.
Type de ressource | Fonctionnalités utilisateur | Fonctionnalités pour les développeurs |
Documentation | ||
Actualités et nouveauté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 |