القراء مثلك يساعدون في دعم 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 بالفعل على نظامك. يمكنك تأكيد ذلك عن طريق التشغيل عقدة - الإصدار وثم npm - الإصدار في سطر الأوامر. إذا كان أي من الأمرين مفقودًا ، فيمكنك تثبيتهما باستخدام عملية بسيطة ؛ راجع هذا الدليل ل تثبيت Node.js و npm على نظام Windows، على سبيل المثال.

إعداد مشروع رد الفعل الخاص بك مع الهزة

  1. افتح الجهاز الطرفي وانتقل إلى دليلك المفضل باستخدام ملف قرص مضغوط يأمر.
  2. يجري npx إنشاء-رد فعل-التطبيق tremor-tutorial. سيقوم هذا الأمر بإنشاء تطبيق React جديد يسمى الهزة التعليمية على نظامك في الدليل الحالي.
  3. قم بالتبديل إلى دليل التطبيق عن طريق التشغيل برنامج تعليمي لرعاش القرص المضغوط.
  4. قم بتثبيت Tremor في مشروع React الخاص بك باستخدام الأمر التالي: 
    npm install @ tremor / رد فعل
  5. بمجرد تثبيت Tremor ، قم باستيراد الحزمة في ملف App.js (أو main.jsx إذا استخدمت Vite) عن طريق إضافة السطر التالي في أسفل الواردات الخاصة بك: 
    يستورد"@ tremor / reaction / dist / esm / tremor.css";

على الرغم من أن Tremor يستخدم Tailwind CSS ، فلن تحتاج إلى تثبيته في تطبيق React لاستخدام المكتبة. هذا لأن Tremor قد تم بالفعل إعداد Tailwind داخليًا. ومع ذلك ، إذا كنت ترغب في ذلك ، تحقق من البرنامج التعليمي الخاص بنا على تثبيت Tailwind CSS في React.

بعد ذلك ، قم بتثبيت Heroicons في مشروعك باستخدام الأمر التالي:

npm أنا [email protected] @ هزة / رد فعل

الآن ، دعنا نزيل الكود غير الضروري في ملف src / App.js ملف. هذا هو رمز البداية لدينا في App.js:

يستورد"./App.css";
يستورد"@ tremor / reaction / dist / esm / tremor.css";
يصدّرتقصيروظيفةبرنامج() {
يعود (


لوحة معلومات التفاعل الرائعة الخاصة بنا </h1> 
 </div>
 );
}

بعد ذلك ، قم بإنشاء ملف عناصر مجلد فرعي في ملف src مجلد. في هذا عناصر مجلد ، قم بإنشاء ملف لوحة القيادة. js ملف وإضافة الكود التالي:

وظيفةلوحة القيادة() {
يعود<شعبة>لوحة القيادةشعبة>;
}
يصدّرتقصير لوحة القيادة؛

قم باستيراد مكون لوحة المعلومات بتنسيق App.js بإضافة البيان التالي بعد الواردات الأخرى:

يستورد لوحة القيادة من"./components/Dashboard";

أخيرًا ، اعرض المكون في تطبيق React عن طريق إضافة تحت ال h1 عنصر.

إنشاء لوحة القيادة مع الهزة

لإنشاء لوحة معلومات كاملة باستخدام Tremor ، بأقل قدر من الجلبة ، حدد إحدى الكتل المتاحة. الكتل عبارة عن تخطيطات تم إنشاؤها مسبقًا مكونة من مكونات معيارية صغيرة مختلفة.

نقطة انطلاق جيدة كتل الهزة يعرض أنواعًا مختلفة من مكونات الكتلة المنشأة مسبقًا والتي يمكنك استخدامها. تتيح لك أصداف التخطيط ، على سبيل المثال ، تجميع مكونات مختلفة معًا لإنشاء لوحة معلومات.

أولاً ، أضف الكود التالي إلى ملف لوحة القيادة. js ملف:

