Alignment



In [ ]:

    
from IPython.display import Image
from beakerx import *
# 1 setAlignmentProviderForColumn defaults
colNames = ["string column", "integer column", "double column","time column", "boolean column"]
row1 = ["0", 0, 0, "1900-01-28 11:00:00", 0]
row2 = ["June", 22, 33, "2004-02-28 12:00:00", True]
row3 = ["July", 200, 300, "2014-03-28 13:00:00", False]
row4 = ["August", 222, 333, "2024-04-28 14:00:00", True]
table1 = TableDisplay(pd.DataFrame([row1, row2, row3, row4], columns=colNames), colNames, ['string', 'integer', 'double', 'time', 'boolean'])
table1.setStringFormatForTimes(TimeUnit.DAYS)
table1



In [ ]:

    
# expected result of cell 1
Image("../../resources/img/python/tableAPI/cell1_case1.png")



In [ ]:

    
# 1_2 setAlignmentProviderForColumn
colNames = ["string column", "integer column", "double column","time column", "boolean column"]
row1 = ["0", 0, 0, "1900-01-28 11:00:00", 0]
row2 = ["June", 22, 33, "2004-02-28 12:00:00", True]
row3 = ["July", 200, 300, "2014-03-28 13:00:00", False]
row4 = ["August", 222, 333, "2024-04-28 14:00:00", True]
table1_2 = TableDisplay(pd.DataFrame([row1, row2, row3, row4], columns=colNames), colNames, ['string', 'integer', 'double', 'time', 'boolean'])
table1_2.setStringFormatForTimes(TimeUnit.DAYS)
table1_2.setAlignmentProviderForColumn(colNames[0], TableDisplayAlignmentProvider.CENTER_ALIGNMENT)
table1_2.setAlignmentProviderForColumn(colNames[1], TableDisplayAlignmentProvider.CENTER_ALIGNMENT)
table1_2.setAlignmentProviderForColumn(colNames[2], TableDisplayAlignmentProvider.CENTER_ALIGNMENT)
table1_2.setAlignmentProviderForColumn(colNames[3], TableDisplayAlignmentProvider.LEFT_ALIGNMENT)
table1_2.setAlignmentProviderForColumn(colNames[4], TableDisplayAlignmentProvider.RIGHT_ALIGNMENT)
table1_2



In [ ]:

    
# expected result of cell 1_2
Image("../../resources/img/python/tableAPI/cell1_case2.png")



In [ ]:

    
# 2 setAlignmentProviderForType
colNames = ["string column", "integer column", "double column","time column", "boolean column"]
row1 = ["0", 0, 0, "1900-01-28 11:00:00", 0]
row2 = ["June", 22, 33, "2004-02-28 12:00:00", True]
row3 = ["July", 200, 300, "2014-03-28 13:00:00", False]
row4 = ["August", 222, 333, "2024-04-28 14:00:00", True]
table2 = TableDisplay(pd.DataFrame([row1, row2, row3, row4], columns=colNames), colNames, ['string', 'integer', 'double', 'time', 'boolean'])
table2.setStringFormatForTimes(TimeUnit.DAYS)
table2.setAlignmentProviderForType(ColumnType.String, TableDisplayAlignmentProvider.CENTER_ALIGNMENT)
table2.setAlignmentProviderForType(ColumnType.Integer, TableDisplayAlignmentProvider.CENTER_ALIGNMENT)
table2.setAlignmentProviderForType(ColumnType.Double, TableDisplayAlignmentProvider.CENTER_ALIGNMENT)
table2.setAlignmentProviderForType(ColumnType.Time, TableDisplayAlignmentProvider.LEFT_ALIGNMENT)
table2.setAlignmentProviderForType(ColumnType.Boolean, TableDisplayAlignmentProvider.RIGHT_ALIGNMENT)
table2



In [ ]:

    
# expected result of cell 2
Image("../../resources/img/python/tableAPI/cell2_case1.png")

Bar Charts Renderer



In [ ]:

    
# 3
table3 = TableDisplay(pd.read_csv('../../resources/data/interest-rates-small.csv'))
table3.setRendererForType(ColumnType.Double, TableDisplayCellRenderer.getDataBarsRenderer(True))
#use the false parameter to hide value
table3.setRendererForColumn("y10", TableDisplayCellRenderer.getDataBarsRenderer(False))
table3



