feat: Add date selection

streamlit_app.py

@@ -17,7 +17,7 @@ alt.renderers.set_embed_options(theme="dark")
 def fetch_asset(asset):
     return fetch(asset)
 
-def gen_charts(asset, chart_size={"width": 560, "height": 300}):
+def gen_charts(asset, chart_size={"width": 560, "height": 150}):
     # Gen data
     data = fetch_asset(asset)
     etf_volumes = data.etf_volumes
@@ -27,44 +27,57 @@ def gen_charts(asset, chart_size={"width": 560, "height": 300}):
     cum_flow_individual = data.cum_flow_individual
     cum_flow_total = data.cum_flow_total
 
-    trading_vol_fig = (
+    # Selection interval
+    interval = alt.selection_interval(encodings=["x"])
+    # Line chart of price
+    price = (
+        alt.Chart(price)
+        .mark_line()
+        .encode(
+            x=alt.X("Date:T", axis=alt.Axis(tickCount={"interval": "month", "step": 1}), title=""),
+            y=alt.Y("Price:Q").scale(zero=False),
+            color=alt.value("crimson"),
+        )
+    ).properties(
+        width=chart_size["width"],
+        height=chart_size["height"],
+    )
+    # View selection
+    view = price.add_params(interval)
+
+    trading_vol_individual = (
         alt.Chart(etf_volumes)
         .transform_fold(
             etf_volumes.drop(columns="Date").columns.to_list(), as_=["Funds", "Volume"]
         )
         .mark_line()
         .encode(
-            x=alt.X("Date:T", axis=alt.Axis(tickCount="day")),
-            y=alt.Y("Volume:Q"),
+            x=alt.X("Date:T", axis=alt.Axis(tickCount={"interval": "month", "step": 1}), title=""),
+            y=alt.Y("Volume:Q", title="Trading Volume Individual"),
             color="Funds:N",
         )
     ).properties(
         width=chart_size["width"],
-        height=chart_size["height"] / 2,
+        height=chart_size["height"],
     )
-    trading_vol_total_fig = (
+    trading_vol_total = (
         alt.Chart(etf_volumes)
         .transform_fold(
             etf_volumes.drop(columns="Date").columns.to_list(), as_=["Funds", "Volume"]
         )
         .mark_rule()
         .encode(
-            x=alt.X("Date:T", axis=alt.Axis(tickCount="day", title="", labels=False)),
-            y=alt.Y("sum(Volume):Q", title="Total Volume"),
+            x=alt.X("Date:T", axis=alt.Axis(tickCount={"interval": "month", "step": 1}), title=""),
+            y=alt.Y("sum(Volume):Q", title="Trading Volume Total"),
             color=alt.value("teal"),
         )
     ).properties(
         width=chart_size["width"],
-        height=chart_size["height"] / 2,
-    )
-    # Combine trading volume and average trading volume
-    trading_vol_fig = trading_vol_total_fig & trading_vol_fig
-    trading_vol_fig = trading_vol_fig.properties(
-        title=f"{asset} ETF trading volume",
+        height=chart_size["height"],
     )
 
     # Net flow individual
-    net_flow_individual_fig = (
+    net_flow_individual = (
         alt.Chart(etf_flow_individual)
         .transform_fold(
             etf_flow_individual.drop(columns="Date").columns.to_list(),
@@ -72,20 +85,20 @@ def gen_charts(asset, chart_size={"width": 560, "height": 300}):
         )
         .mark_line()
         .encode(
-            x=alt.X("Date:T", axis=alt.Axis(tickCount="day")),
-            y=alt.Y("Net Flow:Q"),
+            x=alt.X("Date:T", axis=alt.Axis(tickCount={"interval": "month", "step": 1}), title=""),
+            y=alt.Y("Net Flow:Q", title="Net Flow Individual"),
             color="Funds:N",
         )
     ).properties(
         width=chart_size["width"],
-        height=chart_size["height"] / 2,
+        height=chart_size["height"],
     )
-    net_flow_total_fig = (
+    net_flow_total = (
         alt.Chart(etf_flow_total)
         .mark_rule()
         .encode(
-            x=alt.X("Date:T", axis=alt.Axis(tickCount="day", title="", labels=False)),
-            y=alt.Y("Total:Q"),
+            x=alt.X("Date:T", axis=alt.Axis(tickCount={"interval": "month", "step": 1}), title=""),
+            y=alt.Y("Total:Q", title="Net Flow Total"),
             color=alt.condition(
                 alt.datum.Total > 0,
                 alt.value("seagreen"),  # The positive color
@@ -94,52 +107,11 @@ def gen_charts(asset, chart_size={"width": 560, "height": 300}):
         )
     ).properties(
         width=chart_size["width"],
-        height=chart_size["height"] / 2,
-    )
-    net_flow_individual_fig = net_flow_total_fig & net_flow_individual_fig
-    net_flow_individual_fig = net_flow_individual_fig.resolve_scale(
-        x="shared"
-    ).properties(
-        title=f"{asset} ETF net flow of individual funds",
-    )
-
-    net_flow_total_fig = (
-        alt.Chart(etf_flow_total)
-        .mark_rule()
-        .encode(
-            x=alt.X("Date:T", axis=alt.Axis(tickCount="day", title="", labels=False)),
-            y=alt.Y("Total:Q"),
-            color=alt.condition(
-                alt.datum.Total > 0,
-                alt.value("seagreen"),  # The positive color
-                alt.value("orangered"),  # The negative color
-            ),
-        )
-    ).properties(
-        width=chart_size["width"],
-        height=chart_size["height"] / 2,
-    )
-    # Line chart of price
-    price_fig = (
-        alt.Chart(price)
-        .mark_line()
-        .encode(
-            x=alt.X("Date:T", axis=alt.Axis(tickCount="day")),
-            y=alt.Y("Price:Q").scale(zero=False),
-            color=alt.value("crimson"),
-        )
-    ).properties(
-        width=chart_size["width"],
-        height=chart_size["height"] / 2,
-    )
-
-    net_flow_total_fig = net_flow_total_fig & price_fig
-    net_flow_total_fig = net_flow_total_fig.resolve_scale(x="shared").properties(
-        title=f"{asset} ETF net flow total vs asset price",
+        height=chart_size["height"],
     )
 
     # Stacking area chart of flow from individual funds
-    cum_flow_individual_net_fig = (
+    cum_flow_individual = (
         alt.Chart(cum_flow_individual)
         .transform_fold(
             cum_flow_individual.drop(columns="Date").columns.to_list(),
@@ -147,72 +119,62 @@ def gen_charts(asset, chart_size={"width": 560, "height": 300}):
         )
         .mark_area()
         .encode(
-            x=alt.X("Date:T", axis=alt.Axis(tickCount="day", title="", labels=False)),
-            y=alt.Y("Net Flow:Q"),
+            x=alt.X("Date:T", axis=alt.Axis(tickCount={"interval": "month", "step": 1}), title=""),
+            y=alt.Y("Net Flow:Q", title="Cumulative Flow Individual"),
             color=alt.Color("Funds:N", scale=alt.Scale(scheme="tableau20")),
         )
     ).properties(
         width=chart_size["width"],
-        height=chart_size["height"] / 2,
-    )
-    cum_flow_individual_net_fig = cum_flow_individual_net_fig & price_fig
-    cum_flow_individual_net_fig = cum_flow_individual_net_fig.resolve_scale(
-        x="shared"
-    ).properties(
-        title=f"{asset} ETF cumulative flow of individual funds vs asset price",
+        height=chart_size["height"],
     )
 
     # Area chart for cumulative flow
-    cum_flow_total_fig = (
+    cum_flow_total = (
         alt.Chart(cum_flow_total)
         .transform_calculate(
             negative="datum.Total < 0",
         )
         .mark_area()
         .encode(
-            x=alt.X("Date:T", axis=alt.Axis(tickCount="day", title="", labels=False)),
-            y=alt.Y("Total:Q", impute={"value": 0}),
+            x=alt.X("Date:T", axis=alt.Axis(tickCount={"interval": "month", "step": 1}), title=""),
+            y=alt.Y("Total:Q", title="Cumulative Flow Total", impute={"value": 0}),
             color=alt.Color(
                 "negative:N", title="Negative Flow", scale=alt.Scale(scheme="set2")
             ),
         )
     ).properties(
         width=chart_size["width"],
-        height=chart_size["height"] / 2,
-    )
-    cum_flow_total_fig = cum_flow_total_fig & price_fig
-    cum_flow_total_fig = cum_flow_total_fig.resolve_scale(x="shared").properties(
-        title=f"{asset} ETF cumulative flow total vs asset price",
+        height=chart_size["height"],
     )
 
     return SimpleNamespace(
-        trading_vol_fig=trading_vol_fig,
-        net_flow_individual_fig=net_flow_individual_fig,
-        net_flow_total_fig=net_flow_total_fig,
-        cum_flow_individual_net_fig=cum_flow_individual_net_fig,
-        cum_flow_total_fig=cum_flow_total_fig,
+        interval=interval,
+        view=view,
+        price=price,
+        trading_vol_individual=trading_vol_individual,
+        trading_vol_total=trading_vol_total,
+        net_flow_individual=net_flow_individual,
+        net_flow_total=net_flow_total,
+        cum_flow_individual=cum_flow_individual,
+        cum_flow_total=cum_flow_total,
     )
 
-
-def asset_charts(asset: str, chart_size={"width": "container", "height": 300}):
+def asset_charts(asset: str, chart_size={"width": "container", "height": 150}):
     charts = gen_charts(asset, chart_size)
     # Vertical concat the charts in each asset into single column of that asset
     all_charts = (
-        charts.trading_vol_fig
-        & charts.net_flow_individual_fig
-        & charts.net_flow_total_fig
-        & charts.cum_flow_individual_net_fig
-        & charts.cum_flow_total_fig
-    ).resolve_scale(color="independent")
-
-    return all_charts
-
-
-def compound_chart(chart_size={"width": 560, "height": 300}):
-    all_charts_btc = asset_charts("BTC", chart_size)
-    all_charts_eth = asset_charts("ETH", chart_size)
-    # Horizontal concat the charts for btc and eth
-    all_charts = (all_charts_btc | all_charts_eth).resolve_scale(color="independent")
+        charts.view
+        & charts.trading_vol_individual.encode(x=alt.X("Date:T", axis=alt.Axis(tickCount="day"), title="",scale=alt.Scale(domain=charts.interval)))
+        & charts.trading_vol_total.encode(x=alt.X("Date:T", axis=alt.Axis(tickCount="day"), title="",scale=alt.Scale(domain=charts.interval)))
+        & charts.net_flow_individual.encode(x=alt.X("Date:T", axis=alt.Axis(tickCount="day"), title="",scale=alt.Scale(domain=charts.interval)))
+        & charts.net_flow_total.encode(x=alt.X("Date:T", axis=alt.Axis(tickCount="day"), title="",scale=alt.Scale(domain=charts.interval)))
+        & charts.cum_flow_individual.encode(x=alt.X("Date:T", axis=alt.Axis(tickCount="day"), title="",scale=alt.Scale(domain=charts.interval)))
+        & charts.cum_flow_total.encode(x=alt.X("Date:T", axis=alt.Axis(tickCount="day"), title="",scale=alt.Scale(domain=charts.interval)))
+    ).resolve_scale(
+        color="independent",
+    ).properties(
+        title=f"{asset} ETF",
+    )
 
     return all_charts
 
@@ -236,9 +198,15 @@ if __name__ == "__main__":
     eth = fetch_asset("ETH")
 
     with dashboard_tab:
-        chart = compound_chart(chart_size={"width": 560, "height": 300})
+        btc_charts = asset_charts("BTC", chart_size={"width": "container", "height": 150})
+        eth_charts = asset_charts("ETH", chart_size={"width": "container", "height": 150})
         # Display charts
-        st.altair_chart(chart, use_container_width=True)
+        btc_chart_col, eth_chart_col = st.columns(2)
+        with btc_chart_col:
+            st.altair_chart(btc_charts, use_container_width=True)
+        with eth_chart_col:
+            st.altair_chart(eth_charts, use_container_width=True)
+        # Display iframes
         btc_col, eth_col = st.columns(2)
         with btc_col:
             iframe(btc.url, height=1200, scrolling=True)
@@ -249,12 +217,8 @@ if __name__ == "__main__":
             "Asset to view",
             ("BTC", "ETH"),
         )
-        charts = gen_charts(asset, chart_size={"width": "container", "height": 600})
-        st.altair_chart(charts.trading_vol_fig, use_container_width=True)
-        st.altair_chart(charts.net_flow_individual_fig, use_container_width=True)
-        st.altair_chart(charts.net_flow_total_fig, use_container_width=True)
-        st.altair_chart(charts.cum_flow_individual_net_fig, use_container_width=True)
-        st.altair_chart(charts.cum_flow_total_fig, use_container_width=True)
+        charts = asset_charts(asset, chart_size={"width": "container", "height": 300})
+        st.altair_chart(charts, use_container_width=True)
         iframe(fetch_asset(asset).url, height=1200, scrolling=True)
     with flow_tab:
         btc_flow, eth_flow = btc.etf_flow, eth.etf_flow