Membuat antarmuka pengguna yang rumit di React, seperti dasbor, bisa jadi menakutkan jika Anda melakukannya dari awal. Untungnya, Anda tidak perlu melakukannya.

Salah satu pustaka komponen terbaik yang dapat Anda gunakan adalah Tremor yang memungkinkan Anda membuat dasbor modern dan responsif di React dengan sedikit usaha. Cari tahu cara menggunakan Tremor untuk membuat dasbor di React.

Apa itu Tremor?

Tremor adalah pustaka komponen UI tingkat rendah, sumber terbuka, dan modern untuk membuat dasbor di React. Tremor dibangun di atas Tailwind CSS, React, dan Recharts (library charting berbasis komponen lainnya untuk React). Selain itu, ia menggunakan ikon dari Heroicons.

Ini membanggakan lebih dari 20 komponen dengan semua hal penting untuk membangun antarmuka analitik yang fantastis seperti bagan, kartu, dan elemen input. Pustaka mencakup komponen modular kecil seperti lencana, tombol, dropdown, dan tab, yang dapat Anda gabungkan untuk membuat dasbor lengkap.

Apa yang membuat Tremor menonjol adalah pendapatnya yang tinggi, jadi selama Anda setuju dengan keputusan perpustakaan, Anda dapat menjalankan dasbor yang terlihat profesional dengan mudah.

Tremor mendukung kustomisasi, tentu saja, dan membuatnya mudah dilakukan melalui sistem props React.

Bagaimana Memulai Dengan Tremor

Mulai oleh membuat aplikasi React baru menggunakan buat-reaksi-aplikasi paket (atau Vite jika itu yang Anda inginkan).

Anda harus sudah menginstal Node.js dan npm di sistem Anda. Anda dapat mengonfirmasi ini dengan menjalankan simpul --versi kemudian npm --versi pada baris perintah. Jika salah satu perintah tidak ada, Anda dapat menginstalnya menggunakan proses sederhana; lihat panduan ini untuk menginstal Node.js dan npm di Windows, Misalnya.

Menyiapkan Proyek React Anda Dengan Tremor

1. Buka terminal Anda dan arahkan ke direktori pilihan Anda menggunakan CD memerintah.
2. Berlari npx buat-reaksi-aplikasi tremor-tutorial. Perintah ini akan membuat aplikasi React baru bernama tremor-tutorial pada sistem Anda di direktori saat ini.
3. Beralih ke direktori aplikasi dengan menjalankan cd tremor-tutorial.
4. Instal Tremor di proyek React Anda menggunakan perintah berikut:

   npm instal @tremor/react

5. Setelah Anda menginstal Tremor, impor paket di Aplikasi.js (atau main.jsx jika Anda menggunakan Vite) dengan menambahkan baris berikut di bagian bawah impor Anda:

   impor"@tremor/react/dist/esm/tremor.css";

Meskipun Tremor menggunakan Tailwind CSS, Anda tidak perlu menginstalnya di aplikasi React untuk menggunakan library tersebut. Ini karena Tremor sudah menyiapkan Tailwind secara internal. Namun, jika Anda mau, lihat tutorial kami di menginstal Tailwind CSS di React.

Selanjutnya, instal Heroicons di proyek Anda menggunakan perintah berikut:

npm i [email protected] @tremor/react

Sekarang, mari kita hapus kode yang tidak perlu di file src/App.js mengajukan. Ini kode awal kami Aplikasi.js:

impor"./App.css";
impor"@tremor/react/dist/esm/tremor.css";
eksporbawaanfungsiAplikasi() {
kembali (


Dasbor React Kami yang Luar Biasa</h1> 
 </div>
 );
}

Selanjutnya, buat yang berdedikasi komponen subfolder di Anda src map. Karena komponen folder, buat yang baru Dashboard.js file dan tambahkan kode berikut:

fungsiDasbor() {
kembali<div>Dasbordiv>;
}
eksporbawaan Dasbor;

Impor komponen Dasbor masuk Aplikasi.js dengan menambahkan pernyataan berikut setelah impor lainnya:

impor Dasbor dari"./komponen/Dasbor";

Terakhir, tampilkan komponen di aplikasi React Anda dengan menambahkan dibawah h1 elemen.

Membuat Dasbor Dengan Tremor

Untuk membuat dasbor lengkap menggunakan Tremor, dengan sedikit kerumitan, pilih salah satu blok yang tersedia. Blok adalah tata letak prebuilt yang terdiri dari komponen modular kecil yang berbeda.

