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:
Card Body
Col
Grid Child
Horizontal Section
Popup
Scroll Layout
Side Tab Item
Tab Item
Vertical Section
Allowed Child Components:
Popover
Pulse
Trigger Before Render
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:
SUM
COUNT
AVG
MAX
MIN
➤ On Click
Allowed Values: Controller Function
Last updated