In [ ]:

    
# expected result of cell 3
Image("../../resources/img/python/tableAPI/cell3_case1.png")

Formatting



In [ ]:

    
# 4
df4 = pd.read_csv('../../resources/data/interest-rates-small.csv')
df4['time'] = df4['time'].str.slice(0,19).astype('datetime64[ns]')
table4 = TableDisplay(df4)
table4.setStringFormatForTimes(TimeUnit.DAYS)
table4.setStringFormatForType(ColumnType.Double, TableDisplayStringFormat.getDecimalFormat(2,3))
table4.setStringFormatForColumn("m3", TableDisplayStringFormat.getDecimalFormat(0, 0))
table4



In [ ]:

    
# expected result of cell 4
Image("../../resources/img/python/tableAPI/cell4_case1.png")

HTML format

HTML format allows markup and styling of the cell's content. Interactive JavaScript is not supported however.



In [ ]:

    
# 5
table5 = TableDisplay({'x': '<em style="color:red">italic red</em>',
                      'y': '<b style="color:blue">bold blue</b>',
                      'z': 'strings without markup work fine too'})
table5.setStringFormatForColumn("Value", TableDisplayStringFormat.getHTMLFormat())
table5



In [ ]:

    
# expected result of cell 5
Image("../../resources/img/python/tableAPI/cell5_case1.png")

Column Visibility and Placement



In [ ]:

    
# 6
table6 = TableDisplay(pd.read_csv('../../resources/data/interest-rates-small.csv'))
#freeze a column
table6.setColumnFrozen("y1", True)
#hide a column
table6.setColumnVisible("y30", False)
table6



In [ ]:

    
# expected result of cell 6
Image("../../resources/img/python/tableAPI/cell6_case1.png")



In [ ]:

    
# 7
table7 = TableDisplay(pd.read_csv('../../resources/data/interest-rates-small.csv'))
#Columns in the list will be shown in the provided order. Columns not in the list will be hidden.
table7.setColumnOrder(["m3", "y1", "y10", "time", "y2"])
table7



In [ ]:

    
# expected result of cell 7
Image("../../resources/img/python/tableAPI/cell7_case1.png")

HeatmapHighlighter



In [ ]:

    
# 8 highlighter for row
table8 = TableDisplay(pd.read_csv('../../resources/data/interest-rates-small.csv'))
table8.addCellHighlighter(TableDisplayCellHighlighter.getHeatmapHighlighter("m3", TableDisplayCellHighlighter.FULL_ROW))
table8



In [ ]:

    
# expected result of cell 8
Image("../../resources/img/python/tableAPI/cell8_case1.png")



In [ ]:

    
# 9 highlighter for column
table9 = TableDisplay(pd.read_csv("../../resources/data/interest-rates-small.csv"))
table9.addCellHighlighter(TableDisplayCellHighlighter.getHeatmapHighlighter("m6", TableDisplayCellHighlighter.SINGLE_COLUMN, 6, 8, Color.BLACK, Color.PINK))
table9.addCellHighlighter(ThreeColorHeatmapHighlighter("y1", TableDisplayCellHighlighter.SINGLE_COLUMN, 4, 6, 8, Color(247,106,106), Color(239,218,82), Color(100,189,122)))
table9



In [ ]:

    
# expected result of cell 9
Image("../../resources/img/python/tableAPI/cell9_case1.png")



In [ ]:

    
# 9_2
table9.removeAllCellHighlighters()



In [ ]:

    
# expected result of cell 9_2
Image("../../resources/img/python/tableAPI/cell9_case2.png")



