Skip to content
Snippets Groups Projects
Commit d6426dbc authored by Max Väistö's avatar Max Väistö
Browse files

Added most of steam style

parent 6aa09e13
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
dash_plot_generation/dash_assets/styles.css 0 → 100644
+ 23
− 0
View file @ d6426dbc
/* Set the border to a hard rectangular shape */
.dash-dropdown .Select-control {
border: 2px solid rgb(37, 55, 77);
border-radius: 4px;
}
/* Set the background color for the closed dropdown */
.dash-dropdown .Select-control {
background-color: rgb(50, 70, 101);
}
.dash-dropdown.is-minimized .Select-value-label {
color: rgb(235, 235, 235);
}
/* Set the text color */
.dash-dropdown .Select-value-label {
color: rgb(235, 235, 235);
}
/* Set the background color for the open dropdown */
.dash-dropdown .Select-menu-outer {
background-color: rgb(50, 70, 101);
}
\ No newline at end of file
dash_plot_generation/dash_plot_generator.py
+ 54
− 25
View file @ d6426dbc
......@@ -8,8 +8,29 @@ from collections import Counter
from dash_plot_generation.utils import split_companies, extract_unique_companies, convert_owners_to_limits, \
get_owner_means
DEVELOPER_DROPDOWN = "developer_dropdown"
DARK_STEAM = "rgb(23,29,37)"
WHITE_STEAM = "rgb(235,235,235)"
TITLE_WHITE_STEAM = "rgb(197,195,192)"
DARK_BLUE_STEAM = "rgb(27,40,56)"
TAB_COLOR = "rgb(31,46,65)"
TAB_EDGE = "rgb(37,55,77)"
DROPDOWN_COLOR = "rgb(50,70,101"
DEFAULT_TABS_DICT = {'width': 'auto', 'display': 'flex',
'background-color': TAB_COLOR, 'border-color': TAB_EDGE}
TAB_HEADER_COLOR = "rgb(45,96,150)"
DEVELOPER_DROPDOWN = "developer_dropdown"
TAB_NORMAL_DICT = {'background-color' : TAB_COLOR, 'color': TITLE_WHITE_STEAM,
'border' : '0px solid',
'font-size': '15px',
'border_bottom' : '2px solid ' + TAB_EDGE}
TAB_HIGHLIGHT_DICT = {'backgroundColor': TAB_HEADER_COLOR, 'color': 'white', "border-color": "transparent",
'font-size': '15px'}
PANEL_DEFAULT_DICT = {'display': 'inline-block',
'background-color': TAB_COLOR, 'border' : '2px solid', 'border-color': TAB_EDGE,
'color': WHITE_STEAM}
DEV_TOP_GENRES_LABEL = "dev_top_genres"
DEV_CCU_LABEL = "dev_ccu"
......@@ -31,7 +52,7 @@ DASH_ASSETS_PATH = "dash_assets"
APP = dash.Dash(
name=__name__,
assets_folder=DASH_ASSETS_PATH,
external_stylesheets=['https://codepen.io/chriddyp/pen/bWLwgP.css']
external_stylesheets=['https://codepen.io/chriddyp/pen/bWLwgP.css'],
)
......@@ -90,20 +111,23 @@ def initialize_dash(host: str = "0.0.0.0", **kwargs):
global APP, df
# unique_publishers = extract_unique_companies(df["publisher"].apply(lambda x: split_companies(x)))
# unique_developers = extract_unique_companies(df["developer"].apply(lambda x: split_companies(x)))
unique_developers = extract_unique_companies(df["developer"].apply(lambda x: split_companies(x)))
unique_publishers = ["Valve"]
unique_developers = ["Valve"]
#unique_developers = ["Valve"]
APP.css.append_css({
'external_url': 'styles.css'
})
APP.layout = html.Div(
children=[
html.Div(
# style={'background-image': 'url("/assets/background_image.jpg")',
style={'background-image': 'url("/assets/dark city.jpg")',
style={'background-color': 'rgb(27,40,56)',
'background-size': 'cover',
'background-repeat': 'no-repeat',
'background-position': 'center',
#'background-repeat': 'no-repeat',
#'background-position': 'center',
'height': '100vh', # Adjust this to set the desired height
'filter': 'blur(5px)', # Adjust the blur intensity as needed,
#'filter': 'blur(5px)', # Adjust the blur intensity as needed,
'position': 'absolute', # Position the background div absolutely
'width': '100%', # Make the background div cover the entire width
'z-index': '-1' # Place the background div behind other content
......@@ -116,25 +140,31 @@ def initialize_dash(host: str = "0.0.0.0", **kwargs):
html.A('Technical report', className="nav-item nav-link active btn", href='/apps/App2',
style={"margin-left": "150px"})
],
style={"background-color": "rgb(30,30,30)", "color": "rgb(255,255,255)"}),
style={"background-color": "rgb(23,29,37)", "color": "rgb(197,195,192)"}),
html.Div(className="row", children=[
html.Div(children=[
dcc.Tabs(id="tabs_main_plots1", value="tab1", children=[
dcc.Tab(label="Genre performance", value="tab1"),
dcc.Tab(label="Game popularity", value="tab2"),
dcc.Tab(label="Company revenues", value="tab3"),
dcc.Tab(label="Market performance", value="tab4"),
dcc.Tab(label="Genre performance", value="tab1",
style = TAB_NORMAL_DICT, selected_style= TAB_HIGHLIGHT_DICT),
dcc.Tab(label="Game popularity", value="tab2",
style = TAB_NORMAL_DICT, selected_style= TAB_HIGHLIGHT_DICT),
dcc.Tab(label="Company revenues", value="tab3",
style = TAB_NORMAL_DICT, selected_style= TAB_HIGHLIGHT_DICT),
dcc.Tab(label="Market performance", value="tab4",
style = TAB_NORMAL_DICT, selected_style= TAB_HIGHLIGHT_DICT),
],
style={'width': 'auto', 'display': 'flex', 'padding': '10px', "outline": "2px dotted black"}),
], style={'width': 'calc(50% - 10px)', 'height': '600px', 'display': 'inline-block', 'outline': '2px dotted black',
'background-color': 'rgba(169, 169, 169, 0.5)', 'color': 'black', 'margin-right': '200px'}),
style=DEFAULT_TABS_DICT),
], style= PANEL_DEFAULT_DICT | {'width': 'calc(50% - 10px)', 'height': '600px',
'margin-right': '200px'}),
html.Div(children=[
dcc.Tabs(id="tabs_main_plots2", value="tab3", children=[
dcc.Tab(label="Developer infromation", value="tab3", children=[
html.Div(children=[
dcc.Dropdown(id=DEVELOPER_DROPDOWN, value="Valve",
options=[{"label": developer, "value": developer} for developer in
unique_developers]
unique_developers],
style={'margin-top': '5px'},
className='dash-dropdown'
),
html.Div(children=[
html.H6("General statistics"),
......@@ -168,24 +198,23 @@ def initialize_dash(host: str = "0.0.0.0", **kwargs):
])
], style={'margin-left': '20px', 'margin-right': '20px'}
)
]),
], style = TAB_NORMAL_DICT, selected_style= TAB_HIGHLIGHT_DICT),
dcc.Tab(label="Publisher information", value="tab4", children=[
dcc.Dropdown(id="publisher_dropdown", value="Valve",
options=[{"label": publisher, "value": publisher} for publisher in
unique_publishers]
unique_publishers],
),
])
],style=TAB_NORMAL_DICT, selected_style=TAB_HIGHLIGHT_DICT)
],
style={'width': 'auto', 'display': 'flex', 'padding': '10px', 'outline': '2px dotted black'}),
style=DEFAULT_TABS_DICT),
],
style={'width': 'calc(30% - 10px)', 'height': '600px', 'display': 'inline-block',
'outline': '2px dotted black',
'background-color': 'rgba(169, 169, 169, 0.5)', 'color': 'black'})
style=PANEL_DEFAULT_DICT | {'width': 'calc(30% - 10px)', 'height': '600px'})
],
style={'width': '100%', "padding-top": "15px", 'padding-left': "50px"}),
]
],
style={"font-family": "Tahoma"}
)
APP.run(host=host, **kwargs)
print("The server has closed!")
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment