پروژه اولیه

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

candlestick-chart
├── server
│   ├── server.js
│   └── utils.js
├── index.html
├── package.json
├── script.js
└── styles.css

جزئیات

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

با سر زبان افتادن رمزارز‌ها و سود خوب این بازار، شمس‌الله تصمیم گرفته صرافی خود را ایجاد کند. او برای صرافی خود می‌خواهد یک ارز اختصاصی ایجاد کند و با فروختن آن به مردم پول خوبی به جیب بزند. او در ابتدا می‌خواهد یک چارت قیمتی دروغین برای خود بسازد. برای این منظور اون یک سرور ساخته است که در بازه‌های زمانی ۳۰ ثانیه یک قیمت رندوم می‌سازد. از اونجایی که او به قسمت فرانت‌اند مسلط نیست از شما می‌خواهد که قسمت فرانت‌اند این پروژه را بسازید و در سود این ارز کلاه‌برداری سهیم شوید.

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

در این پروژه شما باید دیتای قیمت این ارز رو از سرور بگیرید و در قالب نمودار شمعی (candlestick-chart) نمایش دهید.

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

"data": {
  "date": Date,
  "price": number
}[]

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

برای مثال:

"data": [
  {
    "date": "2021-11-29T15:53:00.000Z",
    "price": 10,
  },
  {
    "date": "2021-11-29T15:53:30.000Z",
    "price": 40,
  },
  {
    "date": "2021-11-29T15:54:00.000Z",
    "price": 20,
  }
]

فاصله تاریخ‌ها ۳۰ ثانیه است.

شما پس از دریافت داده‌ها باید چارت مناسبت با داده‌ها را بسازید.

دقت کنید که این داده‌ها به صورت مرتب ارسال نمی‌شوند و ممکن است تاریخ‌ها پشت سر هم نباشند.

فرض کنید دیتای تاریخ اولین دیتا برابر شروع نمودار است.

اجزای کندل‌ها:

در بازار‌های مالی یکی از نمودارهای پرکاربرد برای پیگیری نوسانات قیمت، نمودار شعمی یا candlestick-chart است. در این نمودار شما با استفاده از کندل‌ها بالاترین، پایین‌ترین قیمت و همچنین قیمت باز و بسته شدن در یک بازه زمانی را مشاهده می‌کنید. این نمودارها در تایم‌فریم‌های مختلفی قابل بررسی است. برای مثال در تایم‌فریم ۵ دقیقه هر کندل اطلاعات مربوط به بازه زمانی ۵ دقیقه‌ای را نشان می‌دهد. و نمودار به بازهه‌های ۵ دقیقه تقسیم می‌شود. در هر کندل چهار داده اصلی وجود دارد:

• بالاترین مقدار: بالاترین مقدار در بازه زمانی یک کندل است.
• پایین‌ترین مقدار: پایین‌ترین مقدار در بازه زمانی یک کندل است.
• مقدار شروع: مقداری است که کندل با آن باز شده است.
• مقدار پایان: مقداری است که کندل با آن تمام شده است.

هر کندل سه قسمت اصلی دارد:

• سایه بالا: حد فاصل بیشتر‌ین مقدار با مقدار شروع یا پایان
• سایه پایین: حد فاصل کمترین مقدار با مقدار شروع یا پایان
• بدنه اصلی: حد فاصل مقدار شروع و پایان

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

در تصویر زیر دو شکل نشان داده شده است:

ساخت کندل‌ها:

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

• هر کندل داخل یک div با کلاس candle قرار می‌گیرد.
• این المان باید سه استایل bottom, left, height را داشته باشد. مقادیر این استایل‌ها باید براساس داده‌های هر آن کندل باشد.
• در المان candle خود سه بخش دارد. هر کدام از این بخش‌ها با یک div ساخته می‌شوند.
• المان اول سایه بالا، المان دوم بدنه کندل و المان سوم سایه پایین است.
• در صورتی که المان از نوع بدنه کندل بود باید دارای کلاس candle__body باشد و درصورتی که از نوع سایه (چه بالا و چه پایین) باید دارای کلاس candle__shadow باشد.
• هر کدام از این سه المان باید دارای دو استایل height و background-color باشد. مقدار این استایل‌ها باید براساس داده‌های آن کندل و توضیحات گفته شده در بالا باشد.
• مقدار رنگ‌ها در فایل‌ها اولیه آماده است.

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

• شما باید برساس دیتای دریافتی از سرور، ساختار مورد نیاز را بسازید و در نمودار نمایش دهید.
• دیتای ارسالی توسط براساس تاریخ مرتب نیست و شما باید این داده‌ها را براساس ترتیب بر روی تاریخ روی نمودار نمایش دهید.
• کندل‌ها باید در المان با ایدی chart قرار داده شوند.
• در هر کندل باید دیتای مربوط به بازه آن کندل را داشته باشید. برای مثال اگه تایم‌فریم ۳ دقیقه بود، کندل اول باید براساس داده‌های سه دقیقه اول باشد.
• تعداد کندل‌ها نباید از چارت بیرون بزند. بنابراین باید هنگام ارسال درخواست به سرور برای دریافت داده‌ها باید تعداد مناسب را بدست آورید. فرض کنید عرض هر کندل 10px است.
• هنگام اجرای اولیه باید درخواست به سرور با تایم‌فریم ۳ دقیقه ارسال شود و نمایش نمودار براساس این دیتا‌ها باشد.
• کاربر می‌تواند با انتخاب تایم‌فریم‌ها ۳، ۵ و ۱۰ دقیقه داده‌های مختلف را ببیند.
• با انتخاب هر کدام از این تایم‌فریم‌ها شما باید یک درخواست جدید ارسال کنید و نمودار را براساس داده‌های جدید بروز کنید.
• ساختار آدرس درخواستی به سرور به شکل ${SERVER_BASE_URL}/:TIME_FRAME/?count=DATA_COUNT است. که در آن TIME_FRAME نشان‌دهنده تایم‌فریم انتخابی (۳، ۵، ۱۰) و DATA_COUNT برابر تعداد داده‌هایی است که سرور باید بفرستد.
• در هر تغییر تایم‌فریم نمودار باید به‌‌کلی بروز شود.
• برای ارسال درخواست‌ها از fetch استفاده کنید.
• فرض کنید داده‌ها ارسالی سرور بین بازه صفر تا ۲۰۰ است.
• برخی از داده‌های کمکی در فایل اولیه آورده شده است.
• فرض کنید هر واحد برابر 3px است. برای مثال اگه کمترین مقدار یک کندل ۱۰ بود، برای نمایش نقطه مربوط به کمترین مقدار، باید 30px قرار بدید.

نکات

• شما تنها مجاز به اعمال تغییرات در فایل script.js هستید.