From 76749f26362d6d201120595fc9fec96eb9f5d6bc Mon Sep 17 00:00:00 2001 From: Maximilian Schulz <83698606+maxschulz-COL@users.noreply.github.com> Date: Mon, 15 Jul 2024 11:49:05 +0200 Subject: [PATCH 1/2] [Docs] Small docs fix (#579) Co-authored-by: Antony Milne <49395058+antonymilne@users.noreply.github.com> --- ...40711_110926_maximilian_schulz_fix_typo.md | 48 +++++++++++++++++++ .../docs/pages/user-guides/card-button.md | 1 - 2 files changed, 48 insertions(+), 1 deletion(-) create mode 100644 vizro-core/changelog.d/20240711_110926_maximilian_schulz_fix_typo.md diff --git a/vizro-core/changelog.d/20240711_110926_maximilian_schulz_fix_typo.md b/vizro-core/changelog.d/20240711_110926_maximilian_schulz_fix_typo.md new file mode 100644 index 000000000..f1f65e73c --- /dev/null +++ b/vizro-core/changelog.d/20240711_110926_maximilian_schulz_fix_typo.md @@ -0,0 +1,48 @@ + + + + + + + + + diff --git a/vizro-core/docs/pages/user-guides/card-button.md b/vizro-core/docs/pages/user-guides/card-button.md index b43893ed4..62c9e2891 100755 --- a/vizro-core/docs/pages/user-guides/card-button.md +++ b/vizro-core/docs/pages/user-guides/card-button.md @@ -564,7 +564,6 @@ If you now click on the card area, you should automatically be redirected to the ### Create a KPI card To create a KPI card, you can use the existing KPI card functions from [`vizro.figures`](../API-reference/figure-callables.md). -Unlike the static text card `vm.Card`, a KPI card must be created using a figure function. Unlike the static text card `vm.Card`, a KPI card must be created using a figure function, which enables the text content of the KPI to change based on input from controls or actions. From b8b15d403d05423c1c7c29bcb0d54fd32e6d7ba9 Mon Sep 17 00:00:00 2001 From: Antony Milne <49395058+antonymilne@users.noreply.github.com> Date: Mon, 15 Jul 2024 15:55:45 +0100 Subject: [PATCH 2/2] [Tidy] Various small tidyings (#583) Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> --- CODEOWNERS | 2 +- ...0240712_090435_antony.milne_custom_icon.md | 48 +++++++++++++++++++ .../docs/pages/user-guides/navigation.md | 4 +- .../vizro/models/_components/form/dropdown.py | 11 ++++- .../models/_components/form/test_dropdown.py | 7 +-- 5 files changed, 64 insertions(+), 8 deletions(-) create mode 100644 vizro-core/changelog.d/20240712_090435_antony.milne_custom_icon.md diff --git a/CODEOWNERS b/CODEOWNERS index 3c14a2e3b..6ed16c91e 100644 --- a/CODEOWNERS +++ b/CODEOWNERS @@ -1,3 +1,3 @@ * @Joseph-Perkins @antonymilne @huong-li-nguyen @maxschulz-COL vizro-ai/ @Joseph-Perkins @Anna-Xiong @lingyielia @maxschulz-COL -docs/ @stichbury +docs/ @stichbury @Joseph-Perkins @antonymilne @huong-li-nguyen @maxschulz-COL diff --git a/vizro-core/changelog.d/20240712_090435_antony.milne_custom_icon.md b/vizro-core/changelog.d/20240712_090435_antony.milne_custom_icon.md new file mode 100644 index 000000000..f1f65e73c --- /dev/null +++ b/vizro-core/changelog.d/20240712_090435_antony.milne_custom_icon.md @@ -0,0 +1,48 @@ + + + + + + + + + diff --git a/vizro-core/docs/pages/user-guides/navigation.md b/vizro-core/docs/pages/user-guides/navigation.md index 62a98f2bd..61898224a 100644 --- a/vizro-core/docs/pages/user-guides/navigation.md +++ b/vizro-core/docs/pages/user-guides/navigation.md @@ -244,7 +244,7 @@ You can alter the icons used by specifying the name of the icon in the [Google M icon="Bar Chart", pages=["My first page", "My second page"], ), - vm.NavLink(label="Section 2", icon="pie_chart", pages=["My third page"]), + vm.NavLink(label="Section 2", icon="Pie Chart", pages=["My third page"]), ] ) ), @@ -266,7 +266,7 @@ You can alter the icons used by specifying the name of the icon in the [Google M - My first page - My second page - label: Section 1 - icon: pie_chart + icon: Pie Chart pages: - My third page ``` diff --git a/vizro-core/src/vizro/models/_components/form/dropdown.py b/vizro-core/src/vizro/models/_components/form/dropdown.py index 1eb84679a..619b28f2e 100755 --- a/vizro-core/src/vizro/models/_components/form/dropdown.py +++ b/vizro-core/src/vizro/models/_components/form/dropdown.py @@ -63,6 +63,14 @@ def validate_multi(cls, multi, values): @_log_call def build(self): full_options, default_value = get_options_and_default(options=self.options, multi=self.multi) + # 30 characters is roughly the number of "A" characters you can fit comfortably on a line in the dropdown. + # "A" is representative of a slightly wider than average character: + # https://stackoverflow.com/questions/3949422/which-letter-of-the-english-alphabet-takes-up-most-pixels + # We look at the longest option to find number_of_lines it requires. Option height is the same for all options + # and needs 24px for each line + 8px padding. + number_of_lines = math.ceil(max(len(str(option)) for option in full_options) / 30) + option_height = 8 + 24 * number_of_lines + return html.Div( children=[ dbc.Label(self.title, html_for=self.id) if self.title else None, @@ -72,8 +80,7 @@ def build(self): value=self.value if self.value is not None else default_value, multi=self.multi, persistence=True, - # 37 is the cut-off character length where the text inside the dropdown starts to wrap - optionHeight=32 + 24 * math.floor(max(len(str(option)) for option in full_options) / 37), + optionHeight=option_height, persistence_type="session", ), ] diff --git a/vizro-core/tests/unit/vizro/models/_components/form/test_dropdown.py b/vizro-core/tests/unit/vizro/models/_components/form/test_dropdown.py index 1ab6ba483..b401f89aa 100755 --- a/vizro-core/tests/unit/vizro/models/_components/form/test_dropdown.py +++ b/vizro-core/tests/unit/vizro/models/_components/form/test_dropdown.py @@ -190,9 +190,10 @@ def test_dropdown_without_all_option(self): [ (["A", "B", "C"], 32), ([10, 20, 30], 32), - (["A text with a length of 36..........", "B", "C"], 32), - (["A text with a length of 37...........", "B", "C"], 56), - (["A text with a length of 37..........." + "A text with a length of 37...........", "B", "C"], 80), + (["A" * 30, "B", "C"], 32), + (["A" * 31, "B", "C"], 56), + (["A" * 60, "B", "C"], 56), + (["A" * 61, "B", "C"], 80), ], ) def test_dropdown_dynamic_option_height(self, options, option_height):