In [1]:
import StringIO
import ipywidgets as widgets
import numpy as np
import pandas as pd
from IPython.display import display
from traitlets import Unicode
from traitlets import default
from traitlets import List
In [2]:
class SciSheetTableWidget(widgets.DOMWidget):
_view_name = Unicode('SciSheetTableView').tag(sync=True)
_model_name = Unicode('SciSheetTableModel').tag(sync=True)
_view_module = Unicode('jupyter_scisheets_widget').tag(sync=True)
_model_module = Unicode('jupyter_scisheets_widget').tag(sync=True)
_model_data = List([]).tag(sync=True)
_model_data_2 = Unicode().tag(sync=True)
@default('layout')
def _default_layout(self):
return widgets.Layout(height='400px', align_self='stretch')
In [ ]:
tbwidget = SciSheetTableWidget()
In [ ]:
tbwidget.model_id()
In [38]:
%%javascript
var widgets = require('@jupyter-widgets/base');
var _ = require('underscore');
var handsontable_css = require(['handsontable/dist/handsontable.full.css']);
var handsontable_js = require(['handsontable/dist/handsontable.full']);
var SciSheetTableView = widgets.DOMWidgetView.extend({
render: function(){
// CREATION OF THE WIDGET IN THE NOTEBOOK.
// Add a <div> in the widget area.
this.$table = $('<div />')
.attr('id', 'table_' + (table_id++))
.appendTo(this.$el);
// Get the model's value (JSON);
var json = this.model.get('_model_data');
console.log(json);
var json2 = this.model.get('_model_data_2');
console.log(json2);
}
});
module.exports = {
SciSheetTableModel: SciSheetTableModel,
SciSheetTableView: SciSheetTableView
};
In [34]:
class SciSheetWidgetDataFrame(object):
def __init__(self, df):
self._df = df
self._widget = SciSheetTableWidget()
self._widget.observe(self._on_data_changed, '_model_data')
self._widget.unobserve(self._on_displayed)
def _on_displayed(self, e):
# DataFrame ==> Widget (upon initialization only)
json = self._df.to_json(orient='values')
self._widget._model_data = json
def _on_data_changed(self, e, val):
# Widget ==> DataFrame (called every time the user
# changes a value in the graphical widget)
buf = StringIO.StringIO(val)
self._df = pd.read_json(buf, orient='values')
def to_dataframe(self):
return self._df
def show(self):
display(self._widget)
In [35]:
bob = SciSheetWidgetDataFrame(df.to_json(orient='values'))
In [36]:
bob.show()
In [33]:
from IPython.display import display
In [ ]:
from jupyter_scisheets_widget import scisheets_widget
In [ ]:
tb = scisheets_widget.SciSheetTable()
In [ ]:
tb._model_data = df
In [24]:
data = np.random.randint(size=(3, 5), low=100, high=900)
df = pd.DataFrame(data)
df
Out[24]:
In [ ]:
def _on_displayed(test_df, test_widget, e):
# DataFrame ==> Widget (upon initialization only)
json = test_df.to_json(orient='values')
test_widget.value = json
return test_widget
def _on_data_changed(test_df, e, val):
# Widget ==> DataFrame (called every time the user
# changes a value in the graphical widget)
buf = io.StringIO(val)
test_df = pd.read_json(buf, orient='values')
return test_df
test_df = df
test_widget = scisheets_widget.SciSheetTable()
test_widget.on_trait_change(self._on_data_changed, 'value')
self._widget.on_displayed(self._on_displayed)
In [ ]:
test_df = df
test_widget = scisheets_widget.SciSheetTable()
In [ ]:
test_widget.unobserve()
In [ ]:
class HandsonDataFrame(object):
def __init__(self, df):
self._df = df
self._widget = scisheets_widget.SciSheetTable()
self._widget.observe(self._on_value_change, '_model_data')
self._widget.unobserve(self._on_displayed)
def _on_value_change(change):
print(change['new'])
def _on_displayed(self, e):
# DataFrame ==> Widget (upon initialization only)
json = self._df.to_json(orient='values')
self._widget._model_data = json
def _on_data_changed(self, e, val):
# Widget ==> DataFrame (called every time the user
# changes a value in the graphical widget)
buf = io.StringIO(val)
self._df = pd.read_json(buf, orient='values')
def to_dataframe(self):
return self._df
def show(self):
display(self._widget)
In [ ]:
import ipywidgets as widgets
In [ ]:
ht = HandsonDataFrame(df)
#ht.show()
In [ ]:
ht.show()
In [ ]:
ht.to_dataframe()
In [ ]:
%%javascript
var handsontable = require(["handsontable"]);
In [ ]:
%%javascript
var data2 = [
["", "Maserati", "Mazda", "Mercedes", "Mini", "Mitsubishi"],
["2009b", 0, 2941, 4303, 354, 5814],
["2010", 5, 2905, 2867, 412, 5284],
["2011", 4, 2517, 4822, 552, 6127],
["2012", 2, 2422, 5399, 776, 4151]
];
element.handsontable({
data: data2,
minSpareCols: 1,
minSpareRows: 1,
rowHeaders: true,
colHeaders: true,
contextMenu: true
});
In [ ]:
%%javascript
element.handsontable({
data: data2,
minSpareCols: 1,
minSpareRows: 1,
rowHeaders: true,
colHeaders: true,
contextMenu: true
});
In [ ]:
%%html
<p style="font-size: 20px"><strong>Handsontable</strong> is a minimalistic Excel-like <span class="nobreak">data grid</span>
editor
for HTML, JavaScript & jQuery</p>
<div id="hs_example" class="handsontable"></div>
In [ ]:
%%javascript
require(['handsontable'], function (handsontable){
console.log("in require->handsontable");
var data = [
["", "Maserati", "Mazda", "Mercedes", "Mini", "Mitsubishi"],
["2009", 0, 2941, 4303, 354, 5814],
["2010", 5, 2905, 2867, 412, 5284],
["2011", 4, 2517, 4822, 552, 6127],
["2012", 2, 2422, 5399, 776, 4151]
];
$('#hs_example').handsontable({
data: data,
minSpareRows: 1,
colHeaders: true,
contextMenu: true
});
function bindDumpButton() {
$('body').on('click', 'button[name=dump]', function () {
var dump = $(this).data('dump');
var $container = $(dump);
console.log('data of ' + dump, $container.handsontable('getData'));
});
}
bindDumpButton();
});
In [ ]:
display(hdf._widget)
In [ ]:
hdf = scisheets_widget.HandsonDataFrame(df)
hdf.show()
In [ ]:
display(hdf)
In [ ]:
In [ ]:
data = np.random.randint(size=(3, 5), low=100, high=900)
df = pd.DataFrame(data)
In [ ]:
df = pd.DataFrame({'a':[1,3,5,7,4,5,6,4,7,8,9],
'b':[3,5,6,2,4,6,7,8,7,8,9]})
In [ ]:
In [ ]:
%%javascript
$element.handsontable({data:data1});
In [ ]:
%%javascript
element.text('Hi')
console.log('There')
In [ ]:
%%javascript
var table_id = 0;
this.$table = $('<div />')
.attr('id', 'table_' + (table_id++))
.appendTo(element);
this.$table.handsontable({data:data1});
// this.element.handsontable({data:data1});
// console.log('how?')
In [ ]:
%%javascript
var div = document.createElement('div');
div.innerHTML = '<span class="msg">Hello world.</span>';
In [ ]:
%%javascript
var output_area = this;
// find my cell element
var cell_element = output_area.element.parents('.cell');
// which cell is it?
var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);
// get the cell object
var cell = Jupyter.notebook.get_cell(cell_idx);
In [ ]:
In [ ]:
import ipywidgets as widgets
In [ ]:
widgets.IntSlider()