#!/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 = '''
            SELECT * FROM dash_visits
        '''
dash_visits = pd.io.sql.read_sql(query, con = engine)
dash_visits['dt'] = pd.to_datetime(dash_visits['dt'])

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

    html.Div([

        html.Div([

          html.Div([
            # выбор времени
            html.Label('Время'),
            dcc.DatePickerRange(
              start_date = dash_visits['dt'].dt.date.min(),
              end_date = datetime(2019,9,25).strftime('%Y-%m-%d'),
              display_format = 'YYYY-MM-DD',
              id = 'dt_selector'),
            ], className = 'row container-display'),

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

    ]),

    html.Br(),

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

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

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

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

def update_figures(start_date, end_date, topic_selector, age_selector):

  #применяем фильтрацию
  filtered = dash_visits.query('item_topic.isin(@topic_selector) and \
   dt >= @start_date and dt <= @end_date \
   and age_segment.isin(@age_selector)')

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

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

  filtered = dash_engagement.query('item_topic.isin(@topic_selector) and \
   dt >= @start_date and dt <= @end_date \
   and age_segment.isin(@age_selector)')

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


#   # график история событий по темам карточек (все типы событий, абсолютные значения)
  history = []

  for genre in history_dash_visits['item_topic'].unique():
      history += [go.Scatter(x = history_dash_visits.query('item_topic == @topic_selector')['dt'],
                                   y = history_dash_visits.query('item_topic == @topic_selector')['item_topic'],
                                   mode = 'lines',
                                   stackgroup = 'one',
                                   name = genre)]

  #формируем результат для отображения
  return (
            {
                'data': history,
                'layout': go.Layout(xaxis = {'title': 'Время'},
                                    yaxis = {'title': 'задай переменную'})
             })#,


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