Создание финансовой панели инструментов с помощью Dash, Plotly и Python

Этот пост будет немного отличаться от моих предыдущих. Мы не собираемся анализировать финансовые данные или оценивать компании, использующие Python. Вместо этого мы собираемся узнать, как создать финансовую панель управления с помощью Python, используя Plotly and Dash. Ниже представлен образец того, что мы будем строить!

Интерактивные панели мониторинга на Python

Plotly - отличная бесплатная библиотека Python для создания интерактивных графиков и информационных панелей. Сюжетная документация прекрасна, и ее более чем достаточно, чтобы начать создавать наши собственные интерактивные графики без необходимости знать HTML, CSS или JavaScript. Конечно, предварительные знания HTML будут вам полезны, но это не обязательно.

В этом посте я расскажу о важных частях, чтобы иметь работающую интерактивную панель инструментов.

Мы создадим очень простую панель инструментов, где мы введем тикер компании и в течение нескольких секунд, мы увидим на экране две финансовые гистограммы отображение доходов и чистой прибыли компании с течением времени.

Как только вы достаточно хорошо поймете, что мы делаем и как работает Dash, вы сможете создавать более продвинутые информационные панели самостоятельно.

Запуск нашей финансовой панели управления на Python - установка Dash

Прежде всего, прежде чем начать работу с кодом, нам нужно установить Dash. Мы можем легко сделать это, выполнив команду ниже в нашем терминале. Вы можете пропустить эту часть, если у вас уже установлен Dash.

pip install dash==1.12.0

Отлично, с этой строкой кода вы установили все необходимые компоненты для работы Dash.

Как работает Dash

Что мы делаем с Dash, так это создаем приложение, которое будет работать на нашем локальном сервере (позже я создам сообщение, показывающее, как опубликовать его в Интернете с помощью Heroku).

Приложения Dash состоят из двух частей. Компонент макета, в который нам нужно будет ввести HTML для создания дизайна страницы. И второй компонент, определяющий функциональность приложения.

Чтобы создать нашу финансовую панель управления с помощью Python, у нас будет очень простой макет. Давайте запустим нашу интерактивную панель инструментов и представим базовый макет в следующем разделе.

Создание макета финансовой панели инструментов

Мы напишем наш код в стандартном файле Python, например, dashboard_fin.py. Сначала мы импортируем все необходимые пакеты. Для использования основных функций Dash необходимы четыре строки кода. Они взяты из документации Dash. Не стесняйтесь взглянуть на него, если хотите узнать больше о том, что предоставляет каждый пакет:

import dash 
import dash_core_components as dcc 
import dash_html_components as html 
from dash.dependencies import Input, Output

Основные компоненты - это то, что мы будем использовать для создания интерактивных диаграмм Dash на нашей финансовой панели. Компонент HTML будет использоваться для структурирования и разработки макета страницы. Наконец, мы также импортируем входные и выходные данные из зависимостей тире.

input - это информация, введенная пользователем на панели инструментов. Эти входные данные войдут в функцию Python, чтобы вернуть определенные данные.

Вывод с другой стороны будет заполнителем графика, на котором мы строим данные. Мы создадим функцию Python, которая будет принимать входные данные, преобразовывать их и возвращать выходные данные в форме графика, которые будут включены в часть макета HTML.

Затем мы будем использовать запросы для получения данных из API и Plotly для построения наших графиков.

import requests 
import plotly.graph_objects as go

Затем мы можем создать приложение, передав строку кода ниже. Это создаст объект, содержащий наше приложение:

app = dash.Dash()

Наконец, мы готовы создать макет страницы. У нас будет заголовок H1, а затем раздел Div, содержащий текстовое поле ввода и два графика:

app.layout = html.Div([
  html.H1('Financial Dashboard'),
html.Div([
  dcc.Input(id='company_selection',value='AAPL'),
  html.H3(id='text'),
  dcc.Graph(id ='revenue'),
  dcc.Graph(id ='netincome'),
  ],style= {'padding':10})
])

