داشبوردهای عالی در React با استفاده از Tremor ایجاد کنید

با این کتابخانه React در کمترین زمان رابط های مدولار جذاب بسازید. داشبوردهای عالی در React را در ادامه معرفی کرده ایم.

ساختن یک رابط کاربری پیچیده در React، مانند داشبورد، می‌تواند دلهره‌آور باشد، اگر آن را از ابتدا انجام دهید. خوشبختانه، شما مجبور نیستید این کار را انجام دهید.

یکی از بهترین کتابخانه‌های مؤلفه‌ای که می‌توانید استفاده کنید، Tremor است که به شما امکان می‌دهد با کمی تلاش، داشبوردهای مدرن و پاسخگو را در React ایجاد کنید. با نحوه استفاده از Tremor برای ایجاد داشبورد در React آشنا شوید.

مطالب مرتبط:

نحوه ذخیره و دسترسی به کلیدهای API در یک برنامه React

محبوب ترین فریم ورک های جاوا اسکریپت 2022

Tremor چیست؟

Tremor یک کتابخانه اجزای رابط کاربری مدرن، منبع باز و سطح پایین برای ساخت داشبورد در React است. Tremor در بالای Tailwind CSS، React و Recharts (یکی دیگر از کتابخانه نمودارهای مبتنی بر مؤلفه برای React) ساخته شده است. علاوه بر این، از آیکون های Heroicons استفاده می کند.

دارای بیش از 20 مؤلفه با تمام موارد ضروری برای ساختن یک رابط تحلیلی فوق العاده مانند نمودارها، کارت ها و عناصر ورودی است. این کتابخانه شامل اجزای کوچک و مدولار مانند نشان‌ها، دکمه‌ها، فهرست‌های بازشو و برگه‌ها است که می‌توانید با ترکیب آن‌ها داشبوردهای کامل ایجاد کنید.

چیزی که Tremor را متمایز می‌کند این است که بسیار خوش‌بین است، بنابراین تا زمانی که با تصمیمات کتابخانه موافق باشید، می‌توانید داشبوردی با ظاهری حرفه‌ای را در یک نسیم راه‌اندازی کنید.

البته Tremor از سفارشی‌سازی پشتیبانی می‌کند و انجام این کار را از طریق سیستم props React آسان می‌کند.

چگونه با Tremor شروع کنیم

با ایجاد یک برنامه جدید React با استفاده از بسته create-react-app (یا اگر این چیزی است که ترجیح می دهید Vite) شروع کنید.

شما باید Node.js و npm را از قبل روی سیستم خود نصب کرده باشید. می‌توانید این موضوع را با اجرای node –version و سپس npm –version در خط فرمان تأیید کنید. اگر هر یک از دستورات گم شده است، می توانید آنها را با استفاده از یک فرآیند ساده نصب کنید. برای مثال به این راهنمای نصب Node.js و npm در ویندوز مراجعه کنید.

راه اندازی پروژه React خود با Tremor

1. ترمینال خود را باز کنید و با استفاده از دستور cd به دایرکتوری دلخواه خود بروید.
2. آموزش npx create-react-app tremor-tutorial را اجرا کنید. این دستور یک برنامه React جدید به نام tremor-tutorial روی سیستم شما در دایرکتوری فعلی ایجاد می کند.
3. با اجرای cd tremor-tutorial به دایرکتوری برنامه بروید.
4. با استفاده از دستور زیر Tremor را در پروژه React خود نصب کنید:
   npm install @tremor/react
5. هنگامی که Tremor را نصب کردید، بسته را در App.js خود (یا main.jsx اگر از Vite استفاده کرده اید) با افزودن خط زیر در پایین ورودی های خود وارد کنید

import “@tremor/react/dist/esm/tremor.css”;

اگرچه Tremor از Tailwind CSS استفاده می کند، اما برای استفاده از کتابخانه نیازی به نصب آن در برنامه React خود ندارید. این به این دلیل است که Tremor قبلاً Tailwind را به صورت داخلی راه اندازی کرده است. با این حال، اگر می خواهید، آموزش نصب Tailwind CSS در React را بررسی کنید.

سپس Heroicons را با استفاده از دستور زیر در پروژه خود نصب کنید:

npm i [email protected] @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;

مولفه Dashboard را در App.js با افزودن عبارت زیر بعد از وارد کردن های دیگر وارد کنید:

import Dashboard from “./components/Dashboard”;

در نهایت، با افزودن در زیر عنصر h1، کامپوننت را در برنامه React خود نمایش دهید.

ایجاد داشبورد با Tremor

برای ایجاد یک داشبورد کامل با استفاده از Tremor، با حداقل سر و صدا، یکی از بلوک های موجود را انتخاب کنید. بلوک ها طرح های از پیش ساخته شده ای هستند که از اجزای مختلف مدولار کوچک تشکیل شده اند.

یک نقطه شروع خوب بخش بلوک های Tremor است که انواع مختلفی از اجزای بلوک از پیش ساخته شده را نشان می دهد که می توانید از آنها استفاده کنید. به عنوان مثال، پوسته های چیدمان به شما اجازه می دهند اجزای مختلف را کنار هم قرار دهید تا یک داشبورد ایجاد کنید.

ابتدا کد زیر را به فایل 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>

      {/* 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;

بلوک پوسته شامل اجزای مختلفی است که در بالای فایل وارد می‌کنید. اگر پیش نمایش آن را در مرورگر خود مشاهده کنید، فقط دو بلوک خالی را خواهید دید.

می‌توانید بلوک‌های خود را با اجزای از پیش ساخته شده Tremor، مانند نمودار، کارت یا جدول پر کنید. می‌توانید داده‌ها را از یک API (REST یا GraphQL) بکشید یا آن‌ها را در آرایه‌ای از اشیاء درست در داخل مؤلفه خود ذخیره کنید.

برای افزودن یک جزء به بلوک پوسته خود، خط

 <div className=”h-96″ />

را با عبارت زیر جایگزین کنید:

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

سپس کد زیر را بعد از 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 حذف کنید و سپس آن را با این کد جایگزین کنید:

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

و بس. شما اولین داشبورد خود را با Tremor ایجاد کردید. با اجرای npm start، داشبورد خود را مشاهده کنید. باید مشابه تصویر بالا باشد.

سفارشی کردن اجزای Tremor

Tremor امکان سفارشی سازی با استفاده از لوازم جانبی را فراهم می کند. شما باید مستندات مؤلفه‌ای را که می‌خواهید سفارشی کنید بررسی کنید و همه ویژگی‌های موجود با مقادیر پیش‌فرضشان را بررسی کنید.

به عنوان مثال، اگر یک دارید، می‌توانید با عبور از prop showXAxis={false} محور x را پنهان کنید یا ارتفاع را با استفاده از height={h-40} تغییر دهید. برای اعلان مقادیر موجود در Tailwind CSS، مانند اندازه، فاصله، رنگ‌ها و بقیه، باید از کلاس‌های ابزار Tailwind استفاده کنید.

به راحتی داشبوردهای واکنش پیچیده بسازید

به لطف کتابخانه های مؤلفه ای مانند Tremor، نیازی نیست که تک تک قسمت های رابط کاربری خود را از ابتدا بسازید. استفاده از کتابخانه ای مانند Tremor می تواند هم در زمان و هم از دردسر ایجاد رابط های کاربری پیچیده پاسخگو صرفه جویی کند.