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)