1. Pengantar
Google Data Studio memungkinkan Anda membuat dasbor yang dinamis dan interaktif dengan visualisasi data yang menarik, secara gratis. Visualisasi komunitas adalah fitur untuk Data Studio yang memungkinkan Anda membuat visualisasi kustom dengan JavaScript yang terintegrasi dengan laporan Data Studio Anda.
Yang akan Anda pelajari
Dalam codelab ini, Anda akan mempelajari:
- Cara kerja Visualisasi Komunitas Google Data Studio
- Cara membuat Visualisasi Komunitas dengan alat template command line kami
- Cara menggunakan library visualisasi JavaScript untuk membuat Visualisasi Komunitas
- Cara mengintegrasikan Visualisasi Komunitas ke dasbor Data Studio
Yang Anda butuhkan
Untuk menyelesaikan codelab ini, Anda memerlukan:
- Akses ke internet, {i>browser<i} web, dan terminal, serta editor teks favorit Anda
- Akun Google
- Akses ke bucket Google Cloud Storage
- Pemahaman tentang JavaScript, Node.js, dan command line
Codelab ini mengasumsikan:
- Anda sudah membuat Visualisasi Komunitas (codelab pertama link TODO)
- Mengenal Google Cloud Storage
Untuk memulai, buat salinan laporan ini dengan mengklik 
di pojok kanan atas. Tetap buka di tab lain saat Anda melakukan codelab.
2. Survei Singkat
Mengapa Anda memilih codelab ini?
Bagaimana Anda berencana menggunakan codelab/tutorial ini?
Bagaimana Anda menilai pengalaman Anda dengan Data Studio?
Apa yang paling menggambarkan latar belakang Anda?
Pindah ke halaman berikutnya untuk mengirimkan informasi survei.
3. Pengembangan Visualisasi Komunitas dengan dscc-gen
dscc-gen
dscc-gen adalah alat command line yang menyediakan template dan alur kerja opini untuk Visualisasi Komunitas dan Konektor Komunitas. Template Visualisasi Komunitas memberikan visualisasi yang berfungsi dan alur kerja yang memungkinkan Anda langsung melihat perubahan kode visualisasi, serta skrip untuk memvalidasi, membuat, dan men-deploy visualisasi Anda.
Penyiapan
dscc-gen menggunakan gsutil dalam skrip deployment, serta npm dan webpack untuk membuat kode JavaScript Visualisasi Komunitas.
- Instal npm di komputer lokal Anda
- Buka panduan memulai gsutil dan siapkan bucket Google Cloud Storage
- Buka direktori lokal tempat Anda ingin menemukan project
4. Mulai project Visualisasi Komunitas dscc-gen baru
Buka terminal dan jalankan perintah:
npx @google/dscc-gen viz
dscc-gen akan meminta nama project, "dev" Lokasi penyimpanan GCS, dan "prod" lokasi penyimpanan Anda. Masukkan lokasi sebagai URI dengan protokol gs, misalnya, gs://my-gs-project/example-dev. "Lokasi" dapat berupa bucket Cloud Storage atau folder di dalam bucket tersebut. Kedua lokasi penyimpanan tersebut harus berbeda. Alat ini akan memvalidasi bahwa Anda memiliki akses ke nilai yang dimasukkan. Jika tidak ada, lokasi akan dibuat untuk Anda.
Setelah membuat Visualisasi Komunitas baru, dscc-gen akan mencetak petunjuk cara memulainya. Terminal Anda akan terlihat seperti ini (input Anda dalam huruf tebal miring):
$ 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!
Anda akan mengedit file dalam src/ - khususnya, index.js, index.json, dan index.css - untuk menulis visualisasi Anda.
File di dist/ memungkinkan Anda melihat pratinjau visualisasi secara lokal di browser. webpack.config.js digunakan untuk menjalankan visualisasi secara lokal. README.md memberikan ringkasan perintah dan file template.
5. Melihat pratinjau visualisasi Anda secara lokal
Ikuti petunjuk yang disarankan dan jalankan perintah berikut di terminal Anda:
cd <folder name>
npm run start
Browser akan terbuka dengan halaman web yang terlihat seperti ini:
Pelajari lebih lanjut di langkah berikutnya.
6. [Info] Cara kerja alur kerja dscc-gen
Template visualisasi dscc-gen dilengkapi dengan visualisasi yang berfungsi, dan petunjuk cara menggunakan template tersebut. Berikut fungsi utamanya:
Memperbarui pesan lokal: Contoh pesan disertakan dalam template, tetapi kemungkinan tidak mencerminkan kasus penggunaan yang ingin Anda dukung. Anda harus mendownload sampel data yang mencerminkan visualisasi yang ingin dibuat.
Alur kerja pengembangan lokal: Menggunakan data dari Perbarui data lokal, tulis dan uji kode Anda secara lokal.
Bangun & men-deploy visualisasi Anda: Membangun kode & dan menguploadnya ke bucket Google Cloud Storage.
Muat {i>viz<i} Anda di Data Studio: Tambahkan visualisasi ke laporan Data Studio Anda.
7. Menentukan konfigurasi
File konfigurasi adalah kontrak antara Anda (developer viz) dan editor laporan yang menggunakan visualisasi. Ini menentukan opsi yang tersedia setelah visualisasi dimuat ke Data Studio.
Untuk visualisasi diagram batang ini, konfigurasi akan memiliki satu dimensi dan satu metrik, serta elemen gaya yang memungkinkan editor laporan mengubah gaya diagram batang.
Ganti konten src/index.json dengan konten berikut. Pastikan Anda menyertakan semua tanda kurung. Saat mengetik ulang, pastikan Anda memperhatikan perbedaan antara tanda kurung siku dan kurung kurawal serta struktur bertingkat.
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. Download pesan yang diperbarui
Untuk memperbarui data yang disimpan secara lokal, jalankan:
npm run update_message
Terminal Anda akan terlihat seperti ini:
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
Perintah ini men-deploy visualisasi ke Data Studio yang mencetak data yang diterima ke {i>viz<i} lokal. Skrip ini mencetak lokasi deployment visualisasi Anda (disorot di atas). Anda akan menggunakan lokasi ini untuk memuat visualisasi Anda di Data Studio.
Untuk memuat visualisasi Anda, buka laporan yang Anda salin sebelumnya.
- Buka "edit laporan"
- Klik "Komponen dan visualisasi komunitas" di toolbar
- Klik "Jelajahi lainnya"
- Klik "Buat visualisasi Anda sendiri"
- Masukkan jalur manifes (lokasi
gs://...yang dicetak di terminal Anda), lalu klik Kirim
- Klik kartu yang dirender untuk menambahkannya ke laporan Anda
Visualisasi harus merender JSON yang terlihat seperti ini:
Salin seluruh pesan dengan mengklik kanan dan memilih semua, lalu ganti konten src/localMessage.js dengan yang baru saja Anda salin. Simpan file.
Visualisasi yang berjalan secara lokal di browser Anda seharusnya tidak muncul lagi, dan jika Anda melihat di konsol, Anda akan melihat error.
9. Menulis JavaScript untuk bagan batang
Pertama, jalankan perintah berikut untuk menambahkan d3.js sebagai dependensi.
npm install d3
Lalu, ganti src/index.js dengan kode berikut. Perubahan dari langkah terakhir dicetak tebal.
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});
}
Jika server lokal masih berjalan, periksa browser Anda. Halaman web pengembangan lokal sekarang akan menampilkan diagram batang, seperti di bawah ini.
10. Mengupdate manifes (opsional)
Manifes visualisasi Anda berisi metadata tentang visualisasi Anda, serta lokasi JavaScript, konfigurasi, dan CSS visualisasi Anda. Perbarui nilai dalam manifes - nilai tersebut akan digunakan untuk memberikan informasi kepada pengguna akhir tentang visualisasi Anda.
Edit src/manifes.json untuk mendeskripsikan visualisasi Anda. Contoh manifes ada di bawah.
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. Menerapkan visualisasi
Di src/index.js, ubah konstanta LOCAL menjadi "false". Visualisasi di browser Anda akan berhenti berfungsi. Baris kode yang diubah dicetak tebal. Boolean ini mengonfigurasi apakah kode harus menggunakan parameter "local" atau tidak atau data yang diterima dari 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) => {...}
Kemudian, di terminal Anda, jalankan:
npm run build:dev
npm run push:dev
Perintah build:dev memaketkan dependensi JavaScript Anda menjadi output yang tidak diminifikasi, dan mengganti nilai di manifes Anda untuk menonaktifkan penyimpanan cache dan mengarahkan ke "dev" bucket yang telah Anda konfigurasi sebelumnya.
Perintah push:dev mengupload aset visualisasi Anda ke "dev" yang telah dikonfigurasi pada langkah 1, dan mencetak lokasi bucket ke konsol.
Muat ulang laporan Data Studio. Anda akan melihat diagram batang. Coba ubah opsi data dan gaya di panel properti. Mengubah data akan mengubah batang. Namun, pemilih gaya warna batang belum akan berfungsi.
12. Menggunakan pilihan warna editor laporan di diagram batang
Untuk mengedit kode secara lokal, pertama-tama perbarui variabel LOCAL konstanta di src/index.js menjadi true. Kemudian, tambahkan fungsi baru bernama styleVal(), dan update kode di drawViz(). src/index.js Anda akan terlihat seperti ini:
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});
}
Simpan src/index.js, lalu kembali ke sesi browser lokal Anda. Lihat berjalan secara lokal, lalu ubah lagi const LOCAL menjadi false.
Upload file yang telah diperbarui ke Google Cloud Storage dengan menjalankan:
npm run build:dev
npm run push:dev
Muat ulang laporan Data Studio Anda. Anda seharusnya dapat mengubah warna batang Anda sekarang.
13. Deployment prod
Deployment prod
Setelah puas dengan visualisasi Anda, pastikan konstanta LOCAL di src/index.js salah, lalu jalankan.
npm run build:prod
npm run push:prod
Ini akan men-deploy file Anda ke "prod" Lokasi bucket GCS. Selain itu, penyimpanan cache akan diaktifkan, dan JavaScript yang dipaketkan akan diminifikasi dengan tepat.
Sama seperti sebelumnya, lokasi deployment Anda akan dicetak di konsol. Gunakan "jalur manifes" ini untuk memuat "prod" Anda visualisasi data dalam laporan Data Studio.
Selamat! Anda baru saja membuat Visualisasi Komunitas pertama Anda dengan fitur dscc-gen.
14. Langkah berikutnya
Memperluas visualisasi Anda
- Menambahkan interaksi ke visualisasi Anda
- Pelajari elemen gaya yang tersedia lebih lanjut dan tambahkan gaya tambahan ke visualisasi Anda.
Lakukan lebih banyak hal dengan Visualisasi Komunitas
- Tinjau referensi untuk library helper dscc, manifes, dan file konfigurasi.
- Kirim visualisasi Anda ke Etalase Visualisasi Komunitas kami.
- Buat konektor komunitas untuk Data Studio.
Referensi lainnya
Di bawah ini adalah berbagai referensi yang dapat Anda akses untuk membantu Anda mempelajari lebih dalam materi yang dibahas dalam codelab ini.
Jenis Resource | Fitur Pengguna | Fitur Developer |
Dokumentasi | ||
Berita & Info terbaru | Daftar di Data Studio > Setelan Pengguna | |
Ajukan Pertanyaan | Stack Overflow [google-data-studio]Forum Developer Data Studio | |
Video | Segera Hadir! | |
Contoh |