[Feat] Enable temporal selector DatePicker

vizro-core/examples/_dev/app.py

@@ -1,10 +1,14 @@
 """Rough example used by developers."""
 
+from datetime import datetime
+
+import pandas as pd
 import vizro.models as vm
 import vizro.plotly.express as px
 from vizro import Vizro
 from vizro.models._components.form._text_area import TextArea
 from vizro.models._components.form._user_input import UserInput
+from vizro.tables import dash_data_table
 
 iris = px.data.iris()
 
@@ -30,7 +34,62 @@
     ],
 )
 
-dashboard = vm.Dashboard(pages=[page])
+# CREATE FAKE DATA
+column = [1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4]
+row = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5]
+value = [1, 7, 3, 5, 2, 10, 9, 1, 3, 7, 5, 8, 2, 9, 1, 2, 7, 5, 3, 2]
+group = ["A", "B", "C", "D", "E", "E", "D", "C", "B", "A", "A", "E", "C", "B", "D", "A", "D", "B", "C", "E"]
+date_time = [
+    "2023-01-01",
+    "2023-02-02",
+    "2023-03-03",
+    "2023-04-04",
+    "2023-05-05",
+    "2023-06-06",
+    "2023-07-07",
+    "2023-08-08",
+    "2023-09-09",
+    "2023-10-10",
+    "2023-11-11",
+    "2023-12-12",
+    "2024-01-01",
+    "2024-02-02",
+    "2024-03-03",
+    "2024-04-04",
+    "2024-05-05",
+    "2024-06-06",
+    "2024-07-07",
+    "2024-08-08",
+]
+
+data = pd.DataFrame()
+
+date_time_new = [datetime.strptime(date, "%Y-%m-%d").date() for date in date_time]
+
+data["COLUMN1"] = column
+data["ROW1"] = row
+data["VALUE"] = value
+data["GROUP"] = group
+data["DATE_TIME"] = date_time_new
+
+page_1 = vm.Page(
+    title="Datepicker page",
+    components=[vm.Table(id="table", figure=dash_data_table(data_frame=data))],
+    controls=[
+        vm.Filter(
+            column="DATE_TIME",
+            selector=vm.DateRangePicker(
+                title="Pick a date",
+                min_date="2023-01-01",
+                value=["2024-01-01", "2024-03-01"],
+                max_date="2024-07-07",
+            ),
+            # selector=vm.DatePicker(title="Pick a date", min_date='2023-01-01', value=['2024-01-01']),
+        )
+    ],
+)
+
+dashboard = vm.Dashboard(pages=[page, page_1])
 
 if __name__ == "__main__":
     Vizro().build(dashboard).run()

vizro-core/src/vizro/models/__init__.py

@@ -2,7 +2,7 @@
 from ._base import VizroBaseModel  # noqa: I001
 from ._action import Action
 from ._components import Card, Container, Graph, Table, Tabs
-from ._components.form import Button, Checklist, Dropdown, RadioItems, RangeSlider, Slider
+from ._components.form import Button, Checklist, Dropdown, RadioItems, RangeSlider, Slider, DateRangePicker, DatePicker
 from ._controls import Filter, Parameter
 from ._navigation.accordion import Accordion
 from ._navigation.navigation import Navigation
@@ -23,13 +23,15 @@
     Graph=Graph,
     Parameter=Parameter,
     Table=Table,
+    DateRangePicker=DateRangePicker,
     Tabs=Tabs,
+    DatePicker=DatePicker,
 )
 Navigation.update_forward_refs(Accordion=Accordion, NavBar=NavBar, NavLink=NavLink)
 Dashboard.update_forward_refs(Page=Page, Navigation=Navigation)
 NavBar.update_forward_refs(NavLink=NavLink)
 NavLink.update_forward_refs(Accordion=Accordion)
