Feature/plotly theming

README.md

@@ -45,7 +45,7 @@ python -m st_undp configure
 ```
 
 This will edit the theme section in the file if it exists or create it if it doesn't.
-Then, call `apply_style` function inside your application entry point, typically `app.py`: 
+Then, call `apply_style` function inside your application entry point, typically `app.py`:
 
 ```python
 import st_undp
@@ -63,6 +63,7 @@ This package is currently in the early stages of development. Main features incl
 - `ProximaNova` fonts
 - CSS styles for most Streamlit input components
 - Several custom components from the UNDP Design System, such as Author, Footer, Header, Stats Card
+- Custom UNDP themed for Plotly and ready-made Plotly charts.
 - No additional dependencies on top of what is required by `streamlit`
 
 ## Contributing
@@ -81,16 +82,16 @@ routine operations.
 
 ## License
 
-This project is licensed under the BSD 3-Clause License. However, entities or individuals not affiliated with UNDP 
-are strictly prohibited from using this package or any of its components to create, share, publish, or distribute works 
+This project is licensed under the BSD 3-Clause License. However, entities or individuals not affiliated with UNDP
+are strictly prohibited from using this package or any of its components to create, share, publish, or distribute works
 that resemble, claim affiliation with, or imply endorsement by UNDP.
 
