پروژه اولیه

پروژه اولیه را از این لینک دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است.

orderbook
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── components
│   │   ├── OrderbookHeader.jsx
│   │   └── OrderbookListItem.jsx
│   ├── data
│   │   └── data.json
│   ├── functions
│   │   └── index.js
│   ├── styles
│   │   └── styles.css
│   ├── types
│   │   └── index.js
│   ├── App.jsx
│   ├── index.js
│   └── setupTests.js
└── package.json

جزئیات

ظاهر کلی برنامه بدین صورت است:

در مسابقه فرانت‌اند قبل با شمس‌الله آشنا شدید و به او کمک کردید که یک نمودار قیمت برای ارز دروغین خود بسازد و سر مردم را کلاه بگذارد (شریک جرم شدید!! :)) ). شمس‌الله با این کار پول خوبی به جیب زد و حالا قرار است صرافی خود را بهبود ببخشد. برای این کار قرار است شمس‌الله به صرافی خود یک جدول سفارشات (orderbook) اضافه کند تا مردم بیشتری به او و صرافی‌اش اعتماد کنند. مثل گذشته شمس‌الله از شما می‌خواهد که در پیاده‌سازی فرانت‌اند این قسمت نیز به او کمک کنید.

جدول سفارشات (orderbook):

یکی از روش‌هایی که معامله‌گران برای پیدا کردن نقطه ورود و خروج مناسب استفاده می‌کنند، خواندن جدول سفارشات است. در این جدول سفارش‌های انجام نشده در یک بازار مشخص می‌شود و مشخص می‌شود که در یک قیمت مشخص حجم سفارش‌ها چقدر است. برای مثال یک فرد در قیمت ۱۰۰ دلار :))) می‌خواهد یک بیت‌کوین بخرد. فرد دیگر در همین مقدار قیمت می‌خواهد دوتا بیت‌کوین بخرد. پس در قیمت ۱۰۰ دلار حجم سفارش‌ها ۱ + ۲ = ۳ است. یعنی برای رد شدن از این قیمت باید حداقل ۳ بیت‌کوین خریداری شود. (توسط فرد یا افراد دیگر فروخته شود) معامله‌گران از این روش متوجه می‌شوند که حجم سفارش‌ها در چه بازه‌ قیمتی زیاد است و از آن برای پیاده کردن نقطه ورود و خروج مناسب استفاده می‌کنند. این جدول از دو قسمت اصلی تشکیل شده است. یک قسمت برای سفارش‌های خرید و یک قسمت برای سفارش‌های فروش است. هر دو قسمت براساس بهترین قیمت مرتب می‌شوند. بهترین قیمت در قسمت خرید، بیشترین قیمت است و در قسمت فروش کمترین قیمت است. (منطقی به‌نظر می‌رسه :)) )

اجزای جدول سفارشات (orderbook):

ستون‌های هر قسمت از این جدول (قسمت خرید و فروش) عبارت است از: قیمت و مقدار و مقدار کل. قیمت مشخص‌کننده قیمت در آن سطر است. مقدار مشخص‌کننده مقدار عرضه شده از آن ارز در آن قیمت است. مقدار کل برابر است حجم عرضه شده از اولین سفارش (بهترین سفارش) تا آن سفارش بعلاوه خودش. برای مثال در تصویر زیر در قیمت ۲۰۰ ریال ۳۷ تا ارز شمس‌الله توسط افرادی قرار است خریداری شود. در این قیمت چون بهترین قیمت است (در قسمت خرید بهترین قیمت، بیشترین قیمت است) حجم سفارشات قبل آن ۰ است. در قیمت ۱۹۹ ریال مقدار برابر ۳۲ است و حجم سفارشات قبل این قیمت برابر ۳۷ است. پس مقدار کل برابر ۳۲ + ۳۷ = ۶۹ می‌شود. به همین شکل برای باقی قیمت‌ها و قسمت فروش اعداد محاسبه می‌شوند. در قسمت فروش بهترین قیمت کمترین قیمت است. رنگ پشت‌زمینه نشان‌دهنده درصد مقدار کل در آن قیمت به بیشترین مقدار کل در هر دو قسمت جدول سفاراشات، که با توجه به تجمعی بدون این شاخص،‌ بیشترین مقدار کل برابر است با بدترین قیمت (آخرین قیمت) هر قسمت (خرید و فروش).

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

وظیفه توسعه‌دهنده فرانت‌اند:

در این پروژه شما باید با استفاده از دیتای داده شده، جدول سفارشات این ارز را بسازید.

ساختار داده‌ به‌شکل زیر است:

{
  "quantity": number,
  "price": number,
  "type": "sell" | "buy"
}[]

که در آن price نشان‌دهنده قیمت، quantity نشان‌دهنده تعداد سفارشات در آن قیمت و type نشان‌دهنده نوع سفارش است که می‌تواند خرید (buy) یا فروش (sell) باشد.

این دیتا به کامپوننت App.jsx داده می‌شود.

مواردی که باید در این سوال رعایت کنید:

• شما باید ابتدا ساختار مورد نظر را بسازید و در قسمت‌های مشخص شده در پروژه اولیه لیست سفارش‌های خرید و فروش را با استفاده از کامپوننت ‍OrderbookListItem نمایش دهید.
• این کامپوننت مقادیر زیر را به عنوان props دریافت می‌کند و یک سطر از یک طرف جدول سفارشات را می‌سازد. شکل پراپس‌های دریافتی کامپوننت عبارت است از:
• index:‌ نشان‌دهنده ایندکس آرایه است. دقت کنید این ایندکس باید برابر ایندکس آرایه مرتب شده براساس بهترین قیمت در هر قسمت خرید و فروش باشد.
• type:‌ این مقدار یا باید برابر با buy یا برابر با sell باشید.
• price:‌ نشان‌دهنده قیمت آن سفارش است.
• amount:‌ نشان‌دهنده حجم سفارشات در آن است. دقت کنید فقط مقدار سفارش‌های آن قیمت.
• total:‌ نشان‌دهنده حجم کل سفارشات تا آن قیمت است. دقت کنید مقدار سفارش‌های آن قیمت بعلاوه حجم بقیه سفارشات تا آن قیمت. (براساس بهترین سفارش)
• bgWidth:‌ نشان‌دهنده درصد رنگ پشت‌زمینه (درصد حجم سفارشات آن قیمت به بیشتر حجم) است. راهنمایی: در هنگام محاسبه این عدد دقت کنید که شما باید مقدار کل در ردیف را به بیشتر‌ین مقدار کل (مقدار کل ردیف‌ آخر قسمت خرید و فروش) حساب کنید. (براساس درصد) برای مثال اگر مقدار کل سفارشات خرید برابر ۱۰۰۰ و سفارشات فروش برابر ۱۵۰۰ باشد. شما باید مقدار کل هر ردیف تقسیم برای ۱۵۰۰ ضبدر ۱۰۰ کنید. برای مثال بالا این شاخص برای اولین سفارش خرید برابر (۱۰۰ * ۳۷ / ۱۵۰۰) است و شما باید برای کامپوننت مقدار ۲.۴۶% را ارسال کنید. (دقت برابر دو رقم اعشار باشد)

نکات

• برای ارسال پاسخ کل پروژه را zip کرده و ارسال کنید. دقت کنید که پوشه‌ی node_modules در فایل ارسالی نباشد.