From a7b6fda601c67fc0780989e99eb155b89bb7d820 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 29 Sep 2023 16:58:54 +0200 Subject: [PATCH 1/5] Add required extension for Card --- vizro-core/examples/assets/css/card.css | 4 ++++ vizro-core/examples/default/app.py | 24 ++++++++++++++++++++++ vizro-core/src/vizro/models/types.py | 2 +- vizro-core/src/vizro/static/css/layout.css | 3 ++- 4 files changed, 31 insertions(+), 2 deletions(-) create mode 100644 vizro-core/examples/assets/css/card.css diff --git a/vizro-core/examples/assets/css/card.css b/vizro-core/examples/assets/css/card.css new file mode 100644 index 000000000..69f03b46d --- /dev/null +++ b/vizro-core/examples/assets/css/card.css @@ -0,0 +1,4 @@ +div.left_side .card_container { + background-color: var(--surfaces-bg-02); + padding: 0; +} diff --git a/vizro-core/examples/default/app.py b/vizro-core/examples/default/app.py index f866fab4c..110c6fac5 100644 --- a/vizro-core/examples/default/app.py +++ b/vizro-core/examples/default/app.py @@ -299,18 +299,42 @@ def create_relation_analysis(): ), ], controls=[ + vm.Card( + text=""" + #### Group A + + ___ + + """, + ), vm.Parameter( targets=["scatter_relation_2007.x", "scatter_relation.x"], selector=vm.Dropdown( options=["lifeExp", "gdpPercap", "pop"], multi=False, value="gdpPercap", title="Choose x-axis" ), ), + vm.Card( + text=""" + #### Group B + + ___ + + """, + ), vm.Parameter( targets=["scatter_relation_2007.y", "scatter_relation.y", "bar_relation_2007.y"], selector=vm.Dropdown( options=["lifeExp", "gdpPercap", "pop"], multi=False, value="lifeExp", title="Choose y-axis" ), ), + vm.Card( + text=""" + #### Group C + + ___ + + """, + ), vm.Parameter( targets=["scatter_relation_2007.size", "scatter_relation.size"], selector=vm.Dropdown( diff --git a/vizro-core/src/vizro/models/types.py b/vizro-core/src/vizro/models/types.py index 6ba038e05..470c52a7c 100644 --- a/vizro-core/src/vizro/models/types.py +++ b/vizro-core/src/vizro/models/types.py @@ -255,7 +255,7 @@ class OptionsDictType(TypedDict): ] ControlType = Annotated[ - Union["Filter", "Parameter"], + Union["Card", "Filter", "Parameter"], Field( discriminator="type", description="Control that affects components on the page.", diff --git a/vizro-core/src/vizro/static/css/layout.css b/vizro-core/src/vizro/static/css/layout.css index 334a96349..3c96267b0 100644 --- a/vizro-core/src/vizro/static/css/layout.css +++ b/vizro-core/src/vizro/static/css/layout.css @@ -87,7 +87,8 @@ width: 336px; } -.keyline { +.keyline, +hr { border-bottom: 1px solid var(--border-subtle-alpha-01); width: 100%; } From 9564fe8570069e63ebc1da54adccfdea0702259c Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Sun, 1 Oct 2023 19:16:10 +0200 Subject: [PATCH 2/5] Replace html.Div with html.Hr --- vizro-core/src/vizro/models/_navigation/_accordion.py | 4 ++-- vizro-core/src/vizro/models/_page.py | 7 ++----- vizro-core/src/vizro/static/css/layout.css | 1 - vizro-core/tests/unit/vizro/models/_navigation/conftest.py | 4 ++-- 4 files changed, 6 insertions(+), 10 deletions(-) diff --git a/vizro-core/src/vizro/models/_navigation/_accordion.py b/vizro-core/src/vizro/models/_navigation/_accordion.py index e2b60687b..8789f2bdf 100644 --- a/vizro-core/src/vizro/models/_navigation/_accordion.py +++ b/vizro-core/src/vizro/models/_navigation/_accordion.py @@ -78,7 +78,7 @@ def _create_default_accordion(self): persistence=True, persistence_type="session", ), - html.Div(className="keyline"), + html.Hr(), ], className="nav_panel", id=f"{self.id}_outer", @@ -108,7 +108,7 @@ def _create_accordion(self): persistence=True, persistence_type="session", ), - html.Div(className="keyline"), + html.Hr(), ], className="nav_panel", id=f"{self.id}_outer", diff --git a/vizro-core/src/vizro/models/_page.py b/vizro-core/src/vizro/models/_page.py index 5906a26f9..192a4f0b8 100644 --- a/vizro-core/src/vizro/models/_page.py +++ b/vizro-core/src/vizro/models/_page.py @@ -160,9 +160,8 @@ def _create_theme_switch(): @staticmethod def _create_control_panel(controls_content): - keyline = html.Div(className="keyline") control_panel = html.Div( - children=[*controls_content, keyline], + children=[*controls_content, html.Hr()], className="control_panel", ) return control_panel if controls_content else None @@ -202,9 +201,7 @@ def _arrange_containers(page_title, theme_switch, nav_panel, control_panel, comp """ _, dashboard = next(model_manager._items_with_type(Dashboard)) dashboard_title = ( - html.Div( - children=[html.H2(dashboard.title), html.Div(className="keyline")], className="dashboard_title_outer" - ) + html.Div(children=[html.H2(dashboard.title), html.Hr()], className="dashboard_title_outer") if dashboard.title else None ) diff --git a/vizro-core/src/vizro/static/css/layout.css b/vizro-core/src/vizro/static/css/layout.css index 3c96267b0..4edf9f029 100644 --- a/vizro-core/src/vizro/static/css/layout.css +++ b/vizro-core/src/vizro/static/css/layout.css @@ -87,7 +87,6 @@ width: 336px; } -.keyline, hr { border-bottom: 1px solid var(--border-subtle-alpha-01); width: 100%; diff --git a/vizro-core/tests/unit/vizro/models/_navigation/conftest.py b/vizro-core/tests/unit/vizro/models/_navigation/conftest.py index 619eb1fa4..654164890 100644 --- a/vizro-core/tests/unit/vizro/models/_navigation/conftest.py +++ b/vizro-core/tests/unit/vizro/models/_navigation/conftest.py @@ -53,7 +53,7 @@ def accordion_from_page_as_list(): persistence=True, persistence_type="session", ), - html.Div(className="keyline"), + html.Hr(), ], className="nav_panel", id="accordion_list_outer", @@ -86,7 +86,7 @@ def accordion_from_pages_as_dict(): persistence=True, persistence_type="session", ), - html.Div(className="keyline"), + html.Hr(), ], className="nav_panel", id="accordion_dict_outer", From 377098bd95c527d06e0683949886f37468046aa4 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Sun, 1 Oct 2023 19:21:49 +0200 Subject: [PATCH 3/5] Show different ways of configuring hr --- vizro-core/examples/default/app.py | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/vizro-core/examples/default/app.py b/vizro-core/examples/default/app.py index 110c6fac5..e319fded1 100644 --- a/vizro-core/examples/default/app.py +++ b/vizro-core/examples/default/app.py @@ -303,7 +303,7 @@ def create_relation_analysis(): text=""" #### Group A - ___ + *** """, ), @@ -331,7 +331,7 @@ def create_relation_analysis(): text=""" #### Group C - ___ + --- """, ), From 52fe8120be7248b23ff7f3333313cc9be57a4df8 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Sun, 1 Oct 2023 19:22:49 +0200 Subject: [PATCH 4/5] Add changelog --- ...1001_192229_huong_li_nguyen_extend_card.md | 42 +++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 vizro-core/changelog.d/20231001_192229_huong_li_nguyen_extend_card.md diff --git a/vizro-core/changelog.d/20231001_192229_huong_li_nguyen_extend_card.md b/vizro-core/changelog.d/20231001_192229_huong_li_nguyen_extend_card.md new file mode 100644 index 000000000..d57e34cc2 --- /dev/null +++ b/vizro-core/changelog.d/20231001_192229_huong_li_nguyen_extend_card.md @@ -0,0 +1,42 @@ + + + + + + + + From 682ceb20107f997573c8a8005e7ce642e7325543 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Sun, 1 Oct 2023 19:28:15 +0200 Subject: [PATCH 5/5] Update 0.1.4.dev0.json --- vizro-core/schemas/0.1.4.dev0.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/vizro-core/schemas/0.1.4.dev0.json b/vizro-core/schemas/0.1.4.dev0.json index ad89ca9e6..5c89095e7 100644 --- a/vizro-core/schemas/0.1.4.dev0.json +++ b/vizro-core/schemas/0.1.4.dev0.json @@ -826,11 +826,15 @@ "discriminator": { "propertyName": "type", "mapping": { + "card": "#/definitions/Card", "filter": "#/definitions/Filter", "parameter": "#/definitions/Parameter" } }, "oneOf": [ + { + "$ref": "#/definitions/Card" + }, { "$ref": "#/definitions/Filter" },