Update figure.md

mckinsey · Dec 3, 2024 · e9905aa · e9905aa
1 parent 66eeb0e
commit e9905aa
Showing 1 changed file with 50 additions and 50 deletions.
diff --git a/vizro-core/docs/pages/user-guides/figure.md b/vizro-core/docs/pages/user-guides/figure.md
@@ -41,58 +41,58 @@ To add a `Figure` to your page:
 !!! example "Use existing figure functions"
     === "app.py"
         ```{.python pycafe-link}
-	    import vizro.models as vm
-	    import vizro.plotly.express as px
-	    from vizro import Vizro
-	    from vizro.figures import kpi_card
-
-	    tips = px.data.tips
-
-	    # Create a layout with five rows and four columns. The KPI card is positioned in the first cell, while the remaining cells are empty.
-	    page = vm.Page(
-	        title="KPI card",
-	        layout=vm.Layout(grid=[[0, -1, -1, -1]] + [[-1, -1, -1, -1]] * 4),
-	        components=[
-	            vm.Figure(
-	                figure=kpi_card( # For more information, refer to the API reference for kpi_card
-	                    data_frame=tips,
-	                    value_column="tip",
-	                    value_format="${value:.2f}",
-	                    icon="shopping_cart",
-	                    title="KPI card I",
-	                )
-	            )
-	        ],
-	        controls=[vm.Filter(column="day", selector=vm.RadioItems())],
-	    )
-
-	    dashboard = vm.Dashboard(pages=[page])
-	    Vizro().build(dashboard).run()
-	    ```
-    === "app.yaml"
+        import vizro.models as vm
+        import vizro.plotly.express as px
+        from vizro import Vizro
+        from vizro.figures import kpi_card
+
+        tips = px.data.tips
+
+        # Create a layout with five rows and four columns. The KPI card is positioned in the first cell, while the remaining cells are empty.
+        page = vm.Page(
+            title="KPI card",
+            layout=vm.Layout(grid=[[0, -1, -1, -1]] + [[-1, -1, -1, -1]] * 4),
+            components=[
+                vm.Figure(
+                    figure=kpi_card( # For more information, refer to the API reference for kpi_card
+                        data_frame=tips,
+                        value_column="tip",
+                        value_format="${value:.2f}",
+                        icon="shopping_cart",
+                        title="KPI card I",
+                    )
+                )
+            ],
+            controls=[vm.Filter(column="day", selector=vm.RadioItems())],
+        )
+
+        dashboard = vm.Dashboard(pages=[page])
+        Vizro().build(dashboard).run()
+        ```
 
+    === "app.yaml"
         ```yaml
-	    # Still requires a .py to add data to the data manager and parse YAML configuration
-	    # See from_yaml example
-	    pages:
-	      - components:
-	          - figure:
-	              _target_: kpi_card
-	              data_frame: tips
-	              value_column: tip
-	              value_format: ${value:.2f}
-	              icon: shopping_cart
-	              title: KPI card I
-	            type: figure
-	        controls:
-	          - column: day
-	            type: filter
-	            selector:
-	              type: radio_items
-	        layout:
-	          grid: [[0, -1, -1, -1], [-1, -1, -1, -1], [-1, -1, -1, -1], [-1, -1, -1, -1],
-	             [-1, -1, -1, -1]]
-	        title: KPI card
+        # Still requires a .py to add data to the data manager and parse YAML configuration
+        # See from_yaml example
+        pages:
+          - components:
+              - figure:
+                  _target_: kpi_card
+                  data_frame: tips
+                  value_column: tip
+                  value_format: ${value:.2f}
+                  icon: shopping_cart
+                  title: KPI card I
+                type: figure
+            controls:
+              - column: day
+                type: filter
+                selector:
+                  type: radio_items
+            layout:
+              grid: [[0, -1, -1, -1], [-1, -1, -1, -1], [-1, -1, -1, -1], [-1, -1, -1, -1],
+                 [-1, -1, -1, -1]]
+            title: KPI card
         ```
 
     === "Result"