Add sparkline

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

@@ -138,7 +138,6 @@ class ChartGroup:
         IncompletePage("Slope"),
         IncompletePage("Fan"),
         IncompletePage("Bubble timeline"),
-        IncompletePage("Sparkline"),
     ],
     icon="Timeline",
     intro_text=time_intro_text,

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

@@ -0,0 +1,17 @@
+import pandas as pd
+import plotly.express as px
+import plotly.graph_objects as go
+from vizro.models.types import capture
+
+stocks = px.data.stocks()
+stocks_melt = stocks.melt(id_vars='date', value_vars=['GOOG', 'AMZN', "AAPL"], var_name='stock', value_name='value')
+
+@capture("graph")
+def sparkline(data_frame, **kwargs):
+    fig = px.line(data_frame, **kwargs)
+    fig.update_xaxes(visible=False)
+    fig.update_yaxes(visible=False)
+    fig.update_layout(showlegend=False)
+    return fig
+
+fig = sparkline(stocks_melt, x="date", y='value', facet_row="stock", color="stock")

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

@@ -7,7 +7,7 @@
     PAGE_GRID,
     make_code_clipboard_from_py_file,
 )
-from pages.examples import area, gantt, heatmap, line, stepped_line, time_column
+from pages.examples import area, gantt, heatmap, line, stepped_line, time_column, sparkline
 
 line_page = vm.Page(
     title="Line",
@@ -212,19 +212,19 @@
                 #### What is a gantt chart?
 
                 A gantt chart is a type of bar chart that visualizes a project schedule.
-It shows the start and end dates of a project element, such as tasks, activities, or
-events, in a timeline format. Each element is represented by a bar whose length indicates
-its duration.
+                It shows the start and end dates of a project element, such as tasks, activities, or
+                events, in a timeline format. Each element is represented by a bar whose length indicates
+                its duration.
 
                  
 
                 #### When should I use it?
 
                 Gantt charts are ideal for visualizing project timelines, tracking
-progress, and managing dependencies. They clearly display task start and end dates, making
-it easy to monitor project status and manage interdependencies. However, they can become
-complex if not regularly updated, especially for large projects.
-        """
+                progress, and managing dependencies. They clearly display task start and end dates, making
+                it easy to monitor project status and manage interdependencies. However, they can become
+                complex if not regularly updated, especially for large projects.
+            """
         ),
         vm.Graph(figure=gantt.fig),
         vm.Tabs(
@@ -240,6 +240,46 @@
         ),
     ],
 )
+
+
+sparkline_page = vm.Page(
+    title="Sparkline",
+    path="time/sparkline",
+    layout=vm.Layout(grid=PAGE_GRID),
+    components=[
+        vm.Card(
+            text="""
+                #### What is a sparkline chart?
+
+                A sparkline chart is a compact line or area chart that displays multiple time series over a continuous 
+                period. Without visible axes or labels, they are ideal for embedding within text, tables, or dashboards,
+                highlighting relative movement rather than precise values for a quick visual summary of trends.
+
+                 
+
+                #### When should I use it?
+
+                Use sparkline charts to show trends for multiple time series sharing the same Y-axis quantity over the 
+                same X-axis time range. They emphasize relative movement rather than precise values. To keep them 
+                effective, ensure simplicity by avoiding clutter. Use consistent scales and distinct colors for 
+                different series. Remove labels and gridlines, limit annotations, and place sparklines near relevant 
+                text or data.
+            """
+        ),
+        vm.Graph(figure=sparkline.fig),
+        vm.Tabs(
+            tabs=[
+                vm.Container(
+                    title="Vizro dashboard", components=[make_code_clipboard_from_py_file("sparkline.py", mode="vizro")]
+                ),
+                vm.Container(
+                    title="Plotly figure",
+                    components=[make_code_clipboard_from_py_file("sparkline.py", mode="plotly")],
+                ),
+            ]
+        ),
+    ],
+)
 pages = [
     line_page,
     column_page,
@@ -249,4 +289,5 @@
     stepped_line_page,
     heatmap_page,
     gantt_page,
+    sparkline_page
 ]