DataV：Konfigurasi dan aplikasi filter

Informasi latar belakang

Pengenalan prinsip

Filter merupakan fitur penting dalam visualisasi data untuk menerapkan interaksi data dinamis. Filter menyaring data mentah secara real-time berdasarkan aturan kondisi yang ditentukan pengguna (seperti interval numerik dan pencocokan teks) serta memperbarui hasilnya ke semua widget visualisasi terkait.

Skema

Filter banyak digunakan dalam visualisasi data, terutama untuk mengendalikan tampilan konten data secara dinamis. Skenario tipikal meliputi hal-hal berikut:

• Dalam laporan penjualan, menampilkan data kinerja hanya untuk wilayah tertentu.

• Dalam dasbor pemantauan waktu nyata, menyaring nilai abnormal (seperti data suhu yang melebihi ambang batas).

• Digabungkan dengan menu dropdown atau slider, memungkinkan pengguna memilih rentang data yang ingin dilihat.

Persiapan

Prasyarat

Anda telah membuat aplikasi visualisasi.

Akses editor kanvas

Sebelum mengonfigurasi filter dan melakukan operasi terkait, ikuti langkah-langkah berikut untuk mengakses Editor Kanvas:

1. Akses konsol DataV.

2. Di halaman Projects, arahkan mouse Anda ke aplikasi target dan klik Edit untuk mengakses halaman editor kanvas.

Buat filter

Anda dapat membuat filter menggunakan dua metode berikut.

• Buat Filter di Panel

  1. Di halaman Canvas Editor, klik ikon filter data di toolbar atas untuk mengakses panel Data Filter, lalu klik Create.

  2. Di area konfigurasi filter, masukkan nama filter dan kode filter kustom, lalu klik Save.

• Buat Filter di Widget.

  1. Di halaman Canvas Editor, klik ikon daftar aset di toolbar atas.

  2. Tambahkan widget di daftar aset (grafik kolom digunakan dalam contoh ini), dan klik ikon Data di panel konfigurasi di sebelah kanan.

  3. Di panel konfigurasi Data, pilih Data Filter dan klik Add Filter.

  4. Di halaman Set Data Source, klik di sisi kanan filter.

  5. Di panel konfigurasi Data Filter, masukkan nama filter dan kode filter kustom, lalu klik Save.

Kelola filter

Panel filter

Di panel Data Filter di sisi kiri aplikasi visualisasi, Anda dapat mengelola filter untuk semua widget dalam aplikasi dan melihat hubungan dependensi antara filter dan widget. Filter di panel dapat ditambahkan dan digunakan oleh widget apa pun dalam aplikasi visualisasi.

Operasi dasar

• Ganti Nama Filter: Arahkan mouse Anda ke filter target, klik ikon , dan masukkan nama filter.

• Hapus Filter: Arahkan mouse Anda ke filter target dan klik ikon untuk menghapus filter.

  Penting

  Menghapus filter dapat menyebabkan widget terkait menjadi tidak tersedia. Konfirmasikan sebelum melanjutkan.

• Tambah Filter

  1. Di panel konfigurasi Data widget, pilih Data Filter dan klik Add Filter.

  2. Di halaman Set Data Source, pilih filter yang ada dari daftar Add Filter.

Urutkan filter

Urutan Filter: Setelah Anda menambahkan beberapa filter ke sumber data widget, data diproses secara berurutan melalui setiap filter dari atas ke bawah: Input filter pertama adalah hasil asli yang dikembalikan langsung oleh sumber data. Input filter kedua adalah data output yang diproses oleh filter pertama. Filter berikutnya mengikuti pola ini, dengan setiap filter memproses berdasarkan hasil output dari filter sebelumnya. Output akhir adalah hasil data setelah pemrosesan bertingkat oleh semua filter.

Debug filter

1. Pada halaman Set Data Source, klik Enable Filter Debugging yang terletak di bawah Data Filter.

2. Edit kode filter dan klik Test saat Anda selesai.

   Setelah pengujian berhasil, hasil penyaringan data ditampilkan. Seperti yang ditunjukkan pada gambar berikut, bagian atas dan bawah kotak dialog di sebelah kiri menampilkan hasil pengembalian sebelum dan sesudah data melewati filter.

