Switching Modes in the Date Range Slicer

The Date Range Slicer in Wyn offers flexible interaction modes through two properties:

Allow Switch Date Mode
Allow Switch Display Mode

By default, both properties are set to False, which restricts end-users from changing the slicer modes at runtime. When enabled, users can switch between different date granularities and between single-date and date-range displays directly in the dashboard preview.

1. Allow Switch Date Mode

Purpose: Lets users change the Date Mode during dashboard preview.

When Enabled (True):

A date mode icon appears in the action bar.
Clicking the icon opens a pop-up allowing selection among available modes: Year, Quarter, Month, Date, DateTime.

When Disabled (False):

Only the mode selected in the designer is shown during preview.
No icon appears for switching.

Example

Designer setting: Date Mode = Date, Allow Switch Date Mode = False
→ Only "Date" is visible in preview.
Designer setting: Date Mode = Date, Allow Switch Date Mode = True
→ A selector icon appears to change the date mode.

2. Allow Switch Display Mode

Purpose: Lets users toggle between Date and Date Range views.

When Enabled (True):

A toggle icon appears in the action bar.
Clicking toggles between "Date" (single value) and "Date Range" (range of dates).

When Disabled (False):

The display mode selected in the designer is fixed during preview.
No toggle icon appears.

Example

Designer setting: Display Mode = Date Range, Allow Switch Display Mode = False
→ Only "Date Range" is shown in preview.
Designer setting: Display Mode = Date Range, Allow Switch Display Mode = True
→ Toggle appears to switch between "Date" and "Date Range".

3. Date Mode Conversion Rules

When switching between date modes, existing values are auto-converted based on defined rules to preserve intent. These rules differ depending on the selected Display Mode.

A. Display Mode: Date

From → To	Year	Quarter	Month	Date	DateTime
Year	–	1st quarter of year (2022 → 2022 Q1)	1st month (2022 → 2022 Jan)	1st day (2022 → 2022/01/01)	1st second (2022 → 2022/01/01 00:00:00)
Quarter	Year of quarter	–	1st month of quarter	1st date of quarter	1st second of quarter
Month	Year of month	Quarter of month	–	1st date of month	1st second of month
Date	Year	Quarter	Month	–	1st second of day
DateTime	Year	Quarter	Month	Date	–

B. Display Mode: Date Range

When converting ranges, start and end values are adjusted to fit the target granularity.

From → To	Year	Quarter	Month	Date	DateTime
Year	–	Full range of quarters	Full range of months	Full range of days	Full range of seconds
Quarter	Year of start & end quarters	–	Full range of months	Full range of days	Full range of seconds
Month	Year of start & end months	Quarter of start & end months	–	Full range of days	Full range of seconds
Date	Year of start & end dates	Quarter of start & end dates	Month of start & end dates	–	Full range of seconds
DateTime	Year of start & end datetimes	Quarter of start & end datetimes	Month of start & end datetimes	Date of start & end datetimes	–

Example

Current Date Mode: Year
Selected Value: 2019 – 2022
Switched to: Month
Result: 2019 Jan – 2022 Dec

4. Quick Ranges and Custom Ranges

When using Display Mode: Date Range, the preview includes:

Quick Ranges: Predefined selections such as "Last Month", "This Quarter".
- Can be set in Designer via the Inspector → Add Quick Range.
Custom Range: Allows end-users to manually define a start and end date based on selected date units.

5. Inner Border Customization

The Date Range Slicer supports inner border styling.

Inner Border Color: Set via color picker.
Inner Border Size: Range from 1 to 100 (default: 1).

Applies To:

Date Range Slicer
Multi-dimensional Slicer
Multi-dimensional Dropdown Slicer

Example:

Color: Blue
Size: 8