Skip to content

Instantly share code, notes, and snippets.

@blink1073

blink1073/qgrid_export.ipynb

Last active August 29, 2015 14:28
Show Gist options
  • Save blink1073/ad3e65953e532547f623 to your computer and use it in GitHub Desktop.
Save blink1073/ad3e65953e532547f623 to your computer and use it in GitHub Desktop.
Download ZIP
QGrid Export
Display the source blob
Display the rendered blob
Raw
qgrid_export.ipynb
{
"cells": [
{
"cell_type": "code",
"execution_count": 28,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"application/javascript": [
"if (IPython.version[0] !== '3') {\n",
" var path = 'nbextensions/widgets/'\n",
"} else {\n",
" var path = ''\n",
"}\n",
"require([path + \"widgets/js/widget\", path + \"widgets/js/manager\"], function(widget, manager) {\n",
"\n",
" var grid;\n",
" var QGridView = widget.DOMWidgetView.extend({\n",
"\n",
" render: function() {\n",
" var that = this;\n",
" var cdn_base_url = this.model.get('_cdn_base_url');\n",
"\n",
" // Load the custom css\n",
" if ($(\"#dg-css\").length == 0){\n",
" $(\"head\").append([\n",
" \"<link href='\" + cdn_base_url + \"/lib/slick.grid.css' rel='stylesheet'>\",\n",
" \"<link href='\" + cdn_base_url + \"/lib/slick-default-theme.css' rel='stylesheet'>\",\n",
" \"<link href='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/css/jquery-ui.min.css' rel='stylesheet'>\",\n",
" \"<link id='dg-css' href='\" + cdn_base_url + \"/qgrid.css' rel='stylesheet'>\"\n",
" ]);\n",
" }\n",
" \n",
" var path_dictionary = {\n",
" jquery_drag: cdn_base_url + \"/lib/jquery.event.drag-2.2\",\n",
" slick_core: cdn_base_url + \"/lib/slick.core.2.2\",\n",
" slick_data_view: cdn_base_url + \"/lib/slick.dataview.2.2\",\n",
" slick_check_box_column: cdn_base_url + \"/lib/slick.checkboxselectcolumn\",\n",
" slick_row_selection_model: cdn_base_url + \"/lib/slick.rowselectionmodel\",\n",
" slick_grid: cdn_base_url + \"/lib/slick.grid.2.2\",\n",
" data_grid: cdn_base_url + \"/qgrid\",\n",
" date_filter: cdn_base_url + \"/qgrid.datefilter\",\n",
" text_filter: cdn_base_url + \"/qgrid.textfilter\",\n",
" slider_filter: cdn_base_url + \"/qgrid.sliderfilter\",\n",
" filter_base: cdn_base_url + \"/qgrid.filterbase\",\n",
" editors: cdn_base_url + \"/qgrid.editors\",\n",
" handlebars: \"https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min\"\n",
" };\n",
"\n",
" var existing_config = require.s.contexts._.config;\n",
" if (!existing_config.paths['underscore']){\n",
" path_dictionary['underscore'] = \"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min\";\n",
" }\n",
"\n",
" if (!existing_config.paths['moment']){\n",
" path_dictionary['moment'] = \"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min\";\n",
" }\n",
"\n",
" if (!existing_config.paths['jqueryui']){\n",
" path_dictionary['jqueryui'] = \"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min\";\n",
" }\n",
"\n",
" require.config({\n",
" paths: path_dictionary\n",
" });\n",
" \n",
" if (typeof jQuery === 'function') {\n",
" define('jquery', function() { return jQuery; });\n",
" }\n",
" \n",
" /**\n",
" * Load the required scripts and create the grid.\n",
" */\n",
" require([\n",
" 'jquery',\n",
" 'jquery_drag',\n",
" 'slick_core',\n",
" 'slick_data_view',\n",
" 'slick_check_box_column',\n",
" 'slick_row_selection_model',\n",
" ],\n",
" function() {\n",
" require(['slick_grid'], function() {\n",
" require([\"data_grid\", \"editors\"], \n",
" function(dgrid, editors) {\n",
" that.setupQGrid(dgrid, editors);\n",
" });\n",
" });\n",
" });\n",
" },\n",
"\n",
" /**\n",
" * Set up our QGrid and event handlers.\n",
" */\n",
" setupQGrid: function(dgrid, editors) {\n",
" var that = this;\n",
" this.dgrid = dgrid;\n",
" // set up the divs and styles\n",
" this.$el.addClass('q-grid-container');\n",
" var table = this.$el.append('div');\n",
" table.addClass('q-grid');\n",
" \n",
" // fill the portion of the widget area not in the prompt\n",
" var parent = this.el.parentElement;\n",
" while (parent.className !== 'widget-area') {\n",
" parent = parent.parentElement;\n",
" }\n",
" var width = (parent.clientWidth - parent.childNodes[0].clientWidth);\n",
" this.el.setAttribute(\"style\", \"max-width:\" + String(width) + \"px;\");\n",
"\n",
" // create the table\n",
" var df = JSON.parse(this.model.get('_df_json'));\n",
" var column_types = JSON.parse(this.model.get('_column_types_json'));\n",
" var options = JSON.parse(this.model.get('grid_options'));\n",
" grid = new dgrid.QGrid(table[0], df, column_types);\n",
" grid.initialize_slick_grid(options);\n",
"\n",
" // set up editing\n",
" var sgrid = grid.slick_grid;\n",
" var columns = sgrid.getColumns();\n",
" for (var i = 1; i < columns.length; i++) {\n",
" if (column_types[i].categories) {\n",
" columns[i].editor = editors.SelectEditor;\n",
" var options = {options: column_types[i].categories};\n",
" columns[i].editorOptions = options;\n",
" } else if (columns[i].type === 'date') {\n",
" columns[i].editor = editors.DateEditor;\n",
" } else if (column_types[i]) {\n",
" columns[i].editor = editors.TextEditor;\n",
" }\n",
" if (columns[i].type === 'number') {\n",
" columns[i].validator = editors.validateNumber;\n",
" }\n",
" }\n",
" sgrid.setColumns(columns);\n",
"\n",
" // set up callbacks\n",
" sgrid.onCellChange.subscribe(function(e, args) {\n",
" var column = columns[args.cell].name;\n",
" var msg = {'row': args.row, 'column': column,\n",
" 'value': args.item[column], 'type': 'cell_change'};\n",
" that.send(msg);\n",
" });\n",
"\n",
" // subscribe to incoming messages from the QGridWidget\n",
" this.model.on('msg:custom', this.handleMsg, this);\n",
" },\n",
" \n",
" /**\n",
" * Handle messages from the QGridWidget.\n",
" */\n",
" handleMsg: function(msg) {\n",
" var sgrid = grid.slick_grid;\n",
" if (msg.type === 'remove_row') {\n",
" var cell = sgrid.getActiveCell();\n",
" if (!cell) {\n",
" console.log('no cell');\n",
" return;\n",
" }\n",
" var data = sgrid.getData().getItem(cell.row);\n",
" grid.data_view.deleteItem(data.id);\n",
" msg = {'type': 'remove_row', 'row': cell.row, 'id': data.id};\n",
" this.updateSize();\n",
" this.send(msg);\n",
"\n",
" } else if (msg.type === 'add_row') {\n",
" var dd = sgrid.getData();\n",
" dd.addItem(msg);\n",
" dd.refresh();\n",
" this.updateSize();\n",
" this.send(msg);\n",
" \n",
" } else if (msg.type === 'export') {\n",
" var df = JSON.parse(this.model.get('_df_json'));\n",
" var column_types = JSON.parse(this.model.get('_column_types_json'));\n",
" var options = JSON.parse(this.model.get('grid_options'));\n",
" options['editable'] = false;\n",
" var egrid = new this.dgrid.QGrid('#' + msg.div_id, df,\n",
" column_types);\n",
" egrid.initialize_slick_grid(options);\n",
" }\n",
" },\n",
"\n",
" /**\n",
" * Update the size of the dataframe.\n",
" */\n",
" updateSize: function() {\n",
" var rowHeight = 28;\n",
" var max_height = rowHeight * 15;\n",
" var grid_height = max_height;\n",
" var total_row_height = (grid.row_data.length + 1) * rowHeight + 1;\n",
" if (total_row_height <= max_height){\n",
" grid_height = total_row_height;\n",
" grid.grid_elem.addClass('hide-scrollbar');\n",
" } else {\n",
" grid.grid_elem.removeClass('hide-scrollbar');\n",
" }\n",
" grid.grid_elem.height(grid_height);\n",
" grid.slick_grid.render();\n",
" grid.slick_grid.resizeCanvas();\n",
" }\n",
" });\n",
" manager.WidgetManager.register_widget_view('QGridView', QGridView);\n",
"});\n"
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"import qgrid\n",
"qgrid.nbinstall()"
]
},
{
"cell_type": "code",
"execution_count": 29,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"import pandas as pd\n",
"import numpy as np\n",
"randn = np.random.randn\n",
"\n",
"pd.set_option('display.max_rows', 8)\n",
"\n",
"from pandas.io.data import get_data_yahoo\n",
"spy = get_data_yahoo(\n",
" symbols='SPY',\n",
" start=pd.Timestamp('2011-01-01'),\n",
" end=pd.Timestamp('2014-01-01'),\n",
" adjust_price=True,\n",
")\n",
"\n",
"# use an integer index so we can add rows\n",
"spy = spy.reset_index()"
]
},
{
"cell_type": "code",
"execution_count": 32,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
"\n",
" <div class='q-grid-container'>\n",
" <div id=c5a5b0c9-66f6-4440-b97e-6f79ed49b122 class='q-grid'></div>\n",
" </div>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"qgrid.show_grid(spy, remote_js=True)"
]
},
{
"cell_type": "code",
"execution_count": 31,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
"<div>\n",
"<table border=\"1\" class=\"dataframe\">\n",
" <thead>\n",
" <tr style=\"text-align: right;\">\n",
" <th></th>\n",
" <th>Date</th>\n",
" <th>Open</th>\n",
" <th>High</th>\n",
" <th>Low</th>\n",
" <th>Close</th>\n",
" <th>Volume</th>\n",
" <th>Adj_Ratio</th>\n",
" </tr>\n",
" </thead>\n",
" <tbody>\n",
" <tr>\n",
" <th>0</th>\n",
" <td>2011-01-03</td>\n",
" <td>115.648405</td>\n",
" <td>116.460708</td>\n",
" <td>114.726575</td>\n",
" <td>115.958727</td>\n",
" <td>138725200</td>\n",
" <td>0.912701</td>\n",
" </tr>\n",
" <tr>\n",
" <th>2</th>\n",
" <td>2011-01-05</td>\n",
" <td>100.000000</td>\n",
" <td>110.000000</td>\n",
" <td>115.420229</td>\n",
" <td>116.497217</td>\n",
" <td>133975300</td>\n",
" <td>0.912701</td>\n",
" </tr>\n",
" <tr>\n",
" <th>3</th>\n",
" <td>2011-01-06</td>\n",
" <td>116.542855</td>\n",
" <td>116.670633</td>\n",
" <td>115.922218</td>\n",
" <td>116.269042</td>\n",
" <td>122519000</td>\n",
" <td>0.912701</td>\n",
" </tr>\n",
" <tr>\n",
" <th>4</th>\n",
" <td>2011-01-07</td>\n",
" <td>116.424201</td>\n",
" <td>116.615867</td>\n",
" <td>115.137295</td>\n",
" <td>116.040867</td>\n",
" <td>156034600</td>\n",
" <td>0.912701</td>\n",
" </tr>\n",
" <tr>\n",
" <th>5</th>\n",
" <td>2011-01-10</td>\n",
" <td>115.529756</td>\n",
" <td>116.059125</td>\n",
" <td>115.182925</td>\n",
" <td>115.894838</td>\n",
" <td>122401700</td>\n",
" <td>0.912701</td>\n",
" </tr>\n",
" </tbody>\n",
"</table>\n",
"</div>"
],
"text/plain": [
" Date Open High Low Close Volume \\\n",
"0 2011-01-03 115.648405 116.460708 114.726575 115.958727 138725200 \n",
"2 2011-01-05 100.000000 110.000000 115.420229 116.497217 133975300 \n",
"3 2011-01-06 116.542855 116.670633 115.922218 116.269042 122519000 \n",
"4 2011-01-07 116.424201 116.615867 115.137295 116.040867 156034600 \n",
"5 2011-01-10 115.529756 116.059125 115.182925 115.894838 122401700 \n",
"\n",
" Adj_Ratio \n",
"0 0.912701 \n",
"2 0.912701 \n",
"3 0.912701 \n",
"4 0.912701 \n",
"5 0.912701 "
]
},
"execution_count": 31,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"spy.head()"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": []
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.4.3"
}
},
"nbformat": 4,
"nbformat_minor": 0
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment