react-native-graph

react-native-graph হলো লাইন গ্রাফ আঁকার জন্য একটি ওপেন-সোর্স React Native কম্পোনেন্ট। README অনুযায়ী, এটি Margelo-তে তৈরি একটি Skia-ভিত্তিক ইমপ্লিমেন্টেশন যা Pink Panda Wallet অ্যাপে অনেক টোকেন গ্রাফ রেন্ডার করতে ব্যবহৃত হয়। এর মূল লক্ষ্য হলো মসৃণ মোবাইল চার্টিং: README-তে কিউবিক বেজিয়ার রেন্ডারিং, Skia-তে নেটিভ পাথ ইন্টারপোলেশন, অ্যানিমেশন (README অনুযায়ী ১২০ FPS পর্যন্ত), প্যান/স্ক্রাবিং জেসচার এবং ক্রিপ্টো ওয়ালেট-স্টাইল প্রাইস হিস্ট্রির সাথে সামঞ্জস্যতার কথা উল্লেখ করা হয়েছে। এই প্যাকেজটি একটি LineGraph কম্পোনেন্ট এক্সপোর্ট করে। এর প্রয়োজনীয় প্রপস হলো points (একটি GraphPoint অবজেক্টের অ্যারে যাতে একটি নিউমেরিক ভ্যালু এবং একটি Date থাকে) এবং color। এটি রুট ভিউতে React Native ViewProps গ্রহণ করে। একটি অ্যানিমেটেড বুলিয়ান ভ্যালু অ্যানিমেটেড রেন্ডারার এবং একটি লাইটওয়েট স্ট্যাটিক রেন্ডারারের মধ্যে পরিবর্তন করে, যা 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 (অথবা বেয়ার React Native-এ Babel inline-environment-variables প্লাগইন সহ RN_GRAPH_BACKEND) দিয়ে নির্বাচন করা যেতে পারে। শুধুমাত্র একটি রেন্ডারার ইনস্টল করার প্রয়োজন; Metro উভয়কেই অপশনাল হিসেবে গণ্য করে, এবং যদি tgfx অনুরোধ করা হয় কিন্তু ইনস্টল করা না থাকে, তবে গ্রাফটি একবার সতর্ক করে এবং Skia-তে ফিরে যায়। একটি কাস্টম SelectionDot-কে অবশ্যই সক্রিয় রেন্ডারার থেকে শেপস ইমপোর্ট করতে হবে। প্যাকেজটি 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-কে ধন্যবাদ জানানো হয়েছে।