mirror of
https://github.com/fhswf/aki_prj23_transparenzregister.git
synced 2025-06-21 15:13:55 +02:00
Styling data table home page (#437)
This commit is contained in:
KM-R
GitHub
@ -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%
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
body {
|
||||
html, body {
|
||||
border: 0;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.about-content {
|
||||
|
||||
@ -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]:
|
||||
),
|
||||
],
|
||||
),
|
||||
]
|
||||
)
|
||||
],
|
||||
),
|
||||
)
|
||||
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
Reference in New Issue
Block a user