How to use date filtering

Calender

1. Overview

1.1 Function Introduction

Calender is to provide options in the form of dates in modes including individual, range and comparison modes. Calender can be bound to any query of a date class field, the field must be a date expression data or timestamp data, such as year quarter, year month, year week, day, 2021-10-1 00:00:00.

1.2 Application scenario

For example, if you have the profit data of each product in the past two years from 2021 to 2022, and you want to display the "Profit" data of each product on January 1, 2021 by default when you open the dashboard, you can use the date filter.

2. Step

1) Create a new dashboard, create a table, bind "Product", "Profit", "Day_Time", switch to detail mode, as shown below:

2)Add a date filter component, drag and drop the date filter component from the component area to the canvas.

3)Bind data to the filter component, select the component, drag and drop the "Full Day_Time" column to the binding area.

For more information about binding data, please refer toComponent Operation and Setting > Bind Fields, Remove Fields.

4) Edit the filter component with the following settings:

Click Setting on the right side to set the operation mode: Select "Single Mode" in the drop-down box.

Set the default value: In the drop-down box, select "Last Year" and "The 1st Day".

(5) Preview dashboard, select the profit of each product on January 1, 2021 by default in the Day_Trading Time date filter. You can also filter by other dates, filter reference and display data as follows:

View the profit for each product on February 1, 2022, click to switch to the next month and then click 1.

View the profit of each product on February 2, 2022, click to switch to the next year, and then click 2.

3. Function

3.1 Layout

On the right side Setting > Layout you can set the component layout.

[Calender] is presented in the form of a calendar, as shown below.

[Dropdown List] When the user selects a date, the date filter list will be automatically closed. And the current date is displayed, as shown below.

3.2 Action Mode

On the right side Setting > Action Mode you can set date mode.

The modes include single mode, comparison mode and range mode.

Only one date and time value can be selected in single mode.

Comparison mode and range mode are displayed as the left default value and the right default value, the specific display is consistent with the default value option of the single mode, and the default value can be customized.

For calender effect of different modes, please refer to the following pictures.

[Default Value] When the data bound to the date filter component contains the set default value, you can set the default value directly in the properties and apply it to the component.

The default value setting is divided into two parts, the first drop-down list shows the approximate time data and the second drop-down list shows the specific time data. Binding different types of time data, the two drop-down lists display data differently.

Bind Field	Previous Dropdown List	Next Dropdown List
Year Quarter	General	This Quarter, Last Quarter, Maximum
	This Year	The first quarter ~ The fouth Quarter
	Last Year	The first quarter ~ The fouth Quarter
Year Month	General	This Month，Last Month, Maximum
	This Year	The 1st month ~ The 12th month
	Last Year	The 1st month ~ The 12th month
Year Week	General	This week, Last week, Maximum
	This Year	The 1st week ~ The 53th Week, The Last Week
	Last Year	The 1st week ~ The 53th Week, The Last Week
Day	This Month	The 1st Day ~ The 31th Day,The Last Day
	Last Month	The 1st Day ~ The 31th Day,The Last Day
	General	Today, Yesterday, The Day before Yesterday
	This Year	The 1st Day,The last Day
	Last Year	The 1st Day,The last Day
	This Quarter	The 1st Day,The last Day
	Last Quarter	The 1st Day,The last Day
Date/Timestamp	General	Today, Yesterday, The Day before Yesterday
	This Year	The 1st Day,The last Day
	Last Year	The 1st Day,The last Day
	This Quarter	The 1st Day,The last Day
	Last Quarter	The 1st Day,The last Day

The date selection style varies for different types of fields, refer to the table below.

Date Type

Date Style

Year Quarter

Year Month

Year Week, Day, Date, Timestamp

3.3 Option

[Required] please refer to Drop-down List Filter > Function> Option.

[Unselected Value Tip] The layout is dropdown list, when the value is not selected, the user can customize the tip, the default is "Please select...".

3.4 Format

You can also set the style of the component in Format on the right side, including text, border, background color, alpha, etc. For details, please refer to Component Operation and Setting > Format.

4. Parameter Configuration

You can configure the parameters of calender in bi.properties to control whether each week starts from Sunday or Monday.

Starts on Sunday: monday.first.day.of.week=fasle

Starts on Monday: monday.first.day.of.week=true