{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Output Containers and Layout Managers\n",
    "\n",
    "Output containers are objects that hold a collection of other objects, and displays all its contents, even when they are complex interactive objects and MIME type.\n",
    "By default the contents are just stacked up on the page, but you can configure them to get tabs, grid, cycling, or other layout methods.\n",
    "\n",
    "## Without Output"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# The defining of variable doesn't initiate output\n",
    "x = \"some string\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Stacked Output Containers"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from beakerx import *\n",
    "o = OutputContainer()\n",
    "o.addItem(\"simplest example\")\n",
    "o.addItem([2, 3, 5, 7]) \n",
    "o.addItem(HTML(\"<h1>title</h1>\"))\n",
    "o.addItem(None)\n",
    "o"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Tabbed Output Containers"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "rates = pd.read_csv(\"../../../doc/resources/data/interest-rates.csv\")\n",
    "c = Color(120, 120, 120, 100)\n",
    "plot1 = Plot(initWidth= 300, initHeight= 400) \n",
    "plot1.add(Points(x= rates.y1, y=rates.y30, size= 3, displayName=\"y1 vs y30\"))\n",
    "plot1.add(Points(x= rates.m3, y=rates.y5, size= 3, displayName=\"m3 vs y5\"))\n",
    "plot1.add(Line(x= rates.y1, y=rates.y30, color= c))\n",
    "plot1.add(Line(x= rates.m3, y=rates.y5, color= c))\n",
    "plot1.setShowLegend(False)\n",
    "\n",
    "plot2 = SimpleTimePlot(rates, [\"m3\", \"y1\"], showLegend=False, initWidth= 300, initHeight= 400)\n",
    "plot3 = SimpleTimePlot(rates, [\"y5\", \"y10\"], showLegend=False, initWidth= 300, initHeight= 400)\n",
    "\n",
    "table = pd.DataFrame(rates.head(n=10), columns=[\"m3\", \"y1\", \"y5\", \"y10\"])\n",
    "\n",
    "l = TabbedOutputContainerLayoutManager()\n",
    "l.setBorderDisplayed(False)\n",
    "o = OutputContainer()\n",
    "o.setLayoutManager(l)\n",
    "o.addItem(plot1, \"Scatter with History\")\n",
    "o.addItem(plot2, \"Short Term\")\n",
    "o.addItem(plot3, \"Long Term\")\n",
    "o.addItem(table, \"1990/01\")\n",
    "o\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Grid Output Containers"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "plot1.setShowLegend(False)\n",
    "bars = CategoryPlot(initWidth= 300, initHeight= 400)\n",
    "bars.add(CategoryBars(value= [[1.1, 2.4, 3.8], [1, 3, 5]]))\n",
    "\n",
    "lg = GridOutputContainerLayoutManager(3)\n",
    "\n",
    "og = OutputContainer()\n",
    "og.setLayoutManager(lg)\n",
    "og.addItem(plot1, \"Scatter with History\")\n",
    "og.addItem(plot2, \"Short Term\")\n",
    "og.addItem(plot3, \"Long Term1\")\n",
    "og.addItem(plot3, \"Long Term2\")\n",
    "og.addItem(table, \"1990/01\")\n",
    "og.addItem(bars, \"Bar Chart\")\n",
    "\n",
    "og"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Cycling Output Container"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "l = CyclingOutputContainerLayoutManager()\n",
    "l.setPeriod(3000); # milliseconds\n",
    "l.setBorderDisplayed(False);\n",
    "o = OutputContainer()\n",
    "o.setLayoutManager(l)\n",
    "o.addItem(plot1, \"Scatter with History\")\n",
    "o.addItem(plot2, \"Short Term\")\n",
    "o.addItem(table, \"1990/01\")\n",
    "o.addItem(plot3, \"Long Term\")\n",
    "o"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "anaconda-cloud": {},
  "beakerx_kernel_parameters": {},
  "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.6.2"
  },
  "widgets": {
   "state": {
    "17d84835-64e7-4ff8-8cac-a91d3511542e": {
     "views": [
      {
       "cell_index": 0
      }
     ]
    },
    "43c9dda1-76e0-489d-a833-7eca228bb212": {
     "views": [
      {
       "cell_index": 0
      }
     ]
    },
    "4fb36cdf-4be8-443d-ad98-d8dd89acf8c6": {
     "views": [
      {
       "cell_index": 2
      }
     ]
    },
    "820a4b86-e910-4788-aa9a-6ce76b2a7dc6": {
     "views": [
      {
       "cell_index": 2
      }
     ]
    },
    "c28d2cb4-2b8a-4979-b100-dfbd6152e34e": {
     "views": [
      {
       "cell_index": 2
      }
     ]
    },
    "dca9e1fc-329c-463e-8822-b52648b32b30": {
     "views": [
      {
       "cell_index": 3
      }
     ]
    },
    "fbe68639-90bb-4d23-9c2d-8cbedc179024": {
     "views": [
      {
       "cell_index": 0
      }
     ]
    }
   },
   "version": "1.2.0"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}