Spaces:
Running
Running
File size: 4,599 Bytes
487a9ac 42ee455 b699ae9 42ee455 3787474 42ee455 b699ae9 42ee455 76bf90c 42ee455 b07f575 8d0380b b07f575 22b0b94 b699ae9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
"""App configuration for dashboard."""
from typing import Union
from dash import html, get_asset_url
import dash_bootstrap_components as dbc
import vizro.models as vm
from chart_groups import ALL_CHART_GROUP, CHART_GROUPS, ChartGroup, IncompletePage
from custom_components import FlexContainer, Markdown
from vizro import Vizro
def make_chart_card(page: Union[vm.Page, IncompletePage]) -> vm.Card:
"""Makes a card with svg icon, linked to the right page if page is complete.
Args:
page: page to make card for
Returns: card with svg icon, linked to the right page if page is complete.
"""
# There's one SVG per chart title, so that e.g. pages distribution-butterfly and deviation-butterfly, which both
# have title "Butterfly", correspond to butterfly.svg.
# Incomplete pages have page.path = "" so won't be linked to here.
svg_name = page.title.lower().replace(" ", "-")
return vm.Card(
text=f"""
#### {page.title}
""",
href=page.path,
)
def make_homepage_container(chart_group: ChartGroup) -> vm.Container:
"""Makes a container with cards for each completed and incomplete chart in chart_group.
Args:
chart_group: group of charts to make container for.
Returns: container with cards for each chart in chart_group.
"""
# Pages are sorted in title's alphabetical order and deduplicated so that e.g. pages distribution-butterfly and
# deviation-butterfly, which both have title "Butterfly", correspond to a single card.
return vm.Container(
title=chart_group.name,
layout=vm.Layout(grid=[[0, 1, 1]], col_gap="40px"),
components=[
Markdown(text=chart_group.intro_text, classname="intro-text"),
FlexContainer(
components=[
make_chart_card(page)
for page in sorted(
_remove_duplicates(chart_group.pages + chart_group.incomplete_pages),
key=lambda page: page.title,
)
],
),
],
)
def _remove_duplicates(pages: list[Union[vm.Page, IncompletePage]]) -> list[Union[vm.Page, IncompletePage]]:
# Deduplicate pages that have the same title. Using reversed means that the page that is kept is the first one
# in the dashboard. This will be the one that the card on the homepage links to.
return list({page.title: page for page in reversed(pages)}.values())
def make_navlink(chart_group: ChartGroup) -> vm.NavLink:
"""Makes a navlink with icon and links to every complete page within chart_group.
Args:
chart_group: chart_group to make a navlink for.
Returns: navlink for chart_group.
"""
# Pages are sorted in alphabetical order within each chart group.
return vm.NavLink(
label=chart_group.name,
pages={chart_group.name: [page.id for page in sorted(chart_group.pages, key=lambda page: page.title)]},
icon=chart_group.icon,
)
homepage = vm.Page(
title="Overview",
components=[
vm.Tabs(tabs=[make_homepage_container(chart_group) for chart_group in [ALL_CHART_GROUP, *CHART_GROUPS]]),
],
)
# TODO: consider whether each chart group should have its own individual homepage,
# e.g. at http://localhost:8050/deviation/. This could just repeat the content of the tab from the homepage and would
# work nicely with the hierarchical navigation.
dashboard = vm.Dashboard(
# ALL_CHART_GROUP.pages has duplicated pages, e.g. both distribution-butterfly and deviation-butterfly.
title="Visual vocabulary",
pages=[homepage, *ALL_CHART_GROUP.pages],
navigation=vm.Navigation(
nav_selector=vm.NavBar(
items=[
vm.NavLink(label="Overview", pages=[homepage.id], icon="Home"),
]
+ [make_navlink(chart_group) for chart_group in CHART_GROUPS]
)
),
)
app = Vizro().build(dashboard)
app.dash.layout.children.append(
html.Div(
[
html.Div(
[
"Made using ",
html.Img(src=get_asset_url("logo.svg"), id="banner", alt="Vizro logo"),
dbc.NavLink("vizro", href="https://github.com/mckinsey/vizro", target="_blank", external_link=True),
],
className="anchor-div",
),
],
className="anchor-container",
)
)
server = app.dash.server
if __name__ == "__main__":
app.run(port=8051)
|