dashboard.py

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

pd.set_option('display.max_colwidth', 0)

 # Задаём параметры подключения к БД,
	# их можно узнать у администратора БД.
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)

query1 = '''SELECT *
    		FROM dash_visits
    		'''
dash_visits = pd.io.sql.read_sql(query1, con = engine)
dash_visits['dt'] = pd.to_datetime(dash_visits['dt'])

query2 = '''SELECT *
    		FROM dash_engagement
    		'''
dash_engagement = pd.io.sql.read_sql(query2, 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.Label('Фильтр даты и времени:'),
    		dcc.DatePickerRange(
    			start_date = dash_visits['dt'].min(),
    			end_date = dash_visits['dt'].max(),
    			display_format = 'YYYY-MM-DD',
    			#style = {'height': '5vw'},
    			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': '10vw'},
            	id = 'item-topic-dropdown'
        	),
        ], className = 'six columns'),
    ], className = 'row'),

    html.Div([
    	# Выбор возрастной группы
    	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,
	            #style = {'height': '5vw'},
	            id = 'age-dropdown'
        	),
        ], className = 'six columns'),
    ], className = 'row'),
    html.Br(),

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

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

])

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

@app.callback(
    [Output('history-absolute-visits', 'figure'),
     Output('pie-visits', 'figure'),
     Output('engagement-graph', 'figure'),
    ],
    [Input('dt_selector', 'start_date'),
     Input('dt_selector', 'end_date'),
     Input('age-dropdown', 'value'),
     Input('item-topic-dropdown', '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('dt >= @start_date and dt <= end_date')
    filtered_visits = filtered_visits.query('age_segment in @selected_age_segment')
    filtered_visits = filtered_visits.query('item_topic in @selected_item_topic')

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

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

    data_item_topic = []
    for topic in grouped_by_item_topic['item_topic'].unique():
        data_item_topic += [go.Scatter(x = grouped_by_item_topic.query('item_topic == @topic')['dt'],
        y= grouped_by_item_topic.query('item_topic == @topic')['visits'],
        mode = 'lines',
        stackgroup='one',
        name = topic)]





    return(
    		{
    			'data':data_item_topic,
    			'layout':go.Layout(xaxis={'title':'date'},
    							   yaxis={'title':'events'})
    		},

    		{
    			'data':data_item_topic,
    			'layout':go.Layout(xaxis={'title':'date'},
    							   yaxis={'title':'events'})
    		},

    		{
    			'data':data_item_topic,
    			'layout':go.Layout(xaxis={'title':'date'},
    							   yaxis={'title':'events'})
    		},
    )




print()
print(dash_visits.sample(3))
print()
print(dash_engagement.sample(3))

print('------------------------------------------------------')


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