-UNDP’s name, emblem and its abbreviation are the exclusive property of UNDP and are protected under international law. 
-Their unauthorized use is prohibited, and they may not be reproduced or used in any manner without UNDP’s prior written permission. 
+UNDP’s name, emblem and its abbreviation are the exclusive property of UNDP and are protected under international law.
+Their unauthorized use is prohibited, and they may not be reproduced or used in any manner without UNDP’s prior written permission.
 
 ## Contact
 
 This project is part of [Data Futures Exchange (DFx)](https://data.undp.org) at UNDP.
-If you are facing any issues or would like to make some suggestions, feel free to 
-[open an issue](https://github.com/undp-data/st-undp/issues/new/choose). 
+If you are facing any issues or would like to make some suggestions, feel free to
+[open an issue](https://github.com/undp-data/st-undp/issues/new/choose).
 For enquiries about DFx, visit [Contact Us](https://data.undp.org/contact-us).

app.py

@@ -27,6 +27,7 @@
         title="custom components",
         url_path="/custom",
     ),
+    st.Page(page="pages/extras.py", title="extras", url_path="/extras"),
     st.Page(
         page="pages/about.py",
         title="about",

pages/about.py

@@ -30,7 +30,7 @@
     st_undp.featured_card(
         src="app/static/github.jpg",
         title="UNDP Data GitHub",
-        summary="Leverage open source projects for data visualisation, geospatial analytics and artificial intelligence",
+        summary="Leverage open source projects for data visualisation, geo-spatial analytics and artificial intelligence",
         href="https://github.com/undp-data",
         tag="resource",
     )

pages/custom.py

@@ -20,20 +20,20 @@
     ]
 )
 with tab1:
-    code = """
+    code_body = """
     st_undp.author(
         src="app/static/aristotle.jpg",
         name="Aristotle",
         title="Ancient Greek philosopher and polymath",
         href="https://en.wikipedia.org/wiki/Aristotle",
     )
     """
-    eval(code.strip())
+    eval(code_body.strip())
     with st.expander("Show Code"):
-        st.code(code)
+        st.code(code_body)
 
 with tab2:
-    code = """
+    code_body = """
     st_undp.author_card(
         src="app/static/aristotle.jpg",
         name="Aristotle",
@@ -42,25 +42,25 @@
         href="https://en.wikipedia.org/wiki/Aristotle",
     )
     """
-    eval(code.strip())
+    eval(code_body.strip())
     with st.expander("Show Code"):
-        st.code(code)
+        st.code(code_body)
 
 with tab3:
-    code = """
+    code_body = """
     st_undp.author_summary(
         src="app/static/aristotle.jpg",
         name="Aristotle",
         title="Ancient Greek philosopher and polymath",
         summary="As the founder of the Peripatetic school of philosophy in the Lyceum in Athens, he began the wider Aristotelian tradition that followed, which set the groundwork for the development of modern science."
     )
     """
-    eval(code.strip())
+    eval(code_body.strip())
     with st.expander("Show Code"):
-        st.code(code)
+        st.code(code_body)
 
 with tab4:
-    code = """
+    code_body = """
         st_undp.breadcrumb(
             {
                 "Home": "/",
@@ -69,15 +69,15 @@
             }
         )
     """
-    eval(code.strip())
+    eval(code_body.strip())
     with st.expander("Show Code"):
-        st.code(code)
+        st.code(code_body)
 
 with tab5:
     st.subheader("Content Card")
-    body = "Use st.columns to arrange multiple cards in a row."
-    st.info(body, icon=":material/lightbulb:")
-    code = """
+    BODY = "Use st.columns to arrange multiple cards in a row."
+    st.info(BODY, icon=":material/lightbulb:")
+    code_body = """
     st_undp.content_card(
         src="app/static/aristotle.jpg",
         caption="Nicomachean Ethics is closely related to Eudemian Ethics",
@@ -91,12 +91,12 @@
     for _ in range(rows):
         for col in st.columns(cols):
             with col:
-                eval(code)
+                eval(code_body)
     with st.expander("Show Code"):
-        st.code(code)
+        st.code(code_body)
 
 with tab6:
-    code = """
+    code_body = """
     st_undp.download_card(
         src="app/static/aristotle.jpg",
         title="Corpus Aristotelicum",
@@ -107,12 +107,12 @@
     """.strip()
     for col, variant in zip(st.columns(3), ("publication", "card", "default")):
         with col:
-            eval(code.format(variant))
+            eval(code_body.format(variant))
             with st.expander("Show Code"):
-                st.code(code.format(variant))
+                st.code(code_body.format(variant))
 
 with tab7:
-    code = """
+    code_body = """
     st_undp.featured_card(
        src="app/static/aristotle.jpg",
        title="Nicomachean Ethics",
@@ -121,13 +121,13 @@
        width=6,
     )
     """.strip()
-    eval(code)
+    eval(code_body)
     with st.expander("Show Code"):
-        st.code(code)
+        st.code(code_body)
 
 with tab8:
-    body = "Make sure to call the footer function at the bottom of your script outside of any tab, column etc."
-    st.info(body, icon=":material/lightbulb:")
+    info_body = "Make sure to call the footer function at the bottom of your script outside of any tab, column etc."
+    st.info(info_body, icon=":material/lightbulb:")
     footer = st.radio(
         label="Footer",
         options=("None", "UNDP (Default)", "UNDP DFx", "Custom"),
@@ -136,9 +136,9 @@
 
     footer = footer.lower()
     if "default" in footer:
-        code = """st_undp.footer()"""
+        code_body = """st_undp.footer()"""
     elif "dfx" in footer:
-        code = """st_undp.footer("dfx")"""
+        code_body = """st_undp.footer("dfx")"""
     elif "custom" in footer:
         columns = {
             "focus areas": {
@@ -153,61 +153,61 @@
             },
         }
         st.json(columns)
-        code = """st_undp.footer(columns)"""
+        code_body = """st_undp.footer(columns)"""
     else:
-        code = "None"
+        code_body = "None"
+    eval(code_body)
     with st.expander("Show Code"):
-        st.code(code)
-    eval(code)
+        st.code(code_body)
 
 with tab9:
     logo = st.radio("Logo", ("UNDP", "PNUD"), key="logo", horizontal=True)
     title = st.text_input("Header Title", key="title")
     subtitle = st.text_input("Header Subtitle", key="subtitle")
-    code = f"""
+    code_body = f"""
     st_undp.header(
         title="{title}",
         subtitle="{subtitle}",
         logo="{logo.lower()}",
     )
     """.strip()
     with st.expander("Show Code"):
-        st.code(code)
+        st.code(code_body)
 
 with tab10:
-    code = """
+    code_body = """
     st_undp.image_card(
        src="app/static/aristotle.jpg",
        summary="Nicomachean Ethics is Aristotle's best-known works on ethics: the science of the good for human life, that which is the goal or end at which all our actions aim",
        href="https://en.wikipedia.org/wiki/Nicomachean_Ethics",
        width=3,
     )
     """.strip()
-    eval(code)
+    eval(code_body)
     with st.expander("Show Code"):
-        st.code(code)
+        st.code(code_body)
 
 with tab11:
     col1, col2 = st.columns(2)
     with col1:
-        code = """
+        code_body = """
             st_undp.stats_card(
                 value=3.14,
                 title="Pi",
                 text="Pi is a mathematical constant that is the ratio of a circle's circumference to its diameter",
             )
             """
-        eval(code.strip())
+        eval(code_body.strip())
         with st.expander("Show Code"):
-            st.code(code)
+            st.code(code_body)
     with col2:
-        code = """
+        code_body = """
             st_undp.stats_card(
                 value=2.71,
                 title="Euler's constant",
                 text="Euler's constant is  is a mathematical constant, defined as the limiting difference between the harmonic series and the natural logarithm",
             )
             """
-        eval(code.strip())
+        eval(code_body.strip())
         with st.expander("Show Code"):
-            st.code(code)
+            st.code(code_body)