react-native-graph

react-native-graph لائن گراف بنانے کے لیے ایک اوپن سورس React Native کمپوننٹ ہے۔ README کے مطابق، یہ Margelo میں تیار کردہ ایک Skia- tabased implementation ہے جسے Pink Panda Wallet ایپ میں بہت سے ٹوکن گراف رینڈر کرنے کے لیے استعمال کیا گیا ہے۔ اس کی بنیادی توجہ ہموار موبائل چارٹنگ پر ہے: README میں کیوبک بیزیئر رینڈرنگ، Skia میں نیٹو پاتھ انٹرپولیشن، اینیمیشنز (README کے مطابق 120 FPS تک)، پین/اسکربنگ جیسی اشارے (gesture) اور کرپٹو والٹ اسٹائل کی قیمتوں کی تاریخ کے ساتھ مطابقت کا ذکر ہے۔ یہ پیکیج ایک LineGraph کمپوننٹ ایکسپورٹ کرتا ہے۔ اس کے ضروری props میں points (GraphPoint آبجیکٹس کا ایک ارے جس میں عددی قیمت اور Date ہو) اور color شامل ہیں۔ یہ روٹ ویو پر React Native ViewProps قبول کرتا ہے۔ ایک اینیمیٹڈ boolean اینیمیٹڈ رینڈرر اور ایک ہلکے پھلکے اسٹیٹک رینڈرر کے درمیان سوئچ کرتا ہے، جس کی README لسٹ میں بہت سے گراف دکھانے کے لیے تجویز کرتی ہے۔ اختیاری range prop x-axis، y-axis یا دونوں کو اوور رائیڈ کر سکتا ہے؛ ورنہ ایکسس (axes) پوائنٹس سے اخذ کیے جاتے ہیں۔ اینیمیٹڈ موڈ مزید فیچرز کو فعال کرتا ہے۔ gradientFillColors لائن کے نیچے ایک عمودی گریڈینٹ فل شامل کرتا ہے۔ lineThickness اسٹروک کی چوڑائی کو کنٹرول کرتا ہے۔ enablePanGesture پریس-اور-اسکرب انٹرایکشن کو فعال کرتا ہے، جس میں onGestureStart، onPointSelected، اور onGestureEnd کے کال بیکس ہوتے ہیں؛ panGestureDelay یہ کنٹرول کرتا ہے کہ اسکربنگ شروع ہونے سے پہلے پریس کو کتنی دیر تک برقرار رکھنا چاہیے۔ SelectionDot اسکرب پوزیشن کو رینڈر کرتا ہے اور اسے تبدیل یا null کے ذریعے چھپایا جا سکتا ہے۔ horizontalPadding اور verticalPadding ڈرائنگ اسپیس کو ایڈجسٹ کرتے ہیں۔ enableIndicator اور indicatorPulsating آخری پوائنٹ پر ایک انڈیکیٹر دکھاتے ہیں۔ TopAxisLabel اور BottomAxisLabel گراف کے اوپر اور نیچے کسٹم React ایلیمنٹس رینڈر کرتے ہیں۔ enableFadeInMask لائن کے آغاز کو فیڈ ان کرتا ہے۔ کچھ props کو صرف اینیمیٹڈ کے طور پر دستاویز کیا گیا ہے، بشمول پین جیسی اشارے، لیبلز، انڈیکیٹر، گریڈینٹ فل، اور SelectionDot۔ README میں نوٹ کیا گیا ہے کہ selectionDotShadowColor فی الحال استعمال نہیں ہو رہا اور اس کا کوئی بصری اثر نہیں ہے۔ README دو رینڈرر بیک اینڈز کی دستاویز فراہم کرتا ہے۔ Skia ڈیفالٹ ہے۔ ایک متبادل GPU کینوس بیک اینڈ، react-native-tgfx، کو بلڈ ٹائم پر EXPO_PUBLIC_RN_GRAPH_BACKEND=tgfx (یا bare React Native پر Babel inline-environment-variables پلگ ان کے ساتھ 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 کے لیے prop مثالیں شامل ہیں۔ یہ ریپوزٹری میں ایک کسٹم SelectionDot مثال کا لنک بھی فراہم کرتا ہے۔ اس پروجیکٹ کو Pink Panda نے اسپانسر کیا ہے اور اس کا Margelo کمیونٹی Discord ہے۔ README میں React Native Skia کے ساتھ مدد کے لیے William Candillon اور Christian Falch کا شکریہ ادا کیا گیا ہے۔