Merge branch 'demo/add-lollipop-chart' of https://github.com/mckinsey…

…/vizro into demo/add-lollipop-chart

vizro-core/examples/visual-vocabulary/custom_charts.py

@@ -306,7 +306,6 @@ def diverging_stacked_bar(data_frame: pd.DataFrame, **kwargs) -> go.Figure:
     return fig
 
 
-
 @capture("graph")
 def lollipop(data_frame: pd.DataFrame, **kwargs):
     """Creates a lollipop based on px.scatter.

vizro-core/examples/visual-vocabulary/pages/_factories.py

@@ -7,7 +7,7 @@
 import vizro.models as vm
 
 from pages._pages_utils import PAGE_GRID, make_code_clipboard_from_py_file
-from pages.examples import butterfly, column_and_line, connected_scatter, waterfall, lollipop
+from pages.examples import butterfly, column_and_line, connected_scatter, lollipop, waterfall
 
 
 def butterfly_factory(group: str):
@@ -193,16 +193,16 @@ def lollipop_factory(group: str):
                 text="""
 
                 #### What is a lollipop chart?
-                
-                A lollipop chart is a variation of a bar chart where each data point is represented by a line and a 
-                dot at the end to mark the value. It functions like a bar chart but offers a cleaner visual, 
+
+                A lollipop chart is a variation of a bar chart where each data point is represented by a line and a
+                dot at the end to mark the value. It functions like a bar chart but offers a cleaner visual,
                 especially useful when dealing with a large number of high values, to avoid the clutter of tall columns.
                 However, it can be less precise due to the difficulty in judging the exact center of the circle.
-                
+
                  
 
                 #### When should I use it?
-                
+
                 Use a lollipop chart to compare values across categories, especially when dealing with many high values.
                 It highlights differences and trends clearly without the visual bulk of a bar chart. Ensure clarity by
                 limiting categories, using consistent scales, and clearly labeling axes. Consider alternatives if

vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py

@@ -5,6 +5,7 @@
 
 gapminder = px.data.gapminder()
 
+
 @capture("graph")
 def lollipop(data_frame: pd.DataFrame, **kwargs):
     """Creates a lollipop chart using Plotly."""
@@ -26,4 +27,9 @@ def lollipop(data_frame: pd.DataFrame, **kwargs):
     fig.update_layout(yaxis_title="", yaxis_showgrid=False)
     return fig
 
-fig = lollipop(data_frame=gapminder.query("year == 2007 and gdpPercap > 36000").sort_values("gdpPercap"), y="country", x="gdpPercap")
+
+fig = lollipop(
+    data_frame=gapminder.query("year == 2007 and gdpPercap > 36000").sort_values("gdpPercap"),
+    y="country",
+    x="gdpPercap",
+)

vizro-core/examples/visual-vocabulary/pages/magnitude.py

@@ -2,9 +2,9 @@
 
 import vizro.models as vm
 
+from pages._factories import lollipop_factory
 from pages._pages_utils import PAGE_GRID, make_code_clipboard_from_py_file
 from pages.examples import bar, magnitude_column, paired_bar, paired_column, parallel_coordinates, radar
-from pages._factories import lollipop_factory
 
 bar_page = vm.Page(
     title="Bar",
@@ -240,4 +240,12 @@
 )
 
 lollipop_page = lollipop_factory("magnitude")
-pages = [bar_page, column_page, paired_bar_page, paired_column_page, parallel_coordinates_page, radar_page, lollipop_page]
+pages = [
+    bar_page,
+    column_page,
+    paired_bar_page,
+    paired_column_page,
+    parallel_coordinates_page,
+    radar_page,
+    lollipop_page,
+]

vizro-core/examples/visual-vocabulary/pages/ranking.py

@@ -2,9 +2,9 @@
 
 import vizro.models as vm
 
+from pages._factories import lollipop_factory
 from pages._pages_utils import PAGE_GRID, make_code_clipboard_from_py_file
 from pages.examples import ordered_bar, ordered_column
-from pages._factories import lollipop_factory
 
 ordered_bar_page = vm.Page(
     title="Ordered bar",