Li Nguyen commited on
Commit
c019ec6
·
1 Parent(s): 26b93fc

Update demo

Browse files
Files changed (4) hide show
  1. app.py +441 -62
  2. assets/css/custom.css +14 -3
  3. requirements.in +1 -1
  4. 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="shopping_cart",
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="shopping_cart",
91
  ),
92
  ]
93
 
@@ -95,7 +97,7 @@ example_reference_cards = [
95
  # HOME ------------------------------------------------------------------------
96
  home = vm.Page(
97
  title="Homepage",
98
- layout=vm.Layout(grid=[[0, 1], [2, 3]], row_gap="16px", col_gap="24px"),
99
  components=[
100
  vm.Card(
101
  text="""
@@ -133,7 +135,7 @@ home = vm.Page(
133
 
134
  ### Actions
135
 
136
- Standard predefined actions are made available including **export data** and **filter interactions**.
137
  """,
138
  href="/export-data",
139
  ),
@@ -255,7 +257,7 @@ cards = vm.Page(
255
 
256
  figure = vm.Page(
257
  title="Figure",
258
- layout=vm.Layout(grid=[[0, 1, 2, 3], [4, 5, 6, 7], [-1, -1, -1, -1], [-1, -1, -1, -1]]),
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.Layout(grid=[[0], [0], [0], [0], [1]]),
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(text="Export data", actions=[vm.Action(function=export_data())]),
 
 
 
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.Container(
286
- title="Container I",
287
- layout=vm.Layout(grid=[[0, 1]]),
288
- components=[
289
- vm.Graph(
290
- figure=px.scatter(
291
- iris,
292
- x="sepal_length",
293
- y="petal_width",
294
- color="species",
295
- title="Container I - Scatter",
296
- )
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
297
  ),
298
- vm.Graph(
299
- figure=px.bar(
300
- iris,
301
- x="sepal_length",
302
- y="sepal_width",
303
- color="species",
304
- title="Container I - Bar",
305
- )
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
306
  ),
307
- ],
308
- ),
309
- vm.Container(
310
- title="Container II",
311
- components=[
312
- vm.Graph(
313
- figure=px.scatter(
314
- iris,
315
- x="sepal_width",
316
- y="sepal_length",
317
- color="species",
318
- marginal_y="violin",
319
- marginal_x="box",
320
- title="Container II - Scatter",
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(column="species"),
 
 
 
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.Layout(grid=[[0], [1], [1], [1], [2], [2], [2], [3], [3], [3]], row_min_height="170px", row_gap="24px"),
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": "1px solid var(--right-side-bg)",
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.Layout(grid=[[0, 1, 2, 3], [4, 5, 6, 7], [-1, -1, -1, -1], [-1, -1, -1, -1]]),
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
- extensions = [custom_charts, custom_tables, custom_components, custom_actions, custom_figures]
 
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
- app = Vizro().build(dashboard)
821
- app.dash.layout.children.append(
822
- dbc.NavLink(
 
 
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
- className="anchor-container",
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
- #page-header {
2
- padding-left: 8px;
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.28
 
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==2.18.1
22
  # via
23
  # dash-ag-grid
24
  # dash-bootstrap-components
 
25
  # vizro
26
- dash-ag-grid==31.2.0
27
  # via vizro
28
- dash-bootstrap-components==1.6.0
29
  # via vizro
30
- dash-core-components==2.0.0
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.28
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