Tạo Bảng điều khiển tuyệt vời trong React bằng Tremor

Xây dựng giao diện người dùng phức tạp trong React, chẳng hạn như bảng điều khiển, có thể gây khó khăn nếu bạn làm từ đầu. Rất may, bạn không phải làm như vậy.

Một trong những thư viện thành phần tốt nhất mà bạn có thể sử dụng là Tremor cho phép bạn tạo các bảng điều khiển hiện đại, đáp ứng nhanh trong React mà không tốn nhiều công sức. Tìm hiểu cách sử dụng Tremor để tạo bảng điều khiển trong React.

Rung động là gì?

Tremor là một thư viện thành phần giao diện người dùng cấp thấp, nguồn mở, hiện đại để xây dựng bảng điều khiển trong React. Tremor được xây dựng dựa trên Tailwind CSS, React và Recharts (một thư viện biểu đồ dựa trên thành phần khác dành cho React). Trên hết, nó sử dụng các biểu tượng từ Heroicons.

Nó tự hào có hơn 20 thành phần với tất cả các yếu tố cần thiết để xây dựng một giao diện phân tích tuyệt vời như biểu đồ, thẻ và các yếu tố đầu vào. Thư viện bao gồm các thành phần nhỏ, theo mô-đun như huy hiệu, nút, danh sách thả xuống và tab mà bạn có thể kết hợp để tạo trang tổng quan chính thức.

Điều khiến Tremor trở nên nổi bật là nó được đánh giá cao, vì vậy miễn là bạn đồng ý với các quyết định của thư viện, bạn có thể kích hoạt một bảng điều khiển chuyên nghiệp một cách dễ dàng.

Có bao nhiêu trường hợp bộ nhớ cache l3 sẽ có trong bộ xử lý lõi tứ?

Tất nhiên, Tremor hỗ trợ tùy chỉnh và giúp bạn dễ dàng thực hiện điều đó thông qua hệ thống đạo cụ của React.

Làm thế nào để bắt đầu với run

bắt đầu bằng tạo một ứng dụng React mới sử dụng tạo-phản ứng-ứng dụng gói (hoặc Vite nếu đó là những gì bạn thích).

Bạn cần cài đặt sẵn Node.js và npm trên hệ thống của mình. Bạn có thể xác nhận điều này bằng cách chạy nút --version và sau đó npm --version trên một dòng lệnh. Nếu một trong hai lệnh bị thiếu, bạn có thể cài đặt chúng bằng một quy trình đơn giản; xem hướng dẫn này để cài đặt Node.js và npm trên Windows , Ví dụ.

Thiết lập dự án React của bạn với Tremor

1. Mở thiết bị đầu cuối của bạn và điều hướng đến thư mục ưa thích của bạn bằng cách sử dụng đĩa CD chỉ huy.
2. Chạy npx tạo-react-app run-hướng dẫn . Lệnh này sẽ tạo một ứng dụng React mới có tên chấn động-hướng dẫn trên hệ thống của bạn trong thư mục hiện tại.
3. Chuyển sang thư mục ứng dụng bằng cách chạy cd run-hướng dẫn .
4. Cài đặt Tremor trong dự án React của bạn bằng lệnh sau:

    npm install @tremor/react

5. Khi bạn đã cài đặt Tremor, hãy nhập gói vào App.js (hoặc là chính.jsx nếu bạn đã sử dụng Vite) bằng cách thêm dòng sau vào cuối phần nhập:

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

Mặc dù Tremor sử dụng Tailwind CSS nhưng bạn không cần cài đặt nó trong ứng dụng React để sử dụng thư viện. Điều này là do Tremor đã thiết lập Tailwind trong nội bộ. Tuy nhiên, nếu bạn muốn, hãy xem hướng dẫn của chúng tôi về cài đặt Tailwind CSS trong React .

Tiếp theo, cài đặt Heroicons trong dự án của bạn bằng lệnh sau:

 npm i heroicons@1.0.6 @tremor/react

Bây giờ, hãy xóa mã không cần thiết trong src/App.js tập tin. Đây là mã khởi động của chúng tôi trong App.js :

 import "./App.css"; 
import "@tremor/react/dist/esm/tremor.css"; 
export default function App() { 
  return ( 
    <div> 
      <h1>Our Awesome React Dashboard</h1>  
    </div> 
  ); 
} 

Tiếp theo, tạo một chuyên dụng các thành phần thư mục con trong của bạn src thư mục. Trong đó các thành phần thư mục, tạo mới Bảng điều khiển.js tập tin và thêm đoạn mã sau:

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

Nhập thành phần Bảng điều khiển trong App.js bằng cách thêm câu lệnh sau sau các lần nhập khác:

 import Dashboard from "./components/Dashboard"; 

Cuối cùng, hiển thị thành phần trong ứng dụng React của bạn bằng cách thêm bên dưới h1 yếu tố.

Tạo một bảng điều khiển với run

Để tạo một bảng điều khiển hoàn chỉnh bằng cách sử dụng Tremor, với ít phiền phức nhất, hãy chọn một trong các khối có sẵn. Các khối là các bố cục dựng sẵn được tạo thành từ các thành phần mô-đun nhỏ khác nhau.

Một điểm khởi đầu tốt là Khối chấn động phần giới thiệu các loại thành phần khối dựng sẵn khác nhau mà bạn có thể sử dụng. Ví dụ: trình bao bố cục cho phép bạn ghép các thành phần khác nhau lại với nhau để tạo trang tổng quan.

Đầu tiên, thêm đoạn mã sau vào của bạn Bảng điều khiển.js tập tin:

 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; 
 

Khối shell chứa các thành phần khác nhau mà bạn nhập ở đầu tệp. Nếu bạn xem trước phần này trong trình duyệt của mình, bạn sẽ chỉ thấy hai khối trống.

Bạn có thể thêm các khối của mình bằng các thành phần dựng sẵn của Tremor, chẳng hạn như biểu đồ, thẻ hoặc bảng. Bạn có thể lấy dữ liệu từ API (REST hoặc GraphQL) hoặc lưu trữ dữ liệu đó trong một mảng đối tượng ngay bên trong thành phần của bạn.

Để thêm một thành phần vào khối shell của bạn, hãy thay thế

 <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> 
))}