#!/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

db_config = {'user': 'my_user','pwd': 'my_user_password','host': 'localhost','port': 5432,'db': 'zen'}

connection_string = 'postgresql://{}:{}@{}:{}/{}'.format(db_config['user'],db_config['pwd'],db_config['host'],db_config['port'],db_config['db'])

engine = create_engine(connection_string)

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

query_dash_visits = '''
                        SELECT * FROM dash_visits
                    '''

dash_visits = pd.io.sql.read_sql(query_dash_visits, con = engine)
dash_visits['dt'] = pd.to_datetime(dash_visits['dt'])

query_dash_engagement = '''
                            SELECT * FROM dash_engagement
                        '''

dash_engagement = pd.io.sql.read_sql(query_dash_engagement, con = engine)
dash_engagement['dt'] = pd.to_datetime(dash_engagement['dt'])

app.layout = html.Div(children=[

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

    html.Label('ДAанный дашборд показывает графики для анализа пользовательского взаимодействия с карточками статей.'),

    html.Div([
        html.Div([
                html.Div([
                    html.Label('Фильтр даты и времени'),

                dcc.DatePickerRange(
                    start_date = dash_visits['dt'].dt.date.min(),
                    end_date = dash_visits['dt'].dt.date.max(),
                    display_format = 'YYYY-MM-DD HH:SS',
                    id = 'dt_selector'
                )
                ]),
                html.Div([
                    html.Label('Фильтр возрастных категорий')


                ])
        ], 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 = 'theme_selector'
                )


        ], className = 'six columns')
    ], className = 'row'),

    html.Div([
        html.Div([
            html.Label('График истории событий по темам карточек. Все типы событий, абсолютьные значения.')


        ], className = 'six columns'),
        html.Div([
                html.Div([
                    html.Label('График разбивки событий по группам. Все типы событий, относительные значения.')


                ]),
                html.Div([
                    html.Label('График средней глубины взаимодействия (без разбивки на темы карточек или возрастные категории)')


                ])
        ], className = 'six columns')
    ], className = 'row')

])

# описываем логику дашборда

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