assets/style.css

@@ -245,7 +245,7 @@ a:hover {
   display: inline-block;
   height: 38px;
   padding: 0 30px;
-  color: #555;
+  color: #fff;
   text-align: center;
   font-size: 11px;
   font-weight: 600;
@@ -485,7 +485,7 @@ a {
   padding-bottom: 12px;
 }
 .Select-control, .Select-menu-outer, .Select-multi-value-wrapper, .select-up, .is-open .Select-control {
-  background-color: #1E1E1E;
+  background-color: #1E1E1E !important;
   color: white;
 
 }
@@ -632,3 +632,27 @@ a {
 ::-webkit-scrollbar-thumb:hover {
   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;
+}

finance.py

@@ -4,7 +4,7 @@ import dash_core_components as dcc
 import dash_table
 import plotly.express as px
 import yfinance as yf
-from dash.dependencies import Input, Output
+from dash.dependencies import Input, Output, State
 import plotly.graph_objects as go
 import numpy as np
 import pandas as pd
@@ -116,12 +116,19 @@ app.layout = html.Div(
                                                        multi=False, value=selected_stock_in_table,
                                                        style={'backgroundColor': '#1E1E1E'},
                                                        className='stockselector'
-                                                       )
+                                                       ),
+                                        html.Button("Pobierz dane", id="btn_data",style={'margin-top': '3rem'}), 
+                                        dcc.Download(id="download-data")
+
                                       ],
                                       style={'color': '#1E1E1E'}),
                                   html.P('Wybierz przedział czasu by policzyć średnie i wachania'),
+                                  html.Div(
+                                      className='gauges',
+                                      children=[
                                           dcc.Graph(id='average_gauge'),
-                                  dcc.Graph(id='volatility_gauge'),
+                                          dcc.Graph(id='volatility_gauge')
+                                      ]),
                                   dash_table.DataTable(
                                       id='info_in_time_period',
                                       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',
                               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.Tab(id='tab-2', label='Chart 2', value='tab-2',children=[
+                                        dcc.Graph(id='price-dividends', config={'displayModeBar': False}, animate=True),
+                                    ]),
+                                  ]),
                                   dash_table.DataTable(
                                       id='stock_price_table',
                                       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
 @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)
     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__':
     app.run_server(debug=True)