Membuat Visualisasi Komunitas Data Studio dengan dscc-gen

1. Pengantar

Google Data Studio memungkinkan Anda membuat dasbor interaktif yang dinamis dengan visualisasi data yang menarik, tanpa biaya. 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, browser 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 telah membuat Visualisasi Komunitas (TODO link codelab pertama)
• Memahami Google Cloud Storage

Untuk memulai, buat salinan laporan ini dengan mengklik di sudut kanan atas. Biarkan tetap terbuka di tab lain saat Anda mempelajari codelab.

2. Survei Cepat

Mengapa Anda memilih codelab ini?

Saya tertarik dengan visualisasi data secara umum. Saya ingin mempelajari Data Studio lebih lanjut Saya ingin membuat Visualisasi Komunitas saya sendiri. Saya mencoba mengintegrasikan Data Studio dengan platform lain. Saya tertarik dengan solusi Google Cloud.

Bagaimana rencana Anda menggunakan codelab/tutorial ini?

Membacanya dan menyelesaikan latihan Hanya membaca sekilas

Bagaimana penilaian Anda terhadap pengalaman Anda dengan Data Studio?

Belum pernah mendengarnya Saya tahu apa itu, tetapi saya tidak menggunakannya. Saya menggunakannya secara rutin. Saya adalah pengguna ahli.

Apa yang paling tepat menggambarkan latar belakang Anda?

Developer Analis Bisnis / Data Data Scientist / Data Engineer Analis Keuangan Pakar Analisis Pemasaran / Media Sosial / Digital Analis Bisnis Desainer Lainnya

Lanjutkan 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 yang memiliki opini untuk Visualisasi Komunitas dan Konektor Komunitas. Template Visualisasi Komunitas menyediakan visualisasi yang berfungsi dan alur kerja yang memungkinkan Anda langsung melihat perubahan kode visualisasi, serta skrip untuk memvalidasi, membuat, dan men-deploy visualisasi.

Penyiapan

dscc-gen menggunakan gsutil dalam skrip deployment, serta npm dan webpack untuk membuat kode JavaScript Visualisasi Komunitas.

1. Instal npm di komputer lokal Anda
2. Selesaikan panduan memulai gsutil dan siapkan bucket Google Cloud Storage
3. Buka direktori lokal tempat Anda ingin menempatkan project

4. Memulai project Visualisasi Komunitas dscc-gen baru

Buka terminal dan jalankan perintah:

npx @google/dscc-gen viz

dscc-gen akan meminta nama project, lokasi penyimpanan GCS "dev", dan lokasi penyimpanan "prod". Masukkan lokasi sebagai URI dengan protokol gs, misalnya gs://my-gs-project/example-dev. "Lokasi" dapat berupa bucket Cloud Storage atau folder dalam bucket tersebut. Kedua lokasi penyimpanan harus berbeda. Alat ini akan memvalidasi bahwa Anda memiliki akses ke nilai yang Anda masukkan. Jika lokasi belum ada, lokasi tersebut akan dibuat untuk Anda.

Catatan: Anda harus mempertahankan dua deployment Visualisasi Komunitas - deployment "dev" dengan file yang tidak di-minify dan caching dinonaktifkan, serta deployment "prod" dengan file yang di-minify dan caching diaktifkan. Deployment "dev" akan memuat file terbaru dan lebih mudah di-debug, sedangkan deployment "prod" akan dimuat lebih cepat.

Setelah dscc-gen membuat Visualisasi Komunitas baru, dscc-gen akan mencetak petunjuk tentang cara memulai. Terminal Anda akan terlihat seperti ini (input Anda dalam cetak miring tebal):

$ 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 di src/ - khususnya, index.js, index.json, dan index.css - untuk menulis visualisasi.

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 file dan perintah 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 tentang cara menggunakan template. Berikut fungsi utamanya:

Perbarui pesan lokal Anda: Pesan contoh disertakan dalam template, tetapi kemungkinan tidak mencerminkan kasus penggunaan yang ingin Anda dukung. Anda harus mendownload data contoh yang mencerminkan visualisasi yang ingin Anda buat.

Alur kerja pengembangan lokal: Menggunakan data dari Perbarui data lokal Anda, tulis dan uji kode Anda secara lokal.

Bangun & deploy visualisasi Anda: Bangun kode Anda & upload ke bucket Google Cloud Storage Anda.

Muat visualisasi Anda di Data Studio: Tambahkan visualisasi ke laporan Data Studio Anda.

Catatan: Kata "pesan" di sini merujuk pada informasi yang diteruskan ds-component sebagai parameter ke fungsi callback yang Anda daftarkan dalam kode.

7. Menentukan konfigurasi