In [ ]:

    
# 9_3 set HeatmapHighlighter for type
colNames = ["xxx column", "integer column", "double column", "number column"]
row1 = [6, 6, 0.5, 6]
row2 = [3, 3, 2.0, 3]
row3 = [2, 2, 3.0, 2]
row4 = [0, 0, 6.0, 0]
table93 = TableDisplay(pd.DataFrame([row1, row2, row3, row4], columns=colNames), colNames, ['xxx type', 'integer', 'double', 'number'])
table93.addCellHighlighter(TableDisplayCellHighlighter.getHeatmapHighlighter(colNames[0], TableDisplayCellHighlighter.SINGLE_COLUMN))
table93.addCellHighlighter(TableDisplayCellHighlighter.getHeatmapHighlighter(colNames[1], TableDisplayCellHighlighter.SINGLE_COLUMN))
table93.addCellHighlighter(TableDisplayCellHighlighter.getHeatmapHighlighter(colNames[2], TableDisplayCellHighlighter.SINGLE_COLUMN))
table93.addCellHighlighter(TableDisplayCellHighlighter.getHeatmapHighlighter(colNames[3], TableDisplayCellHighlighter.SINGLE_COLUMN))
table93



In [ ]:

    
# expected result of cell 9_3
Image("../../resources/img/python/tableAPI/cell9_case3.png")

UniqueEntriesHighlighter



In [ ]:

    
# 10
table10 = TableDisplay(pd.read_csv('../../resources/data/interest-rates-small.csv'))
table10.addCellHighlighter(TableDisplayCellHighlighter.getUniqueEntriesHighlighter("m3"))
table10



In [ ]:

    
# expected result of cell 10
Image("../../resources/img/python/tableAPI/cell10_case1.png")



In [ ]:

    
# 11
table11 = TableDisplay(pd.read_csv('../../resources/data/interest-rates-small.csv'))
table11.addCellHighlighter(TableDisplayCellHighlighter.getHeatmapHighlighter("m3", HighlightStyle.SINGLE_COLUMN))
table11.addCellHighlighter(TableDisplayCellHighlighter.getHeatmapHighlighter("y10", TableDisplayCellHighlighter.SINGLE_COLUMN))
table11.addCellHighlighter(TableDisplayCellHighlighter.getUniqueEntriesHighlighter("m6", HighlightStyle.SINGLE_COLUMN))
table11



In [ ]:

    
# expected result of cell 11
Image("../../resources/img/python/tableAPI/cell11_case1.png")

ColorProvider



In [ ]:

    
# 14
mapListColorProvider = [
    {"firstCol":1, "secondCol":2, "thirdCol":3},
    {"firstCol":4, "secondCol":5, "thirdCol":6},
    {"firstCol":9, "secondCol":8, "thirdCol":9}
]
table14 = TableDisplay(mapListColorProvider)

colors = [
    [Color.LIGHT_GRAY, Color.GRAY, Color.RED],
    [Color.DARK_GREEN, Color.ORANGE, Color.RED],
    [Color.MAGENTA, Color.BLUE, Color.BLACK]
]
def color_provider(row, column, table):
    return colors[row][column]

table14.setFontColorProvider(color_provider)
table14



In [ ]:

    
# expected result of cell 14
Image("../../resources/img/python/tableAPI/cell14_case1.png")



In [ ]:

    
# 15
table15 = TableDisplay(pd.read_csv('../../resources/data/interest-rates-small.csv'))

def config_tooltip(row, column, table):
      return "The value is: " + str(table.values[row][column])

table15.setToolTip(config_tooltip)
table15

Image format



In [ ]:

    
# 16_1
colNames = ["Peacock", "Morpho", "Swallowtail"]
row1 = ["../../resources/img/butterfly1.jpg", "../../resources/img/butterfly2.jpg", "../../resources/img/butterfly3.jpg"]
table16_1 = TableDisplay(pd.DataFrame([row1], columns=colNames), colNames)
table16_1.setStringFormatForColumn("Peacock", TableDisplayStringFormat.getImageFormat())
table16_1.setStringFormatForColumn('Morpho', TableDisplayStringFormat.getImageFormat());
table16_1



In [ ]:

    
# expected result of cell 16_1
Image("../../resources/img/python/tableAPI/cell16_case1.png")



