[POC] Docs screenshots

vizro-core/docs/docs_generaton_code/first_page.py

@@ -0,0 +1,23 @@
+from vizro import Vizro
+import vizro.models as vm
+import vizro.plotly.express as px
+
+df = px.data.gapminder()
+gapminder_data = (
+    df.groupby(by=["continent", "year"]).
+        agg({"lifeExp": "mean", "pop": "sum", "gdpPercap": "mean"}).reset_index()
+)
+
+first_page = vm.Page(
+    title="First Page",
+    components=[
+        vm.Graph(
+            id="box_cont",
+            figure=px.box(gapminder_data, x="continent", y="lifeExp", color="continent",
+                          labels={"lifeExp": "Life Expectancy", "continent": "Continent"}),
+        ),
+    ],
+)
+
+dashboard = vm.Dashboard(pages=[first_page])
+Vizro().build(dashboard).run()

vizro-core/docs/docs_generaton_code/test_docs_screenshots.py

@@ -0,0 +1,51 @@
+import pytest
+from selenium import webdriver
+from selenium.common import StaleElementReferenceException
+from selenium.webdriver.chrome.options import Options
+from selenium.webdriver.common.by import By
+from selenium.webdriver.support import expected_conditions
+from selenium.webdriver.support.wait import WebDriverWait
+
+
+@pytest.fixture()
+def chromedriver(request):
+    """Fixture for starting chromedriver."""
+    options = Options()
+    options.add_argument("--headless"),
+    options.add_argument("--window-size=1920,1080")
+    options.add_experimental_option(
+        "prefs",
+        {"download.default_directory": "."},
+    )
+    driver = webdriver.Chrome(options=options)
+    driver.get(f"http://127.0.0.1:{request.param.get('port')}/first-page")
+    return driver
+
+
+@pytest.mark.parametrize(
+    "chromedriver", [({"port": 8050})], indirect=["chromedriver"]
+)
+def test_generate_screenshots(chromedriver):
+    WebDriverWait(
+        chromedriver, 10, ignored_exceptions=StaleElementReferenceException
+    ).until(expected_conditions.element_to_be_clickable((By.XPATH, '//*[starts-with(@class, "sc-")][contains(@class, "daq-booleanswitch--light__background")]/button')))
+    WebDriverWait(
+        chromedriver, 10, ignored_exceptions=StaleElementReferenceException
+    ).until(expected_conditions.element_to_be_clickable(
+        (By.XPATH, '//*[@class="selector_dropdown_container"]//*[@class="dash-dropdown"]'))).click()
+    chromedriver.save_screenshot("first_page.png")
+    full = chromedriver.get_screenshot_as_png()
+    from PIL import Image
+    from io import BytesIO
+    im = Image.open(BytesIO(full))
+    #  using https://chromewebstore.google.com/detail/pixel-measurement/jdkcdajnaldgjmkdkkkgenbgdajaaapa
+    #  using https://chromewebstore.google.com/detail/resolution-test/pggmjcdagmkafagmhhaickkjnfgnhjgg
+    width, height = 121*2, 129*2
+    left, top = 16*2, 435*2  # left, top
+    # Select area to crop
+    area = (left, top, left + width, top + height)
+    im = im.crop(area)
+    im.save('F1-info.png')
+    # elem = chromedriver.find_element(By.XPATH, '//*[@class="selector_container"]')
+    # elem.screenshot(f"first_page_elem.png")
+

vizro-core/docs/pages/tutorials/explore_components.md

@@ -40,34 +40,12 @@ plotly express standard.
 !!! example "First component"
     === "app.py"
         ```py
-        from vizro import Vizro
-        import vizro.models as vm
-        import vizro.plotly.express as px
-
-        df = px.data.gapminder()
-        gapminder_data = (
-                df.groupby(by=["continent", "year"]).
-                    agg({"lifeExp": "mean", "pop": "sum", "gdpPercap": "mean"}).reset_index()
-            )
-
-        first_page = vm.Page(
-            title="First Page",
-            components=[
-                vm.Graph(
-                    id="box_cont",
-                    figure=px.box(gapminder_data, x="continent", y="lifeExp", color="continent",
-                                    labels={"lifeExp": "Life Expectancy", "continent":"Continent"}),
-                ),
-            ],
-        )
-
-        dashboard = vm.Dashboard(pages=[first_page])
-        Vizro().build(dashboard).run()
+        --8<-- "code/first_page.py"
         ```
     === "Result"
         [![FirstPage1]][FirstPage1]
 
-    [FirstPage1]: ../../assets/tutorials/dashboard/dashboard21.png
+    [FirstPage1]: ../../docs_generaton_code/F1-info.png
 
 Let's give it a try and see your dashboard in action! Either paste the above code into a Jupyter notebook cell and evaluate it, or create a new Python script called `app.py` and copy the code from
 above into the script. Next, navigate to the directory where the `app.py` file is located using your terminal or command

vizro-core/mkdocs.yml

@@ -80,7 +80,8 @@ markdown_extensions:
   - pymdownx.highlight:
       anchor_linenums: true
   - pymdownx.inlinehilite
-  - pymdownx.snippets
+  - pymdownx.snippets:
+      base_path: ["docs"]
   - admonition
   - pymdownx.arithmatex:
       generic: true