np.random.seed(0)
data = np.random.randn(10, 10)

"""
Explanation: Get Data
End of explanation
"""


col_sc = ColorScale()
grid_map = GridHeatMap(color=data, scales={'color': col_sc})

Figure(marks=[grid_map], padding_y=0.0)

grid_map.display_format = '.2f'

grid_map.font_style={'font-size': '12px', 'fill':'black', 'font-weight': 'bold'}

grid_map.display_format = None

"""
Explanation: Basic Heat map
End of explanation
"""


x_sc, y_sc, col_sc = OrdinalScale(), OrdinalScale(reverse=True), ColorScale()

grid_map = GridHeatMap(color=data, scales={'column': x_sc, 'row': y_sc, 'color': col_sc})
ax_x, ax_y = Axis(scale=x_sc), Axis(scale=y_sc, orientation='vertical')

Figure(marks=[grid_map], axes=[ax_x, ax_y], padding_y=0.0)

"""
Explanation: Heat map with axes
End of explanation
"""


x_sc, y_sc, col_sc = LinearScale(), LinearScale(reverse=True), ColorScale()
ax_x = Axis(scale=x_sc)
ax_y = Axis(scale=y_sc, orientation='vertical')

## The data along the rows is not uniform. Hence the 5th row(from top) of the map
## is twice the height of the remaining rows.
row_data = np.arange(10)
row_data[5:] = np.arange(6, 11)

column_data = np.arange(10, 20)

grid_map = GridHeatMap(row=row_data, column=column_data, color=data,
                       scales={'row': y_sc, 'column': x_sc, 'color': col_sc})
Figure(marks=[grid_map], padding_y=0.0, axes=[ax_x, ax_y])

print(row_data.shape)
print(column_data.shape)
print(data.shape)

"""
Explanation: Non Uniform Heat map
End of explanation
"""


x_sc, y_sc, col_sc = LinearScale(), LinearScale(reverse=True), ColorScale()
ax_x = Axis(scale=x_sc)
ax_y = Axis(scale=y_sc, orientation='vertical')

row_data = np.arange(11)
column_data = np.arange(10, 21)

grid_map = GridHeatMap(row=row_data, column=column_data, color=data,
                       scales={'row': y_sc, 'column': x_sc, 'color': col_sc})
Figure(marks=[grid_map], padding_y=0.0, axes=[ax_x, ax_y])

"""
Explanation: Alignment of the data with respect to the grid
For a N-by-N matrix, N+1 points along the row or the column are assumed to be end points.
End of explanation
"""


x_sc, y_sc, col_sc = LinearScale(), LinearScale(reverse=True, max=15), ColorScale()
ax_x = Axis(scale=x_sc)
ax_y = Axis(scale=y_sc, orientation='vertical')

row_data = np.arange(10)
column_data = np.arange(10, 20)

grid_map = GridHeatMap(row=row_data, column=column_data, color=data,
                       scales={'row': y_sc, 'column': x_sc, 'color': col_sc})
Figure(marks=[grid_map], padding_y=0.0, axes=[ax_x, ax_y])

"""
Explanation: By default, for N points along any dimension, data aligns to the start of the rectangles in the grid. 
The grid extends infinitely in the other direction. By default, the grid extends infintely
towards the bottom and the right.
End of explanation
"""


x_sc, y_sc, col_sc = LinearScale(), LinearScale(reverse=True, min=-5, max=15), ColorScale()
ax_x = Axis(scale=x_sc)
ax_y = Axis(scale=y_sc, orientation='vertical')

row_data = np.arange(10)
column_data = np.arange(10, 20)

grid_map = GridHeatMap(row=row_data, column=column_data, color=data,
                      scales={'row': y_sc, 'column': x_sc, 'color': col_sc},
                      row_align='end')
Figure(marks=[grid_map], padding_y=0.0, axes=[ax_x, ax_y])

"""
Explanation: By changing the row_align and column_align properties, the grid can extend in the opposite direction
End of explanation
"""


x_sc, y_sc, col_sc = LinearScale(), LinearScale(reverse=True, min=-5, max=15), ColorScale()
ax_x = Axis(scale=x_sc)
ax_y = Axis(scale=y_sc, orientation='vertical')

row_data = np.arange(9)
column_data = np.arange(10, 20)

grid_map = GridHeatMap(row=row_data, column=column_data, color=data, 
                       scales={'row': y_sc, 'column': x_sc, 'color': col_sc}, row_align='end')
Figure(marks=[grid_map], padding_y=0.0, axes=[ax_x, ax_y])

"""
Explanation: For N+1 points on any direction, the grid extends infintely in both directions
End of explanation
"""


col_sc = ColorScale()

grid_map = GridHeatMap(color=data, scales={'color': col_sc}, opacity=0.3, stroke='white')
Figure(marks=[grid_map], padding_y=0.0)

"""
Explanation: Changing opacity and stroke
End of explanation
"""


data = np.random.randn(10, 10)

col_sc = ColorScale()
grid_map = GridHeatMap(color=data, scales={'color': col_sc}, interactions={'click':'select'},
                      selected_style={'opacity': '1.0'}, unselected_style={'opacity': 0.4})

Figure(marks=[grid_map], padding_y=0.0)

"""
Explanation: Selections on the grid map
Selection on the GridHeatMap works similar to excel. Clicking on a cell selects the cell, and deselects the previous selection. Using the Ctrl key allows multiple cells to be selected, while the Shift key selects the range from the last cell in the selection to the current cell.
End of explanation
"""


grid_map.selected

"""
Explanation: The selected trait of a GridHeatMap contains a list of lists, with each sub-list containing the row and column index of a selected cell.
End of explanation
"""


import numpy as np
from IPython.display import display
from bqplot import *

np.random.seed(0)
data = np.random.randn(10, 10)
col_sc = ColorScale()
grid_map = GridHeatMap(color=data, scales={'color': col_sc}, 
                       interactions={'click': 'select'},
                       selected_style={'stroke': 'blue', 'stroke-width': 3})
figure=Figure(marks=[grid_map], padding_y=0.0)

from ipywidgets import Output
out = Output()
@out.capture()
def print_event(self, target):
    print(target)
    
# test
print_event(1, 'test output')
grid_map.on_element_click(print_event)

display(figure)
display(out)

"""
Explanation: Registering on_element_click event handler
End of explanation
"""