Gunakan filter

Contoh ini menggunakan data video web Bilibili untuk menunjukkan cara menggunakan filter data dengan widget grafik kolom carousel daftar guna menerapkan penyaringan data.

1. Masuk ke konsol DataV.

2. Di halamanProjects, pilih aplikasi visualisasi yang Anda buat dan klik Edit untuk mengakses editor kanvas.

3. Di halaman Canvas Editor, klik ikon untuk membuka Asset List, dan masukkan List Carousel Column Chart di kotak pencarian.

4. Pilih widget saat ini dan klik ikon Data di panel kanan.

5. Klik Configure Data Source untuk mengakses halaman Data Source. Di daftar Data Source Type, pilih API, dan masukkan tautan URL Bilibili untuk data sumber (https://api.bilibili.com/x/web-interface/ranking) di kotak edit sumber data. Pilih Initiate Agent Request from server(Berlaku saat akses lintas asal gagal).

6. Klik Preview Responses of Data Source untuk melihat respons data sumber.

   Di halaman pratinjau, Anda dapat melihat bahwa responsnya adalah objek JSON. Namun, List Carousel perlu menampilkan daftar objek, dengan setiap objek berisi bidang value dan content. Oleh karena itu, Anda perlu melakukan langkah-langkah berikut untuk mengonfigurasi filter data guna mentransformasi struktur data.

7. Klik ikon di sebelah Add Filter untuk menambahkan filter.Edit isi kode di filter dan klik Save untuk melihat hasil penyaringan data.

   return data.data.list.map(item => {
     return {
       value: item.author,
       content: item.title
     };
   });

   Setelah kode filter diedit, Anda dapat melihat daftar data yang ditransformasi yang diperlukan oleh widget, dengan konten ditampilkan di bidang value dan content.

   Catatan

   Anda juga dapat mengklik ikon di hasil respons data untuk menyalinnya secara lokal untuk dilihat.

Buat dan impor potongan kode

Anda dapat menggunakan kembali filter di beberapa aplikasi visualisasi dengan membuat atau mengimpor potongan kode. Langkah-langkah pembuatan spesifik adalah sebagai berikut.

1. Gerakkan mouse Anda ke filter di daftar filter dan klik ikon Create Code Snippet.

   

2. Di kotak dialog yang muncul, lihat dan modifikasi Name dan Code, lalu klik OK.

3. Setelah potongan kode berhasil disimpan, di halaman Data Sources, klik Code Snippets untuk melihat dan mengelola potongan kode.

   

   Catatan

   Anda juga dapat mengklik Create di bagian atas daftar di halamanCode Snippetsuntuk membuat potongan kode baru dan menyimpannya ke daftar di bawah untuk digunakan widget.

   Setelah potongan kode berhasil dibuat, Anda dapat melanjutkan dengan langkah-langkah berikut untuk mengimpor potongan kode ke widget untuk aplikasi.

4. Klik kanan di kotak edit kode filter dan pilih potongan kode yang ada dari kotak dialog impor untuk menyelesaikan impor potongan kode.

   

   Catatan

   Fitur impor potongan kode memungkinkan berbagi dan penggunaan ulang kode filter di antara beberapa aplikasi visualisasi.

Kesalahan umum

• Data Source Error: Setelah menambahkan filter data di panel data widget, jika Anda mengganti sumber data saat ini ke jenis lain, dua kesalahan berikut ditampilkan di panel data, memperingatkan pengguna bahwa ada masalah dengan konfigurasi sumber data.

  Penting

  Saat sumber data tidak normal, bahkan jika antarmuka mengembalikan konten data, filter di panel data tetap dinonaktifkan (berwarna abu-abu). Karena aliran data sudah memiliki pengecualian di sumber, pemrosesan penyaringan selanjutnya tidak lagi memiliki arti praktis.

• Filter Error: Selama proses penyaringan, jika eksekusi kode mengalami kesalahan, pesan kesalahan ditampilkan di dua tempat di antarmuka.

  Gambar 1. Kesalahan 1

  Gambar 2. Kesalahan 2

Referensi

Untuk informasi lebih lanjut, lihat Cara lain menggunakan filter di widget yang berbeda.