file-styles-new-graph #1

Merged
s434749 merged 5 commits from file-styles-new-graph into master 2021-06-22 07:42:20 +02:00
2 changed files with 62 additions and 8 deletions

View File

@ -245,7 +245,7 @@ a:hover {
display: inline-block; display: inline-block;
height: 38px; height: 38px;
padding: 0 30px; padding: 0 30px;
color: #555; color: #fff;
text-align: center; text-align: center;
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 600;
@ -485,7 +485,7 @@ a {
padding-bottom: 12px; padding-bottom: 12px;
} }
.Select-control, .Select-menu-outer, .Select-multi-value-wrapper, .select-up, .is-open .Select-control { .Select-control, .Select-menu-outer, .Select-multi-value-wrapper, .select-up, .is-open .Select-control {
background-color: #1E1E1E; background-color: #1E1E1E !important;
color: white; color: white;
} }
@ -632,3 +632,27 @@ a {
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: #d8d8d870 !important; background: #d8d8d870 !important;
} }
/* OWN STYLES */
.gauges{
display: flex;
flex-wrap: wrap;
}
#average_gauge{
flex-grow: 1;
}
#tab-1, #tab-2{
background-color: #1E1E1E;
color: #fff;
border-left: none;
border-right: none;
border-bottom: none;
}
.tab--selected{
background-color: #111111 !important;
}

View File

@ -4,7 +4,7 @@ import dash_core_components as dcc
import dash_table import dash_table
import plotly.express as px import plotly.express as px
import yfinance as yf import yfinance as yf
from dash.dependencies import Input, Output from dash.dependencies import Input, Output, State
import plotly.graph_objects as go import plotly.graph_objects as go
import numpy as np import numpy as np
import pandas as pd import pandas as pd
@ -116,12 +116,19 @@ app.layout = html.Div(
multi=False, value=selected_stock_in_table, multi=False, value=selected_stock_in_table,
style={'backgroundColor': '#1E1E1E'}, style={'backgroundColor': '#1E1E1E'},
className='stockselector' className='stockselector'
) ),
html.Button("Pobierz dane", id="btn_data",style={'margin-top': '3rem'}),
dcc.Download(id="download-data")
], ],
style={'color': '#1E1E1E'}), style={'color': '#1E1E1E'}),
html.P('Wybierz przedział czasu by policzyć średnie i wachania'), html.P('Wybierz przedział czasu by policzyć średnie i wachania'),
html.Div(
className='gauges',
children=[
dcc.Graph(id='average_gauge'), dcc.Graph(id='average_gauge'),
dcc.Graph(id='volatility_gauge'), dcc.Graph(id='volatility_gauge')
]),
dash_table.DataTable( dash_table.DataTable(
id='info_in_time_period', id='info_in_time_period',
style_header={'backgroundColor': 'rgb(30, 30, 30)'}, style_header={'backgroundColor': 'rgb(30, 30, 30)'},
@ -133,7 +140,14 @@ app.layout = html.Div(
]), ]),
html.Div(className='eight columns div-for-charts bg-grey', html.Div(className='eight columns div-for-charts bg-grey',
children=[ children=[
dcc.Tabs(id='tabs', value='tab-1', children=[
dcc.Tab(id='tab-1', label='Chart 1', value='tab-1', children=[
dcc.Graph(id='timeseries', config={'displayModeBar': False}, animate=True), dcc.Graph(id='timeseries', config={'displayModeBar': False}, animate=True),
]),
dcc.Tab(id='tab-2', label='Chart 2', value='tab-2',children=[
dcc.Graph(id='price-dividends', config={'displayModeBar': False}, animate=True),
]),
]),
dash_table.DataTable( dash_table.DataTable(
id='stock_price_table', id='stock_price_table',
style_header={'backgroundColor': 'rgb(30, 30, 30)'}, style_header={'backgroundColor': 'rgb(30, 30, 30)'},
@ -147,6 +161,16 @@ app.layout = html.Div(
] ]
) )
# Callback for downloading file
@app.callback(
Output("download-data", "data"),
Input("btn_data", "n_clicks"),
State('table_selector', 'value'),
prevent_initial_call=True,
)
def create_download_file(n_clicks, selected_table):
global selected_stock_in_table_df
return dcc.send_data_frame(selected_stock_in_table_df.to_csv, "data-{table}.csv".format(table = selected_table))
# Callback for timeseries price # Callback for timeseries price
@app.callback(Output('timeseries', 'figure'), [Input('stockselector', 'value')]) @app.callback(Output('timeseries', 'figure'), [Input('stockselector', 'value')])
@ -222,6 +246,12 @@ def change_time_period(selectedData):
volatility_gauge = make_gauge('wolatylność', 0, std['Close'], 400) volatility_gauge = make_gauge('wolatylność', 0, std['Close'], 400)
return average_gauge, volatility_gauge, stock_info_in_time_period_df.T.to_dict('records') return average_gauge, volatility_gauge, stock_info_in_time_period_df.T.to_dict('records')
@app.callback(Output('price-dividends', 'figure'),
[Input('table_selector', 'value')])
def update_point_chart(selected_dropdown_value):
selected_stock_in_table_df = fullTableDf.xs(selected_dropdown_value, axis=1, level=1)
figure = px.scatter(selected_stock_in_table_df, x='Dividends', y='Close', template='plotly_dark')
return figure
if __name__ == '__main__': if __name__ == '__main__':
app.run_server(debug=True) app.run_server(debug=True)