docs/notebooks/demo-ipyaggrid-customize.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# JS customization"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Table Of Contents :\n",
    "\n",
    "+ [Custom Buttons](#Building-custom-buttons)\n",
    "+ [Custom JS](#Completely-custom-js)\n",
    "+ [Linking Widgets](#Linking-widgets-together)\n",
    "    - [Watching updates from outside the grid](#Updating-information-in-the-grid-via-outside-widgets)\n",
    "    - [Watching the data of the grid for interactive plotting](#Using-the-interactivity-of-the-grid-outputs-for-interactive-plotings)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "import os\n",
    "import json\n",
    "import numpy as np\n",
    "import pandas as pd\n",
    "import urllib.request as ur\n",
    "import ipywidgets as widgets\n",
    "from ipyaggrid import Grid\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "url = 'https://raw.githubusercontent.com/ag-grid/ag-grid-docs/master/src/olympicWinners.json'\n",
    "with ur.urlopen(url) as res:\n",
    "    data = json.loads(res.read().decode('utf-8'))\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Building custom buttons"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Buttons are an easy way to interact with the grid. They can perform many actions on the gridOptions, and many examples of them are already given in [ag-Grid documentation](https://www.ag-grid.com/documentation-main/documentation.php), so that you can test anyfeature you want using their Plunckers (in browsers test environments)."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This custom button is built using two parameters : the name of the button and the action of the button. The first one will be used to be displayed on the button, and the second one is the body of the function called on click.\n",
    "The code **can use the `gridOptions`** as if they were defined before, and thus access to the `api` and the `columnApi` of ag-Grid.\n",
    "\n",
    "With this custom button, two cells are highlighted if their difference is higher than 50."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "b71ff11afdf144fbbb600657b552663e",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Grid(columns_fit='auto', compress_data=True, export_mode='disabled', height='350px', menu={'buttons': [{'name'…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "columnDefs = [\n",
    "    {'headerName': \"Country\", 'field': \"country\", 'width': 120, 'rowGroup': 'true'},\n",
    "    {'headerName': \"Year\", 'field': \"year\", 'width': 90, 'pivot': 'true', 'enablePivot':True},\n",
    "    {'headerName': \"Sport\", 'field': \"sport\", 'width': 110, 'rowGroup': 'true'},\n",
    "    {'headerName': \"Athlete\", 'field': \"athlete\"},\n",
    "    {'headerName': \"Gold\", 'field': \"gold\", 'width': 100, 'aggFunc': 'sum'},\n",
    "];\n",
    "\n",
    "for c in columnDefs:\n",
    "    c[\"sortable\"] = True\n",
    "    c[\"filter\"]=True\n",
    "    c[\"resizable\"]=True\n",
    "\n",
    "\n",
    "gridOptions = {\n",
    "    'pivotMode': 'true',\n",
    "    'columnDefs': columnDefs,\n",
    "    'animateRows':'true',\n",
    "};\n",
    "\n",
    "buttons=[{'name':'Highlight', 'action':\"\"\"\n",
    "        var count = gridOptions.api.getDisplayedRowCount();\n",
    "        for (var i = 0; i<count; i++) {\n",
    "          var rowNode = gridOptions.api.getDisplayedRowAtIndex(i);\n",
    "          if(rowNode.aggData != null && Object.keys(rowNode.aggData).length > 0){\n",
    "        var keys = Object.keys(rowNode.aggData);\n",
    "        var gold = [];\n",
    "        for (var k = 0; k<keys.length; k++){\n",
    "          var j = 2*k + 1;\n",
    "          var prop = \"pivot_\" + j;\n",
    "          if(rowNode.aggData[prop] == null){\n",
    "            rowNode.aggData[prop] = 0;\n",
    "          }\n",
    "          gold[k] = rowNode.aggData[prop];\n",
    "        }\n",
    "        for(var j=0;j<gold.length - 1;j++){\n",
    "          if(Math.abs(gold[j] - gold[j+1]) >= 50){\n",
    "            var column1 = \"pivot_\" + (2*j+1);\n",
    "            var column2 = \"pivot_\" + (2*(j+1)+1);\n",
    "            gridOptions.api.flashCells({rowNodes: [rowNode], columns: [column1, column2] });\n",
    "          }\n",
    "        }}}\"\"\"}]\n",
    "\n",
    "\n",
    "grid1 = Grid(quick_filter=True,\n",
    "             theme='ag-theme-balham',\n",
    "             compress_data=True,\n",
    "             menu={'buttons':buttons},\n",
    "             grid_options=gridOptions,\n",
    "             grid_data=data,\n",
    "             columns_fit=\"auto\")\n",
    "grid1"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Completely custom js - Pay attention: <span style=\"color:red\">A lot of tips here</span>\n",
    "### Will not work in JLab"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The example below shows how to:\n",
    "+ Insert a column computed from the input data\n",
    "+ Set [cell style](https://www.ag-grid.com/javascript-grid-cell-styling/):\n",
    "    + **Age** 30 and above is ahow in red\n",
    "+ Set [cell renderers](https://www.ag-grid.com/javascript-grid-cell-rendering/):\n",
    "    + **Sport** is displayed with a button: Open console to see the data collected upon click\n",
    "    + **Score** is displayed with bar in the background \n",
    "+ Use the [**ag-Grid** context object](https://www.ag-grid.com/javascript-grid-context/) to carry precalculated and grid (as opposed to row) level info\n",
    "+ Use the various JS injection points:\n",
    "    + `js_helpers_custom`: Define a new helper function\n",
    "    + `js_pre_grid`: Enrich ColumnDefs before grid instantiation\n",
    "    + `js_post_grid`: Determine values (`max_score`) and functions (`scale`) from all data\n",
    "    \n",
    "    \n",
    "+ A **score** is calculated from several columns:\n",
    "    + $\\sqrt{\\displaystyle(\\text{3 gold}^2+\\text{2 silver}^2+\\text{1 bronze}^2)}$. \n",
    "    + **Note**: It does not represent any real world value, just a pretext for the background bars. \n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "61aa76bf931e4badbcd2cb514d9a286d",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Grid(columns_fit='size_to_fit', compress_data=True, export_mode='disabled', height='350px', js_helpers_custom=…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "age_cell_style = \"\"\"\n",
    "function(params) { if (params.value >= 30) { return {color: 'red'}; } }\n",
    "\"\"\"\n",
    "\n",
    "sport_cell_renderer = \"\"\"\n",
    "function (params){\n",
    "    let v = params.value;\n",
    "\n",
    "    function clicked(){\n",
    "        //window.params = params;\n",
    "        let scale = params.api.context.my_data.my_scale;\n",
    "        \n",
    "        console.log('row data:');\n",
    "        console.log(params.data);\n",
    "        console.log('row index:');\n",
    "        console.log(params.rowIndex);\n",
    "        console.log('score:');\n",
    "        console.log(params.data.score);\n",
    "        console.log('max_score (from context):');\n",
    "        console.log(params.api.context.my_data.max_score);\n",
    "    }\n",
    "\n",
    "    let b = document.createElement('button');\n",
    "    b.innerHTML = 'Click';\n",
    "    b.style = \"background-color:bisque; margin:1px 10px 1px 2px;\";\n",
    "    b.title = \"Open console after click\";\n",
    "    b.addEventListener(\"click\", function (){clicked()}, false);\n",
    "    \n",
    "    let d = document.createElement('div');\n",
    "    d.style = 'display: flex';\n",
    "    let d2 = document.createElement('div');\n",
    "    d2.innerHTML = v;\n",
    "    d.appendChild(b);\n",
    "    d.appendChild(d2);\n",
    "\n",
    "    return d;\n",
    "}\n",
    "\"\"\"\n",
    "\n",
    "columnDefs = [\n",
    "    {'headerName': \"Athlete\", 'field': \"athlete\", 'width': 150},\n",
    "    {'headerName': \"Age\", 'field': \"age\", 'width': 90, 'cellStyle': age_cell_style},\n",
    "#     {'headerName': \"Country\", 'field': \"country\", 'width': 120},\n",
    "    {'headerName': \"Year\", 'field': \"year\", 'width': 90},\n",
    "#     {'headerName': \"Date\", 'field': \"date\", 'width': 145},\n",
    "    {'headerName': \"Sport\", 'field': \"sport\", 'width': 180, 'cellRenderer': sport_cell_renderer},\n",
    "    {'headerName': \"Gold\", 'field': \"gold\", 'width': 70},\n",
    "    {'headerName': \"Silver\", 'field': \"silver\", 'width': 75},\n",
    "    {'headerName': \"Bronze\", 'field': \"bronze\", 'width': 85}\n",
    "]\n",
    "\n",
    "js_helpers_custom=\"\"\"\n",
    "helpersCustom = {\n",
    "    formatFloat3: d3.format(',.3f')\n",
    "}\n",
    "\"\"\"\n",
    "\n",
    "js_pre_grid = [\"\"\"\n",
    "window.go = gridOptions;\n",
    "function scoreCellRenderer(params){\n",
    "    let v = params.value;\n",
    "    let scale = params.api.context.my_data.my_scale;\n",
    "    let f = scale(v);\n",
    "    let css = `background: linear-gradient(to right, #bcbddc ${f}%, transparent ${f}%); ; flex-grow:2`;\n",
    "    let html = `<div style=\"${css}\">${helpers.formatFloat3(v)}</div>` \n",
    "    return html;\n",
    "}\n",
    "gridOptions.columnDefs.push({'headerName':'Score', field:'score', cellRenderer: scoreCellRenderer});\n",
    "gridData.forEach(dat => {\n",
    "    dat.score = Math.sqrt(Math.pow(3*dat.gold,2)+\n",
    "                          Math.pow(2*dat.silver,2)+\n",
    "                          Math.pow(1*dat.bronze,2))\n",
    "})\n",
    "\"\"\"]\n",
    "\n",
    "js_post_grid = [\"\"\"\n",
    "let arr_score = [];\n",
    "gridOptions.api.forEachNode(node => {arr_score.push(node.data.score)});\n",
    "let max_score = Math.max(...arr_score);\n",
    "let scale = d3.scaleLinear().domain([0, max_score]).range([0, 100])\n",
    "gridOptions.api.context.my_data = {my_scale: scale, max_score: max_score};\n",
    "\"\"\"]\n",
    "\n",
    "grid_options = {\n",
    "    'columnDefs': columnDefs,\n",
    "    'defaultColDef': {'filter': 'true', 'sortable': 'true'}\n",
    "}\n",
    "\n",
    "grid2 = Grid(grid_data = data,\n",
    "            grid_options=grid_options,\n",
    "            js_helpers_custom=js_helpers_custom,\n",
    "            js_pre_grid=js_pre_grid,\n",
    "            js_post_grid=js_post_grid,\n",
    "            export_mode='disabled',\n",
    "            theme='ag-theme-balham')\n",
    "grid2"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Linking widgets together"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Updating information in the grid via outside widgets"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This example explains how to use `user_params` with other widget changes to update the effect of some action on the grid. \n",
    "Here we have a JS function highlight that flashes some cells of the grid when clicking one button on certain conditions depending on a parameter. We would like to choose this parameter via a slider.\n",
    "\n",
    "We could of course build this slider directly inside the JS of the grid using the `to_eval` input parameter. However building such JS components can sometimes be very tedious. We would prefer to ***use an ipywidget*** to build it, like the IntSlider.\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "9abb45aede61451cbc0a70b6710be1e7",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Grid(columns_fit='auto', compress_data=True, export_mode='disabled', height='350px', menu={'buttons': [{'name'…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "columnDefs = [\n",
    "    {'headerName': \"Country\", 'field': \"country\", 'width': 120, 'rowGroup': 'true'},\n",
    "    {'headerName': \"Year\", 'field': \"year\", 'width': 90, 'pivot': 'true'},\n",
    "    {'headerName': \"Sport\", 'field': \"sport\", 'width': 110, 'rowGroup': 'true'},\n",
    "    {'headerName': \"Athlete\", 'field': \"athlete\"},\n",
    "    {'headerName': \"Gold\", 'field': \"gold\", 'width': 100, 'aggFunc': 'sum'},\n",
    "];\n",
    "\n",
    "gridOptions = {\n",
    "    'pivotMode': 'true',\n",
    "    'defaultColDef': {'sortable': 'true', 'filter': 'true', 'resizable': 'true'},\n",
    "    'columnDefs': columnDefs,\n",
    "    'animateRows':'true',\n",
    "};\n",
    "\n",
    "buttons=[{'name':'Highlight', 'action':\"\"\"\n",
    "        var count = view.gridOptions.api.getDisplayedRowCount();\n",
    "        for (var i = 0; i<count; i++) {\n",
    "          var rowNode = view.gridOptions.api.getDisplayedRowAtIndex(i);\n",
    "          if(rowNode.aggData != null && Object.keys(rowNode.aggData).length > 0){\n",
    "        var keys = Object.keys(rowNode.aggData);\n",
    "        var gold = [];\n",
    "        for (var k = 0; k<keys.length; k++){\n",
    "          var j = 2*k + 1;\n",
    "          var prop = \"pivot_\" + j;\n",
    "          if(rowNode.aggData[prop] == null){\n",
    "            rowNode.aggData[prop] = 0;\n",
    "          }\n",
    "          gold[k] = rowNode.aggData[prop];\n",
    "        }\n",
    "        for(var j=0;j<gold.length - 1;j++){\n",
    "          // test positive if absolute value of difference of sum of gold medals\n",
    "          // from one olympiad to the next is greater than or equal to sider_value\n",
    "          if(Math.abs(gold[j] - gold[j+1]) >= view.model.get('user_params').slider_value){\n",
    "            var column1 = \"pivot_\" + (2*j+1);\n",
    "            var column2 = \"pivot_\" + (2*(j+1)+1);\n",
    "            view.gridOptions.api.flashCells({rowNodes: [rowNode], columns: [column1, column2] });\n",
    "          }\n",
    "        }}}\"\"\"}]\n",
    "\n",
    "\n",
    "pivot = Grid(quick_filter=True,\n",
    "             theme='ag-theme-balham',\n",
    "             compress_data=True,\n",
    "             menu = {'buttons':buttons},\n",
    "             grid_options=gridOptions,\n",
    "             grid_data=data,\n",
    "             columns_fit=\"auto\",\n",
    "             user_params={'slider_value':50})\n",
    "pivot"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "With this function in `buttons`, two adjacent cells are highlighted if their difference in absolute value is higher than `user_parameter.slider_value`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Setting a simple slider to coordinate its value with the highlight button\n",
    "slider = widgets.IntSlider(\n",
    "    value=50,\n",
    "    min=0,\n",
    "    max=100,\n",
    "    step=1,\n",
    "    description='Highlight Value:',\n",
    "    style={'description_width': 'initial'},\n",
    "    disabled=False,\n",
    "    continuous_update=False,\n",
    "    orientation='horizontal',\n",
    "    readout=True,\n",
    "    readout_format='d'\n",
    ")\n",
    "\n",
    "def on_slider_change(change):\n",
    "    pivot.user_params = {'slider_value': change.new}\n",
    "\n",
    "slider.observe(on_slider_change, names='value')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The custom JS function we built uses `view.model.get('user_params')['slider_value']` instead of the regular hardcoded value. As the value of the slider changes, so does the `user_params`, using a simple observe."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "aeeaccdbfd644791adf48d64715ab11d",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "IntSlider(value=50, continuous_update=False, description='Highlight Value:', style=SliderStyle(description_wid…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "slider"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "9abb45aede61451cbc0a70b6710be1e7",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Grid(columns_fit='auto', compress_data=True, export_mode='disabled', height='350px', js_helpers='{\"dateFormatt…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "pivot"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Using the interactivity of the grid outputs for interactive plotings"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Let's try to do some kind of opposite situation. We are going to link a dataset displayed by a [bqplot](https://github.com/bloomberg/bqplot) widget, with the output of a grid."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [],
   "source": [
    "from bqplot import pyplot as plt\n",
    "from bqplot import (\n",
    "    Axis, ColorAxis, LinearScale, DateScale, DateColorScale, OrdinalScale,\n",
    "    OrdinalColorScale, ColorScale, Scatter, Lines, Figure, Tooltip\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Copy pasted from bqplot scatter documentation\n",
    "price_data = pd.DataFrame(np.cumsum(np.random.randn(150, 2).dot([[1.0, -0.8], [-0.8, 1.0]]), axis=0) + 100,\n",
    "                          columns=['Security 1', 'Security 2'], index=pd.date_range(start='01-01-2007', periods=150))\n",
    "size = 100\n",
    "np.random.seed(0)\n",
    "x_data = range(size)\n",
    "y_data = np.cumsum(np.random.randn(size) * 100.0)\n",
    "ord_keys = np.array(['A', 'B', 'C', 'D', 'E', 'F'])\n",
    "ordinal_data = np.random.randint(5, size=size)\n",
    "symbols = ['Security 1', 'Security 2']\n",
    "\n",
    "dates_all = price_data.index.values\n",
    "dates_all_t = dates_all[1:]\n",
    "sec1_levels = np.array(price_data[symbols[0]].values.flatten())\n",
    "log_sec1 = np.log(sec1_levels)\n",
    "sec1_returns = log_sec1[1:] - log_sec1[:-1]\n",
    "\n",
    "sec2_levels = np.array(price_data[symbols[1]].values.flatten())"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [],
   "source": [
    "df = pd.DataFrame({'date':dates_all,'sec_level':sec2_levels})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "For the grid, we choose button-export to be able to export the entire grid at will, as soon as the data changes because of filtering."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [],
   "source": [
    "columnDefs = [{'field':'date', 'headerName':'Date'},\n",
    "             {'field':'sec_level', 'headerName':'Value'}]\n",
    "\n",
    "gridOptions={\n",
    "    'columnDefs': columnDefs,\n",
    "    'animateRows':'true',\n",
    "};\n",
    "\n",
    "process_data_grid = Grid(width=600,\n",
    "             quick_filter=True,\n",
    "             export_mode=\"buttons\",\n",
    "             show_toggle_edit=True,\n",
    "             theme='ag-theme-balham',\n",
    "             menu={'input_div_css':{'flex-direction':'column', 'flex-wrap':'nowrap'}},\n",
    "             grid_options=gridOptions,\n",
    "             grid_data=df)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {},
   "outputs": [],
   "source": [
    "sc_x = DateScale()\n",
    "sc_y = LinearScale()\n",
    "\n",
    "scatt = Scatter(x=dates_all, y=sec2_levels, scales={'x': sc_x, 'y': sc_y})\n",
    "ax_x = Axis(scale=sc_x, label='Date')\n",
    "ax_y = Axis(scale=sc_y, orientation='vertical', tick_format='0.0f', label='Security 2')\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Here is the output of the figure :"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "7802dfce56f44600ae6ee15370907eb5",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Figure(axes=[Axis(label='Date', scale=DateScale(), side='bottom'), Axis(label='Security 2', orientation='verti…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "Figure(marks=[scatt], axes=[ax_x, ax_y])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "16cc24d9bc1246a8b8cd2140ef1799b7",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Grid(columns_fit='size_to_fit', compress_data=True, export_mode='buttons', height='350px', menu={'buttons': [{…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "process_data_grid"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now let's observe the `grid_data_out` and update the data in the figure as soon as we get the data out. You can try to filter on any value, especially on the second value to eliminate the records that are lower than a certain value for example."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {},
   "outputs": [],
   "source": [
    "def on_change_data_out(change):\n",
    "    x = [val for val in np.array( change.new['grid']['date'])]\n",
    "    y = [val for val in np.array( change.new['grid']['sec_level'])]\n",
    "    x = np.array(x, dtype='datetime64[ns]')\n",
    "    scatt.x = x\n",
    "    scatt.y = y\n",
    "    \n",
    "process_data_grid.observe(on_change_data_out, names='grid_data_out')"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "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.9.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}