-
+Parameter.update_forward_refs(DateRangePicker=DateRangePicker, DatePicker=DatePicker)
 # Please keep alphabetically ordered
 __all__ = [
     "Accordion",
@@ -39,6 +41,8 @@
     "Container",
     "Checklist",
     "Dashboard",
+    "DatePicker",
+    "DateRangePicker",
     "Dropdown",
     "Filter",
     "Graph",

vizro-core/src/vizro/models/_components/form/__init__.py

@@ -1,9 +1,11 @@
 from vizro.models._components.button import Button
 from vizro.models._components.form.checklist import Checklist
+from vizro.models._components.form.date_picker import DatePicker
+from vizro.models._components.form.date_range_picker import DateRangePicker
 from vizro.models._components.form.dropdown import Dropdown
 from vizro.models._components.form.radio_items import RadioItems
 from vizro.models._components.form.range_slider import RangeSlider
 from vizro.models._components.form.slider import Slider
 
 # Please keep alphabetically ordered
-__all__ = ["Button", "Checklist", "Dropdown", "RadioItems", "RangeSlider", "Slider"]
+__all__ = ["Button", "Checklist", "DatePicker", "DateRangePicker", "Dropdown", "RadioItems", "RangeSlider", "Slider"]

vizro-core/src/vizro/models/_components/form/_form_utils.py

@@ -69,7 +69,7 @@ def validate_max(cls, max, values):
     return max
 
 
-def validate_slider_value(cls, value, values):
+def validate_range_value(cls, value, values):
     """Reusable validator for the "value" argument for sliders."""
     if value is None:
         return value

vizro-core/src/vizro/models/_components/form/date_picker.py

@@ -0,0 +1,66 @@
+from typing import List, Literal, Optional
+
+import dash_mantine_components as dmc
+from dash import html
+
+try:
+    from pydantic.v1 import Field, PrivateAttr, validator
+except ImportError:  # pragma: no cov
+    from pydantic import Field, PrivateAttr, validator
+
+
+from datetime import date
+
+from vizro.models import Action, VizroBaseModel
+from vizro.models._action._actions_chain import _action_validator_factory
+from vizro.models._components.form._form_utils import validate_max, validate_range_value
+
+
+class DatePicker(VizroBaseModel):
+    """Temporal single-selector `DatePicker`.
+
+    Can be provided to [`Filter`][vizro.models.Filter] or [`Parameter`][vizro.models.Parameter].
+    Based on the underlying [`dmc.DatePicker`](https://www.dash-mantine-components.com/components/datepicker).
+
+    Args:
+        type (Literal["date_picker"]): Defaults to `"date_picker"`.
+        min (Optional[date]): Start date for date picker. Defaults to `None`.
+        max (Optional[date]): End date for date picker. Defaults to `None`.
+        value (List[date]): Default date value for date picker. Defaults to `None`.
+        title (str): Title to be displayed. Defaults to `""`.
+        actions (List[Action]): See [`Action`][vizro.models.Action]. Defaults to `[]`.
+
+    """
+
+    type: Literal["date_picker"] = "date_picker"
+    min: Optional[date] = Field(None, description="Start date value for date picker.")
+    max: Optional[date] = Field(None, description="End date value for date picker.")
+    value: Optional[date] = Field(None, description="Default date value for date picker")
+    title: str = Field("", description="Title to be displayed.")
+
+    actions: List[Action] = []
+
+    _input_property: str = PrivateAttr("value")
+    _set_actions = _action_validator_factory("value")
+
+    # Re-used validators
+    _validate_value = validator("value", allow_reuse=True)(validate_range_value)
+    _validate_max_date = validator("max", allow_reuse=True)(validate_max)
+
+    def build(self):
+        init_value = self.value or self.min
+        return html.Div(
+            [
+                html.P(self.title) if self.title else None,
+                dmc.DatePicker(
+                    id=self.id,
+                    minDate=self.min,
+                    value=init_value,
+                    maxDate=self.max,
+                    persistence=True,
+                    persistence_type="session",
+                ),
+            ],
+            className="selector_container",
+            id=f"{self.id}_outer",
+        )

vizro-core/src/vizro/models/_components/form/date_range_picker.py

@@ -0,0 +1,71 @@
+from typing import List, Literal, Optional
+
+import dash_mantine_components as dmc
+from dash import html
+
+try:
+    from pydantic.v1 import Field, PrivateAttr, validator
+except ImportError:  # pragma: no cov
+    from pydantic import Field, PrivateAttr, validator
+
+
+from datetime import date
+
+from vizro.models import Action, VizroBaseModel
+from vizro.models._action._actions_chain import _action_validator_factory
+from vizro.models._components.form._form_utils import validate_max, validate_range_value
+
+
+class DateRangePicker(VizroBaseModel):
+    """Temporal multi-selector `DateRangePicker`.
+
+    Can be provided to [`Filter`][vizro.models.Filter] or
+    [`Parameter`][vizro.models.Parameter]. Based on the underlying
+    [`dmc.DateRangePicker`](https://www.dash-mantine-components.com/components/datepicker#daterangepicker).
+
+    Args:
+        type (Literal["date_range_picker"]): Defaults to `"date_range_picker"`.
+        min (Optional[date]): Start date for date picker. Defaults to `None`.
+        max (Optional[date]): End date for date picker. Defaults to `None`.
+        value (Optional[List[date]]):
+            Default start and end date for date picker. Must be 2 items. Defaults to `[min, max]`.
+        title (str): Title to be displayed. Defaults to `""`.
+        actions (List[Action]): See [`Action`][vizro.models.Action]. Defaults to `[]`.
+
+    """
+
+    type: Literal["date_range_picker"] = "date_range_picker"
+    min: Optional[date] = Field(None, description="Start date value for date range picker.")
+    max: Optional[date] = Field(None, description="End date value for date range picker.")
+    value: Optional[List[date]] = Field(
+        [], description="Default start and end date for date picker.", min_items=2, max_items=2
+    )
+    title: str = Field("", description="Title to be displayed.")
+
+    actions: List[Action] = []
+
+    _input_property: str = PrivateAttr("value")
+    _set_actions = _action_validator_factory("value")
+
+    # Re-used validators
+    _validate_value = validator("value", allow_reuse=True)(validate_range_value)
+    _validate_max = validator("max", allow_reuse=True)(validate_max)
+
+    def build(self):
+        init_value = self.value or [self.min, self.max]  # type: ignore[list-item]
+        return html.Div(
+            [
+                html.P(self.title) if self.title else None,
+                dmc.DateRangePicker(
+                    id=self.id,
+                    minDate=self.min,
+                    value=init_value,
+                    allowSingleDateInRange=False,
+                    maxDate=self.max,
+                    persistence=True,
+                    persistence_type="session",
+                ),
+            ],
+            className="selector_container",
+            id=f"{self.id}_outer",
+        )

vizro-core/src/vizro/models/_components/form/range_slider.py

@@ -12,7 +12,7 @@
 from vizro.models._components.form._form_utils import (
     set_default_marks,
     validate_max,
-    validate_slider_value,
+    validate_range_value,
     validate_step,
 )
 from vizro.models._models_utils import _log_call
@@ -53,7 +53,7 @@ class RangeSlider(VizroBaseModel):
 
     # Re-used validators
     _validate_max = validator("max", allow_reuse=True)(validate_max)
-    _validate_value = validator("value", allow_reuse=True)(validate_slider_value)
+    _validate_value = validator("value", allow_reuse=True)(validate_range_value)
     _validate_step = validator("step", allow_reuse=True)(validate_step)
     _set_default_marks = validator("marks", allow_reuse=True, always=True)(set_default_marks)
     _set_actions = _action_validator_factory("value")

vizro-core/src/vizro/models/_components/form/slider.py

@@ -12,7 +12,7 @@
 from vizro.models._components.form._form_utils import (
     set_default_marks,
     validate_max,
-    validate_slider_value,
+    validate_range_value,
     validate_step,
 )
 from vizro.models._models_utils import _log_call
@@ -51,7 +51,7 @@ class Slider(VizroBaseModel):
 
     # Re-used validators
     _validate_max = validator("max", allow_reuse=True)(validate_max)
-    _validate_value = validator("value", allow_reuse=True)(validate_slider_value)
+    _validate_value = validator("value", allow_reuse=True)(validate_range_value)
     _validate_step = validator("step", allow_reuse=True)(validate_step)
     _set_default_marks = validator("marks", allow_reuse=True, always=True)(set_default_marks)
     _set_actions = _action_validator_factory("value")