From 944374f145d4aae753a59d6e54418f4320b510a5 Mon Sep 17 00:00:00 2001 From: KM-R <129882581+KM-R@users.noreply.github.com> Date: Fri, 1 Dec 2023 10:15:43 +0100 Subject: [PATCH] Styling data table home page (#437) --- .../ui/assets/networkx_style.css | 90 +++++++++++++----- .../ui/assets/typography.css | 6 +- .../ui/pages/home.py | 91 ++++++++++++++++--- tests/ui/home_page_test.py | 18 ++-- 4 files changed, 157 insertions(+), 48 deletions(-) diff --git a/src/aki_prj23_transparenzregister/ui/assets/networkx_style.css b/src/aki_prj23_transparenzregister/ui/assets/networkx_style.css index 9f1f434..e50b98d 100644 --- a/src/aki_prj23_transparenzregister/ui/assets/networkx_style.css +++ b/src/aki_prj23_transparenzregister/ui/assets/networkx_style.css @@ -1,40 +1,80 @@ -.networkx_style { - float: right; - margin-top: 20px; - margin-left: 10px; - margin-right: 20px; - border: 1px solid; - border-color: var(--raisin-black); - border-radius: 20px; - width: 57%; - height: 100%; +.home { + float: left; + width: 100%; + min-height: 100vh; + background-color: var(--ash-gray); } -.top_company_table_style { - float: left; +.home .top_company_table_style { + background-color:white; margin-top: 20px; - margin-left: 20px; - margin-right: 10px; + margin-bottom: 20px; + display: inline-block; + margin-left: 2%; + margin-right: 1%; border: 1px solid; border-color: var(--raisin-black); border-radius: 20px; - width: 37%; - height: 100%; + width: 32%; + min-width: 400px; + max-width: 500px; + overflow-x: auto; + vertical-align: top; } -.networkx_style .filter-wrapper { + +.home .top_company_table_style .header { + text-align: center; + align-items: center; + align-content: center; + vertical-align: middle; + padding: 20px; + margin: 0px; + color: var(--raisin-black); +} + +.home .top_company_table_style .filter-wrapper-item { + display: inline-block; + padding: 20px; + margin: 0px; + width: 70%; +} + +.home .top_company_table_style .filter-description { + margin: 0px; + padding-top: 10px; + padding-bottom: 10px; +} + + +.home .networkx_style { + background-color:white; + margin-top: 20px; + display: inline-block; + margin-left: 1%; + margin-right: 2%; + border: 1px solid; + border-color: var(--raisin-black); + border-radius: 20px; + vertical-align: top; + width: 62%; + min-width: 600px; + max-width: 1500px; +} + +.home .networkx_style .filter-wrapper { float: left; width: 100%; } -.networkx_style .filter-wrapper .filter-wrapper-item { +.home .networkx_style .filter-wrapper .filter-wrapper-item { display: inline-block; padding: 10px; width: 31%; vertical-align: top; } -.networkx_style .filter-wrapper .filter-wrapper-item .dropdown_style { +.home .networkx_style .filter-wrapper .filter-wrapper-item .dropdown_style { padding-bottom: 10px; margin-top: 1px; padding-left: 10px; @@ -57,7 +97,7 @@ } -.networkx_style .filter-wrapper .filter-wrapper-item .filter-description { +.home .networkx_style .filter-wrapper .filter-wrapper-item .filter-description { padding: 5px; padding-left: 10px; margin: 0px; @@ -67,7 +107,7 @@ } -.networkx_style .switch-style { +.home .networkx_style .switch-style { align-self: left; float: none; padding-bottom: 10px; @@ -79,7 +119,7 @@ } -.networkx_style .switch-style .jAjsxw { +.home .networkx_style .switch-style .jAjsxw { align-self: left; float: none; display: inline-block; @@ -90,20 +130,20 @@ } -.networkx_style .graph-style { +.home .networkx_style .graph-style { margin-top: 10px; padding-bottom: 0px; display: inline-block; margin: 0px; width: 100%; - height: 100%; + margin-bottom: 15px; /* float: inline-end, */ /* background-color: var(--raisin-black); */ } -.networkx_style .graph-style .canvas { +.home .networkx_style .graph-style .canvas { padding: 0px; margin: 0px; width: 100% diff --git a/src/aki_prj23_transparenzregister/ui/assets/typography.css b/src/aki_prj23_transparenzregister/ui/assets/typography.css index a41fea7..910f67b 100644 --- a/src/aki_prj23_transparenzregister/ui/assets/typography.css +++ b/src/aki_prj23_transparenzregister/ui/assets/typography.css @@ -1,5 +1,9 @@ -body { +html, body { + border: 0; + min-height: 100vh; margin: 0; + padding: 0; + width: 100%; } .about-content { diff --git a/src/aki_prj23_transparenzregister/ui/pages/home.py b/src/aki_prj23_transparenzregister/ui/pages/home.py index 6f2a0de..5b2c2c4 100644 --- a/src/aki_prj23_transparenzregister/ui/pages/home.py +++ b/src/aki_prj23_transparenzregister/ui/pages/home.py @@ -1,6 +1,7 @@ """Content of home page.""" import os from functools import lru_cache +from typing import Final import dash import dash_daq as daq @@ -29,6 +30,15 @@ from aki_prj23_transparenzregister.utils.networkx.networkx_data import ( ) from aki_prj23_transparenzregister.utils.sql import entities +COLORS: Final[dict[str, str]] = { + "light": "#edefef", + "lavender-blush": "#f3e8ee", + "ash-gray": "#bacdb0", + "cambridge-blue": "#729b79", + "paynes-gray": "#475b63", + "raisin-black": "#2e2c2f", +} + dash.register_page( __name__, path="/", @@ -62,6 +72,17 @@ def update_table( table_df[metric_dropdown_value] = ( table_df[metric_dropdown_value].astype(float).round(6) ) + # translate to german + table_df = table_df.rename( + columns={ + "designation": "Unternehmen/Person", + "category": "Kategorie", + metric_dropdown_value: f"Maß: {metric_dropdown_value}", + } + ) + table_df = table_df.replace( + {"Kategorie": {"company": "Unternehmen", "person": "Person"}} + ) columns = [{"name": i, "id": i} for i in table_df.columns] return table_df.to_dict("records"), columns # type: ignore @@ -124,7 +145,7 @@ def _update_figure( # noqa: PLR0913 ) -def layout() -> list[html]: +def layout() -> html: """Generates the Layout of the Homepage.""" person_relation_types = person_relation_type_filter() company_relation_types = company_relation_type_filter() @@ -144,21 +165,22 @@ def layout() -> list[html]: "degree", ) return html.Div( + className="home", children=html.Div( children=[ html.Div( className="top_company_table_style", children=[ - html.H1( - title="Top Ten Nodes in Graph by Metric", - style={"align": "mid"}, + html.H2( + className="header", + children=["Top 10 Unternehmen/Personen"], ), html.Div( className="filter-wrapper-item", children=[ html.H5( className="filter-description", - children=["Filter Metric:"], + children=["Wählen Sie ein Zentralitätsmaß:"], ), dcc.Dropdown( [ @@ -169,22 +191,65 @@ def layout() -> list[html]: ], "closeness", id="dropdown_table_metric", - className="dropdown_style", + className="dropdown-style", persistence=True, ), ], ), - dash_table.DataTable( - top_companies_dict, - top_companies_columns, - id="metric_table", + html.Div( + className="table-wrapper", + children=[ + dash_table.DataTable( + top_companies_dict, + top_companies_columns, + id="metric_table", + style_table={ + "width": "90%", + "word-wrap": "break-word", + "marginLeft": "auto", + "marginRight": "auto", + "padding": "20px", + "color": COLORS["raisin-black"], + }, + style_header={ + "backgroundColor": COLORS["raisin-black"], + "fontWeight": "bold", + "color": "white", + "fontSize": "16px", + }, + style_cell={ + "textAlign": "center", + "fontFamily": "Times", + "fontSize": "14px", + "padding": "10px", + }, + style_data={ + "whiteSpace": "normal", + "height": "auto", + }, + style_data_conditional=[ + { + "if": { + "state": "selected" + }, # 'active' | 'selected' + "backgroundColor": COLORS["light"], + "border": "1px solid " + + COLORS["paynes-gray"], + }, + ], + style_filter={ + "text-align": "center", + "backgroundColor": COLORS["light"], + }, + ), + ], ), ], ), html.Div( className="networkx_style", children=[ - html.H1(className="header", children=["Social Graph"]), + html.H2(className="header", children=["Social Graph"]), html.Div( className="filter-wrapper", id="company_dropdown", @@ -327,8 +392,8 @@ def layout() -> list[html]: ), ], ), - ] - ) + ], + ), ) diff --git a/tests/ui/home_page_test.py b/tests/ui/home_page_test.py index 2309a12..0a28bb0 100644 --- a/tests/ui/home_page_test.py +++ b/tests/ui/home_page_test.py @@ -65,20 +65,20 @@ def test_update_table() -> None: expected_result_df = [ { - "designation": "Musterfrau, Martina", - "category": "Person", - "centrality": 42.0, + "Unternehmen/Person": "Musterfrau, Martina", + "Kategorie": "Person", + "Maß: centrality": 42.0, }, { - "designation": "Mustermann, Max", - "category": "Person", - "centrality": 3.14, + "Unternehmen/Person": "Mustermann, Max", + "Kategorie": "Person", + "Maß: centrality": 3.14, }, ] expected_result_columns = [ - {"name": "designation", "id": "designation"}, - {"name": "category", "id": "category"}, - {"name": "centrality", "id": "centrality"}, + {"name": "Unternehmen/Person", "id": "Unternehmen/Person"}, + {"name": "Kategorie", "id": "Kategorie"}, + {"name": "Maß: centrality", "id": "Maß: centrality"}, ] result_df, result_columns = home.update_table(selected_metric, metrics)