react-native-graph

react-native-graph लाइन ग्राफ बनाने के लिए एक ओपन-सोर्स React Native कंपोनेंट है। README के अनुसार, यह Margelo में बनाया गया एक Skia-आधारित कार्यान्वयन है जिसका उपयोग Pink Panda Wallet ऐप में कई टोकन ग्राफ को रेंडर करने के लिए किया गया है। इसका मुख्य ध्यान स्मूथ मोबाइल चार्टिंग पर है: README में क्यूबिक बेज़ियर रेंडरिंग, Skia में नेटिव पाथ इंटरपोलेशन, एनिमेशन (README के अनुसार 120 FPS तक), पैन/स्क्रबिंग जेस्चर और क्रिप्टो वॉलेट-स्टाइल प्राइस हिस्ट्री के साथ अनुकूलता का उल्लेख है। यह पैकेज एक LineGraph कंपोनेंट एक्सपोर्ट करता है। इसके आवश्यक प्रॉप्स points (एक numeric value और Date वाले GraphPoint ऑब्जेक्ट्स का ऐरे) और color हैं। यह रूट व्यू पर React Native ViewProps स्वीकार करता है। एक एनिमेटेड boolean, एनिमेटेड रेंडरर और एक हल्के स्टैटिक रेंडरर के बीच स्विच करता है, जिसे README लिस्ट में कई ग्राफ दिखाने के लिए सुझाता है। वैकल्पिक range प्रॉप x-axis, y-axis या दोनों को ओवरराइड कर सकता है; अन्यथा एक्सिस points से अनुमानित किए जाते हैं। एनिमेटेड मोड अधिक फीचर्स अनलॉक करता है। gradientFillColors लाइन के नीचे एक वर्टिकल ग्रेडिएंट फिल जोड़ता है। lineThickness स्ट्रोक की चौड़ाई को नियंत्रित करता है। enablePanGesture प्रेस-एंड-स्क्रब इंटरैक्शन को सक्षम करता है, जिसमें onGestureStart, onPointSelected और onGestureEnd जैसे कॉलबैक होते हैं; panGestureDelay यह नियंत्रित करता है कि स्क्रबिंग शुरू होने से पहले प्रेस को कितनी देर तक होल्ड करना होगा। SelectionDot स्क्रब पोजीशन को रेंडर करता है और इसे बदला जा सकता है या null के साथ छिपाया जा सकता है। horizontalPadding और verticalPadding ड्राइंग स्पेस को एडजस्ट करते हैं। enableIndicator और indicatorPulsating अंतिम बिंदु पर एक इंडिकेटर दिखाते हैं। TopAxisLabel और BottomAxisLabel ग्राफ के ऊपर और नीचे कस्टम React एलिमेंट्स रेंडर करते हैं। enableFadeInMask लाइन की शुरुआत को फेड-इन करता है। कुछ प्रॉप्स केवल एनिमेटेड-ओनली के रूप में प्रलेखित हैं, जिनमें पैन जेस्चर, लेबल्स, इंडिकेटर, ग्रेडिएंट फिल और SelectionDot शामिल हैं। README नोट करता है कि selectionDotShadowColor वर्तमान में अप्रयुक्त है और इसका कोई विजुअल प्रभाव नहीं है। README दो रेंडरर बैकएंड का दस्तावेजीकरण करता है। Skia डिफॉल्ट है। एक वैकल्पिक GPU कैनवस बैकएंड, react-native-tgfx, को बिल्ड टाइम पर EXPO_PUBLIC_RN_GRAPH_BACKEND=tgfx (या Babel inline-environment-variables प्लगइन के साथ बेयर React Native पर RN_GRAPH_BACKEND) के साथ चुना जा सकता है। केवल एक रेंडरर इंस्टॉल करने की आवश्यकता होती है; Metro दोनों को वैकल्पिक मानता है, और यदि tgfx अनुरोधित है लेकिन इंस्टॉल नहीं है, तो ग्राफ एक बार चेतावनी देता है और Skia पर वापस आ जाता है। एक कस्टम SelectionDot को सक्रिय रेंडरर से shapes इम्पोर्ट करने चाहिए। पैकेज यह जांचने के लिए GRAPH_BACKEND एक्सपोर्ट करता है कि बिल्ड किस रेंडरर ('skia' या 'tgfx') पर हल हुआ है। इंस्टॉलेशन के लिए react-native-reanimated, react-native-gesture-handler, और डिफॉल्ट बैकएंड के लिए @shopify/react-native-skia के साथ-साथ react-native-graph की आवश्यकता होती है। README में usePriceHistory हुक के साथ LineGraph उपयोग का एक उदाहरण और एनिमेशन, पैन जेस्चर, रेंज और कस्टम SelectionDot के लिए प्रॉप उदाहरण शामिल हैं। यह रिपॉजिटरी में एक कस्टम SelectionDot उदाहरण का लिंक भी देता है। इस प्रोजेक्ट को Pink Panda द्वारा प्रायोजित किया गया है और इसका Margelo कम्युनिटी Discord है। README में React Native Skia के लिए मदद के लिए William Candillon और Christian Falch को धन्यवाद दिया गया है।