צור לוחות מחוונים מדהימים ב-React באמצעות רעד

בניית ממשק משתמש מורכב ב-React, כמו לוח מחוונים, יכולה להיות מרתיעה אם אתה עושה את זה מאפס. למרבה המזל, אתה לא צריך לעשות זאת.

אחת מספריות הרכיבים הטובות ביותר שאתה יכול להשתמש בהן היא Tremor המאפשרת לך ליצור לוחות מחוונים מודרניים ומגיבים ב-React עם מעט מאמץ. גלה כיצד להשתמש ב-Tremor כדי ליצור לוחות מחוונים ב-React.

מה זה רעד?

Tremor היא ספריית רכיבי ממשק משתמש מודרנית, בקוד פתוח, ברמה נמוכה לבניית לוחות מחוונים ב-React. Tremor נבנה על גבי Tailwind CSS, React ו-Recharts (ספריית תרשימים נוספת מבוססת רכיבים עבור React). נוסף על כך, הוא משתמש באייקונים מ-Heroicons.

הוא מתהדר ביותר מ-20 רכיבים עם כל המרכיבים החיוניים לבניית ממשק אנליטי פנטסטי כמו תרשימים, כרטיסים ורכיבי קלט. הספרייה כוללת רכיבים קטנים ומודולריים כמו תגים, לחצנים, תפריטים נפתחים וכרטיסיות, שתוכל לשלב כדי ליצור לוחות מחוונים מלאים.

מה שמייחד את Tremor הוא שהיא מאוד דעתנית, אז כל עוד אתה בסדר עם ההחלטות של הספרייה, אתה יכול להפעיל לוח מחוונים בעל מראה מקצועי בבריזה.

Tremor תומך בהתאמה אישית, כמובן, ומקל לעשות זאת באמצעות מערכת האביזרים של React.

איך להתחיל עם רעד

התחל ב יצירת אפליקציית React חדשה משתמש ב ליצור-להגיב-אפליקציה חבילה (או Vite אם זה מה שאתה מעדיף).

כיצד לסגור חשבון מיקרוסופט

תצטרך כבר להיות מותקנים של Node.js ו-npm במערכת שלך. אתה יכול לאשר זאת על ידי הפעלה node --version ואז npm --גרסה בשורת פקודה. אם אחת הפקודות חסרות, אתה יכול להתקין אותן באמצעות תהליך פשוט; עיין במדריך זה ל התקנת Node.js ו-npm ב-Windows , לדוגמה.

הגדרת פרויקט React שלך עם רעד

1. פתח את המסוף שלך ונווט אל הספרייה המועדפת עליך באמצעות ה CD פקודה.
2. לָרוּץ npx create-react-app tremor-tutorial . פקודה זו תיצור אפליקציית React חדשה בשם מדריך רעד במערכת שלך בספרייה הנוכחית.
3. עבור לספריית האפליקציה על ידי הפעלה מדריך לרעד של CD .
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 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 על ידי הוספת ההצהרה הבאה לאחר ייבוא ​​אחר:

 import Dashboard from "./components/Dashboard"; 

לבסוף, הצג את הרכיב באפליקציית React שלך על ידי הוספה <לוח מחוונים /> מתחת h1 אֵלֵמֶנט.

יצירת לוח מחוונים עם רעד

כדי ליצור לוח מחוונים שלם באמצעות 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) או לאחסן אותם במערך של אובייקטים ממש בתוך הרכיב שלך.

כדי להוסיף רכיב לבלוק המעטפת שלך, החלף את

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