आप जैसे पाठक MUO का समर्थन करने में मदद करते हैं। जब आप हमारी साइट पर लिंक का उपयोग करके खरीदारी करते हैं, तो हम संबद्ध कमीशन अर्जित कर सकते हैं। और पढ़ें।

रिएक्ट में एक डैशबोर्ड की तरह एक जटिल यूजर इंटरफेस बनाना कठिन हो सकता है यदि आप इसे शुरू से कर रहे हैं। शुक्र है, आपको ऐसा करने की ज़रूरत नहीं है।

आपके द्वारा उपयोग की जा सकने वाली सबसे अच्छी घटक लाइब्रेरी में से एक ट्रेमर है जो आपको थोड़े से प्रयास के साथ रिएक्ट में आधुनिक, उत्तरदायी डैशबोर्ड बनाने की अनुमति देता है। रिएक्ट में डैशबोर्ड बनाने के लिए ट्रेमर का उपयोग करने का तरीका जानें।

ट्रेमर क्या है?

रिएक्ट में डैशबोर्ड बनाने के लिए ट्रेमर एक आधुनिक, खुला-स्रोत, निम्न-स्तरीय यूआई घटक पुस्तकालय है। ट्रेमर टेलविंड सीएसएस, रिएक्ट और रीचार्ट्स (रिएक्ट के लिए एक अन्य घटक-आधारित चार्टिंग लाइब्रेरी) के शीर्ष पर बनाता है। उसके ऊपर, यह Heroicons के चिह्नों का उपयोग करता है।

यह चार्ट, कार्ड और इनपुट तत्वों जैसे शानदार विश्लेषणात्मक इंटरफ़ेस के निर्माण के लिए सभी आवश्यक चीजों के साथ 20 से अधिक घटकों का दावा करता है। लाइब्रेरी में छोटे, मॉड्यूलर घटक जैसे बैज, बटन, ड्रॉपडाउन और टैब शामिल हैं, जिन्हें आप संपूर्ण डैशबोर्ड बनाने के लिए संयोजित कर सकते हैं।

instagram viewer

ट्रेमर को जो चीज सबसे अलग बनाती है, वह यह है कि यह अत्यधिक विचारवान है, इसलिए जब तक आप पुस्तकालय के निर्णयों के साथ ठीक हैं, आप एक पेशेवर दिखने वाले डैशबोर्ड को एक हवा में आग लगा सकते हैं।

बेशक, ट्रेमर अनुकूलन का समर्थन करता है, और रिएक्ट के प्रॉप्स सिस्टम के माध्यम से ऐसा करना आसान बनाता है।

ट्रेमर के साथ कैसे शुरुआत करें

से शुरू एक नया रिएक्ट ऐप बनाना का उपयोग create-react-app पैकेज (या अगर आप इसे पसंद करते हैं तो Vite)।

आपको अपने सिस्टम पर पहले से ही Node.js और npm इंस्टॉल करना होगा। आप इसे चलाकर इसकी पुष्टि कर सकते हैं नोड --वर्जन और तब एनपीएम --वर्जन एक कमांड लाइन पर। यदि कोई कमांड गायब है, तो आप उन्हें एक सरल प्रक्रिया का उपयोग करके स्थापित कर सकते हैं; इस गाइड को देखें विंडोज़ पर नोड.जेएस और एनपीएम स्थापित करना, उदाहरण के लिए।

ट्रेमर के साथ अपना रिएक्ट प्रोजेक्ट सेट करना

  1. अपना टर्मिनल खोलें और सीडी आज्ञा।
  2. दौड़ना npx create-react-app कंपकंपी-ट्यूटोरियल. यह कमांड नामक एक नया रिएक्ट एप्लिकेशन बनाएगा कंपकंपी-ट्यूटोरियल आपके सिस्टम पर वर्तमान निर्देशिका में।
  3. चलाकर ऐप डायरेक्टरी में स्विच करें सीडी कंपन-ट्यूटोरियल.
  4. निम्नलिखित कमांड का उपयोग करके अपने रिएक्ट प्रोजेक्ट में ट्रेमर स्थापित करें: 
    एनपीएम इंस्टॉल @ कंपन/प्रतिक्रिया
  5. एक बार जब आप ट्रेमर स्थापित कर लेते हैं, तो पैकेज को अपने में आयात करें ऐप.जेएस (या main.jsx यदि आपने Vite का उपयोग किया है) अपने आयात के तल पर निम्न पंक्ति जोड़कर: 
    आयात"@ कंपन/प्रतिक्रिया/जिला/esm/tremor.css";

