קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף. קרא עוד.

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

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

מה זה רעד?

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

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

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

instagram viewer

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 להתקין את @tremor/react
  5. לאחר שהתקנת את Tremor, ייבא את החבילה שלך App.js (אוֹ main.jsx אם השתמשת ב-Vite) על ידי הוספת השורה הבאה בתחתית הייבוא ​​שלך: 
    יְבוּא"@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:

יְבוּא"./App.css";
יְבוּא"@tremor/react/dist/esm/tremor.css";
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהאפליקציה() {
לַחֲזוֹר (


לוח המחוונים Awesome React שלנו</h1> 
 </div>
 );
}

לאחר מכן, צור מסמך ייעודי רכיבים תיקיית המשנה שלך src תיקייה. בתוך זה רכיבים תיקיה, צור חדש Dashboard.js קובץ והוסיפו את הקוד הבא:

פוּנקצִיָהלוּחַ מַחווָנִים() {
לַחֲזוֹר<div>לוּחַ מַחווָנִיםdiv>;
}
יְצוּאבְּרִירַת מֶחדָל לוּחַ מַחווָנִים;

ייבא את רכיב לוח המחוונים פנימה App.js על ידי הוספת ההצהרה הבאה לאחר ייבוא ​​אחר:

יְבוּא לוּחַ מַחווָנִים מ"./components/Dashboard";

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

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

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

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

ראשית, הוסף את הקוד הבא שלך Dashboard.js קוֹבֶץ:

יְבוּא {
 כַּרְטִיס,
 כותרת,
 טֶקסט,
 ColGrid,
 תרשים שטח,
 סרגל התקדמות,
 מֶטרִי,
 לְהַגמִישׁ,
} מ"@tremor/react";
פוּנקצִיָהלוּחַ מַחווָנִים() {
לַחֲזוֹר (

לוח מחוונים למכירות<<span>/Title></span><br> <text>זהו לוח מחוונים לדוגמה שנבנה <span>עם</span> רעד.<<span>/Text></span></text>



 {/* החלק הראשי */}
 "mt-6">
 
"h-96" /> 
 </Card>
 {/* סעיף KPI */}
 2} gapX="gap-x-6" gapY="gap-y -6" marginTop="mt-6">
 
 {/* מציין מיקום להגדרת גובה */}
 
"h-28" />
 </Card> 
 </ColGrid>
 </main>
 );
}
ייצוא ברירת מחדל לוח המחוונים;


גוש המעטפת מכיל רכיבים שונים אשר אתה מייבא בראש הקובץ. אם תציג זאת בתצוגה מקדימה בדפדפן שלך, תראה רק שני בלוקים ריקים.


תוכל לאכלס את הבלוקים שלך ברכיבים שנבנו מראש של Tremor, כמו תרשים, כרטיס או טבלה. אתה יכול למשוך נתונים מ-API (REST או GraphQL) או לאחסן אותם במערך של אובייקטים ממש בתוך הרכיב שלך.


כדי להוסיף רכיב לבלוק המעטפת שלך, החלף את ה
 בשורה הבאה:
 
 ביצועים<<span>/Title></span><p><text>השוואה בין מכירות ו רווח<<span>/Text></span></text></p>
<p><areachart></areachart> marginTop=<span>"mt-4"</span><br> data={data}<br> categories={[<span>"מכירות"</span>, <span>"רווח"</span>]}<br> dataKey=<span>"Month"</span><br> colors={[<span>"indigo"</span>, <span>"fuchsia"</span>]}<br> valueFormatter={ valueFormatter}<br> height=<span>"h-80"</span><br>/></p>



אחרי כי, הוסף את המערך הבא לפני הצהרת return שלך (אלה הנתונים שהחלק הראשי של לוח המחוונים יציג):
 
 // נתונים להצגה ב ה קטע ראשי
const data = [
 {
 חודש: "21 בינואר",
 מכירות: 2890,
 רווח: 2400,
 },
 {
 חודש: "פברואר 21",
 מכירות: 1890,
 רווח: 1398,
 },
 // ...
 {
 חודש: "22 בינואר",
 מכירות: 3890,
 רווח: 2980,
 },
];
const valueFormatter = (מספר) =>< /span>


$ ${Intl.NumberFormat("us").format (number).toString()};


לאחר מכן, הוסף את הקוד הבא לקובץ שלך אחרי valueFormatter:
 
 // נתונים להצגה ב-KPI section
const categories = [
 {
 title: "מכירות",
 מדד: "$12,699",
 אחוז ערך: 15.9,
 יעד: "$ 80,000",
 },
 {
 כותרת: "רווח",
 מדד: "$45,564" span>,
 אחוז ערך: 36.5,
 יעד: "$125,000",
 },
 {
 title: "Customers",
 מדד: "1,072",
 אחוז ערך:  53.6,
 יעד: "2,000",
 },
 {
 כותרת: "סקירת מכירות שנתית",
 מדד: "$201,072",
 אחוז ערך: 28.7,
 target: "$700,000",
 },
];


עבור קטגוריות של אובייקטים, עליך למפות דרך כל אובייקט כדי להציג את הנתונים ברכיבי כרטיס נפרדים. ראשית, מחק את רכיב הכרטיס בקטע KPI ולאחר מכן החלף אותו בקוד זה:
 
 {categories.map((item) => span> (
 
 {item.title}</Text>
 {item.metric}</Metric> 
 "mt-4">
  truncate={true}
 >{`${item.percentageValue}% (${item.metric} )`}</Text>
 {item.target}</Text>
 </Flex>


  percentageValue={ item.percentageValue}
 marginTop="mt-2"
 />
 </Card>
))}


וזהו. יצרת את לוח המחוונים הראשון שלך עם Tremor. הצג את לוח המחוונים שלך על ידי הפעלת התחלת npm. זה צריך להיות דומה לצילום המסך שלמעלה.


 התאמה אישית של רכיבי רעידות


רעד מאפשר התאמה אישית באמצעות אביזרים. יהיה עליך לעיין בתיעוד של הרכיב שברצונך להתאים אישית ולבדוק את כל המאפיינים הכלולים עם ערכי ברירת המחדל שלהם.


לדוגמה, אם יש לך , אתה יכול להסתיר את ציר ה-x על ידי העברת העזר showXAxis={false} או לשנות את הגובה באמצעות גובה={h-40}. עבור אביזרים המצהירים על ערכים שנמצאו ב-Tailwind CSS, כמו גודל, מרווח, צבעים וכל השאר, עליך להשתמש במחלקות השירות Tailwind.


 בנה לוחות מחוונים מורכבים בקלות


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