{
 "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",
    "There is also a class for having no visible output at all: hidden outputs.\n",
    "\n",
    "## Hidden Outputs"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "// something we don't want to see\n",
    "def big(x) {\n",
    "  return (x < 2) ? x : [x, big(x - 1), big(x - 2)]\n",
    "}\n",
    "x = big(10)\n",
    "OutputCell.HIDDEN"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Stacked Output Containers"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def o = new OutputContainer()\n",
    "o.addItem(\"simplest example\")\n",
    "o << [2, 3, 5, 7] // shorter syntax\n",
    "o << HTML(\"<h1>title</h1>\")\n",
    "o << null"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def rates = new CSV().read(\"../resources/data/interest-rates.csv\")\n",
    "def c = new Color(120, 120, 120, 100)\n",
    "plot1 = new Plot(initWidth: 300, initHeight: 400) \\\n",
    "     << new Points(x:rates.y1, y:rates.y30, size: 3, displayName:\"y1 vs y30\") \\\n",
    "     << new Points(x:rates.m3, y:rates.y5, size: 3, displayName:\"m3 vs y5\") \\\n",
    "     << new Line(x:rates.m3, y:rates.y5, color: c) \\\n",
    "     << new Line(x:rates.y1, y:rates.y30, color: c)\n",
    "\n",
    "plot2 = new SimpleTimePlot(rates, [\"m3\", \"y1\"], showLegend:false, initWidth: 300, initHeight: 400)\n",
    "plot3 = new SimpleTimePlot(rates, [\"y5\", \"y10\"], showLegend:false, initWidth: 300, initHeight: 400)\n",
    "table = rates[0]\n",
    "OutputCell.HIDDEN"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Tabbed Output Containers"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "TableDisplay t = new TableDisplay(table);\n",
    "\n",
    "def l = new TabbedOutputContainerLayoutManager()\n",
    "l.setBorderDisplayed(false)\n",
    "def o = new 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(t, \"1990/01\")\n",
    "o"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Grid Output Containers"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "plot1.setShowLegend(false)\n",
    "bars = new CategoryPlot(initWidth: 300, initHeight: 400) << new CategoryBars(value: [[1.1, 2.4, 3.8], [1, 3, 5]])\n",
    "\n",
    "def lg = new GridOutputContainerLayoutManager(3)\n",
    "\n",
    "def og = new 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 = new CyclingOutputContainerLayoutManager()\n",
    "l.setPeriod(2345); // milliseconds\n",
    "l.setBorderDisplayed(false);\n",
    "def o = new 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"
   ]
  }
 ],
 "metadata": {
  "anaconda-cloud": {},
  "beakerx_kernel_parameters": {},
  "kernelspec": {
   "display_name": "Groovy",
   "language": "groovy",
   "name": "groovy"
  },
  "language_info": {
   "codemirror_mode": "groovy",
   "file_extension": ".groovy",
   "mimetype": "",
   "name": "Groovy",
   "nbconverter_exporter": "",
   "version": "2.4.3"
  },
  "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": 1
}