Следовательно, у нас есть три элемента в нашем разделе Div:

  • Ввод: текстовое поле, в котором пользователи будут вводить название компании, для которой запрашиваются финансовые данные.
  • График: это заполнитель, на котором будет отображаться график. Это будет главный компонент нашей финансовой панели. Данные и тип графика будут построены в нашей функции Python.
  • H3: заполнитель для отображения названия компании, по которой мы показываем данные.

Обратите внимание, что идентификатор каждого из компонентов будет использоваться в качестве ссылки позже в нашей функции Python для передачи данных или для вывода данных. Это связь между макетом и функциональностью финансовой панели.

Создание функциональности на нашей панели инструментов Python Financial

Теперь, когда у нас есть готовый макет, мы можем просто создать функцию для получения наших данных и создания интерактивного графика. Мы собираемся использовать financialmodelingprep, чтобы получить финансовые данные компании. Он предлагает 250 бесплатных вызовов API в месяц.

Для нашей финансовой панели управления Python я буду извлекать только доходы и чистую прибыль компании. Я не буду вдаваться в подробности как получить финансовые данные, так как я уже неоднократно рассматривал эту часть в своих предыдущих сообщениях.

Затем наша функция вернет точки данных в виде словаря, и мы будем использовать Plotly для построения графика. Подробнее о том, как строятся графики Plotly, можно найти здесь. Затем мы используем декоратор app.callback (), чтобы связать входные и выходные данные с нашим компонентом макета Dash. Это та часть, которая делает нашу финансовую панель управления интерактивной и отзывчивой на вводимые пользователем данные.

У нас будет две функции. Каждая функция будет отображать данные для одной столбчатой ​​диаграммы на нашей финансовой панели. Первый - график доходов компании с течением времени.

@app.callback(Output('revenue','figure'),
              [Input('company_selection','value')])
def retrieve_revenue(company):
  demo = 'your api key'
  stock = company
  print(stock)
  IS = requests.get(f'https://financialmodelingprep.com/api/v3/financials/income-statement/{company}?apikey={demo}')
  IS = IS.json()
  IS = IS['financials']
  Revenues = []
  Dates = []
  count = 0
  for item in IS:
    Revenues.append(float(IS[count]['Revenue']))
    Dates.append(IS[count]['date'])
    count += 1
  print(Revenues)
datapoints = {'data': [go.Bar(x=Dates, y=Revenues)],'layout': dict(xaxis={'title':'Date'},
                                                                      yaxis={'title':'Revenue'},
                                                                            )}
return datapoints

Вторая функция - график чистой прибыли компании с течением времени. Обратите внимание, что эти две функции почти идентичны. Мы изменили только id и ключ словаря, чтобы извлечь чистую прибыль из API.

@app.callback(Output('netincome','figure'),
              [Input('company_selection','value')])
def retrieve_revenue(company):
  demo = 'your api key'
  stock = company
  IS = requests.get(f'https://financialmodelingprep.com/api/v3/financials/income-statement/{company}?apikey={demo}')
  IS = IS.json()
  IS = IS['financials']
  Revenues = []
  Dates = []
  count = 0
  for item in IS:
    Revenues.append(float(IS[count]['Net Income']))
    Dates.append(IS[count]['date'])
    count += 1
 
  datapoints = {'data': [go.Bar(x=Dates, y=Revenues,marker_color='lightsalmon',name='Net Income')],
  'layout': dict(xaxis={'title':'Date'},
                yaxis={'title':'Net Income'},
                  )}
return datapoints

Ссылки ввода-вывода приборной панели

Обе функции возвращают финансовые данные компании, которые запрашиваются пользователем в поле ввода финансовой панели. Например, если пользователь передает тикер AAPL, функция Python примет AAPL в качестве входных данных и передаст его в запрос URL-адреса, чтобы получить финансовые данные для Apple.

