스크립트
00:00:00TanStack melakukannya lagi, kali ini menyelesaikan masalah grafik di JavaScript dengan TanStack Charts.
00:00:04Perpustakaan ini menjanjikan ukuran bundle yang lebih kecil dari ReCharts, memiliki output SVG dan
00:00:08canvas, animasi, tooltip, interaksi, dan seperti kebanyakan pustaka TanStack, ia memiliki inti yang
00:00:13framework-agnostic, keamanan tipe, dan pengalaman pengembang yang luar biasa. Dan meskipun sangat baru,
00:00:18Anda sudah bisa membangun berbagai jenis grafik darinya, mulai dari grafik garis dasar
00:00:22atau grafik batang, hingga yang lebih kompleks seperti diagram Sankey, peta pohon, peta panas, grafik radar,
00:00:27grafik donat, pengukur, dan bahkan peta dunia yang sangat keren. Pustaka ini mungkin sudah bisa membuat apa pun
00:00:32yang Anda butuhkan. Hal pertama yang ingin saya bahas adalah bagaimana TanStack Charts benar-benar menangani grafik,
00:00:41karena cara kerjanya mirip dengan pustaka seperti ggplot2 di R, menggunakan gramatika grafis. Pendekatan ini
00:00:47tidak memperlakukan grafik sebagai jenis tetap, melainkan sebagai komposisi tanda (mark),
00:00:51skala, dan pemetaan. Jadi alih-alih meminta grafik batang, Anda menentukan sesuatu seperti letakkan beberapa batang
00:00:56di sini, petakan variabel ini ke x, variabel itu ke y, dan terapkan skala ini, dan dari deskripsi tersebut,
00:01:01sebuah grafik akan tercipta. Ini adalah perbedaan yang sangat halus, tetapi itulah yang membuat pustaka ini sangat
00:01:05fleksibel. Maksud saya, seseorang pernah bertanya di Twitter apakah pustaka ini bisa membuat grafik seperti ini, dan jawabannya ya.
00:01:11Ini bukan jenis grafik bawaan, pustaka ini cukup fleksibel untuk membuatnya.
00:01:14Mengenai cara kerjanya, jika kita melihat demo grafik batang di sini yang memetakan frekuensi
00:01:18huruf dalam bahasa Inggris, kode paling penting untuk ini hanya 20 baris. Ini dimulai dengan definisi grafik
00:01:23menggunakan fungsi define chart, dan di dalamnya kita mulai dengan tanda (marks). Anda bisa menganggap
00:01:28tanda sebagai elemen yang benar-benar digambar, seperti garis, titik, atau batang. Saya membuat situs demo
00:01:32yang mencoba menggunakan semua tanda yang tersedia di TanStack Charts, dan saya pikir ada sekitar 55 tanda,
00:01:37jadi ini seharusnya menjadi contoh yang cukup baik tentang grafik yang bisa Anda bangun di TanStack Charts,
00:01:40dan jumlahnya memang sangat banyak. Anda harus bersabar mengikuti saya,
00:01:43tetapi Anda bisa melihat kita memiliki grafik batang normal, baik horizontal maupun vertikal,
00:01:47begitu juga dengan garis dan area. Lalu kita juga memiliki grafik titik,
00:01:51kita punya aturan (rule) yaitu garis putus-putus yang melintasi grafik, yang bisa dibuat secara vertikal,
00:01:54Anda dapat membuat grafik tick, baik x maupun y, persegi panjang, sel, pita,
00:01:59panah, vektor sehingga Anda bisa membuat medan angin, penghubung, heksagon,
00:02:04teks sehingga tanda bisa berupa teks untuk merendernya di mana pun yang Anda inginkan dalam grafik. Kita punya bingkai,
00:02:08garis, perbedaan, grafik regresi linier, kotak, grafik biola,
00:02:13grafik wafel. Anda bahkan sudah bisa membuat peta kontur di sini. Ngomong-ngomong,
00:02:17pustaka ini baru rilis seminggu, luar biasa, fitur sebanyak ini sudah ada, dan daftarnya masih berlanjut.
00:02:22Kita bisa membuat grafik ini, entah apa gunanya itu, saya bahkan tidak tahu untuk apa.
00:02:25Kita punya grafik peta pohon, grafik sunburst, diagram Sankey, panduan fokus garis silang,
00:02:29grafik radial seperti diagram lingkaran, donat, atau radar, dan kemudian
00:02:33terakhir di bawah ini, kita juga punya geoshape jika Anda menginginkan grafik peta dunia. Seperti yang saya bilang, ada begitu banyak
00:02:38elemen yang bisa Anda gabungkan untuk membuat hampir semua grafik yang Anda butuhkan. Kembali ke demo grafik batang kita,
00:02:42satu-satunya tanda yang saya perlukan adalah bar y, dan di dalam sini, Anda memasukkan data Anda,
00:02:47yaitu larik (array) objek ini. Setelah itu, Anda menentukan apa kunci x dan kunci y,
00:02:51dan ini sangat bagus karena Anda tidak harus menyesuaikan data dengan struktur tertentu,
00:02:56Anda bisa langsung mendefinisikannya di sini. Ini juga aman secara tipe (type-safe), jadi jika saya salah mengetik salah satu kunci ini,
00:03:00sistem akan langsung memberi tahu saya, itulah keamanan tipe yang kita sukai dari TanStack.
00:03:04Setelah mendefinisikan tanda yang diinginkan, kita tentukan sumbu x dan y. Untuk sumbu x,
00:03:08ini sangat sederhana. Saya menggunakan space band untuk kategori, sehingga huruf-huruf kita
00:03:12berjarak merata, dan saya juga menambahkan sedikit jarak di antaranya. Untuk sumbu y, saya menggunakan scale
00:03:17linear untuk angka, dan saya juga mengatur nice ke true, yang berarti membulatkan
00:03:21sumbu ke angka yang wajar alih-alih berhenti tepat di nilai tertinggi yang kita miliki. Jika saya mengubahnya ke false,
00:03:26bagian atas sumbu di sini akan berakhir tepat di ujung batang tertinggi. Di sini,
00:03:30saya juga memberikan label pada sumbu serta format, agar angka-angka ini bisa diformat sebagai persentase
00:03:34bukan titik desimal. Semua definisi tersebut adalah bagian yang independen dari framework, tetapi untuk merendernya
00:03:39di React, yang perlu kita lakukan hanyalah mengimpor komponen chart, memasukkan definisinya,
00:03:43memberikan tinggi, dan label, dan hanya itu yang kita butuhkan untuk membuat grafik. Tapi satu hal yang ingin saya
00:03:47perjelas adalah kita tidak menggunakan komponen grafik batang di sini. Kita mendefinisikan di kode di mana kita ingin
00:03:51merender tanda kita, dan kebetulan hasil akhirnya adalah grafik batang, ini adalah perbedaan yang sangat halus,
00:03:55tetapi itulah penggunaan gramatika grafis. Sebagai contoh fleksibilitas dari hal ini,
00:04:00misalkan saya ingin garis rata-rata pada grafik batang saya, yang perlu saya lakukan hanyalah masuk ke larik marks dan menambahkan
00:04:04tanda baru, kali ini berupa rule Y. Contoh cepat lainnya, misal saya ingin grafik garis dengan titik dan
00:04:09area di bawahnya, saya bisa mendefinisikan semua itu sebagai marks, dan lihat itu, saya sekarang punya grafik
00:04:14jumlah pelanggan kita, yang merupakan waktu yang tepat untuk menyuruh Anda berlangganan, agar tetap update dengan AI dan
00:04:18berita developer seperti ini. Jika Anda ingin melihat lebih banyak contoh penggunaan marks ini untuk membangun
00:04:22semua berbagai grafik yang saya tunjukkan tadi, Anda bisa melihat dokumentasinya, mereka punya banyak
00:04:26contoh, dan sangat mendetail. Faktanya, saya mengambil beberapa contoh lagi dari dokumentasi mereka
00:04:30di sini hanya untuk menunjukkan kepada Anda apa yang bisa dilakukan TanStack Charts, karena saya tidak punya waktu untuk membahas semua
00:04:34fiturnya secara mendalam, itu bisa memakan waktu sekitar 20 jam, tetapi salah satu yang paling keren adalah grafik bola dunia ini,
00:04:38saya sangat menyukainya, menurut saya sangat keren bisa melakukan ini pada pustaka yang baru berumur seminggu.
00:04:42Lalu kita juga memiliki interaksi, yang sangat keren, jadi kita punya brush di sini, kita bisa menyeretnya melintasi
00:04:46plot kita dan juga mengubah rentangnya dari setiap sisi. Kita bisa memperbesar (zoom in) grafik kita, jadi kita bisa memperbesar
00:04:51dengan baik pada grafik garis ini. Kita punya seleksi berbasis tombol ditambah seleksi keyboard, jadi jika saya mengarahkan kursor ke salah satu
00:04:56ini dan menekan spasi, semuanya bekerja dengan baik, dan Anda bisa melihat ia membaca nilai dari apa yang kita pilih
00:05:00di bawah sini. Lalu kita juga punya crosshair, jadi saat saya bergerak, Anda bisa melihat ia mencetak tanggal aktual
00:05:04yang kursornya saya arahkan pada sumbu di bawah. Pustaka ini juga memiliki tooltip dengan banyak konfigurasi,
00:05:09sehingga Anda dapat melihat saat ini diatur ke nearest X, jadi hanya jarak horizontal yang dihitung untuk titik mana
00:05:14yang akan dipilih. Kita juga bisa memilih strategi seperti group X, sehingga ia akan menunjukkan semua
00:05:18nilai tersebut ketika saya mengarahkan kursor ke area mana pun di sini. Anda juga bisa menyematkan (pin) tooltip, jadi jika saya mengarahkan kursor
00:05:22ke grafik batang ini, Anda bisa melihat tooltipnya berubah, tetapi jika saya mengklik salah satu, itu menyematkan
00:05:26tooltip dan juga menampilkan detail tambahan. Di sebelah sini, Anda juga bisa melihat kita tidak memiliki tooltip, tetapi
00:05:31ia membaca nilai-nilai tersebut secara langsung di bawah, sehingga Anda bisa menarik informasi itu keluar, dan di sini kita
00:05:35merender tooltip kustom, jadi jika saya klik untuk menyematkan, kita punya tombol tutup kustom, dan semua ini
00:05:39dilakukan di React. Pustaka ini juga mengakomodasi Anda jika ingin melakukan animasi, jadi jika saya mengubah
00:05:43nilai batang-batang ini, Anda bisa melihat animasi berjalan mulus di antara nilai yang berubah tersebut.
00:05:48Kita juga bisa mengeklik putar ulang (replay) di sini, dan Anda bisa melihat kemunculan grafik batang secara bertahap,
00:05:51dan jika saya menghapus beberapa batang di bawah, Anda bisa melihat animasinya berjalan mulus saat
00:05:55menambah atau menghapus batang tersebut. Kita bahkan bisa membuat animasi streaming, jadi saat data baru masuk,
00:06:00ia hanya menggeser garis grafik tersebut alih-alih menggambarnya ulang. Dan sebelum saya beralih ke bagaimana
00:06:03grafik-grafik ini diberi gaya, fitur terakhir yang ingin saya tunjukkan adalah fitur ekspor. Anda dapat melihat saya memiliki
00:06:07tombol di sini untuk mengunduh sebagai SVG dan PNG, dan jika saya mengkliknya, inilah hasil akhir yang saya dapatkan.
00:06:12Sekarang mari kita bicara tentang cara kita memberi tema dan gaya pada grafik ini, karena jika saya menghapus gaya dari
00:06:16grafik ini, inilah tampilan dasar bawaannya, karena secara default pustaka ini tidak memiliki gaya, ia hanya
00:06:21menggunakan warna saat ini untuk latar depan, dan latar belakangnya transparan. Ada tiga tingkat
00:06:25penataan gaya di TanStack Charts, yang pertama adalah variabel CSS. Ini adalah warna kategorikal
00:06:30dari enam properti kustom, dan Anda dapat menimpa nilai ini pada wadah apa pun yang Anda suka. Jadi jika saya mengubah
00:06:35nilai-nilai ini di sini, Anda dapat melihat bagaimana grafik ini memperbarui semua warnanya. Tingkat kedua ada pada
00:06:39blok tema (theme), yang berada di dalam definisi grafik aktual. Ini dimaksudkan untuk apa yang disebut
00:06:43sebagai perlengkapan grafik (chart furniture) daripada data, jadi ini adalah hal seperti teks, garis kisi, latar belakang,
00:06:47dan sebagainya. Kemudian tingkat ketiga ada pada tanda (marks) itu sendiri, jadi Anda dapat mengatur hal seperti isian (fill),
00:06:51garis (stroke), opasitas, ujung garis, garis putus-putus, radius sudut, fon, dan banyak lagi. Ini juga bisa berupa nilai tetap atau
00:06:57berbasis data, sehingga Anda dapat mewarnai batang berdasarkan apakah nilainya di atas target tertentu. Anda bahkan dapat membuat
00:07:01di bawah. Selagi di sana, silakan berlangganan. Seperti biasa, sampai jumpa di video berikutnya.
00:07:06Dalam rangkaian tolok ukur tersebut, fitur seperti crosshair, brushing, zooming, seleksi,
00:07:10semuanya ada. Ukuran bundelnya antara 36 hingga 43 kilobita. Jika kita bandingkan dengan Chart.js atau
00:07:16recharts, Chart.js berukuran 45 hingga 58 kilobita, dan Recharts 153 hingga 168 kilobita. Jadi TanStack
00:07:24Charts jauh lebih kecil. Bagian mengagumkan lainnya adalah filosofinya. Mereka sebenarnya
00:07:28membangun ini untuk dua hal. Pertama, orang-orang harus mendapatkan grafik yang dipoles dari deklarasi pendek,
00:07:32dan kedua, AI harus dapat menyusun, memeriksa, dan memodifikasi grafik tanpa mempelajari model seri khusus aplikasi.
00:07:38Jadi mereka merancang API ini agar agen AI dapat menulis grafik tanpa harus membaca
00:07:42dokumentasinya, dan jujur saja, saya menggunakan Claude untuk merakit sebagian besar demo yang saya buat sebelumnya, dan meskipun saya memeriksa ulang
00:07:47hal ini, yang cukup jarang terjadi akhir-akhir ini, hasilnya sebagian besar sesuai dengan yang saya harapkan. Saya hanya perlu membuat
00:07:52sangat sedikit perubahan, yang cukup mengejutkan untuk pustaka yang benar-benar baru. Jadi itulah TanStack Charts. Ini adalah
00:07:57pustaka pembuatan grafik favorit baru saya, dan perkembangannya sangat cepat. Beri tahu saya pendapat Anda di kolom komentar
00:08:01gradien dengan menggunakan data Anda. Seperti yang saya bilang, pustaka ini sangat fleksibel. Pustaka ini juga sangat ringan.