हालांकि ट्रेमर टेलविंड सीएसएस का उपयोग करता है, लेकिन लाइब्रेरी का उपयोग करने के लिए आपको इसे अपने रिएक्ट ऐप में इंस्टॉल करने की आवश्यकता नहीं है। ऐसा इसलिए है क्योंकि Tremor में पहले से ही Tailwind आंतरिक रूप से सेट अप है। हालाँकि, यदि आप चाहते हैं, तो हमारे ट्यूटोरियल को देखें रिएक्ट में टेलविंड सीएसएस इंस्टॉल करना.

अगला, निम्नलिखित कमांड का उपयोग करके अपने प्रोजेक्ट में हीरोइकन्स स्थापित करें:

npm i [email protected] @कंपकंपी/प्रतिक्रिया

अब, हमारे अनावश्यक कोड को हटा दें src/App.js फ़ाइल। यहाँ हमारा स्टार्टर कोड है ऐप.जेएस:

आयात"./App.css";
आयात"@ कंपन/प्रतिक्रिया/जिला/esm/tremor.css";
निर्यातगलती करनासमारोहअनुप्रयोग() {
वापस करना (


हमारा विस्मयकारी प्रतिक्रिया डैशबोर्ड</h1> 
 </div>
 );
}

अगला, एक समर्पित बनाएँ अवयव सबफ़ोल्डर आपके स्रोत फ़ोल्डर। के कारण से अवयव फ़ोल्डर, एक नया बनाएँ डैशबोर्ड.जेएस फ़ाइल और निम्न कोड जोड़ें:

समारोहडैशबोर्ड() {
वापस करना<डिव>डैशबोर्डडिव>;
}
निर्यातगलती करना डैशबोर्ड;

डैशबोर्ड घटक को इसमें आयात करें ऐप.जेएस अन्य आयातों के बाद निम्न कथन जोड़कर:

आयात डैशबोर्ड से"./घटक/डैशबोर्ड";

अंत में, घटक को अपने रिएक्ट ऐप में जोड़कर प्रदर्शित करें नीचे एच 1 तत्व।

ट्रेमर के साथ एक डैशबोर्ड बनाना

कम से कम झंझट के साथ ट्रेमर का उपयोग करके एक पूर्ण डैशबोर्ड बनाने के लिए, उपलब्ध ब्लॉकों में से एक का चयन करें। ब्लॉक विभिन्न छोटे मॉड्यूलर घटकों से बने पूर्वनिर्मित लेआउट हैं।

एक अच्छा शुरुआती बिंदु है ट्रेमर के ब्लॉक खंड जो विभिन्न प्रकार के पूर्वनिर्मित ब्लॉक घटकों को दिखाता है जिनका आप उपयोग कर सकते हैं। लेआउट शैल, उदाहरण के लिए, आपको डैशबोर्ड बनाने के लिए विभिन्न घटकों को एक साथ जोड़ने देता है।

सबसे पहले, निम्नलिखित कोड को अपने में जोड़ें डैशबोर्ड.जेएस फ़ाइल:

आयात {
 कार्ड,
 शीर्षक,
 मूलपाठ,
 कोलग्रिड,
 एरियाचार्ट,
 प्रोगेस बार,
 मीट्रिक,
 मोड़ना,
} से"@कंपकंपी/प्रतिक्रिया";
समारोहडैशबोर्ड() {
वापस करना (

सेल्स डैशबोर्ड<<span>/Title></span><br> यह एक नमूना डैशबोर्ड है जिसे <span>साथ</span> ट्रेमर बनाया गया है।<<span>/Text></span>



 {/* मुख्य खंड */}
 "mt-6">
 


"h-96" /> 
 </Card>
 {/* KPI अनुभाग */}
 2}gapX="gap-x-6"gapY="gap-y -6" मार्जिनटॉप="mt-6">
 
 {/* ऊंचाई सेट करने के लिए प्लेसहोल्डर */}
 
"h-28" />
 </Card> 
 </ColGrid>
 </main>
 );
}
निर्यात डिफ़ॉल्ट डैशबोर्ड;
> 
शेल ब्लॉक में विभिन्न घटक होते हैं आप फ़ाइल के शीर्ष पर आयात करते हैं। यदि आप अपने ब्राउज़र में इसका पूर्वावलोकन करते हैं, तो आपको केवल दो खाली ब्लॉक दिखाई देंगे।


