تجربه ساخت داشبورد با Dash plotly

اخیرا لازم شد تا کار کردن با ابزار dash رو با پایتون یاد بگیرم. از اونجایی که بهترین کار برای یادگیری انجام دادن و تمرین کردنه سعی کردم یه نمونه کاربردی انجام بدم و تو ویرگول بنویسم. dash یه ابزار برای ساخت داشبورد و امکانات خوبی در اختیارتون قرار میده. روب بستر flask نوشته شده و برای بصری سازی از کتابخونه های Plotly.js و React.js استفاده میکنه یه سری پیچیدگی های این ابزارها رو کم میکنه و محیطی فراهم میکنه که فقط با دونستن پایتون بتونید یه داشبورد حرفه ای بالا بیارید. اینجا میتونید سری به گالری dash بزنید. متاسفانه این سایت هم مثل خیلی از جاهای دیگه کابرای ایرانی رو تحریم کرده و باید با فیلشکن وارد بشید. یادگرفتن این ابزار ساده هست و من خودم از کورس jose portilla سایت udemy که از اینجا میتونید دانلود کنید، استفاده کردم. اول به مرور و معرفی ابزار dash میپردازیم و بعدش مختصری در مورد داشبوردی که ایجاد کردم و مربوط به بازار بورس امریکا(لینک) هست صحبت میکنیم.

معرفی dash:

برای اینکه داشبورد سروشکل بگیره باید المان های مختلف رو تو اپلیکیشن بچینید. مثلا به این صورت با یه تیتر شروع میکنیم:

import dash_html_components as html  
html.H1('عنوان داشبورد')

هرچند برای اعمال تنظیمات حرفه ای تر هم دستتون کاملا بازه و میتونید با update_layout هر بلایی که خواستید سر نمودار بیارید. المان های مختلف شامل دکمه، input، فضای قرار گرفتن نمودار و خیلی امکانات دیگه فراهم شده و میتونید لیست کاملی از اونها رو اینجا ببینید. مثل نمونه کد زیر که یه اسلایدر ایجاد میکنه.

import dash_core_components as dcc
dcc.RangeSlider(marks={i: 'Label {}'.format(i) for i in range(-5, 7)}, min=-5,max=6,value=[-3, 4] )

داده هایی که برای بصری سازی و تولید نمودار استفاده میشه ساختار دیتافریم داره و به سادگی یک خط کد زدن به نمودار تبدیل میشه. مثلا ایجاد یه هیستوگرام به همین سادگیه:

import plotly.express as px
fig=px.histogram(df, x=&quotcolumn&quot)
fig.update_layout(title,........)

تعاملی بودن یه موضوع بسیار مهم در ایجاد داشبوردهاست و اکثر مواقع داشبورد باید با انتخابهای مختلف کاربر آپدیت بشه و بر اساس ورودی های کاربر داده های جدیدی رو نمایش بده. این موضوع با استفاده از callback ها مدیریت میشه و المان های مختلف داشبورد با استفاده از ورودی های جدیدی که بینشون رد و بدل میشه خروجی های جدیدی تولید میکنن و رفتار جدیدی نشون میدن. به عنوان نمونه در نمونه کد زیر مقدار موجود در المان my-input تحت تابع update_output_div به المان my-output انتقال پیدا میکنه

@app.callback(Output(component_id='my-output', component_property='children'),Input(component_id='my-input',component_property='value')) 
def update_output_div(input_value): 
    return 'Output: {}'.format(input_value)

بررسی داشبورد سهام بورس آمریکا (لینک):

ایده اول میتونست این باشه که از داده های بورس ایران استفاده کنم ولی چون جایی که api رایگان ارائه بده پیدا نکردم از داده های بورس امریکا و سایت alpha vantage استفاده کردم. از اینجا میتونید دسترسی رایگان والبته محدود، به api این سایت رو داشته باشین. دریافت داده ها از api و تبدیل به دیتافریم بسیار سادست و با کتابخونهpandas_datareder انجام میشه

data=pandas_datareader.av.time_series.AVTimeSeriesReader(symbols=symbol, function='TIME_SERIES_DAILY', start=start_date, end=end_date, retry_count=3, pause=0.1, session=None, chunksize=25, api_key='alphavantage api key')

df=data.read().reset_index()

به این ترتیب میشه تحلیل های مختلف مثل میانگین تغییرات قیمت ، ایجاد نمودار و ... رو ایجاد کرد و از طریقcallback به المان های مختلف فرستاد. یه چالش در این قسمت ایجاد دیتافریم از ورودی کاربر واستفاده از دیتافریم در قسمت های مختلف داشبورد بود. تو موارد مشابه که نیاز دارید از دیتا تو قسمت های مختلف گزارش استفاده کنید،راه های مختلفی وجود داره مثل ذخیزه سازی در المان های مختلف یا ذخیره در دیتابیس های موقت. اینجا توضیح بیشتری در این مورد داده شده. راهی که من استفاده کردم ذخیره سازی دیتا با فرمت json و سپس ذخیره کردن در یک المان DIV و خارج از دید کاربر و سپس استفاده در قسمت های مختلف گزارش بود.

یه سایت جالب دیگه که ازش استفاده کردم stocktwits هست. این سایت که شبیه سایت توییتر طراحی شده، شبکه اجتماعی سرمایه گذاران و معامله گران هست و حدود پنج میلیون عضو داره. تو این سایت میتونید پست های نماد مورد نظرتون رو ببینید و خودتون پست منتشر کنید. یکی از قابلیت های این سایت تگگذاری پست ها هست به این صورت که پست هایی که حاوی پیامی مبنی بر صعود (Bullish) یا نزول (Bearish) نمادها هستن، توسط علامت‌های مربوطه تگ گذاری شدن