{
 "cells": [
  {
   "cell_type": "raw",
   "id": "41022af5",
   "metadata": {},
   "source": [
    "---\n",
    "title: ipyvizzu-story demo\n",
    "description: ipyvizzu-story demo with mercury\n",
    "show-code: False\n",
    "params:\n",
    "params:\n",
    "    selected:\n",
    "        input: select\n",
    "        label: select what you want to see\n",
    "        choices: [animation, code]\n",
    "        multi: True\n",
    "---"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "bf9e62cb",
   "metadata": {},
   "outputs": [],
   "source": [
    "# configure default value\n",
    "\n",
    "selected = [\"animation\"]"
   ]
  },
  {
   "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"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1a26e2e9",
   "metadata": {},
   "outputs": [],
   "source": [
    "# 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://raw.githubusercontent.com/\" +\n",
    "#     \"vizzuhq/ipyvizzu-story/main/\" +\n",
    "#     \"docs/examples/basic/basic.csv\"\n",
    "# )\n",
    "# data.add_data_frame(df)\n",
    "\n",
    "story = Story(data=data)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "27b1d972",
   "metadata": {},
   "outputs": [],
   "source": [
    "# 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)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "2e06c121",
   "metadata": {},
   "outputs": [],
   "source": [
    "# you can set the width and height (CSS style)\n",
    "\n",
    "story.set_size(width=\"800px\", height=\"480px\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e06ff4de",
   "metadata": {},
   "outputs": [],
   "source": [
    "# you can get the html Story as a string\n",
    "\n",
    "html = story.to_html()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1ab7ece9",
   "metadata": {},
   "outputs": [],
   "source": [
    "if \"animation\" in selected:\n",
    "    story.play()\n",
    "if \"code\" in selected:\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
}