{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e4ded5cf",
   "metadata": {},
   "outputs": [],
   "source": [
    "# import pandas and ipyvizzu\n",
    "\n",
    "import pandas as pd\n",
    "from ipyvizzu import Chart, Data, Config, Style, DisplayTarget\n",
    "import mercury as mr\n",
    "\n",
    "\n",
    "# setup Mercury App\n",
    "app = mr.App(\n",
    "    title=\"ipyvizzu demo\", description=\"ipyvizzu demo with mercury\"\n",
    ")\n",
    "\n",
    "\n",
    "# add widget\n",
    "gender = mr.Select(\n",
    "    label=\"Select sex\", value=\"female\", choices=[\"female\", \"male\"]\n",
    ")\n",
    "\n",
    "\n",
    "# initialize Chart\n",
    "\n",
    "chart = Chart(\n",
    "    width=\"640px\", height=\"360px\"\n",
    ")  # or Chart(width=\"640px\", height=\"360px\", display=DisplayTarget.ACTUAL)\n",
    "# chart = Chart(width=\"640px\", height=\"360px\", display=DisplayTarget.BEGIN)\n",
    "# chart = Chart(width=\"640px\", height=\"360px\", display=DisplayTarget.END)\n",
    "# chart = Chart(width=\"640px\", height=\"360px\", display=DisplayTarget.MANUAL)\n",
    "\n",
    "\n",
    "# add data to Chart\n",
    "\n",
    "data = Data()\n",
    "df = pd.read_csv(\n",
    "    \"https://ipyvizzu.vizzuhq.com/0.16/showcases/titanic/titanic.csv\"\n",
    ")\n",
    "data.add_df(df)\n",
    "\n",
    "chart.animate(data)\n",
    "\n",
    "\n",
    "# add config to Chart\n",
    "\n",
    "chart.animate(\n",
    "    Config(\n",
    "        {\n",
    "            \"x\": \"Count\",\n",
    "            \"y\": \"Sex\",\n",
    "            \"label\": \"Count\",\n",
    "            \"title\": \"Passengers of the Titanic\",\n",
    "        }\n",
    "    )\n",
    ")\n",
    "chart.animate(\n",
    "    Config(\n",
    "        {\n",
    "            \"x\": [\"Count\", \"Survived\"],\n",
    "            \"label\": [\"Count\", \"Survived\"],\n",
    "            \"color\": \"Survived\",\n",
    "        }\n",
    "    )\n",
    ")\n",
    "chart.animate(Config({\"x\": \"Count\", \"y\": [\"Sex\", \"Survived\"]}))\n",
    "\n",
    "\n",
    "# add style to Chart\n",
    "\n",
    "chart.animate(Style({\"title\": {\"fontSize\": 35}}))\n",
    "\n",
    "\n",
    "# filter data by the selected gender to Chart\n",
    "\n",
    "data_filter = Data.filter(f\"record['Sex'] == '{gender.value}'\")\n",
    "chart.animate(data_filter)\n",
    "\n",
    "\n",
    "# display Chart with show method (display=DisplayTarget.MANUAL)\n",
    "\n",
    "# chart.show()"
   ]
  }
 ],
 "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.8.10"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}