#!/usr/bin/python
# -*- coding: utf-8 -*-

import dash
import dash_core_components as dcc
import dash_html_components as html

import plotly.graph_objs as go

import pandas as pd
import math

# задаем данные для отрисовки
x = range(-100, 100, 1)
x = [x / 10 for x in x]
y_sin = [math.sin(x) for x in x]
y_cos = [math.cos(x) for x in x]
data = [
        go.Scatter(x = pd.Series(x), y = pd.Series(y_sin), mode = 'lines', name = 'sin(x)'),
        go.Scatter(x = pd.Series(x), y = pd.Series(y_cos), mode = 'lines', name = 'cos(x)'),
       ]

# задаем лейаут
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 = 'Тригонометрические функции'),

    dcc.Graph(
        figure = {'data': data,
                  'layout': go.Layout(xaxis = {'title': 'x'}, yaxis = {'title': 'y'})
                 },
        id = 'trig_func'
    ),

])

# описываем логику дашборда
if __name__ == '__main__':
    app.run_server(host='0.0.0.0', port=3000)