[Docs] Update code snippets to remove unnecessary id assignment (#863)

vizro-ai/docs/pages/user-guides/add-generated-chart-usecase.md

@@ -99,8 +99,8 @@ This object must then be passed to the `figure` argument of the Vizro [Graph](ht
         page = vm.Page(
             title = 'Demographics',
             components = [
-                vm.Graph(id='bubble chart', figure=custom_chart(df)),
-                vm.Graph(id='histogram', figure = px.box(df,
+                vm.Graph(figure=custom_chart(df)),
+                vm.Graph(figure = px.box(df,
                                                          x='continent',
                                                          y='lifeExp',
                                                          color='continent',
@@ -152,8 +152,8 @@ Executing the code below yields the identical dashboard as the example above.
         page = vm.Page(
             title = 'Demographics',
             components = [
-                vm.Graph(id='bubble chart', figure=fig),
-                vm.Graph(id='histogram', figure = px.box(df,
+                vm.Graph(figure=fig),
+                vm.Graph(figure = px.box(df,
                                                          x='continent',
                                                          y='lifeExp',
                                                          color='continent',

vizro-core/docs/pages/tutorials/first-dashboard.md

@@ -16,8 +16,8 @@ Click on the **Run and edit this code in PyCafe** link below to live-edit the da
         page = vm.Page(
             title="My first dashboard",
             components=[
-                vm.Graph(id="scatter_chart", figure=px.scatter(df, x="sepal_length", y="petal_width", color="species")),
-                vm.Graph(id="hist_chart", figure=px.histogram(df, x="sepal_width", color="species")),
+                vm.Graph(figure=px.scatter(df, x="sepal_length", y="petal_width", color="species")),
+                vm.Graph(figure=px.histogram(df, x="sepal_width", color="species")),
             ],
             controls=[
                 vm.Filter(column="species", selector=vm.Dropdown(value=["ALL"])),

vizro-core/docs/pages/user-guides/card-button.md

@@ -526,7 +526,7 @@ To create a navigation card:
         page_2 = vm.Page(
             title="Filters and parameters",
             components=[
-                vm.Graph(id="scatter", figure=px.scatter(iris, x="sepal_length", y="petal_width", color="sepal_width")),
+                vm.Graph(figure=px.scatter(iris, x="sepal_length", y="petal_width", color="sepal_width")),
             ],
         )
 
@@ -560,7 +560,6 @@ To create a navigation card:
                 data_frame: iris
                 x: sepal_length
                 y: petal_width
-              id: scatter
               type: graph
           title: Filters and parameters
         ```
@@ -632,7 +631,7 @@ In the below example we show how to configure a button to export the filtered da
                     actions=[vm.Action(function=export_data(targets=["scatter_chart"]))],
                 ),
             ],
-            controls=[vm.Filter(column="species", selector=vm.Dropdown(title="Species"))],
+            controls=[vm.Filter(column="species")],
         )
 
         dashboard = vm.Dashboard(pages=[page])

vizro-core/docs/pages/user-guides/custom-components.md

@@ -234,7 +234,6 @@ vm.Page.add_type("components", Jumbotron)
             title="Custom Component",
             components=[
                 Jumbotron(  # (6)!
-                    id="my_jumbotron",
                     title="Jumbotron",
                     subtitle="This is a subtitle to summarize some content.",
                     text="This is the main body of text of the Jumbotron.",
@@ -364,7 +363,6 @@ Add the custom action `open_offcanvas` as a `function` argument inside the [`Act
                     ],
                 ),
                 OffCanvas(
-                    id="offcanvas",
                     content="OffCanvas content",
                     title="Offcanvas Title",
                 ),

vizro-core/docs/pages/user-guides/filters.md

@@ -139,7 +139,7 @@ Below is an advanced example where we only target one page component, and where
             title="My first page",
             components=[
                 vm.Graph(id="scatter_chart", figure=px.scatter(iris, x="sepal_length", y="petal_width", color="species")),
-                vm.Graph(id="scatter_chart2", figure=px.scatter(iris, x="petal_length", y="sepal_width", color="species")),
+                vm.Graph(figure=px.scatter(iris, x="petal_length", y="sepal_width", color="species")),
             ],
             controls=[
                 vm.Filter(column="petal_length",targets=["scatter_chart"],selector=vm.RangeSlider(step=1)),
@@ -170,7 +170,6 @@ Below is an advanced example where we only target one page component, and where
                   x: petal_length
                   y: sepal_width
                   color: species
-                id: scatter_chart2
                 type: graph
             controls:
               - column: petal_length

vizro-core/docs/pages/user-guides/run.md

@@ -80,7 +80,7 @@ The dashboard application can be launched in a Jupyter environment in `inline`,
         page = vm.Page(
             title="My first page",
             components=[
-                vm.Graph(id="scatter_chart", figure=px.scatter(iris, x="sepal_length", y="petal_width", color="species")),
+                vm.Graph(figure=px.scatter(iris, x="sepal_length", y="petal_width", color="species")),
             ],
         )
 
@@ -114,7 +114,7 @@ The dashboard application can be launched in a Jupyter environment in `inline`,
         page = vm.Page(
             title="My first page",
             components=[
-                vm.Graph(id="scatter_chart", figure=px.scatter(iris, x="sepal_length", y="petal_width", color="species")),
+                vm.Graph(figure=px.scatter(iris, x="sepal_length", y="petal_width", color="species")),
             ],
         )