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

# Формируем строку соединения с БД.
engine = create_engine('postgresql://{}:{}@{}:{}/{}'.format(db_config['user'],
                                                                       db_config['pwd'],
                                                                       db_config['host'],
                                                                       db_config['port'],
                                                                       db_config['db']))

# получаем сырые данные visits
query = ''' SELECT * FROM dash_visits '''
dash_visits = pd.io.sql.read_sql(query, con = engine, index_col = 'record_id')
dash_visits['dt'] = pd.to_datetime(dash_visits['dt']) #приводим значения dt к datetime

# получаем сырые данные engagement
query = ''' SELECT * FROM dash_engagement '''
dash_engagement = pd.io.sql.read_sql(query, con = engine, index_col = 'record_id')
dash_engagement['dt'] = pd.to_datetime(dash_engagement['dt']) #приводим значения dt к datetime

#заголовок
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('Заголовок'),
    html.Label(note),
    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 HH:SS',
            id = 'dt_selector',
        ),
    ], 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,
            style = {'height': '15vw'},
            id = 'theme_selector'
        ),
    ], className = 'six columns'),

    # выбор возрастной группы
    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_selector'
        ),
    ], className = 'six columns'),
  ], className='row'),
], className='row')

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

#описываем логику дашборда
@app.callback(
    [Output('history_absolute_visits', 'figure'),
    ],
    [Input('dt_selector', 'start_date'),
     Input('dt_selector', 'end_date'),
     Input('age_selector', 'value'),
     Input('item_topic_selector', 'value')
    ])

def update_figures(start_date, end_date, age_segment, item_topic):
  #приводим дату к нужным типам
    start_date = datetime.strptime(start_date, '%Y-%m-%dT%H:%M:%S')
    end_date = datetime.strptime(end_date, '%Y-%m-%dT%H:%M:%S')
  #фильтрация
    filtered_visits = dash_visits.query('item_topic.isin(@item_topic) and age_segment.isin(@age_segment)\
                               and dt >= @start_date and dt <= end_date')

    grouped_by_topic = filtered_visits.groupby(['item_topic','dt']).agg({'visits':'sum'}).reset_index()

    data_topic = []
    for topic in grouped_by_topic['item_topic'].unique():
        data_topic += [go.Scatter(x = grouped_by_topic.query('item_topic == @topic')['dt'],
        y= grouped_by_topic.query('item_topic == @topic')['visits'],
        mode = 'lines', stackgroup='one', name = topic)]
    return({'data':data_topic, 'layout':go.Layout(xaxis={'title':'date'}, yaxis={'title':'events'})})

if __name__ == '__main__':
    app.run_server(host='0.0.0.0', port=3000)