आप अपने ब्लॉक को ट्रेमर के पूर्वनिर्मित घटकों, जैसे चार्ट, कार्ड, या तालिका से भर सकते हैं। आप किसी 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> श्रेणियां={[<span>"बिक्री"</span>, <span>"लाभ"</span>]}<br> dataKey=<span>"महीना"</span><br> रंग={[<span>"इंडिगो"</span>, <span>"fuchsia"</span>]}<br> valueFormatter={ valueFormatter<br> ऊंचाई=<span>"h-80"</span><br>/></p>



बाद में कि, अपने वापसी कथन से पहले निम्न सरणी जोड़ें (यह वह डेटा है जो डैशबोर्ड का मुख्य अनुभाग प्रदर्शित करेगा):
 
 // डेटा जिसमें प्रदर्शित किया जाना है मुख्य खंड
const data = [
 {
 महीना: "21 जनवरी",
 बिक्री: 2890,
 मुनाफ़ा: 2400,
 },
 {
 महीना: "फ़रवरी 21",
 बिक्री: 1890,
 लाभ: 1398,
 },
 // ...
 {
 महीना: "22 जनवरी",
 बिक्री: 3890,
 लाभ: 2980,
 },
];
const valueFormatter = (number) =>< /span>


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


अगला, valueFormatter के बाद अपनी फ़ाइल में निम्न कोड जोड़ें:
 
 // KPI में प्रदर्शित करने के लिए डेटा अनुभाग
const श्रेणियाँ = [
 {
 शीर्षक: "बिक्री",
 मीट्रिक: "$ 12,699",
 प्रतिशतमूल्य: 15.9,
 लक्ष्य: "$ 80,000",
 },
 {
 शीर्षक: "लाभ",
 मीट्रिक: "$ 45,564" स्पैन>,
 प्रतिशत वैल्यू: 36.5,
 टारगेट: "$ 125,000",
 },
 {
 शीर्षक: "ग्राहक",
 मीट्रिक: "1,072",
 प्रतिशत मूल्य:  53.6,
 लक्ष्य: "2,000",
 },
 {
 शीर्षक: "वार्षिक बिक्री अवलोकन",
 मीट्रिक: "$ 201,072",
 प्रतिशत मूल्य: 28.7,
 लक्ष्य: "$ 700,000",
 },
];


के लिए वस्तुओं की श्रेणियां सरणी, अलग कार्ड घटकों में डेटा प्रदर्शित करने के लिए आपको प्रत्येक ऑब्जेक्ट के माध्यम से मैप करना होगा। सबसे पहले, KPI अनुभाग में कार्ड घटक हटाएं और फिर इसे इस कोड से बदलें:
 
 {categories.map((item) => अवधि> (
 
 {item.title}</Text>
 {item.metric}</Metric> 
 "mt-4">
  truncate={true}
 >{`${item.percentageValue}% (${item.metric} )`}</Text>
  {item.target</Text>
 </Flex>


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


और बस इतना ही। आपने ट्रेमर के साथ अपना पहला डैशबोर्ड बना लिया है। npm start चलाकर अपना डैशबोर्ड देखें। यह उपरोक्त स्क्रीनशॉट के समान होना चाहिए।


 ट्रेमर घटकों को अनुकूलित करना


ट्रेमर प्रॉप्स का उपयोग करके अनुकूलन की अनुमति देता है। आपको उस घटक के दस्तावेज़ीकरण की समीक्षा करनी होगी जिसे आप अनुकूलित करना चाहते हैं और सभी गुणों को उनके डिफ़ॉल्ट मानों के साथ जांचना होगा।


उदाहरण के लिए, यदि आपके पास  है, तो आप प्रॉप showXAxis={false} को पास करके x-अक्ष को छुपा सकते हैं या उपयोग करके ऊंचाई बदल सकते हैं ऊँचाई ={h-40}. Tailwind CSS में पाए जाने वाले मानों की घोषणा करने वाले प्रॉप्स के लिए, जैसे आकार, रिक्ति, रंग और बाकी, आपको Tailwind यूटिलिटी क्लास का उपयोग करना चाहिए।


 आसानी से कॉम्प्लेक्स रिएक्ट डैशबोर्ड बनाएं


कंपोनेंट लाइब्रेरी जैसे ट्रेमर के लिए धन्यवाद, आपको प्रत्येक बनाने की आवश्यकता नहीं है स्क्रैच से आपके UI का एक हिस्सा। Tremor जैसी लाइब्रेरी का उपयोग करने से आपका समय और जटिल प्रतिक्रियाशील UI बनाने का सिरदर्द दोनों बच सकते हैं।