#!/usr/bin/python
# -*- coding: utf-8 -*-

# импорт необходимых библиотек
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

import plotly.graph_objs as go

from datetime import datetime

import pandas as pd

# задание данных для отрисовки
from sqlalchemy import create_engine

# подключение к базе данных zen
db_config = {'user': 'my_user',
             'pwd': 'my_user_password',
             'host': 'localhost',
             'port': 5432,
             'db': 'zen'}
engine = create_engine('postgresql://{}:{}@{}:{}/{}'.format(db_config['user'],
                                                            db_config['pwd'],
                                                            db_config['host'],
                                                            db_config['port'],
                                                            db_config['db']))

# получение сырых данных
# датафрейм событий (dash_visits)
query = ''' SELECT *
            FROM dash_visits;
        '''
dash_visits = pd.io.sql.read_sql(query, con = engine)
dash_visits['dt'] = pd.to_datetime(dash_visits['dt'])

# датафрейм воронки (dash_engagement)
query = ''' SELECT *
            FROM dash_engagement;
        '''
dash_engagement = pd.io.sql.read_sql(query, con = engine)
dash_engagement['dt'] = pd.to_datetime(dash_engagement['dt'])

# формирование текста описания дашборда
note = '''
          Этот дашборд показывает пользовательское взаимодействие с карточками статей в Яндекс.Дзене.
          Используйте выбор интервала даты, тем карточек и возрастной категории пользователей для управления дашбордом.
       '''

# задание лейаута
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets, compress=False)
app.layout = html.Div(children=[

    # формирование html
    html.H1(children = 'Дашборд для Яндекс.Дзен'),

    html.Br(),

    # пояснения
    html.Label(note),

    html.Br(),

    # Input
    html.Div([

        html.Div([

            html.Div([
            # выбор даты
            html.Label('Дата:'),
            dcc.DatePickerRange(
                start_date = dash_visits['dt'].min(),
                end_date = dash_visits['dt'].max(),
                display_format = 'YYYY-MM-DD',
                id = 'dt_selector',
                ),
            ]),

            html.Div([
            # выбор возрастных категорий
            html.Label('Возрастные категории:'),
            dcc.Dropdown(
                options = [{'label': x, 'value': x} for x in dash_visits['age_segment'].unique()],
                value = dash_visits['age_segment'].unique().tolist(),
                multi = True,
                id = 'age-dropdown'
                ),
            ]),

        ], className = 'six columns'),

        html.Div([
            # выбор темы карточки
            html.Label('Темы карточек:'),
            dcc.Dropdown(
                options = [{'label': x, 'value': x} for x in dash_visits['item_topic'].unique()],
                value = dash_visits['item_topic'].unique().tolist(),
                multi = True,
                id = 'item-topic-dropdown'
            ),
        ], className = 'six columns'),


    ], className = 'row'),

    html.Br(),

    # Output
    html.Div([
        html.Div([
            # график истории событий по темам карточек
            html.Label('События по темам карточек:'),
            dcc.Graph(
                style = {'height': '50vw'},
                id = 'history_absolute_visits'
            ),
        ], className = 'six columns'),
    ]),

    html.Div([

        html.Div([
            # график разбивки событий по темам источников
            html.Label('События по темам источников:'),
            dcc.Graph(
                style = {'height': '25vw'},
                id = 'pie_visits'
            ),
        ], className = 'six columns'),

        html.Div([
            # график средней глубины взаимодействия с карточками статей
            html.Label('Средняя глубина взаимодействия с карточками статей:'),
            dcc.Graph(
                style = {'height': '25vw'},
                id = 'engagement_graph'
            ),
        ], className = 'six columns'),

    ], className = 'row'),


    html.Br()

])

 # основная часть исполняемого кода
if __name__ == '__main__':
    app.run_server(debug = True, host = '0.0.0.0')