يستورد {
 بطاقة،
 عنوان،
 نص،
 كولجريد ،
 مخطط المنطقة ،
 شريط التقدم،
 قياس،
 ثني،
} من"@ هزة / رد فعل";
وظيفةلوحة القيادة() {
يعود (

لوحة تحكم المبيعات <<span> / Title> </span> <br> <text> هذا نموذج للوحة تحكم تم إنشاؤها <span> مع  span> Tremor. <<span> / Text> </span>  p > <p> {<span> / * القسم الرئيسي * / </span>} <br> <card margintop="<span"> "mt-6" </card></p></span>> <br> <div classname="<span"> "h-96"  /> <br> <<span> / Card> </span>  <p> {<span> / * قسم KPI * / </span>} <br> <colgrid numcolsmd="{<span"> 2 } gapX = <span> "gap-x-6" </span> gapY = <span> "فجوة-ص -6 "</span> marginTop = <span>" mt-6 "</span>> <br>  <br> {<span> / * Placeholder to set height * / </span>} <br> <div classname="<span"> "h-28"  /> <br> <<span> / Card> </span> <br> <<span> / ColGrid> </span> <br> <<span> / main> </span> <br>) ؛ <br>}  <p> <span> تصدير  span> <span> افتراضي  span> لوحة التحكم ؛  p >   <p> تحتوي كتلة shell على مكونات مختلفة تقوم بالاستيراد في الجزء العلوي من الملف. إذا قمت بمعاينة هذا في المستعرض الخاص بك ، فسترى كتلتين فارغتين فقط.  p> </p>
<p> يمكنك ملء كتلك بمكونات Tremor سابقة الإنشاء ، مثل مخطط أو بطاقة أو جدول. يمكنك سحب البيانات من واجهة برمجة التطبيقات (REST أو GraphQL) أو تخزينها في مجموعة من العناصر داخل المكون مباشرةً.  p> </p>
<p> لإضافة مكون إلى كتلة shell ، استبدل <strong> <div classname="h-96"></div> </strong> سطر بما يلي:  p> </p>
<pre> <code> <title> الأداء <<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> "شهر"  span> <br> الألوان = {[<span> "النيلي"  span> ، <span> "الفوشيه"  span>]} <br> valueFormatter = { valueFormatter} <br> height = <span> "h-80" </span> <br> /> </span></span></span></span></span></p>

بعد ذلك ، أضف المصفوفة التالية قبل عبارة return (هذه هي البيانات التي سيعرضها القسم الرئيسي للوحة التحكم): p> 

   // البيانات المراد عرضها في ال القسم الرئيسي  span> 
  const  data = [
 {
 الشهر:  "21 كانون الثاني (يناير)"  ، 
 المبيعات:  2890  ، 
 الربح:  2400  ، 
} ، 
 {
 الشهر:  "فبراير 21 " ، 
 المبيعات:  1890  ، 
 الربح:  1398  ، 
} ، 
  //...  
 {
 الشهر:  "22 يناير"  ، 
 المبيعات:  3890  ، 
 الربح:  2980  ، 
} ، 
] ؛ 
  const  valueFormatter =  ( رقم  span>) => < / span> 
 
 $ { Intl  .NumberFormat ( "us" ). تنسيق (number) .toString ()}؛

بعد ذلك ، أضف الكود التالي إلى ملفك بعد valueFormatter : 

   // البيانات المراد عرضها في KPI القسم  span> 
  const  categories = [
 {
 title:  "المبيعات"  span> ، 
 المقياس:  "12699 دولارًا أمريكيًا"  span> ، 
 النسبة المئوية للقيمة:  15.9  ، 
 الهدف:  "$ 80000 " ، 
} ، 
 {
 title: " الربح " span> ، 
 المقياس: " 45564 دولارًا " span> ، 
 النسبة المئوية للقيمة:  36.5  ، 
 الهدف:  "125000 دولار"  span> ، 
 } ، 
 {
 العنوان:  "العملاء"  span> ، 
 المقياس:  "1،072"  ، 
 النسبة المئوية للقيمة:  53.6  ، 
 الهدف:  "2،000"  ، 
} ، 
 {
 العنوان:  "نظرة عامة على المبيعات السنوية"  span> ، 
 المقياس:  "201.072 دولارًا أمريكيًا"  span> ، 
 النسبة المئوية للقيمة:  28.7  ، 
 الهدف:  "700000 دولار أمريكي"  span> ، 
} ، 
] ؛

بالنسبة إلى فئات strong> من الكائنات ، يجب عليك تعيين كل كائن لعرض البيانات في مكونات بطاقة strong> منفصلة. أولاً ، احذف مكون البطاقة في قسم KPI ثم استبدله بهذا الرمز: p> 

  {categories.map ( ( العنصر  span>) =>  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 start . يجب أن يكون مشابهًا للقطة الشاشة أعلاه. p>

تخصيص مكونات Tremor

يسمح Tremor بالتخصيص باستخدام الدعائم. ستحتاج إلى مراجعة وثائق المكون الذي تريد تخصيصه والتحقق من جميع الخصائص المضمنة مع قيمها الافتراضية. p>

على سبيل المثال ، إذا كان لديك ، فيمكنك إخفاء المحور x بتمرير الخاصية showXAxis = {false} أو تغيير الارتفاع باستخدام الارتفاع = {h-40} . بالنسبة إلى العناصر التي تعلن عن القيم الموجودة في Tailwind CSS ، مثل تغيير الحجم والتباعد والألوان والباقي ، يجب استخدام فئات الأداة المساعدة Tailwind.

إنشاء لوحات تحكم تفاعلية معقدة بسهولة h2>

بفضل مكتبات المكونات مثل Tremor ، لن تحتاج إلى إنشاء كل جزء واحد من واجهة المستخدم الخاصة بك من البداية. يمكن أن يوفر لك استخدام مكتبة مثل Tremor الوقت والصداع في إنشاء واجهات مستخدم معقدة سريعة الاستجابة. p>