{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1226e7e9",
   "metadata": {},
   "outputs": [],
   "source": [
    "# import ipyvizzu and ipyvizzu-story\n",
    "\n",
    "from ipyvizzu import Data, Config\n",
    "from ipyvizzustory import Slide, Step\n",
    "\n",
    "from ipyvizzustory import Story  # or\n",
    "# from ipyvizzustory.env.ipy.story import Story\n",
    "\n",
    "from IPython.display import display as display_html, HTML\n",
    "\n",
    "import mercury as mr\n",
    "\n",
    "\n",
    "# setup Mercury App\n",
    "app = mr.App(\n",
    "    title=\"ipyvizzu-story demo\", description=\"ipyvizzu-story demo with mercury\"\n",
    ")\n",
    " \n",
    "# add widget\n",
    "selected = mr.MultiSelect(\n",
    "    label=\"Select what you want to see\", value=[\"animation\"], choices=[\"animation\", \"code\"]\n",
    ")\n",
    "\n",
    "\n",
    "# create data and initialize Story with the created data\n",
    "\n",
    "data = Data()\n",
    "data.add_series(\"Foo\", [\"Alice\", \"Bob\", \"Ted\"])\n",
    "data.add_series(\"Bar\", [15, 32, 12])\n",
    "data.add_series(\"Baz\", [5, 3, 2])\n",
    "\n",
    "# you can also add data with pandas\n",
    "\n",
    "# import pandas as pd\n",
    "#\n",
    "# data = Data()\n",
    "# df = pd.read_csv(\n",
    "#     \"https://ipyvizzu-story.vizzuhq.com/0.7/assets/data/data.csv\"\n",
    "# )\n",
    "# data.add_df(df)\n",
    "\n",
    "story = Story(data=data)\n",
    "\n",
    "# create Slides and Steps and add them to the Story\n",
    "\n",
    "slide1 = Slide(\n",
    "    Step(\n",
    "        Config({\"x\": \"Foo\", \"y\": \"Bar\"}),\n",
    "    )\n",
    ")\n",
    "story.add_slide(slide1)\n",
    "\n",
    "slide2 = Slide(\n",
    "    Step(\n",
    "        Config({\"color\": \"Foo\", \"x\": \"Baz\", \"geometry\": \"circle\"}),\n",
    "    )\n",
    ")\n",
    "story.add_slide(slide2)\n",
    "\n",
    "# you can set the width and height (CSS style)\n",
    "\n",
    "story.set_size(width=\"800px\", height=\"480px\")\n",
    "\n",
    "# you can get the html Story as a string\n",
    "\n",
    "html = story.to_html()\n",
    "\n",
    "if \"animation\" in selected.value:\n",
    "    story.play()\n",
    "if \"code\" in selected.value:\n",
    "    display_html(html)"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3.7.3 64-bit",
   "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.10.4"
  },
  "vscode": {
   "interpreter": {
    "hash": "916dbcbb3f70747c44a77c7bcd40155683ae19c65e1c03b4aa3499c5328201f1"
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}