Buat Dasbor Luar Biasa di React Menggunakan Tremor

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 masukan. 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).

cara memblokir diri sendiri dari situs web

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. Lari 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 install @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:

    import "@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 heroicons@1.0.6 @tremor/react

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

 import "./App.css"; 
import "@tremor/react/dist/esm/tremor.css"; 
export default function App() { 
  return ( 
    <div> 
      <h1>Our Awesome React Dashboard</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:

 function Dashboard() { 
  return <div>Dashboard</div>; 
} 
 
export default Dashboard; 

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

 import Dashboard from "./components/Dashboard"; 

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:

 import { 
  Card, 
  Title, 
  Text, 
  ColGrid, 
  AreaChart, 
  ProgressBar, 
  Metric, 
  Flex, 
} from "@tremor/react"; 
 
function Dashboard() { 
  return ( 
    <main> 
      <Title>Sales Dashboard</Title> 
      <Text>This is a sample dashboard built with Tremor.</Text> 
 
      {/* Main section */} 
      <Card marginTop="mt-6"> 
        <div className="h-96" /> 
      </Card> 
 
      {/* KPI section */} 
      <ColGrid numColsMd={2} gapX="gap-x-6" gapY="gap-y-6" marginTop="mt-6"> 
        <Card> 
          {/* Placeholder to set height */} 
          <div className="h-28" /> 
        </Card> 
      </ColGrid> 
    </main> 
  ); 
} 
 
export default Dashboard; 
 

Blok shell berisi berbagai komponen yang Anda impor 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 menarik data dari API (REST atau GraphQL) atau menyimpannya dalam array objek tepat di dalam komponen Anda.

Untuk menambahkan komponen ke blok shell Anda, ganti

 <Title>Performance</Title> 
 
<Text>Comparison between Sales and Profit</Text> 
 
<AreaChart 
  marginTop="mt-4" 
  data={data} 
  categories={["Sales", "Profit"]} 
  dataKey="Month" 
  colors={["indigo", "fuchsia"]} 
  valueFormatter={valueFormatter} 
  height="h-80" 
/> 
 

 // Data to display in the main section 
const data = [ 
  { 
    Month: "Jan 21", 
    Sales: 2890, 
    Profit: 2400, 
  }, 
  { 
    Month: "Feb 21", 
    Sales: 1890, 
    Profit: 1398, 
  }, 
// ... 
  { 
    Month: "Jan 22", 
    Sales: 3890, 
    Profit: 2980, 
  }, 
]; 
 
const valueFormatter = (number) => 
 
$ ${Intl.NumberFormat("us").format(number).toString()}; 
 

 // Data to display in KPI section 
const categories = [ 
  { 
    title: "Sales", 
    metric: "$ 12,699", 
    percentageValue: 15.9, 
    target: "$ 80,000", 
  }, 
  { 
    title: "Profit", 
    metric: "$ 45,564", 
    percentageValue: 36.5, 
    target: "$ 125,000", 
  }, 
  { 
    title: "Customers", 
    metric: "1,072", 
    percentageValue: 53.6, 
    target: "2,000", 
  }, 
  { 
    title: "Yearly Sales Overview", 
    metric: "$ 201,072", 
    percentageValue: 28.7, 
    target: "$ 700,000", 
  }, 
]; 
 

 {categories.map((item) => ( 
  <Card key={item.title}> 
    <Text>{item.title}</Text> 
    <Metric>{item.metric}</Metric> 
    <Flex marginTop="mt-4"> 
      <Text 
        truncate={true} 
      >{`${item.percentageValue}% (${item.metric})`}</Text> 
 
      <Text>{item.target}</Text> 
    </Flex> 
 
    <ProgressBar 
      percentageValue={item.percentageValue} 
      marginTop="mt-2" 
    /> 
  </Card> 
))}