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

# пример подключения к базе данных для Postresql
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']))
# пример подключения к базе данных для Sqlite
#engine = create_engine('sqlite:////db/zen.db', echo=False)

# получаем сырые данные
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'])


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(),

    html.Div([

      html.Div([
          html.Div([
            # выбор даты и времени
            html.Label('Дата и время:'),
            dcc.DatePickerRange(
                start_date = pd.to_datetime(dash_visits['dt']).min(),
                end_date = pd.to_datetime(dash_visits['dt']).max(),
                display_format = 'YYYY-MM-DD',
                id = 'dt_selector',
                ),
            ], className = 'row container-display'),

           html.Br(),

           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 = 'row container-display'),
           ],  className = 'six columns'
              ),

      html.Br(),

      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(),
    html.Br(),

    html.Div([
        html.Div([

            # график истории событий по темам карточек
            html.Label('Визиты по темам карточек:'),

            dcc.Graph(
                style = {'height': '50vw'},
                id = 'history_absolute_visits'
            ),
        ], className = 'six columns'),

        html.Br(),

        html.Div([
            # разбивка событий по темам источников
            html.Label('Доли тем источников:'),

            dcc.Graph(
                style = {'height': '25vw'},
                id = 'pie_visits'
            ),
        ], className = 'six columns'),


        html.Br(),

        html.Div([

            # график вовлеченности
            html.Label('Конверсия пользователей:'),

            dcc.Graph(
                style = {'height': '25vw'},
                id = 'engagement_graph'
            ),
        ], className = 'six columns'),

    ], className = 'row'),


])

#описываем логику дашборда
@app.callback(
    [Output('history_absolute_visits', 'figure'),
     Output('pie_visits', 'figure'),
     Output('engagement_graph', 'figure'),
    ],
    [Input('item-topic-dropdown', 'value'),
     Input('age-dropdown', 'value'),
     Input('dt_selector', 'start_date'),
     Input('dt_selector', 'end_date'),
    ])
def update_figures(start_date, end_date, selected_ages, selected_item_topics):

     #применяем фильтрацию
    dash_visits_filtered = dash_visits.query('dt >= @start_date and dt <= @end_date')
    dash_visits_filtered = filtered_visits.query('age_segment in @selected_ages')
    dash_visits_filtered = filtered_visits.query('item_topic in @selected_item_topics')

    dash_engagement_filtered = dash_engagement.query('dt >= @start_date and dt <= @end_date')
    dash_engagement_filtered = dash_engagement_filtered.query('age_segment in @selected_age')
    dash_engagement_filtered = dash_engagement_filtered.query('item_topic in @selected_item_topic')

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

    dash_visits_filtered2= dash_visits_filtered.groupby(['source_topic']).agg({'visits': 'sum'}).reset_index()

    dash_engagement_filtered1 = dash_engagement_filtered.groupby(['event']).agg({'unique_users': 'sum'}).reset_index()



  # график визитов по теме карточки
    history_absolute_visits = []
    for item_topic in dash_visits_filtered1['item_topic'].unique():
      history_absolute_visits += [go.Scatter(x = dash_visits_filtered1.query('item_topic == @item_topic')['dt'],
                                y = dash_visits_filtered1.query('item_topic == @item_topic')['visits'],
                                mode = 'lines',
                                stackgroup = 'one',
                                name = item_topic)]

  # круговая диаграмма по теме источника
    pie_visits = [go.Pie(labels = dash_visits_filtered2['source_topic'],
                             values = dash_visits_filtered2['visits'],
                             name = 'source_topic')]



  # график конверсии по событиям
    engagement_graph = [go.Bar(x = dash_engagement_filtered1['event'],
                            y = dash_engagement_filtered1['unique_users'],
                            name = 'events')]

  #формируем результат для отображения
    return (
            {
                'data': history_absolute_visits,
                'layout': go.Layout(xaxis = {'title': 'Дата и время'},
                                    yaxis = {'title': 'Число визитов'})
             },
            {
                'data': pie_visits,
                'layout': go.Layout()
             },
            {
                'data': engagement_graph,
                'layout': go.Layout(xaxis = {'title': 'События'},
                                    yaxis = {'title': 'Число событий'},
                                    barmode = 'stack',)
             },
          )

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