Затем мы добавляем каждый год доход (или чистый доход) и дату в список Python и передаем их в панель управления. рисунок, чтобы создать гистограмму.

Наконец, функция возвращает словарь, содержащий точки данных рисунка и макет, который затем выводится в заполнителе графика HTML с тем же id.

Чтобы пользователь знал название компании, для которой мы отображаем данные, мы можем добавить дополнительную функцию, связанную с нашим разделом H3 в HTML-макете:

@app.callback(
    Output(component_id='text', component_property='children'),
    [Input(component_id='company_selection', component_property='value')]
)
def update_output_div(input_value):
    return 'Displaying Data for "{}"'.format(input_value)

Запуск финансовой панели инструментов

Чтобы запустить финансовую панель, нам нужно только добавить следующие строки кода и запустить наш скрипт python из терминала.

if __name__ == '__main__':
    app.run_server(debug=True)

Затем приложение будет запущено на вашем локальном сервере на http://127.0.0.1:8050/. Вы можете просто скопировать и вставить URL-адрес в браузере, и вы увидите что-то похожее на изображение ниже. Просто введите тикер любой компании в текстовое поле, и графики будут обновляться в интерактивном режиме!

Если графики не отображаются, убедитесь, что у вас также установлена ​​Plotly installed.

Теперь вы должны быть готовы начать самостоятельно создавать более продвинутые информационные панели. Подпишитесь на мои каналы в социальных сетях, чтобы в одной из моих следующих публикаций узнать, как опубликовать панель управления в Интернете.

Посмотрите мой видеоурок, в котором пошагово объясняется код:

import dash
import dash_core_components as dcc
import dash_html_components as html 
from dash.dependencies import Input, Output 
import requests 
import plotly.graph_objects as go
app = dash.Dash() 
app.layout = html.Div([ 
  html.H1('Financial Dashboard'), 
  html.Div([ dcc.Input(id='company_selection',value='AAPL'), 
  html.H3(id='text'), dcc.Graph(id ='revenue'),
  dcc.Graph(id ='netincome'), ],style= {'padding':10})
 ]) 

@app.callback(Output('revenue','figure'),         [Input('company_selection','value')])
def retrieve_revenue(company):
  demo = 'your api key' 
  stock = company print(stock)
  IS = requests.get(f'https://financialmodelingprep.com/api/v3/financials/income-statement/{company}?apikey={demo}')
IS = IS.json()
IS = IS['financials'] 
Revenues = []
Dates = []
count = 0
for item in IS:
   Revenues.append(float(IS[count]['Revenue'])) 
   Dates.append(IS[count]['date']) 
   count += 1 
datapoints = {'data': [go.Bar(x=Dates, y=Revenues)],'layout':   dict(xaxis={'title':'Date'}, yaxis={'title':'Revenue'}, )} 
return datapoints
 
@app.callback(Output('netincome','figure'), [Input('company_selection','value')]) 
def retrieve_revenue(company): 
demo = 'your api key' 
stock = company 
IS = requests.get(f'https://financialmodelingprep.com/api/v3/financials/income-statement/{company}?apikey={demo}') 
IS = IS.json() 
IS = IS['financials'] 
Revenues = [] 
Dates = [] 
count = 0 
for item in IS: 
  Revenues.append(float(IS[count]['Net Income']))   
  Dates.append(IS[count]['date'])
  count += 1
datapoints = {'data': [go.Bar(x=Dates, y=Revenues,marker_color='lightsalmon',name='Net Income')], 'layout': dict(xaxis={'title':'Date'}, yaxis={'title':'Net Income'}, )}
return datapoints 
@app.callback( Output(component_id='text', component_property='children'), [Input(component_id='company_selection', component_property='value')] ) 
def update_output_div(input_value): 
  return 'Displaying Data for "{}"'.format(input_value)
if __name__ == '__main__': app.run_server(debug=True)

Первоначально опубликовано на https://codingandfun.com 14 июня 2020 г.