使用 Tremor 在 React 中創建很棒的儀表板

如果您是從頭開始，在 React 中構建複雜的用戶界面（如儀表板）可能會令人望而生畏。值得慶幸的是，您不必這樣做。

您可以使用的最好的組件庫之一是 Tremor，它允許您在 React 中輕鬆創建現代的、響應式的儀表板。了解如何使用 Tremor 在 React 中創建儀表板。

什麼是震顫？

Tremor 是一個現代的、開源的、低級的 UI 組件庫，用於在 React 中構建儀表板。Tremor 建立在 Tailwind CSS、React 和 Recharts（React 的另一個基於組件的圖表庫）之上。最重要的是，它使用了來自 Heroicons 的圖標。

它擁有 20 多個組件，具有構建出色的分析界面（如圖表、卡片和輸入元素）所需的所有要素。該庫包括小型模塊化組件，例如徽章、按鈕、下拉菜單和選項卡，您可以將它們組合起來創建完整的儀表板。

讓 Tremor 脫穎而出的是它非常自以為是，所以只要您同意圖書館的決定，您就可以輕而易舉地啟動一個具有專業外觀的儀表板。

當然，Tremor 支持自定義，並且可以通過 React 的道具系統輕鬆實現。

如何開始震顫

首先使用create-react-app包（或 Vite，如果你喜歡的話）創建一個新的 React 應用程序。

您需要在系統上安裝 Node.js 和 npm。您可以通過在命令行上運行node –version和npm –version來確認這一點。如果缺少任何一個命令，您可以使用一個簡單的過程安裝它們；例如，請參閱本指南以在 Windows 上安裝 Node.js 和 npm。

使用 Tremor 設置你的 React 項目

1. 打開您的終端並使用cd命令導航到您的首選目錄。
2. 運行npx create-react-app 震顫教程。此命令將在您系統的當前目錄中創建一個名為tremor-tutorial的新 React 應用程序。
3. 通過運行cd tremor-tutorial切換到應用程序目錄。
4. 使用以下命令在 React 項目中安裝 Tremor： npm install @tremor/react
5. 安裝 Tremor 後，通過在導入的底部添加以下行，將包導入App.js（如果使用 Vite，則導入 main.jsx）： import "@tremor/react/dist/esm/tremor.css";

儘管 Tremor 使用 Tailwind CSS，但您無需將其安裝在 React 應用程序中即可使用該庫。這是因為 Tremor 已經在內部設置了 Tailwind。但是，如果您願意，請查看我們關於在 React 中安裝 Tailwind CSS 的教程。

接下來，使用以下命令在您的項目中安裝 Heroicons：

npm i heroicons@1.0.6 @tremor/react

現在，讓我們刪除src/App.js文件中不必要的代碼。這是我們在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>
  );
}


接下來，在您的src文件夾中創建一個專用的組件子文件夾。在該組件文件夾中，創建一個新的Dashboard.js文件並添加以下代碼：

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


export default Dashboard;


通過在其他導入之後添加以下語句，在App.js中導入 Dashboard 組件：

import Dashboard from "./components/Dashboard";


最後，通過在h1元素下方添加<Dashboard />來在 React 應用程序中顯示該組件。

使用 Tremor 創建儀表板

要使用 Tremor 創建一個完整的儀表板，只需選擇一個可用的塊即可輕鬆完成。塊是由不同的小型模塊化組件組成的預製佈局。

一個很好的起點是Tremor 的塊部分，它展示了您可以使用的不同類型的預構建塊組件。例如，佈局 shell 讓您可以將不同的組件組合在一起以創建儀表板。

首先，將以下代碼添加到您的Dashboard.js文件中：

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>

shell 塊包含您在文件頂部導入的不同組件。如果您在瀏覽器中預覽它，您只會看到兩個空塊。

您可以使用 Tremor 的預構建組件（如圖表、卡片或表格）填充您的塊。您可以從 API（REST 或 GraphQL）中提取數據或將其存儲在組件內部的對像數組中。

要將組件添加到 shell 塊，請將<div className=”h-96″/>行替換為以下內容：

<Title>Performance</Title>


<Text>Comparison between Sales and Profit</Text>

之後，在返回語句之前添加以下數組（這是儀表板的主要部分將顯示的數據）：

// 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) =>

接下來，將以下代碼添加到文件中的valueFormatter之後：

// 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",
  },
];


對於對象的類別數組，您必須映射每個對像以在單獨的Card組件中顯示數據。首先，刪除 KPI 部分中的 Card 組件，然後將其替換為以下代碼：

{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>

就是這樣。您已經使用 Tremor 創建了您的第一個儀表板。通過運行npm start查看您的儀表板。它應該類似於上面的屏幕截圖。

自定義震顫組件

Tremor 允許使用道具進行自定義。您需要查看要自定義的組件的文檔，並檢查包含的所有屬性及其默認值。

例如，如果你有一個 <LineChart />，你可以通過傳遞showXAxis={false} 屬性來隱藏 x 軸，或者使用height={h-40}改變高度。對於在 Tailwind CSS 中聲明值的道具，如大小、間距、顏色等，您必須使用 Tailwind 實用程序類。

輕鬆構建複雜的 React 儀表板

感謝像 Tremor 這樣的組件庫，您不需要從頭開始構建 UI 的每個部分。使用像 Tremor 這樣的庫可以節省您創建複雜的響應式 UI 的時間和麻煩。