Titik awal yang baik adalah Blok Tremor bagian yang menampilkan berbagai jenis komponen blok prebuilt yang dapat Anda gunakan. Shell tata letak, misalnya, memungkinkan Anda menyatukan berbagai komponen untuk membuat dasbor.

Pertama, tambahkan kode berikut ke file Anda Dashboard.js mengajukan:

impor {
 Kartu,
 Judul,
 Teks,
 ColGrid,
 Bagan Area,
 bilah kemajuan,
 Metrik,
 Melenturkan,
} dari"@tremor/reaksi";
fungsiDasbor() {
kembali (


 {/* Bagian utama */}
 "mt-6">
 
"h-96" /> 
 </Card>
 {/* bagian KPI */}
 2} gapX="gap-x-6" gapY="gap-y -6" marginTop="mt-6">
 
 {/* Placeholder untuk menyetel tinggi */}
 
"h-28" />
 </Card> 
 </ColGrid>
 </main>
 );
}
ekspor Dasbor default;
Blok shell berisi berbagai komponen yang Anda mengimpor di bagian atas file. Jika Anda mempratinjau ini di browser, Anda hanya akan melihat dua blok kosong.
Anda dapat mengisi blok Anda dengan komponen bawaan Tremor, seperti bagan, kartu, atau tabel. Anda dapat mengambil data dari API (REST atau GraphQL) atau menyimpannya dalam array objek tepat di dalam komponen Anda.
Untuk menambahkan komponen ke blok shell Anda, ganti 
 dengan baris berikut:
 
 
Setelah itu, tambahkan larik berikut sebelum pernyataan return Anda (ini adalah data yang akan ditampilkan oleh bagian utama dasbor):
 
 // Data untuk ditampilkan itu bagian utama
const data = [
 {
 Bulan: "21 Jan",
 Penjualan: 2890,
 Laba: 2400,
 },
 {
 Bulan: "Feb 21",
 Penjualan: 1890,
 Untung: 1398,
 },
 // ...
 {
 Bulan: "22 Jan",
 Penjualan: 3890,
 Keuntungan: 2980,
 },
];
const valueFormatter = (angka) =>< /span>
$ ${Intl.NumberFormat("us").format (number).toString()};
Selanjutnya, tambahkan kode berikut ke file Anda setelah valueFormatter:
 
 // Data untuk ditampilkan di KPI bagian
const kategori = [
 {
 judul: "Penjualan",
 metrik: "$12.699",
 nilai persentase: 15,9,
 target: "$ 80.000",
 },
 {
 title: "Laba",
 metrik: "$45.564" span>,
 nilai persentase: 36,5,
 target: "$125.000",
 },
 {
 title: "Pelanggan",
 metrik: "1.072",
 nilai persentase:  53.6,
 target: "2.000",
 },
 {
 judul: "Ikhtisar Penjualan Tahunan",
 metrik: "$201.072",
 nilai persentase: 28,7,
 target: "$700,000",
 },
];
Untuk kategori array objek, Anda harus memetakan setiap objek untuk menampilkan data dalam komponen Kartu yang terpisah. Hapus dulu komponen Card di bagian KPI lalu ganti dengan kode ini:
 
 {categories.map((item) => span> (
 
 {item.title}</Text>
 {item.metric}</Metrik> 
 "mt-4">
  truncate={true}
 >{`${item.percentageValue}% (${item.metric} )`}</Text>
 {item.target}</Text>
 </Flex>
  persentaseNilai={ item.percentageValue}
 marginTop="mt-2"
 />
 </Card>
))}
Dan selesai. Anda telah membuat dasbor pertama dengan Tremor. Lihat dasbor Anda dengan menjalankan npm start. Seharusnya mirip dengan tangkapan layar di atas.
 Menyesuaikan Komponen Tremor
Tremor memungkinkan penyesuaian menggunakan alat peraga. Anda harus meninjau dokumentasi komponen yang ingin Anda sesuaikan dan memeriksa semua properti yang disertakan dengan nilai defaultnya.
Misalnya, jika Anda memiliki , Anda dapat menyembunyikan sumbu x dengan meneruskan prop showXAxis={false} atau mengubah ketinggian menggunakan tinggi={h-40}. Untuk properti yang mendeklarasikan nilai yang ditemukan di Tailwind CSS, seperti ukuran, spasi, warna, dan lainnya, Anda harus menggunakan kelas utilitas Tailwind.
 Bangun Dasbor Bereaksi Kompleks Dengan Mudah
Berkat pustaka komponen seperti Tremor, Anda tidak perlu membangun setiap satu bagian dari UI Anda dari awal. Menggunakan library seperti Tremor dapat menghemat waktu dan kerumitan Anda dalam membuat UI responsif yang kompleks.