ایجاد نمودارهای React Native با Tooltip های دینامیک – راهنمای کاربردی

ایجاد نمودارهای React Native روی وب یا موبایل همواره یک کار جذاب و چالش‌برانگیز محسوب می‌شود. یافتن کتابخانه مناسبی که بتواند نیازهای کارکردی و طراحی را پوشش دهد دشوار است. با این که می‌توان نمودارها را مستقلاً ایجاد کرد، اما در اغلب موارد یادگیری و پیاده‌سازی موارد مختلف از صفر تا صد سربار زیادی دارد.

اگر یک برنامه‌نویس مبتدی هستید، احتمالاً می‌خواهید از یک کتابخانه آماده نمودار استفاده کنید. در این صورت گزینه‌های بسیار معدودی برای پیاده‌سازی و سفارشی‌سازی نمودارها در اختیار ما قرار دارد.

بیان مسئله

پیش از ورود عملی به بحث بهتر است یک بار دیگر مسئله را به صورت دقیق بررسی کنیم.

در این مقاله هدف ما آن است که یک ناحیه نمودار داشته باشیم که یک نشانگر دایره‌ای در هر نقطه داده‌ای به آن اضافه کنیم و بتوانیم روی آن بزنیم تا یک tooltip شامل مقادیر مختصات X و Y نمایش پیدا دهیم.

ما برای حل این مسئله برخی از کتابخانه‌های موجود React Native برای نمایش نمودار را بررسی کردیم و به دو مورد react-native-charts-wrapper و react-native-svg-charts رسیدیم.

کتابخانه React Native Charts Wrapper

نخستین گزینه کتابخانه React Native Charts Wrapper است که یک پوشش React Native برای کتابخانه محبوب MPAndroidChart و Charts است.

این کتابخانه قابلیت پیکربندی بالایی دارد و از آنجا که از کتابخانه‌های نمودار بومی استفاده می‌کند، گذار روانی دارد و از پشتیبانی لمسی خوبی برخوردار است. همچنین نمونه‌های زیادی از کاربرد در ریپازیتوری گیت‌هاب آن ارائه شده است.

با توجه به عملکرد و قابلیت سفارشی‌سازی این کتابخانه، در ابتدا گزینه اول ما محسوب می‌شد. این کتابخانه راهنمای نصب کاملاً بلند و دقیقی دارد که با پیروی از آن می‌توان کتابخانه را روی هر دو نوع دستگاه‌های iOS و اندروید نصب و اجرا کرد.

به نظر می‌رسد که همه چیز روی اندروید به نرمی و روان کار می‌کند. اما زمانی که تلاش کردیم آن را روی iOS بیلد کنیم، خطایی ایجاد شد. پس از ساعت‌های زیاد جستجو در بخش issue-های گیت‌هاب و گوگل متوجه شدیم که گزینه مطلوبی برای ما محسوب نمی‌شود.

کتابخانه React Native SVG Charts

شروع

یک پروژه React Native ایجاد کرده و وابستگی‌های لازم را نصب کنید:

~ react-native init ReactNativeTooltip

همچنین باید کتابخانه react-native-svg را نصب و لینک کنید:

~ npm i react-native-svg
~ react-native link react-native-svg

~ npm install react-native-svg-charts

دریافت داده‌های ساختگی

پیش از آن که به بررسی عمیق‌تر کدنویسی بپردازیم، باید مقداری داده‌های ساختگی داشته باشیم که از آن‌ها برای رندر AreaChart استفاده کنیم. ما از یک سرویس شخص ثالث به نام Mockaroo برای تولید داده‌های ساختگی جهت پروژه‌مان استفاده می‌کنیم.

استفاده از کتابخانه React Native SVG Charts

در ادامه props–ی را پیاده‌سازی می‌کنیم که در AreaChart استفاده خواهیم کرد:

• Data – این یک فیلد ضروری است که باید از نوع آرایه باشد.
• yAccessor – تابعی است که هر مدخل data و همچنین اندیس می‌گیرد و مقدار y هر مدخل را بازگشت می‌دهد.
• xAccessor – همانند yAccessor است اما مقدار x آن مدخل را بازگشت می‌دهد.

افزودن دکوراتورها

کتابخانه React-native-SVG-charts طوری ساخته شده که تا حد امکان قابل بسط باشد. همه نمودارها می‌توانند با استفاده از decorators بسط یابند. دکوراتور کامپوننتی است که نمودار شما را به نوعی استایل‌بندی کرده و یا بهبود می‌بخشد. کافی است کامپوننت سازگار با react-native-svg را به عنوان فرزند به آن گراف ارسال کنید تا با همه اطلاعات ضروری برای طرح‌بندی دکوراتور فراخوانی شود.

در این راهنما به دو دکوراتور نیاز داریم که یکی برای نشانگر نقاط داده‌ای و دیگری برای tooltip است.

نکته: باید مطمئن شوید که دکوراتورها را درون کامپوننت AreaChart قرار می‌دهید، چون در غیر این صورت رندر نخواهد شد.

افزودن نقاط داده‌ای نشانگر

در ادامه یک دکوراتور ایجاد می‌کنیم که از یک نشانگر برای هر نقطه داده‌ای در نمودار استفاده می‌کند:

ما به یک نشانگر دایره‌ای برای هر آیتم در آرایه داده‌ها نیاز داریم. به همین منظور قصد داریم در آرایه داده‌ها روی همه مدخل‌ها بچرخیم و کامپوننت SVG به نام Circle را برای هر کدام از آن‌ها بازگشت دهیم. اکنون برای موقعیت‌یابی آن‌ها روی نمودار از props به نام cx و cy برای قرار دادن به ترتیب به صورت افقی و عمودی استفاده می‌کنیم. ما برای cx از کلید date و برای cy از کلید score استفاده خواهیم کرد.

علاوه بر آن یک prop به نام onPress نیز ارسال می‌کنیم که در زمان فشرده شدن هر کدام از نقاط داده‌ای یکی از سه حالت tooltipX، tooltipY و tooltipIndex را تنظیم می‌کند. سپس از این حالت‌ها برای موقعیت‌یابی دکوراتور استفاده می‌کنیم.

افزودن tooltip

اکنون که اطلاعات لازم مانند محور (x (tooltipX، محور (y (tooltipY و یک اندیس (tooltipIndex) را برای نشانگر فشرده شده داریم می‌توانیم از آن‌ها برای قرار دادن Tooltip روی AreaChart استفاده می‌کنیم. ما یک فایل جدید برای دکوراتور Tooltip on the AreaChart ایجاد می‌کنیم.

از دیدن این همه تگ‌های React ،G و Text سردرگم نشوید، چون اغلب آن‌ها صرفاً برای استایل‌بندی tooltip هستند.

کافی است روی tooltipX و tooltipY تمرکز کنید که از آن‌ها برای موقعیت‌یابی افقی و عمودی Tooltip روی نمودار استفاده می‌کنیم. این مقادیر همان cx و cy هستند که برای نشانگر استفاده کردیم و تنها تفاوت این است که برخی مقادیر را روی نمودار از آن‌ها اضافه یا کسر می‌کنیم.

سخن پایانی

فیلم مجموعه آموزش جاوا اسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌‌های JavaScript (جاوا اسکریپت)
• آموزش مقدماتی فریمورک React Native برای طراحی نرم افزارهای اندروید و iOS با زبان جاوااسکریپت
• مجموعه آموزش‌های برنامه‌‌نویسی
• حالت یا State در React به چه معنا است؟ — به زبان ساده
• احراز هویت کاربر با React Native Navigation — راهنمای کاربردی

==