Spaces:
Running
Running
Li Nguyen
commited on
Commit
·
c019ec6
1
Parent(s):
26b93fc
Update demo
Browse files- app.py +441 -62
- assets/css/custom.css +14 -3
- requirements.in +1 -1
- requirements.txt +8 -19
app.py
CHANGED
@@ -18,7 +18,9 @@ from vizro.tables import dash_ag_grid, dash_data_table
|
|
18 |
iris = px.data.iris()
|
19 |
tips = px.data.tips()
|
20 |
stocks = px.data.stocks(datetimes=True)
|
|
|
21 |
gapminder_2007 = px.data.gapminder().query("year == 2007")
|
|
|
22 |
waterfall_df = pd.DataFrame(
|
23 |
{
|
24 |
"measure": ["relative", "relative", "total", "relative", "relative", "total"],
|
@@ -56,7 +58,7 @@ example_cards = [
|
|
56 |
data_frame=df_kpi,
|
57 |
value_column="Actual",
|
58 |
title="KPI with icon",
|
59 |
-
icon="
|
60 |
),
|
61 |
]
|
62 |
|
@@ -87,7 +89,7 @@ example_reference_cards = [
|
|
87 |
value_column="Actual",
|
88 |
reference_column="Reference",
|
89 |
title="KPI reference with icon",
|
90 |
-
icon="
|
91 |
),
|
92 |
]
|
93 |
|
@@ -95,7 +97,7 @@ example_reference_cards = [
|
|
95 |
# HOME ------------------------------------------------------------------------
|
96 |
home = vm.Page(
|
97 |
title="Homepage",
|
98 |
-
layout=vm.
|
99 |
components=[
|
100 |
vm.Card(
|
101 |
text="""
|
@@ -133,7 +135,7 @@ home = vm.Page(
|
|
133 |
|
134 |
### Actions
|
135 |
|
136 |
-
|
137 |
""",
|
138 |
href="/export-data",
|
139 |
),
|
@@ -255,7 +257,7 @@ cards = vm.Page(
|
|
255 |
|
256 |
figure = vm.Page(
|
257 |
title="Figure",
|
258 |
-
layout=vm.
|
259 |
components=[vm.Figure(figure=figure) for figure in example_cards + example_reference_cards],
|
260 |
controls=[vm.Filter(column="Category")],
|
261 |
)
|
@@ -263,7 +265,7 @@ figure = vm.Page(
|
|
263 |
|
264 |
button = vm.Page(
|
265 |
title="Button",
|
266 |
-
layout=vm.
|
267 |
components=[
|
268 |
vm.Graph(
|
269 |
figure=px.scatter(
|
@@ -274,7 +276,10 @@ button = vm.Page(
|
|
274 |
size="petal_length",
|
275 |
),
|
276 |
),
|
277 |
-
vm.Button(
|
|
|
|
|
|
|
278 |
],
|
279 |
controls=[vm.Filter(column="species", selector=vm.Dropdown(title="Species"))],
|
280 |
)
|
@@ -282,46 +287,142 @@ button = vm.Page(
|
|
282 |
containers = vm.Page(
|
283 |
title="Containers",
|
284 |
components=[
|
285 |
-
vm.
|
286 |
-
|
287 |
-
|
288 |
-
|
289 |
-
|
290 |
-
|
291 |
-
|
292 |
-
|
293 |
-
|
294 |
-
|
295 |
-
|
296 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
297 |
),
|
298 |
-
vm.
|
299 |
-
|
300 |
-
|
301 |
-
|
302 |
-
|
303 |
-
|
304 |
-
|
305 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
306 |
),
|
307 |
-
|
308 |
-
|
309 |
-
|
310 |
-
|
311 |
-
|
312 |
-
|
313 |
-
|
314 |
-
|
315 |
-
|
316 |
-
|
317 |
-
|
318 |
-
|
319 |
-
|
320 |
-
|
321 |
-
|
322 |
-
|
323 |
-
|
324 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
325 |
],
|
326 |
)
|
327 |
|
@@ -367,6 +468,77 @@ tab_2 = vm.Container(
|
|
367 |
|
368 |
tabs = vm.Page(title="Tabs", components=[vm.Tabs(tabs=[tab_1, tab_2])], controls=[vm.Filter(column="continent")])
|
369 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
370 |
# CONTROLS --------------------------------------------------------------------
|
371 |
filters = vm.Page(
|
372 |
title="Filters",
|
@@ -390,7 +562,10 @@ filters = vm.Page(
|
|
390 |
),
|
391 |
],
|
392 |
controls=[
|
393 |
-
vm.Filter(
|
|
|
|
|
|
|
394 |
vm.Filter(
|
395 |
column="petal_length",
|
396 |
targets=["scatter_chart2"],
|
@@ -434,7 +609,7 @@ parameters = vm.Page(
|
|
434 |
|
435 |
selectors = vm.Page(
|
436 |
title="Selectors",
|
437 |
-
layout=vm.
|
438 |
components=[
|
439 |
vm.Card(
|
440 |
text="""
|
@@ -477,6 +652,11 @@ selectors = vm.Page(
|
|
477 |
column="country",
|
478 |
selector=vm.Dropdown(title="Dropdown (Gapminder - country)"),
|
479 |
),
|
|
|
|
|
|
|
|
|
|
|
480 |
vm.Filter(
|
481 |
targets=["table-tips"],
|
482 |
column="day",
|
@@ -496,6 +676,203 @@ selectors = vm.Page(
|
|
496 |
],
|
497 |
)
|
498 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
499 |
# ACTIONS ---------------------------------------------------------------------
|
500 |
export_data_action = vm.Page(
|
501 |
title="Export data",
|
@@ -609,7 +986,7 @@ def my_custom_table(data_frame=None, chosen_columns: Optional[list[str]] = None)
|
|
609 |
"style_data": {"border_bottom": "1px solid var(--border-subtleAlpha01)", "height": "40px"},
|
610 |
"style_header": {
|
611 |
"border_bottom": "1px solid var(--stateOverlays-selectedHover)",
|
612 |
-
"border_top": "
|
613 |
"height": "32px",
|
614 |
},
|
615 |
}
|
@@ -768,21 +1145,22 @@ custom_figures = vm.Page(
|
|
768 |
|
769 |
kpi_indicators = vm.Page(
|
770 |
title="KPI Indicators",
|
771 |
-
layout=vm.
|
772 |
components=[vm.Figure(figure=figure) for figure in example_cards + example_reference_cards],
|
773 |
controls=[vm.Filter(column="Category")],
|
774 |
)
|
775 |
|
776 |
|
777 |
# DASHBOARD -------------------------------------------------------------------
|
778 |
-
components = [graphs, ag_grid, table, cards, figure, button, containers, tabs]
|
779 |
-
controls = [filters, parameters, selectors]
|
780 |
actions = [export_data_action, chart_interaction]
|
781 |
-
|
|
|
782 |
|
783 |
dashboard = vm.Dashboard(
|
784 |
title="Vizro Features",
|
785 |
-
pages=[home, *components, *controls, *actions, *extensions],
|
786 |
navigation=vm.Navigation(
|
787 |
nav_selector=vm.NavBar(
|
788 |
items=[
|
@@ -799,8 +1177,10 @@ dashboard = vm.Dashboard(
|
|
799 |
"Button",
|
800 |
"Containers",
|
801 |
"Tabs",
|
|
|
802 |
],
|
803 |
-
"Controls": ["Filters", "Parameters", "Selectors"],
|
|
|
804 |
"Actions": ["Export data", "Chart interaction"],
|
805 |
"Extensions": [
|
806 |
"Custom Charts",
|
@@ -817,16 +1197,15 @@ dashboard = vm.Dashboard(
|
|
817 |
),
|
818 |
)
|
819 |
|
820 |
-
|
821 |
-
|
822 |
-
|
|
|
|
|
823 |
["Made with ", html.Img(src=get_asset_url("logo.svg"), id="banner", alt="Vizro logo"), "vizro"],
|
824 |
href="https://github.com/mckinsey/vizro",
|
825 |
target="_blank",
|
826 |
-
|
827 |
)
|
828 |
-
)
|
829 |
-
|
830 |
-
|
831 |
-
if __name__ == "__main__":
|
832 |
app.run()
|
|
|
18 |
iris = px.data.iris()
|
19 |
tips = px.data.tips()
|
20 |
stocks = px.data.stocks(datetimes=True)
|
21 |
+
gapminder = px.data.gapminder()
|
22 |
gapminder_2007 = px.data.gapminder().query("year == 2007")
|
23 |
+
gapminder_2007["is_europe"] = gapminder["continent"] == "Europe"
|
24 |
waterfall_df = pd.DataFrame(
|
25 |
{
|
26 |
"measure": ["relative", "relative", "total", "relative", "relative", "total"],
|
|
|
58 |
data_frame=df_kpi,
|
59 |
value_column="Actual",
|
60 |
title="KPI with icon",
|
61 |
+
icon="Shopping Cart",
|
62 |
),
|
63 |
]
|
64 |
|
|
|
89 |
value_column="Actual",
|
90 |
reference_column="Reference",
|
91 |
title="KPI reference with icon",
|
92 |
+
icon="Shopping Cart",
|
93 |
),
|
94 |
]
|
95 |
|
|
|
97 |
# HOME ------------------------------------------------------------------------
|
98 |
home = vm.Page(
|
99 |
title="Homepage",
|
100 |
+
layout=vm.Grid(grid=[[0, 1], [2, 3]], row_gap="16px", col_gap="24px"),
|
101 |
components=[
|
102 |
vm.Card(
|
103 |
text="""
|
|
|
135 |
|
136 |
### Actions
|
137 |
|
138 |
+
Built-in actions are made available including **export data** and **filter interactions**.
|
139 |
""",
|
140 |
href="/export-data",
|
141 |
),
|
|
|
257 |
|
258 |
figure = vm.Page(
|
259 |
title="Figure",
|
260 |
+
layout=vm.Grid(grid=[[0, 1, 2, 3], [4, 5, 6, 7], [-1, -1, -1, -1], [-1, -1, -1, -1]]),
|
261 |
components=[vm.Figure(figure=figure) for figure in example_cards + example_reference_cards],
|
262 |
controls=[vm.Filter(column="Category")],
|
263 |
)
|
|
|
265 |
|
266 |
button = vm.Page(
|
267 |
title="Button",
|
268 |
+
layout=vm.Grid(grid=[[0], [0], [0], [0], [1]]),
|
269 |
components=[
|
270 |
vm.Graph(
|
271 |
figure=px.scatter(
|
|
|
276 |
size="petal_length",
|
277 |
),
|
278 |
),
|
279 |
+
vm.Button(
|
280 |
+
text="Export data",
|
281 |
+
actions=[vm.Action(function=export_data())],
|
282 |
+
),
|
283 |
],
|
284 |
controls=[vm.Filter(column="species", selector=vm.Dropdown(title="Species"))],
|
285 |
)
|
|
|
287 |
containers = vm.Page(
|
288 |
title="Containers",
|
289 |
components=[
|
290 |
+
vm.Tabs(
|
291 |
+
tabs=[
|
292 |
+
vm.Container(
|
293 |
+
title="Default",
|
294 |
+
layout=vm.Grid(grid=[[0], [1]]),
|
295 |
+
components=[
|
296 |
+
vm.Container(
|
297 |
+
title="Container I",
|
298 |
+
components=[
|
299 |
+
vm.Graph(
|
300 |
+
title="Container I - Scatter",
|
301 |
+
figure=px.scatter(
|
302 |
+
iris,
|
303 |
+
x="sepal_width",
|
304 |
+
y="sepal_length",
|
305 |
+
color="species",
|
306 |
+
marginal_y="violin",
|
307 |
+
marginal_x="box",
|
308 |
+
),
|
309 |
+
)
|
310 |
+
],
|
311 |
+
),
|
312 |
+
vm.Container(
|
313 |
+
title="Container II",
|
314 |
+
layout=vm.Grid(grid=[[0, 1]]),
|
315 |
+
components=[
|
316 |
+
vm.Graph(
|
317 |
+
title="Container II - Scatter",
|
318 |
+
figure=px.scatter(
|
319 |
+
iris,
|
320 |
+
x="sepal_length",
|
321 |
+
y="petal_width",
|
322 |
+
color="species",
|
323 |
+
),
|
324 |
+
),
|
325 |
+
vm.Graph(
|
326 |
+
title="Container II - Bar",
|
327 |
+
figure=px.bar(
|
328 |
+
iris,
|
329 |
+
x="sepal_length",
|
330 |
+
y="sepal_width",
|
331 |
+
color="species",
|
332 |
+
),
|
333 |
+
),
|
334 |
+
],
|
335 |
+
),
|
336 |
+
],
|
337 |
),
|
338 |
+
vm.Container(
|
339 |
+
title="Styled",
|
340 |
+
layout=vm.Grid(grid=[[0, 0], [1, 2]]),
|
341 |
+
components=[
|
342 |
+
vm.Container(
|
343 |
+
components=[
|
344 |
+
vm.Graph(
|
345 |
+
title="Container I - Scatter",
|
346 |
+
figure=px.scatter(
|
347 |
+
iris,
|
348 |
+
x="sepal_width",
|
349 |
+
y="sepal_length",
|
350 |
+
color="species",
|
351 |
+
marginal_y="violin",
|
352 |
+
marginal_x="box",
|
353 |
+
),
|
354 |
+
)
|
355 |
+
],
|
356 |
+
variant="plain",
|
357 |
+
),
|
358 |
+
vm.Container(
|
359 |
+
components=[
|
360 |
+
vm.Graph(
|
361 |
+
title="Container II - Scatter",
|
362 |
+
figure=px.scatter(
|
363 |
+
iris,
|
364 |
+
x="sepal_length",
|
365 |
+
y="petal_width",
|
366 |
+
color="species",
|
367 |
+
),
|
368 |
+
),
|
369 |
+
],
|
370 |
+
variant="outlined",
|
371 |
+
),
|
372 |
+
vm.Container(
|
373 |
+
components=[
|
374 |
+
vm.Graph(
|
375 |
+
title="Container II - Bar",
|
376 |
+
figure=px.bar(
|
377 |
+
iris,
|
378 |
+
x="sepal_length",
|
379 |
+
y="sepal_width",
|
380 |
+
color="species",
|
381 |
+
),
|
382 |
+
),
|
383 |
+
],
|
384 |
+
variant="filled",
|
385 |
+
),
|
386 |
+
],
|
387 |
),
|
388 |
+
vm.Container(
|
389 |
+
title="Collapsible",
|
390 |
+
layout=vm.Flex(),
|
391 |
+
components=[
|
392 |
+
vm.Container(
|
393 |
+
title="Initially collapsed container",
|
394 |
+
components=[
|
395 |
+
vm.Graph(
|
396 |
+
figure=px.scatter(
|
397 |
+
iris,
|
398 |
+
x="sepal_width",
|
399 |
+
y="sepal_length",
|
400 |
+
color="species",
|
401 |
+
marginal_y="violin",
|
402 |
+
marginal_x="box",
|
403 |
+
)
|
404 |
+
)
|
405 |
+
],
|
406 |
+
collapsed=True,
|
407 |
+
),
|
408 |
+
vm.Container(
|
409 |
+
title="Initially expanded container",
|
410 |
+
components=[
|
411 |
+
vm.Graph(
|
412 |
+
figure=px.scatter(
|
413 |
+
iris,
|
414 |
+
x="sepal_length",
|
415 |
+
y="petal_width",
|
416 |
+
color="species",
|
417 |
+
)
|
418 |
+
),
|
419 |
+
],
|
420 |
+
collapsed=False,
|
421 |
+
),
|
422 |
+
],
|
423 |
+
),
|
424 |
+
]
|
425 |
+
)
|
426 |
],
|
427 |
)
|
428 |
|
|
|
468 |
|
469 |
tabs = vm.Page(title="Tabs", components=[vm.Tabs(tabs=[tab_1, tab_2])], controls=[vm.Filter(column="continent")])
|
470 |
|
471 |
+
|
472 |
+
tooltip = vm.Page(
|
473 |
+
title="Tooltip",
|
474 |
+
layout=vm.Grid(grid=[[0], [0], [0], [1], [1], [1], [1], [1], [2]]),
|
475 |
+
components=[
|
476 |
+
vm.Card(
|
477 |
+
text="""
|
478 |
+
The `description` argument allows you to add helpful context to your components by displaying a small
|
479 |
+
info icon next to the component's title.
|
480 |
+
When users hover over the icon, a tooltip appears showing the text you provide.
|
481 |
+
|
482 |
+
You can add tooltips to any Vizro component that supports the title argument. The description accepts:
|
483 |
+
* A `string`, which uses the default info icon.
|
484 |
+
* A `Tooltip` model, which lets you customize the icon using any symbol from the
|
485 |
+
[Google Material Icons library](https://fonts.google.com/icons)
|
486 |
+
|
487 |
+
Tooltips are a clean, lightweight way to offer additional details without cluttering your dashboard.
|
488 |
+
"""
|
489 |
+
),
|
490 |
+
vm.Graph(
|
491 |
+
title="Relationships between Sepal Width and Sepal Length",
|
492 |
+
figure=px.scatter(
|
493 |
+
iris,
|
494 |
+
x="sepal_width",
|
495 |
+
y="sepal_length",
|
496 |
+
color="species",
|
497 |
+
size="petal_length",
|
498 |
+
),
|
499 |
+
description="""
|
500 |
+
**The Iris dataset** includes measurements of 150 iris flowers across three types: Setosa, Versicolor,
|
501 |
+
and Virginica.
|
502 |
+
While all samples are labeled by type, they can appear similar when looking at just some features -
|
503 |
+
making it a useful dataset for exploring patterns and challenges in classification.
|
504 |
+
""",
|
505 |
+
),
|
506 |
+
vm.Button(
|
507 |
+
text="Export data",
|
508 |
+
actions=[vm.Action(function=export_data())],
|
509 |
+
description="""
|
510 |
+
Use this button to export the filtered data from the Iris dataset.
|
511 |
+
""",
|
512 |
+
),
|
513 |
+
],
|
514 |
+
controls=[
|
515 |
+
vm.Filter(
|
516 |
+
column="species",
|
517 |
+
selector=vm.Dropdown(
|
518 |
+
title="Species",
|
519 |
+
description="""
|
520 |
+
Select one or more species to explore patterns
|
521 |
+
specific to Setosa, Versicolor, or Virginica.
|
522 |
+
""",
|
523 |
+
),
|
524 |
+
),
|
525 |
+
vm.Filter(
|
526 |
+
column="sepal_width",
|
527 |
+
selector=vm.RangeSlider(
|
528 |
+
title="Sepal Width",
|
529 |
+
description="""
|
530 |
+
Use the slider to filter flowers by sepal width.
|
531 |
+
Only samples within the selected range will be shown.
|
532 |
+
""",
|
533 |
+
),
|
534 |
+
),
|
535 |
+
],
|
536 |
+
description="""
|
537 |
+
This page provides overview of Tooltip functionality.
|
538 |
+
""",
|
539 |
+
)
|
540 |
+
|
541 |
+
|
542 |
# CONTROLS --------------------------------------------------------------------
|
543 |
filters = vm.Page(
|
544 |
title="Filters",
|
|
|
562 |
),
|
563 |
],
|
564 |
controls=[
|
565 |
+
vm.Filter(
|
566 |
+
column="species",
|
567 |
+
selector=vm.Dropdown(),
|
568 |
+
),
|
569 |
vm.Filter(
|
570 |
column="petal_length",
|
571 |
targets=["scatter_chart2"],
|
|
|
609 |
|
610 |
selectors = vm.Page(
|
611 |
title="Selectors",
|
612 |
+
layout=vm.Grid(grid=[[0], [1], [1], [1], [2], [2], [2], [3], [3], [3]], row_min_height="170px", row_gap="24px"),
|
613 |
components=[
|
614 |
vm.Card(
|
615 |
text="""
|
|
|
652 |
column="country",
|
653 |
selector=vm.Dropdown(title="Dropdown (Gapminder - country)"),
|
654 |
),
|
655 |
+
vm.Filter(
|
656 |
+
targets=["table-gapminder"],
|
657 |
+
column="is_europe",
|
658 |
+
selector=vm.Switch(title="Is Europe?"),
|
659 |
+
),
|
660 |
vm.Filter(
|
661 |
targets=["table-tips"],
|
662 |
column="day",
|
|
|
676 |
],
|
677 |
)
|
678 |
|
679 |
+
|
680 |
+
controls_in_containers = vm.Page(
|
681 |
+
title="Controls in containers",
|
682 |
+
components=[
|
683 |
+
vm.Container(
|
684 |
+
layout=vm.Grid(grid=[[0, 1]]),
|
685 |
+
components=[
|
686 |
+
vm.Container(
|
687 |
+
components=[
|
688 |
+
vm.Graph(
|
689 |
+
figure=px.scatter(
|
690 |
+
iris,
|
691 |
+
x="sepal_width",
|
692 |
+
y="sepal_length",
|
693 |
+
color="species",
|
694 |
+
marginal_y="violin",
|
695 |
+
marginal_x="box",
|
696 |
+
),
|
697 |
+
)
|
698 |
+
],
|
699 |
+
controls=[
|
700 |
+
vm.Filter(column="species", selector=vm.Checklist()),
|
701 |
+
],
|
702 |
+
variant="outlined",
|
703 |
+
),
|
704 |
+
vm.Container(
|
705 |
+
components=[
|
706 |
+
vm.Graph(
|
707 |
+
figure=px.box(
|
708 |
+
gapminder_2007,
|
709 |
+
x="continent",
|
710 |
+
y="lifeExp",
|
711 |
+
color="continent",
|
712 |
+
custom_data=["continent"],
|
713 |
+
),
|
714 |
+
),
|
715 |
+
vm.Graph(
|
716 |
+
figure=px.scatter(
|
717 |
+
gapminder_2007,
|
718 |
+
x="gdpPercap",
|
719 |
+
y="lifeExp",
|
720 |
+
size="pop",
|
721 |
+
color="continent",
|
722 |
+
),
|
723 |
+
),
|
724 |
+
],
|
725 |
+
controls=[
|
726 |
+
vm.Filter(column="continent", selector=vm.RadioItems()),
|
727 |
+
],
|
728 |
+
variant="outlined",
|
729 |
+
),
|
730 |
+
],
|
731 |
+
),
|
732 |
+
],
|
733 |
+
)
|
734 |
+
|
735 |
+
# LAYOUT ------------------------------------------------------------------
|
736 |
+
|
737 |
+
grid_layout = vm.Page(
|
738 |
+
title="Grid layout",
|
739 |
+
layout=vm.Grid(grid=[[0, 0, 0, 0], [1, 1, 3, 3], [1, 1, 4, 4], [2, 2, 5, 5], [2, 2, 6, 6]]),
|
740 |
+
components=[
|
741 |
+
vm.Card(
|
742 |
+
text="""
|
743 |
+
### Card #1
|
744 |
+
|
745 |
+
Lorem ipsum dolor sit amet, consetetur sadipscing no sea elitr sed diam nonumy.
|
746 |
+
Sed diam voluptua. At vero eos et accusam et justo no duo dolores et ea rebum.
|
747 |
+
"""
|
748 |
+
),
|
749 |
+
vm.Card(
|
750 |
+
text="""
|
751 |
+
### Card #2
|
752 |
+
|
753 |
+
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
|
754 |
+
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
755 |
+
"""
|
756 |
+
),
|
757 |
+
vm.Card(
|
758 |
+
text="""
|
759 |
+
### Card #3
|
760 |
+
|
761 |
+
Sed diam voluptua. At vero eos et accusam et justo no duo dolores et ea rebum.
|
762 |
+
Lorem ipsum dolor sit amet, consetetur sadipscing no sea est elitr dolor sit amet.
|
763 |
+
"""
|
764 |
+
),
|
765 |
+
vm.Card(
|
766 |
+
text="""
|
767 |
+
### Card #4
|
768 |
+
|
769 |
+
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
770 |
+
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
|
771 |
+
"""
|
772 |
+
),
|
773 |
+
vm.Card(
|
774 |
+
text="""
|
775 |
+
### Card #5
|
776 |
+
|
777 |
+
Lorem ipsum dolor sit amet, consetetur sadipscing no sea est elitr dolor sit amet.
|
778 |
+
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
|
779 |
+
"""
|
780 |
+
),
|
781 |
+
vm.Card(
|
782 |
+
text="""
|
783 |
+
### Card #6
|
784 |
+
|
785 |
+
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
|
786 |
+
Lorem ipsum dolor sit amet, consetetur sadipscing no sea est elitr dolor sit amet.
|
787 |
+
"""
|
788 |
+
),
|
789 |
+
vm.Card(
|
790 |
+
text="""
|
791 |
+
### Card #7
|
792 |
+
|
793 |
+
Lorem ipsum dolor sit amet, consetetur sadipscing no sea elitr sed diam nonumy.
|
794 |
+
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
|
795 |
+
"""
|
796 |
+
),
|
797 |
+
],
|
798 |
+
description="""
|
799 |
+
Use Grid when you have a specific layout in mind—like a dashboard with clearly defined sections
|
800 |
+
(e.g. top summary row, bottom detail view).
|
801 |
+
""",
|
802 |
+
)
|
803 |
+
|
804 |
+
flex_layout = vm.Page(
|
805 |
+
id="flex-layout",
|
806 |
+
title="Flex layout",
|
807 |
+
layout=vm.Flex(
|
808 |
+
direction="row",
|
809 |
+
wrap=True,
|
810 |
+
),
|
811 |
+
components=[
|
812 |
+
vm.Card(
|
813 |
+
text="""
|
814 |
+
### Card #1
|
815 |
+
|
816 |
+
Lorem ipsum dolor sit amet, consetetur sadipscing no sea elitr sed diam nonumy.
|
817 |
+
Sed diam voluptua. At vero eos et accusam et justo no duo dolores et ea rebum.
|
818 |
+
"""
|
819 |
+
),
|
820 |
+
vm.Card(
|
821 |
+
text="""
|
822 |
+
### Card #2
|
823 |
+
|
824 |
+
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
|
825 |
+
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
826 |
+
"""
|
827 |
+
),
|
828 |
+
vm.Card(
|
829 |
+
text="""
|
830 |
+
### Card #3
|
831 |
+
|
832 |
+
Sed diam voluptua. At vero eos et accusam et justo no duo dolores et ea rebum.
|
833 |
+
Lorem ipsum dolor sit amet, consetetur sadipscing no sea est elitr dolor sit amet.
|
834 |
+
"""
|
835 |
+
),
|
836 |
+
vm.Card(
|
837 |
+
text="""
|
838 |
+
### Card #4
|
839 |
+
|
840 |
+
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
841 |
+
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
|
842 |
+
"""
|
843 |
+
),
|
844 |
+
vm.Card(
|
845 |
+
text="""
|
846 |
+
### Card #5
|
847 |
+
|
848 |
+
Lorem ipsum dolor sit amet, consetetur sadipscing no sea est elitr dolor sit amet.
|
849 |
+
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
|
850 |
+
"""
|
851 |
+
),
|
852 |
+
vm.Card(
|
853 |
+
text="""
|
854 |
+
### Card #6
|
855 |
+
|
856 |
+
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
|
857 |
+
Lorem ipsum dolor sit amet, consetetur sadipscing no sea est elitr dolor sit amet.
|
858 |
+
"""
|
859 |
+
),
|
860 |
+
vm.Card(
|
861 |
+
text="""
|
862 |
+
### Card #7
|
863 |
+
|
864 |
+
Lorem ipsum dolor sit amet, consetetur sadipscing no sea elitr sed diam nonumy.
|
865 |
+
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
|
866 |
+
"""
|
867 |
+
),
|
868 |
+
],
|
869 |
+
description="""
|
870 |
+
Use Flex when you want a responsive row of items that adjusts automatically—great for things like
|
871 |
+
dynamic card collections or tag-like elements that should flow naturally.
|
872 |
+
""",
|
873 |
+
)
|
874 |
+
|
875 |
+
|
876 |
# ACTIONS ---------------------------------------------------------------------
|
877 |
export_data_action = vm.Page(
|
878 |
title="Export data",
|
|
|
986 |
"style_data": {"border_bottom": "1px solid var(--border-subtleAlpha01)", "height": "40px"},
|
987 |
"style_header": {
|
988 |
"border_bottom": "1px solid var(--stateOverlays-selectedHover)",
|
989 |
+
"border_top": "None",
|
990 |
"height": "32px",
|
991 |
},
|
992 |
}
|
|
|
1145 |
|
1146 |
kpi_indicators = vm.Page(
|
1147 |
title="KPI Indicators",
|
1148 |
+
layout=vm.Grid(grid=[[0, 1, 2, 3], [4, 5, 6, 7], [-1, -1, -1, -1], [-1, -1, -1, -1]]),
|
1149 |
components=[vm.Figure(figure=figure) for figure in example_cards + example_reference_cards],
|
1150 |
controls=[vm.Filter(column="Category")],
|
1151 |
)
|
1152 |
|
1153 |
|
1154 |
# DASHBOARD -------------------------------------------------------------------
|
1155 |
+
components = [graphs, ag_grid, table, cards, figure, button, containers, tabs, tooltip]
|
1156 |
+
controls = [filters, parameters, selectors, controls_in_containers]
|
1157 |
actions = [export_data_action, chart_interaction]
|
1158 |
+
layout = [grid_layout, flex_layout]
|
1159 |
+
extensions = [custom_charts, custom_tables, custom_actions, custom_figures, custom_components]
|
1160 |
|
1161 |
dashboard = vm.Dashboard(
|
1162 |
title="Vizro Features",
|
1163 |
+
pages=[home, *components, *controls, *actions, *layout, *extensions],
|
1164 |
navigation=vm.Navigation(
|
1165 |
nav_selector=vm.NavBar(
|
1166 |
items=[
|
|
|
1177 |
"Button",
|
1178 |
"Containers",
|
1179 |
"Tabs",
|
1180 |
+
"Tooltip",
|
1181 |
],
|
1182 |
+
"Controls": ["Filters", "Parameters", "Selectors", "Controls in containers"],
|
1183 |
+
"Layout": ["Grid layout", "flex-layout"],
|
1184 |
"Actions": ["Export data", "Chart interaction"],
|
1185 |
"Extensions": [
|
1186 |
"Custom Charts",
|
|
|
1197 |
),
|
1198 |
)
|
1199 |
|
1200 |
+
|
1201 |
+
if __name__ == "__main__":
|
1202 |
+
app = Vizro().build(dashboard)
|
1203 |
+
|
1204 |
+
banner = dbc.NavLink(
|
1205 |
["Made with ", html.Img(src=get_asset_url("logo.svg"), id="banner", alt="Vizro logo"), "vizro"],
|
1206 |
href="https://github.com/mckinsey/vizro",
|
1207 |
target="_blank",
|
1208 |
+
class_name="anchor-container",
|
1209 |
)
|
1210 |
+
app.dash.layout.children.append(banner)
|
|
|
|
|
|
|
1211 |
app.run()
|
assets/css/custom.css
CHANGED
@@ -1,5 +1,5 @@
|
|
1 |
-
#
|
2 |
-
padding-left:
|
3 |
}
|
4 |
|
5 |
#my-figure .multiple-cards-container {
|
@@ -13,6 +13,11 @@
|
|
13 |
width: unset;
|
14 |
}
|
15 |
|
|
|
|
|
|
|
|
|
|
|
16 |
#my-figure.figure-container .card {
|
17 |
height: 210px;
|
18 |
width: 240px;
|
@@ -23,7 +28,7 @@
|
|
23 |
background: var(--text-primary);
|
24 |
border-top-left-radius: 8px;
|
25 |
bottom: 0;
|
26 |
-
color: var(--text-primary-inverted);
|
27 |
display: flex;
|
28 |
font-size: 0.8rem;
|
29 |
font-weight: 500;
|
@@ -42,3 +47,9 @@
|
|
42 |
img#banner {
|
43 |
height: 16px;
|
44 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
#header {
|
2 |
+
padding-left: 4px;
|
3 |
}
|
4 |
|
5 |
#my-figure .multiple-cards-container {
|
|
|
13 |
width: unset;
|
14 |
}
|
15 |
|
16 |
+
#flex-layout .card {
|
17 |
+
height: 210px;
|
18 |
+
width: 380px;
|
19 |
+
}
|
20 |
+
|
21 |
#my-figure.figure-container .card {
|
22 |
height: 210px;
|
23 |
width: 240px;
|
|
|
28 |
background: var(--text-primary);
|
29 |
border-top-left-radius: 8px;
|
30 |
bottom: 0;
|
31 |
+
color: var(--text-primary-inverted) !important;
|
32 |
display: flex;
|
33 |
font-size: 0.8rem;
|
34 |
font-weight: 500;
|
|
|
47 |
img#banner {
|
48 |
height: 16px;
|
49 |
}
|
50 |
+
|
51 |
+
img[src*="icon-top"] {
|
52 |
+
filter: var(--fill-icon-image-card);
|
53 |
+
height: 36px;
|
54 |
+
width: 36px;
|
55 |
+
}
|
requirements.in
CHANGED
@@ -1,4 +1,4 @@
|
|
1 |
# This file is only used if you don't have hatch installed.
|
2 |
gunicorn
|
3 |
openpyxl
|
4 |
-
vizro==0.1.
|
|
|
1 |
# This file is only used if you don't have hatch installed.
|
2 |
gunicorn
|
3 |
openpyxl
|
4 |
+
vizro==0.1.44
|
requirements.txt
CHANGED
@@ -18,23 +18,18 @@ click==8.1.7
|
|
18 |
# via
|
19 |
# black
|
20 |
# flask
|
21 |
-
dash==
|
22 |
# via
|
23 |
# dash-ag-grid
|
24 |
# dash-bootstrap-components
|
|
|
25 |
# vizro
|
26 |
-
dash-ag-grid==
|
27 |
# via vizro
|
28 |
-
dash-bootstrap-components==
|
29 |
# via vizro
|
30 |
-
dash-
|
31 |
-
# via dash
|
32 |
-
dash-html-components==2.0.0
|
33 |
-
# via dash
|
34 |
-
dash-mantine-components==0.12.1
|
35 |
# via vizro
|
36 |
-
dash-table==5.0.0
|
37 |
-
# via dash
|
38 |
et-xmlfile==2.0.0
|
39 |
# via openpyxl
|
40 |
flask==3.0.3
|
@@ -48,9 +43,7 @@ gunicorn==23.0.0
|
|
48 |
idna==3.10
|
49 |
# via requests
|
50 |
importlib-metadata==8.5.0
|
51 |
-
# via
|
52 |
-
# dash
|
53 |
-
# flask
|
54 |
itsdangerous==2.2.0
|
55 |
# via flask
|
56 |
jinja2==3.1.4
|
@@ -72,6 +65,7 @@ packaging==24.1
|
|
72 |
# black
|
73 |
# gunicorn
|
74 |
# plotly
|
|
|
75 |
pandas==2.2.3
|
76 |
# via vizro
|
77 |
pathspec==0.12.1
|
@@ -104,13 +98,8 @@ six==1.16.0
|
|
104 |
# retrying
|
105 |
tenacity==9.0.0
|
106 |
# via plotly
|
107 |
-
tomli==2.1.0
|
108 |
-
# via
|
109 |
-
# autoflake
|
110 |
-
# black
|
111 |
typing-extensions==4.12.2
|
112 |
# via
|
113 |
-
# black
|
114 |
# dash
|
115 |
# pydantic
|
116 |
# pydantic-core
|
@@ -118,7 +107,7 @@ tzdata==2024.2
|
|
118 |
# via pandas
|
119 |
urllib3==2.2.3
|
120 |
# via requests
|
121 |
-
vizro==0.1.
|
122 |
# via -r requirements.in
|
123 |
werkzeug==3.0.6
|
124 |
# via
|
|
|
18 |
# via
|
19 |
# black
|
20 |
# flask
|
21 |
+
dash==3.1.1
|
22 |
# via
|
23 |
# dash-ag-grid
|
24 |
# dash-bootstrap-components
|
25 |
+
# dash-mantine-components
|
26 |
# vizro
|
27 |
+
dash-ag-grid==32.3.0
|
28 |
# via vizro
|
29 |
+
dash-bootstrap-components==2.0.3
|
30 |
# via vizro
|
31 |
+
dash-mantine-components==2.1.0
|
|
|
|
|
|
|
|
|
32 |
# via vizro
|
|
|
|
|
33 |
et-xmlfile==2.0.0
|
34 |
# via openpyxl
|
35 |
flask==3.0.3
|
|
|
43 |
idna==3.10
|
44 |
# via requests
|
45 |
importlib-metadata==8.5.0
|
46 |
+
# via dash
|
|
|
|
|
47 |
itsdangerous==2.2.0
|
48 |
# via flask
|
49 |
jinja2==3.1.4
|
|
|
65 |
# black
|
66 |
# gunicorn
|
67 |
# plotly
|
68 |
+
# vizro
|
69 |
pandas==2.2.3
|
70 |
# via vizro
|
71 |
pathspec==0.12.1
|
|
|
98 |
# retrying
|
99 |
tenacity==9.0.0
|
100 |
# via plotly
|
|
|
|
|
|
|
|
|
101 |
typing-extensions==4.12.2
|
102 |
# via
|
|
|
103 |
# dash
|
104 |
# pydantic
|
105 |
# pydantic-core
|
|
|
107 |
# via pandas
|
108 |
urllib3==2.2.3
|
109 |
# via requests
|
110 |
+
vizro==0.1.44
|
111 |
# via -r requirements.in
|
112 |
werkzeug==3.0.6
|
113 |
# via
|