{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "import numpy as np\n",
    "import pandas as pd\n",
    "import panel as pn\n",
    "\n",
    "pn.extension('vizzu')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The ``Vizzu`` pane renders [Vizzu](https://lib.vizzuhq.com/) charts inside Panel. Note that to use the ``Vizzu`` pane in the notebook, the Panel extension has to be loaded with 'vizzu' as an argument to ensure that vizzu.js is initialized. \n",
    "\n",
    "#### Parameters:\n",
    "\n",
    "For details on other options for customizing the component see the [layout](../../how_to/layout/index.md) and [styling](../../how_to/styling/index.md) how-to guides.\n",
    "\n",
    "* **``object``** (dict | pd.DataFrame): The data expressed as a Python dictionary of arrays or DataFrame.\n",
    "* **``animation``** (dict): Animation settings (see [vizzu.Anim](hhttps://lib.vizzuhq.com/latest/reference/modules/Anim/)).\n",
    "* **``config``** (dict): The config contains all of the parameters needed to render a particular static chart or a state of an animated chart (see [vizzu.Config.Chart](https://lib.vizzuhq.com/latest/reference/interfaces/Config.Chart/)).\n",
    "* **``columns``** (list): Optional column definitions. If not defined will be inferred from the data.\n",
    "* **``tooltips``** (boolean): Whether to enable tooltips on the chart.\n",
    "\n",
    "Methods:\n",
    "\n",
    "* **`animate`**: Accepts a dictionary of new 'data', 'config' and 'style' values which is used to update the chart.\n",
    "* **`stream`**: Streams new data to the plot.\n",
    "* **`patch`**: Patches one or more rows in the data.\n",
    "___"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The `Vizzu` renders a dataset (defined either as a dictionary of columns or a DataFrame) given a `config` defining how to plot the data:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "data = {\n",
    "    'Name': ['Alice', 'Bob', 'Ted', 'Patrick', 'Jason', 'Teresa', 'John'],\n",
    "    'Weight': 50+np.random.randint(0, 10, 7)*10\n",
    "}\n",
    "\n",
    "vizzu = pn.pane.Vizzu(\n",
    "    data, config={'geometry': 'rectangle', 'x': 'Name', 'y': 'Weight', 'title': 'Weight by person'},\n",
    "    duration=400, height=400, sizing_mode='stretch_width', tooltip=True\n",
    ")\n",
    "\n",
    "vizzu"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "One of the major selling points behind Vizzu is the dynamic animations when either the data or the `config` is updated, e.g. if we change the 'geometry' we can see the animation smoothly transition between the two states."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "vizzu.animate({'geometry': 'circle'})"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "vizzu.animate({'geometry': 'area'})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Note that the Vizzu pane will keep track of any changes you make as part of the `.animate()` call ensuring that the plot can be re-created easily:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "print(vizzu.config)\n",
    "\n",
    "vizzu"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Column Types\n",
    "\n",
    "`Vizzu` supports two column types:\n",
    "\n",
    "- `'dimension'`: Usually used for non-numeric data and/or the independent dimension of a chart (e.g. the x-axis)\n",
    "- `'measure'`: Numeric values usually used for dependent variables of a chart (e.g. the y-axis values)\n",
    "\n",
    "The `Vizzu` pane automatically infers the types based on the dtypes of the data but in certain cases it may be necessary to explicitly override the type of a column using `column_types` parameter. One common example is when plotting integers on the x-axis, which would ordinarily be treated as a 'measure' but should be treated as the independent dimension in the case of a line or bar chart.\n",
    "\n",
    "The example below demonstrates this case, here we want to treat the 'index' as an independent variable and override the default inferred type with `column_types={'index': 'dimension'}`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "df = pd.DataFrame(np.random.randn(50), columns=list('Y')).cumsum()\n",
    "\n",
    "pn.pane.Vizzu(\n",
    "    df, column_types={'index': 'dimension'}, config={'x': 'index', 'y': 'Y', 'geometry': 'line'},\n",
    "    height=300, sizing_mode='stretch_width'\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Presets\n",
    "\n",
    "Vizzu provides a variety of [preset chart types](https://lib.vizzuhq.com/latest/examples/presets/). In `ipyvizzu` these are expressed by calling [helper methods](https://ipyvizzu.vizzuhq.com/latest/tutorial/chart_presets/) on the `Config` object. The `Vizzu` pane instead allows you to provide `'preset'` as a key of the `config`. In the example below we dynamically create a `config` that switches the `preset` based on a `RadioButtonGroup`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "windturbines = pd.read_csv('https://datasets.holoviz.org/windturbines/v1/windturbines.csv')\n",
    "\n",
    "agg = windturbines.groupby(['p_year', 't_manu'])[['p_cap']].sum().sort_index(level=0).reset_index()\n",
    "\n",
    "chart_type = pn.widgets.RadioButtonGroup(options={'Stream': 'stream', 'Bar': 'stackedColumn'}, align='center')\n",
    "\n",
    "preset_chart = pn.pane.Vizzu(\n",
    "    agg,\n",
    "    config=pn.bind(lambda preset: {'preset': preset, 'x': 'p_year', 'y': 'p_cap', 'stackedBy': 't_manu'}, chart_type),\n",
    "    column_types={'p_year': 'dimension'},\n",
    "    height=500,\n",
    "    sizing_mode='stretch_width',\n",
    "    style={\n",
    "        'plot': {\n",
    "            \"xAxis\": {\n",
    "                \"label\": {\n",
    "                    \"angle\": \"-45deg\"\n",
    "                }\n",
    "            }\n",
    "        }\n",
    "    }\n",
    ")\n",
    "\n",
    "\n",
    "pn.Column(chart_type, preset_chart).embed()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Controls\n",
    "\n",
    "The `Vizzu` pane exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "pn.Row(vizzu.controls(jslink=True), vizzu)"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}