In [ ]:

    
# 16_2
table16_2 = TableDisplay({"up": "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgaGVpZ2h0PSI2NCIgd2lkdGg9IjY0IiB2aWV3Qm94PSIwIDAgNjQgNjQiPg0KICA8cG9seWdvbiBmaWxsPSIjNmJhMmM3IiBwb2ludHM9IjMwLDQgNCw2MCA2MCw2MCI+PC9wb2x5Z29uPg0KPC9zdmc+DQo=",
                        "down": "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIGhlaWdodD0iNjQiIHdpZHRoPSI2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij4KICA8cG9seWdvbiBmaWxsPSIjNmJhMmM3IiBwb2ludHM9IjMwLDYwIDYwLDQgNCw0Ij48L3BvbHlnb24+Cjwvc3ZnPgo="})
table16_2.setStringFormatForColumn("Value", TableDisplayStringFormat.getImageFormat())
table16_2



In [ ]:

    
# expected result of cell 16_2
Image("../../resources/img/python/tableAPI/cell16_case2.png")

Seamless Update



In [ ]:

    
# 19
colNames = ["a", "b", "c"]
row1 = [1, 2, 3]
row2 = [4, 5, 6]
row3 = [7, 8, 9]
table19 = TableDisplay(pd.DataFrame([row1, row2, row3], columns=colNames), colNames)
table19



In [ ]:

    
table19.values[0][0] = 99
table19.sendModel()



In [ ]:

    
# expected result of cell 19
Image("../../resources/img/python/tableAPI/cell19_case1.png")



In [ ]:

    
# expected result of cell 19 after sendModel()
Image("../../resources/img/python/tableAPI/cell19_case2.png")

Recognized Formats



In [ ]:

    
# 40 (Array of Integers parameter)
from beakerx import *

TableDisplay({"a":100, "b":200, "c":300})



In [ ]:

    
# expected result of cell 40
Image("../../resources/img/python/tableAPI/cell40_case1.png")



In [ ]:

    
# 41 (2D Array of Integers parameter)
TableDisplay([{"a":1}, {"a":10, "b":20}])



In [ ]:

    
# expected result of cell 41
Image("../../resources/img/python/tableAPI/cell41_case1.png")



In [ ]:

    
# 42 (Array of Decimals parameter)
TableDisplay({"a":1/10, "b":1/20, "c":0.33})



In [ ]:

    
# expected result of cell 42
Image("../../resources/img/python/tableAPI/cell42_case1.png")



In [ ]:

    
# 43 (2D Array of Decimals parameter)
TableDisplay([{"a":1/10}, {"a":1/100, "b":3.12345}])



In [ ]:

    
# expected result of cell 43
Image("../../resources/img/python/tableAPI/cell43_case1.png")



In [ ]:

    
# 44 (Array of Strings parameter)
TableDisplay({"a":'string aaa', "b":'string bbb', "c":'string ccc'})



In [ ]:

    
# expected result of cell 44
Image("../../resources/img/python/tableAPI/cell44_case1.png")



In [ ]:

    
# 45 (2D Array of Strings parameter)
TableDisplay([{"a":'a'}, {"a":'1a', "b":'2b'}])



In [ ]:

    
# expected result of cell 45
Image("../../resources/img/python/tableAPI/cell45_case1.png")



In [ ]:

    
# 46 (Array of Integer Arrays parameter)
TableDisplay({"a":[1, 2, 3], "b":[10, 20, 30], "c":[100, 200, 300]})



In [ ]:

    
# expected result of cell 46
Image("../../resources/img/python/tableAPI/cell46_case1.png")



In [ ]:

    
# 47 (2D Array of Integer Arrays parameter)
TableDisplay([
    {"a":[1, 2, 3]}, 
    {"a":[10, 20, 30], "b":[100, 200, 300]}])



In [ ]:

    
# expected result of cell 47
Image("../../resources/img/python/tableAPI/cell47_case1.png")



In [ ]:

    
# 48 (2D Array of Integer,Decimal,String,Array Arrays parameter)
row1 = {"a":100, "b":200, "c":300}
row2 = {"a":1/10, "b":1/20, "c":0.33}
row3 = {"a":'a a a', "b":'b b b', "c":'c c c'}
row4 = {"a":[1, 2, 3], "b":[10, 20, 30], "c":[100, 200, 300]}
TableDisplay([row1, row2, row3, row4])



In [ ]:

    
# expected result of cell 48
Image("../../resources/img/python/tableAPI/cell48_case1.png")



