Menulis visualisasi Anda lebih cepat dengan dscc-gen

Alur kerja umum untuk melihat perubahan dalam visualisasi komunitas adalah dengan mengupload file ke GCS, lalu me-refresh laporan Data Studio. Cara ini berhasil, tetapi berarti Anda dapat menghabiskan banyak waktu untuk menunggu melihat perubahan. dscc-gen memungkinkan alur kerja untuk segera melihat perubahan kode visualisasi Anda, sehingga mengurangi waktu yang diperlukan untuk menulis visualisasi komunitas.

Untuk memulai, pastikan npm 5.2.0 atau yang lebih baru dan gsutil telah diinstal. Kemudian, jalankan:

npx @google/dscc-gen viz

Konfigurasi Pertama Kali

dscc-gen dilengkapi dengan set data lokal default yang mungkin tidak mewakili data yang ingin Anda visualisasikan. Untuk memperbarui set data ini agar sesuai dengan kebutuhan Anda:

  1. Perbarui konfigurasi Anda di src/index.json.
  2. Jalankan npm run update_message. Tindakan ini akan men-deploy visualisasi ke bucket dev yang menampilkan message dalam format yang mudah disalin.
  3. Buat laporan baru dan hubungkan ke set data yang merepresentasikan data yang ingin Anda visualisasikan.
  4. Tambahkan visualisasi komunitas menggunakan bucket dev sebagai ID komponen Anda.
  5. Salin konten visualisasi ke scripts/data/localData.js. Data ini akan digunakan saat Anda melakukan pengembangan secara lokal.

Skrip

Skrip berikut tersedia untuk project visualisasi yang dibuat dengan dscc-gen.

Perintah Tindakan
npm run start Mulai server lokal dan pratinjau visualisasi
npm run update_message Perbarui pesan menggunakan objectFormat
npm run build:dev Bangun file dari ./src ke ./build dengan penyimpanan dalam cache dinonaktifkan.
npm run push:dev Salin file dari build ke bucket dev Anda.
npm run build:prod Bangun file dari ./src ke ./build dengan penyimpanan dalam cache diaktifkan.
npm run push:prod Salin file dari build ke bucket prod Anda.

Perintah update_message secara default menggunakan objectFormat. Untuk menggunakan tableFormat, edit parameter dalam skrip update_message di package.json dari -f object menjadi -f table.

Codelab

Untuk mempelajari cara menggunakan alat ini, tinjau codelab dscc-gen.

Codelab dscc-gen