File konfigurasi adalah kontrak antara Anda (developer visualisasi) dan editor laporan yang menggunakan visualisasi. Opsi 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. Jika Anda mengetiknya 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. Mendownload 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 viz lokal. Skrip mencetak lokasi deployment visualisasi Anda (ditandai di atas). Anda akan menggunakan lokasi ini untuk memuat visualisasi di Data Studio.

Untuk memuat visualisasi, buka laporan yang Anda salin sebelumnya.

1. Buka "edit laporan"
2. Klik "Komponen dan visualisasi komunitas" di toolbar

3. Klik "Jelajahi lebih lanjut"

4. Klik "Buat visualisasi Anda sendiri"
5. Masukkan jalur manifes Anda (lokasi gs://... yang dicetak di terminal Anda), lalu klik Kirim

5. Klik kartu yang dirender untuk menambahkannya ke laporan Anda

Visualisasi akan 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 tidak akan muncul lagi, dan jika Anda melihat di konsol, Anda akan melihat error.

9. Menulis JavaScript untuk diagram batang

Pertama, jalankan perintah berikut untuk menambahkan d3.js sebagai dependensi.

npm install d3

Kemudian, 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.

10. Memperbarui manifes (opsional)

Manifes visualisasi Anda berisi metadata tentang visualisasi Anda, serta lokasi JavaScript, konfigurasi, dan CSS visualisasi Anda. Perbarui nilai dalam manifes Anda - nilai tersebut akan digunakan untuk memberikan informasi kepada pengguna akhir tentang visualisasi Anda.

Edit src/manifest.json untuk mendeskripsikan visualisasi Anda. Contoh manifes ada di bawah.

Peringatan: Jangan edit devMode dan components[].resource DEVMODE_BOOL dan YOUR_GCS_BUCKET. Ini adalah placeholder untuk penggantian yang akan dilakukan template dscc-gen untuk Anda.

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. Men-deploy visualisasi

Di src/index.js, ubah const LOCAL menjadi "false". Visualisasi di browser Anda akan berhenti berfungsi. Baris kode yang diubah ditulis dalam huruf tebal. Boolean ini mengonfigurasi apakah kode harus menggunakan file data "lokal" 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 menggabungkan dependensi JavaScript Anda ke dalam output yang tidak di-minify, dan mengganti nilai dalam manifes Anda untuk menonaktifkan penyimpanan dalam cache dan mengarah ke bucket "dev" yang Anda konfigurasi sebelumnya.

Perintah push:dev mengupload resource visualisasi Anda ke bucket "dev" yang Anda konfigurasi 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 dalam diagram batang

Untuk mengedit kode secara lokal, perbarui terlebih dahulu variabel const LOCAL di src/index.js menjadi true. Kemudian, tambahkan fungsi baru bernama styleVal(), dan perbarui 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 cara kerjanya secara lokal, lalu ubah const LOCAL menjadi false.

Upload file yang diperbarui ke Google Cloud Storage dengan menjalankan:

npm run build:dev
npm run push:dev

Muat ulang laporan Data Studio Anda. Sekarang Anda dapat mengubah warna batang.

13. Deployment produksi

Deployment produksi

Setelah Anda puas dengan visualisasi, pastikan const LOCAL di src/index.js adalah false, lalu jalankan.

npm run build:prod
npm run push:prod

Tindakan ini akan men-deploy file Anda ke lokasi bucket GCS "prod". Selain itu, caching akan diaktifkan, dan JavaScript yang di-bundle akan diperkecil dengan tepat.

Seperti sebelumnya, lokasi deployment Anda akan dicetak di konsol. Gunakan "jalur manifes" ini untuk memuat visualisasi "prod" dalam laporan Data Studio.

Selamat! Anda baru saja membuat Visualisasi Komunitas pertama dengan alat dscc-gen.

14. Langkah berikutnya

Memperluas visualisasi

• Menambahkan interaksi ke visualisasi
• Pelajari lebih lanjut elemen gaya yang tersedia dan tambahkan gaya lain ke visualisasi Anda.

Melakukan lebih banyak hal dengan Visualisasi Komunitas

• Tinjau referensi untuk library helper dscc, manifes, dan file konfigurasi.
• Kirimkan visualisasi Anda ke Showcase Visualisasi Komunitas kami.
• Buat konektor komunitas untuk Data Studio.

Referensi lainnya

Berikut adalah berbagai referensi yang dapat Anda akses untuk membantu Anda mempelajari lebih dalam materi yang dibahas dalam codelab ini.

Resource Type	Fitur Pengguna	Fitur Developer
Dokumentasi	Pusat Bantuan	Dokumentasi Developer
Berita & Info Terbaru	Daftar di Data Studio > Setelan Pengguna	Mailing List Developer
Ajukan Pertanyaan	Forum Pengguna	Stack Overflow [google-data-studio]Forum Developer Data Studio
Video	Data Studio di YouTube	Segera Hadir!
Contoh	Galeri Laporan	Repositori Open Source