In [ ]:

    
# 49 ([Integer,Decimal,String,Array] parameter)
TableDisplay({"a":100, "b":1/20, "c":'c c c', "d":[100, 200, 300]})



In [ ]:

    
# expected result of cell 49
Image("../../resources/img/python/tableAPI/cell49_case1.png")



In [ ]:

    
# 50 (2D Arrays of [Integer,Decimal,String,Array] parameter)
row1 = {"a":10, "b":1/10, "c":'c', "d":[100, 200]}
row2 = {"a":100, "b":1/20, "c":'c c c', "d":[100, 200, 300]}
TableDisplay([row1, row2])



In [ ]:

    
# expected result of cell 50
Image("../../resources/img/python/tableAPI/cell50_case1.png")



In [ ]:

    
# 51 (numbers as name of Array keys (Array parameter))
TableDisplay({10:20, 1/10:1/20, 'c':'c c c', '[100, 200]':[100, 200, 300]})



In [ ]:

    
# expected result of cell 51
Image("../../resources/img/python/tableAPI/cell51_case1.png")



In [ ]:

    
# 52 (numbers as name of Array keys (2D Array parameter)
row1 = {40:40, 1/40:1/40, 'c':'c'}
row2 = {40:20, 1/40:1/20, 'c':'c c c', '[100, 200]':[100, 200, 300]}
TableDisplay([row1, row2])



In [ ]:

    
# expected result of cell 52
Image("../../resources/img/python/tableAPI/cell52_case1.png")

Python API for Table Display

In addition to APIs for creating and formatting BeakerX's interactive table widget, the Python runtime configures pandas to display tables with the interactive widget instead of static HTML.



In [ ]:

    
# 53
import pandas as pd
from beakerx import *

df = pd.DataFrame({"runway": ["24", "36L"]})

TableDisplay(df)



In [ ]:

    
# expected result of cell 53
Image("../../resources/img/python/tableAPI/cell53_case1.png")



In [ ]:

    
import pandas as pd
from beakerx import *
from beakerx.object import beakerx
#Display mode: TableDisplay Widget
beakerx.pandas_display_table()

pd.DataFrame(data=np.zeros((5,5)), index=pd.Int64Index([0, 1, 2, 3, 4], dtype='int64'))



In [ ]:

    
# 54
pd.read_csv('../../resources/data/pd_index.csv', index_col=0)



In [ ]:

    
# expected result of cell 54
Image("../../resources/img/python/tableAPI/cell54_case1.png")



In [ ]:

    
# 55
pd.read_csv('../../resources/data/interest-rates-small.csv')



In [ ]:

    
# expected result of cell 55
Image("../../resources/img/python/tableAPI/cell55_case1.png")

Rows to show



In [ ]:

    
tableRTS = TableDisplay(pd.read_csv('../../resources/data/interest-rates.csv'))
tableRTS.setRowsToShow(RowsToShow.SHOW_10)
tableRTS

The length of types should be same as number of cols.



In [ ]:

    
# expected result is error message
colNames = ["column 1", "column 2", "column 3"]
row1 = [6, 6, 0.5]
row2 = [3, 3, 2.0]
table94 = TableDisplay(pd.DataFrame([row1, row2], columns=colNames), colNames, ["integer", "double" ])
table94

Set global timezone



In [ ]:

    
from beakerx import *
TableDisplay.timeZoneGlobal = "Europe/London"



In [ ]:

    
tableGTZ = TableDisplay(pd.read_csv('../../resources/data/interest-rates.csv'))
tableGTZ



In [ ]:

    
tableGTZ.setTimeZone("America/Los_Angeles")



In [ ]:

    
# color provider
mapListColorProvider = [
    {"a": 1, "b": 2, "c": 3},
    {"a": 4, "b": 5, "c": 6},
    {"a": 7, "b": 8, "c": 5}
]
table56 = TableDisplay(mapListColorProvider)

def color_provider(row, column, td):
    row = td.values[row]
    val = row[column]
    if val == 5:
        return Color.GREEN    
    return Color.BLACK    

table56.setFontColorProvider(color_provider)
table56



In [ ]: