Add fragment tutorial embedded apps (#1034)

python/api-examples-source/tutorials/execution-flow/fragments/tutorial-fragment-multiple-container.py

@@ -0,0 +1,56 @@
+import streamlit as st
+import time
+
+st.title("Cats!")
+
+row1 = st.columns(3)
+row2 = st.columns(3)
+
+grid = [col.container(height=200) for col in row1 + row2]
+safe_grid = [card.empty() for card in grid]
+
+
+def black_cats():
+    time.sleep(1)
+    st.title("🐈‍⬛ 🐈‍⬛")
+    st.markdown("🐾 🐾 🐾 🐾")
+
+
+def orange_cats():
+    time.sleep(1)
+    st.title("🐈 🐈")
+    st.markdown("🐾 🐾 🐾 🐾")
+
+
+@st.experimental_fragment
+def herd_black_cats(card_a, card_b, card_c):
+    st.button("Herd the black cats")
+    container_a = card_a.container()
+    container_b = card_b.container()
+    container_c = card_c.container()
+    with container_a:
+        black_cats()
+    with container_b:
+        black_cats()
+    with container_c:
+        black_cats()
+
+
+@st.experimental_fragment
+def herd_orange_cats(card_a, card_b, card_c):
+    st.button("Herd the orange cats")
+    container_a = card_a.container()
+    container_b = card_b.container()
+    container_c = card_c.container()
+    with container_a:
+        orange_cats()
+    with container_b:
+        orange_cats()
+    with container_c:
+        orange_cats()
+
+
+with st.sidebar:
+    herd_black_cats(grid[0].empty(), grid[2].empty(), grid[4].empty())
+    herd_orange_cats(grid[1].empty(), grid[3].empty(), grid[5].empty())
+    st.button("Herd all the cats")

python/api-examples-source/tutorials/execution-flow/fragments/tutorial-fragment-rerun.py

@@ -0,0 +1,87 @@
+import streamlit as st
+import pandas as pd
+import numpy as np
+from datetime import date, timedelta
+import string
+import time
+
+
+@st.cache_data
+def get_data():
+    """Generate random sales data for Widget A through Widget Z"""
+
+    product_names = ["Widget " + letter for letter in string.ascii_uppercase]
+    average_daily_sales = np.random.normal(1_000, 300, len(product_names))
+    products = dict(zip(product_names, average_daily_sales))
+
+    data = pd.DataFrame({})
+    sales_dates = np.arange(date(2023, 1, 1), date(2024, 1, 1), timedelta(days=1))
+    for product, sales in products.items():
+        data[product] = np.random.normal(sales, 300, len(sales_dates)).round(2)
+    data.index = sales_dates
+    data.index = data.index.date
+    return data
+
+
+@st.experimental_fragment
+def show_daily_sales(data):
+    time.sleep(1)
+    with st.container(height=100):
+        selected_date = st.date_input(
+            "Pick a day ",
+            value=date(2023, 1, 1),
+            min_value=date(2023, 1, 1),
+            max_value=date(2023, 12, 31),
+            key="selected_date",
+        )
+
+    if "previous_date" not in st.session_state:
+        st.session_state.previous_date = selected_date
+    previous_date = st.session_state.previous_date
+    st.session_state.previous_date = selected_date
+    is_new_month = selected_date.replace(day=1) != previous_date.replace(day=1)
+    if is_new_month:
+        st.rerun()
+
+    with st.container(height=510):
+        st.header(f"Best sellers, {selected_date:%m/%d/%y}")
+        top_ten = data.loc[selected_date].sort_values(ascending=False)[0:10]
+        cols = st.columns([1, 4])
+        cols[0].dataframe(top_ten)
+        cols[1].bar_chart(top_ten)
+
+    with st.container(height=510):
+        st.header(f"Worst sellers, {selected_date:%m/%d/%y}")
+        bottom_ten = data.loc[selected_date].sort_values()[0:10]
+        cols = st.columns([1, 4])
+        cols[0].dataframe(bottom_ten)
+        cols[1].bar_chart(bottom_ten)
+
+
+def show_monthly_sales(data):
+    time.sleep(1)
+    selected_date = st.session_state.selected_date
+    this_month = selected_date.replace(day=1)
+    next_month = (selected_date.replace(day=28) + timedelta(days=4)).replace(day=1)
+
+    st.container(height=100, border=False)
+    with st.container(height=510):
+        st.header(f"Daily sales for all products, {this_month:%B %Y}")
+        monthly_sales = data[(data.index < next_month) & (data.index >= this_month)]
+        st.write(monthly_sales)
+    with st.container(height=510):
+        st.header(f"Total sales for all products, {this_month:%B %Y}")
+        st.bar_chart(monthly_sales.sum())
+
+
+st.set_page_config(layout="wide")
+
+st.title("Daily vs monthly sales, by product")
+st.markdown("This app shows the 2023 daily sales for Widget A through Widget Z.")
+
+data = get_data()
+daily, monthly = st.columns(2)
+with daily:
+    show_daily_sales(data)
+with monthly:
+    show_monthly_sales(data)

python/api-examples-source/tutorials/execution-flow/fragments/tutorial-fragment-streaming.py

@@ -0,0 +1,59 @@
+import streamlit as st
+import pandas as pd
+import numpy as np
+from datetime import datetime, timedelta
+
+
+def get_recent_data(last_timestamp):
+    """Generate and return data from last timestamp to now, at most 60 seconds."""
+    now = datetime.now()
+    if now - last_timestamp > timedelta(seconds=60):
+        last_timestamp = now - timedelta(seconds=60)
+    sample_time = timedelta(seconds=0.5)  # time between data points
+    next_timestamp = last_timestamp + sample_time
+    timestamps = np.arange(next_timestamp, now, sample_time)
+    sample_values = np.random.randn(len(timestamps), 2)
+
+    data = pd.DataFrame(sample_values, index=timestamps, columns=["A", "B"])
+    return data
+
+
+if "data" not in st.session_state:
+    st.session_state.data = get_recent_data(datetime.now() - timedelta(seconds=60))
+
+if "stream" not in st.session_state:
+    st.session_state.stream = False
+
+
+def toggle_streaming():
+    st.session_state.stream = not st.session_state.stream
+
+
+st.title("Data feed")
+st.sidebar.slider(
+    "Check for updates every: (seconds)", 0.5, 5.0, value=1.0, key="run_every"
+)
+st.sidebar.button(
+    "Start streaming", disabled=st.session_state.stream, on_click=toggle_streaming
+)
+st.sidebar.button(
+    "Stop streaming", disabled=not st.session_state.stream, on_click=toggle_streaming
+)
+
+if st.session_state.stream is True:
+    run_every = st.session_state.run_every
+else:
+    run_every = None
+
+
+@st.experimental_fragment(run_every=run_every)
+def show_latest_data():
+    last_timestamp = st.session_state.data.index[-1]
+    st.session_state.data = pd.concat(
+        [st.session_state.data, get_recent_data(last_timestamp)]
+    )
+    st.session_state.data = st.session_state.data[-100:]
+    st.line_chart(st.session_state.data)
+
+
+show_latest_data()