diff --git a/notebooks/utils.py b/notebooks/utils.py
index 256392d..c777b66 100644
--- a/notebooks/utils.py
+++ b/notebooks/utils.py
@@ -49,9 +49,9 @@ def __init__(self, start_date=datetime(2018, 1, 1), end_date=datetime(2023, 12,
index=(0, 11), # Default to a 11-month interval
orientation="horizontal",
continuous_update=False,
- readout=True,
+ readout=False,
behaviour="drag",
- layout={"width": "80%", "height": "100px", "margin": "0 auto 0 auto"},
+ layout={"width": "90%", "height": "100px", "margin": "0 auto 0 auto"},
style={
"handle_color": "dodgerblue",
},
@@ -61,6 +61,14 @@ def __init__(self, start_date=datetime(2018, 1, 1), end_date=datetime(2023, 12,
pd.to_datetime(start_date) + pd.DateOffset(months=12) - timedelta(days=1),
]
+ self.selected_range_widget = widgets.HTML(
+ value=self._get_selected_range_html(),
+ layout={"width": "100%", "margin": "0 auto 0 auto"},
+ )
+
+ def _get_selected_range_html(self):
+ return f"
Selected range: {self.selected_range[0].strftime('%d %b %Y')} to {self.selected_range[1].strftime('%d %b %Y')}
"
+
def on_slider_change(self, change):
start, end = change["new"]
# keep the interval fixed
@@ -69,6 +77,7 @@ def on_slider_change(self, change):
end = start + pd.DateOffset(months=11)
self.interval_slider.value = (start, end)
self.selected_range = (start, end + pd.DateOffset(months=1) - timedelta(days=1))
+ self.selected_range_widget.value = self._get_selected_range_html()
def show_slider(self):
self.interval_slider.observe(self.on_slider_change, names="value")
@@ -86,7 +95,7 @@ def show_slider(self):
# Generate a list of dates for the ticks every 3 months
tick_dates = pd.date_range(
- self.start_date, self.end_date + pd.DateOffset(months=3), freq="5ME"
+ self.start_date, self.end_date + pd.DateOffset(months=3), freq="4ME"
)
# Create a list of tick labels in the format "Aug 2023"
@@ -99,19 +108,25 @@ def show_slider(self):
]
# Create a text widget to display the tick labels with calculated positions
- tick_widget_html = ""
+ tick_widget_html = "
"
for label, position in zip(tick_labels, tick_positions):
tick_widget_html += f"
{label}
"
tick_widget_html += "
"
tick_widget = widgets.HTML(
- value=tick_widget_html, layout={"width": "80%", "margin": "0 auto 0 auto"}
+ value=tick_widget_html,
+ layout={"width": "100%", "margin": "0 auto 100 auto"},
)
# Arrange the text widget, interval slider, and tick widget using VBox
vbox_with_ticks = widgets.VBox(
- [descr_widget, self.interval_slider, tick_widget],
- layout={"height": "200px"},
+ [
+ descr_widget,
+ self.interval_slider,
+ tick_widget,
+ self.selected_range_widget,
+ ],
+ layout={"height": "220px"},
)
display(vbox_with_ticks)