Calendar Heatmap

Description:

Calendar Heatmap

The Calendar Heatmap component visualizes values over days in a calendar-like view, making it easy to identify daily patterns or anomalies.Note: Make sure to specify different attributes for date & count attributes

Allowed Parent Components:

1. Card Body

2. Col

3. Grid Child

4. Horizontal Section

5. Popup

6. Scroll Layout

7. Side Tab Item

8. Tab Item

9. Vertical Section

Allowed Child Components:

1. Popover

2. Pulse

3. Trigger Before Render

4. Trigger On Click

Properties

➤ From Date Range

Enter the number of days to go back for the range. e.g. -365 to show for last one year.

Allowed Values: Any number value

➤ To Date Range

Enter 0 to show till today or any positive number to show in the future.

Allowed Values: Any number value

➤ Show Month Labels

Check this property to show month labels on the top edge of the map.

Allowed Values: Yes/No

➤ Show Weekday Labels

Check this property to show week labels on the left edge of the map.

Allowed Values: Yes/No

➤ Show Out Of Range Days

Check this property to show days out of the specified range.

Allowed Values: Yes/No

➤ Horizontal

Check this property to render the map horizontally.

Allowed Values: Yes/No

➤ Max Width

Provide a numeric value to set the maximum width of the map in pixels.

Allowed Values: Any number value

➤ Use Existing Data Source

Choose this prop if you want to reuse a Data Source that was defined on some other component on this page or any of the parent abstract pages.

Allowed Values: Yes/No

➤ Data Source

Select a datasource from the list.

Allowed Values: Select a datasource from the list.

➤ Data Source Alias

Allowed Values: Free text field

➤ Default Where Clause

Allowed Values: Free text field

➤ Max Rows

Allowed Values: Any number value

➤ Order By Clause

e.g. #firstAttr#, #secondAttr# DESC

Allowed Values: Free text field

➤ Auto Query

Check this property to query the selected datasource on component render.

Allowed Values: Yes/No

➤ Execute Count SQL

Check this to execute count SQL to get the total number of rows in the database on a query. You can get this value by using the expression: #{DataStore.totalLength}

Allowed Values: Yes/No

➤ Execute Distinct SQL

Check this to execute distinct SQL to get the total number of distinct rows in the database on a query.

Allowed Values: Yes/No

➤ Use Server Timezone

Check this prop if this date should not be converted to browser's timezone. Also make sure the attribute type is set to 'String Date & Time 2' on the server side DataSource definition.

Allowed Values: Yes/No

➤ Date Attribute

Allowed Values: Attribute

➤ View Attribute

Allowed Values: Attribute

➤ Color1 Max Value

Enter the count value upto which the first color to be used in the heatmap.

Allowed Values: Any number value

➤ Color2 Max Value

Enter the count value upto which the second color to be used in the heatmap.

Allowed Values: Any number value

➤ Color3 Max Value

Enter the count value upto which the third color to be used in the heatmap.

Allowed Values: Any number value

➤ Color4 Max Value

Enter the count value upto which the last color to be used in the heatmap. Every other value higher than this will be shown as black

Allowed Values: Any number value

➤ Function

Select a function to do arithmetic operations on data.

Allowed Values:

1. SUM

2. COUNT

3. AVG

4. MAX

5. MIN

➤ On Click

Allowed Values: Controller Function