import datetime

import dash
from dash import dcc
from dash import html
import plotly
from dash.dependencies import Input, Output

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div(
    html.Div([
        html.Div(id='live-update-text'),
        dcc.Interval(
            id='interval-component',
            interval=1*1000, # 1s = 1000 milliseconds
            n_intervals=0 # number of times the interval has passed
        )
    ])
)

@app.callback(Output('live-update-text', 'children'),
              Input('interval-component', 'n_intervals'))
def update_metrics(n):
    current = datetime.datetime.now()
    s, m, h = current.second, current.minute, current.hour
    style = {'padding': '5px', 'fontSize': '16px'}
    return html.Span('{:d}:{:d}:{:d}'.format(h, m, s)),

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