ipyantd_test.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 0,
        "height": 4,
        "hidden": false,
        "row": 0,
        "width": 4
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "# Initial"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:46.542440Z",
     "start_time": "2019-05-19T16:32:46.516482Z"
    },
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": true
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "import ipywidgets as widgets\n",
    "import ipyantd as antd"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 4,
        "height": 4,
        "hidden": false,
        "row": 0,
        "width": 4
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "# Widgets (Components)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## General "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Button"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:46.572335Z",
     "start_time": "2019-05-19T16:32:46.543410Z"
    }
   },
   "outputs": [],
   "source": [
    "widgets.HBox([\n",
    "    antd.Button(description='Primary', type='primary'),\n",
    "    antd.Button(description='Default', type='default'),\n",
    "    antd.Button(description='Dashed', type='dashed'),\n",
    "    antd.Button(description='Danger', type='danger'),\n",
    "    antd.Button(description='Primary', type='primary', shape='round', loading=True),\n",
    "])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:46.593283Z",
     "start_time": "2019-05-19T16:32:46.574329Z"
    }
   },
   "outputs": [],
   "source": [
    "out = widgets.Output()\n",
    "b = antd.Button(content='Show', type='primary', shape='round', icon='search', size='small')\n",
    "@out.capture()\n",
    "def click(button):\n",
    "    b.loading = True\n",
    "    print('Hello')\n",
    "    time.sleep(1)\n",
    "    b.loading = False\n",
    "b.on_click(click)\n",
    "widgets.VBox([b, out])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:46.608243Z",
     "start_time": "2019-05-19T16:32:46.595295Z"
    }
   },
   "outputs": [],
   "source": [
    "on_click_hanlder = \"\"\"\n",
    "$('#site')[0].requestFullscreen();\n",
    "$('#notebook-container').width('90%');\n",
    "\"\"\"\n",
    "antd.ExtButton(content='Do', type='primary', icon='search', on_click=on_click_hanlder)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Icon"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:46.635166Z",
     "start_time": "2019-05-19T16:32:46.610231Z"
    }
   },
   "outputs": [],
   "source": [
    "widgets.HBox([\n",
    "    antd.Icon(type='home'),\n",
    "    antd.Icon(type='sync', spin=True),\n",
    "    antd.Icon(type='setting', spin=True),\n",
    "    antd.Icon(type='smile', rotate=180)\n",
    "])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Typography"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:46.705976Z",
     "start_time": "2019-05-19T16:32:46.637161Z"
    }
   },
   "outputs": [],
   "source": [
    "widgets.VBox([\n",
    "    antd.Text(content='ipyantd'),\n",
    "    antd.Text(content='ipyantd', type=\"secondary\"),\n",
    "    antd.Text(content='ipyantd', type=\"warning\"),\n",
    "    antd.Text(content='ipyantd', type=\"danger\"),\n",
    "    antd.Text(content='ipyantd', disabled=True),\n",
    "    antd.Text(content='ipyantd', mark=True),\n",
    "    antd.Text(content='ipyantd', code=True),\n",
    "    antd.Text(content='ipyantd', underline=True),\n",
    "    antd.Text(content='ipyantd', delete=True),\n",
    "    antd.Text(content='ipyantd', strong=True),\n",
    "    antd.Text(content='ipyantd', copyable=False),\n",
    "    antd.Text(content='ipyantd', editable=True),\n",
    "    antd.Text(content='ipyantd', ellipsis=True),\n",
    "])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:46.730909Z",
     "start_time": "2019-05-19T16:32:46.707972Z"
    }
   },
   "outputs": [],
   "source": [
    "widgets.VBox([\n",
    "    antd.Title(content='H1', level=1),\n",
    "    antd.Title(content='H2', level=2),\n",
    "    antd.Title(content='H3', level=3),\n",
    "    antd.Title(content='H4', level=4)\n",
    "])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:46.743880Z",
     "start_time": "2019-05-19T16:32:46.732905Z"
    }
   },
   "outputs": [],
   "source": [
    "antd.Paragraph(content=\"\"\"\n",
    "Ant Design, a design language for background applications, is refined by Ant UED Team.\n",
    "Ant Design, a design language for background applications, is refined by Ant UED Team.\n",
    "\"\"\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Layout"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Grid "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:46.798748Z",
     "start_time": "2019-05-19T16:32:46.745870Z"
    }
   },
   "outputs": [],
   "source": [
    "widgets.VBox([\n",
    "    antd.Row(\n",
    "        children=[\n",
    "            antd.Col(span=2, style={'height': '50px', 'background': 'rgba(0,160,233,0.7)'}),\n",
    "            antd.Col(span=10, style={'height': '50px', 'background': 'rgba(0,160,233,1)'}),\n",
    "            antd.Col(span=8, offset=1, style={'height': '50px', 'background': 'rgba(0,160,233,0.7)'}),\n",
    "            antd.Col(span=3, style={'height': '50px', 'background': 'rgba(0,160,233,1)'})\n",
    "        ]\n",
    "    ),\n",
    "    antd.Row(\n",
    "        children=[\n",
    "            antd.Col(span=5, style={'height': '50px', 'background': 'rgba(0,160,233,0.7)'}),\n",
    "            antd.Col(span=4, offset=1, style={'height': '50px', 'background': 'rgba(0,160,233,1)'}),\n",
    "            antd.Col(span=10, offset=2, style={'height': '50px', 'background': 'rgba(0,160,233,0.7)'})\n",
    "        ]\n",
    "    )\n",
    "])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Layout"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:46.856574Z",
     "start_time": "2019-05-19T16:32:46.800722Z"
    },
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "RGL = antd.ReactGridLayout(\n",
    "    layout=[\n",
    "        {'w': 12, 'h': 3, 'x': 0, 'y': 0, 'i': '0', 'moved': False, 'static': False},\n",
    "        {'w': 12, 'h': 3, 'x': 12, 'y': 0, 'i': '1', 'moved': False, 'static': False},\n",
    "        {'w': 12, 'h': 2, 'x': 0, 'y': 3, 'i': '2', 'moved': False, 'static': False},\n",
    "        {'w': 12, 'h': 2, 'x': 12, 'y': 3, 'i': '3', 'moved': False, 'static': False}\n",
    "    ],\n",
    "    cols=24,\n",
    "    row_height=48,\n",
    "    width=992,\n",
    "    margin=[5, 5],\n",
    "    draggable_handle='.ant-card-head',\n",
    "    children=[\n",
    "        antd.Card(title='Title', size='small', style={'height': '100%', 'overflow': 'hidden'}, children=[\n",
    "            antd.Statistic(title='Price', value=7199.53, precision=2, suffix='USD')\n",
    "        ]),\n",
    "        antd.Card(title='Title', size='small', style={'height': '100%', 'overflow': 'hidden'}, children=[\n",
    "            antd.Progress(percent=20, type='line', style={'width': '33%'})\n",
    "        ]),\n",
    "        antd.Card(title='Title', size='small', style={'height': '100%', 'overflow': 'hidden'}, children=[\n",
    "            antd.Checkbox(description='AAA')\n",
    "        ]),\n",
    "        antd.Card(title='Title', size='small', style={'height': '100%', 'overflow': 'hidden'}, children=[\n",
    "            antd.Checkbox(description='AAA')\n",
    "        ]),\n",
    "    ]\n",
    ")\n",
    "RGL"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:46.868544Z",
     "start_time": "2019-05-19T16:32:46.858568Z"
    }
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "\n",
    "<style>\n",
    ".react-grid-layout .ant-card-head {\n",
    "    background-color: #F7F7F7;\n",
    "    min-height: 10px;\n",
    "    line-height: 0.1;\n",
    "    padding: 2px 3px;\n",
    "    cursor: move;\n",
    "}\n",
    ".react-grid-layout .ant-card-body {\n",
    "    padding: 3px;\n",
    "}\n",
    "</style>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:46.877519Z",
     "start_time": "2019-05-19T16:32:46.870537Z"
    }
   },
   "outputs": [],
   "source": [
    "RGL.layout"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Navigation"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Affix"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:46.893475Z",
     "start_time": "2019-05-19T16:32:46.879514Z"
    }
   },
   "outputs": [],
   "source": [
    "# CSS layout bug\n",
    "antd.Affix(offset_bottom=10, offset_top=10, children=[\n",
    "    antd.Button(description='Primary', type='primary')\n",
    "])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Breadcrumb"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:46.911426Z",
     "start_time": "2019-05-19T16:32:46.894471Z"
    }
   },
   "outputs": [],
   "source": [
    "antd.Breadcrumb(\n",
    "    separator='/',\n",
    "    children=[\n",
    "        antd.BreadcrumbItem(content='123'),\n",
    "        antd.BreadcrumbItem(content='456')\n",
    "    ]\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Dropdown"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:46.917410Z",
     "start_time": "2019-05-19T16:32:46.913421Z"
    }
   },
   "outputs": [],
   "source": [
    "#antd.Dropdown(overlay=menu, children=[antd.Button()])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Menu"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:47.012159Z",
     "start_time": "2019-05-19T16:32:46.919405Z"
    }
   },
   "outputs": [],
   "source": [
    "menu = antd.Menu(\n",
    "    #mode='horizontal',\n",
    "    theme='light',\n",
    "    inline_collapsed=False,\n",
    "    #inline_indent=24,\n",
    "    style={'width': 256},\n",
    "    children=[\n",
    "        antd.MenuItem(title='123', key='1', children=[\n",
    "            antd.Icon(type='home'), antd.Text(content='ipyantd')\n",
    "        ]),\n",
    "        antd.MenuItem(title='456', key='2', children=[\n",
    "            antd.Icon(type='appstore'), antd.Text(content='appstore')\n",
    "        ]),\n",
    "        antd.MenuDivider(),\n",
    "        antd.MenuSubMenu(title='More', key='3', children=[\n",
    "            antd.MenuItemGroup(title='ABC', children=[\n",
    "                antd.MenuItem(title='456', key='3-1', children=[\n",
    "                    antd.Icon(type='appstore'), antd.Text(content='appstore')\n",
    "                ]),\n",
    "                antd.MenuItem(title='456', key='3-1', children=[\n",
    "                    antd.Icon(type='appstore'), antd.Text(content='appstore')\n",
    "                ])\n",
    "            ]),\n",
    "            antd.MenuSubMenu(title='Others', key='3', children=[\n",
    "                antd.MenuItem(title='456', key='3-2', children=[\n",
    "                    antd.Icon(type='appstore'), antd.Text(content='appstore')\n",
    "                ])\n",
    "            ])\n",
    "        ])\n",
    "    ]\n",
    ")\n",
    "menu"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:47.017144Z",
     "start_time": "2019-05-19T16:32:47.014151Z"
    }
   },
   "outputs": [],
   "source": [
    "#menu.theme = 'dark'"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Pagination"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:47.032105Z",
     "start_time": "2019-05-19T16:32:47.019138Z"
    }
   },
   "outputs": [],
   "source": [
    "antd.Pagination(total=50, default_page_size=10, size='small')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### PageHeader"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:47.043074Z",
     "start_time": "2019-05-19T16:32:47.034098Z"
    }
   },
   "outputs": [],
   "source": [
    "antd.PageHeader(title='123', sub_title='AAA')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Steps"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:47.075987Z",
     "start_time": "2019-05-19T16:32:47.045071Z"
    }
   },
   "outputs": [],
   "source": [
    "step_list = [\n",
    "    antd.Step(title='AAA', description='S1'),\n",
    "    antd.Step(title='BBB', description='S2'),\n",
    "    antd.Step(title='CCC', description='S3'),\n",
    "    antd.Step(title='DDD', description='S4'),\n",
    "    antd.Step(title='EEE', description='S5')\n",
    "]\n",
    "\n",
    "steps = antd.Steps(\n",
    "    current=1, \n",
    "#    direction='vertical', \n",
    "#     label_placement='horizontal', \n",
    "#    progress_dot=True,\n",
    "    size='default',\n",
    "#     status='process',\n",
    "    initial=0,\n",
    "    children=step_list\n",
    ")\n",
    "\n",
    "steps"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:47.081970Z",
     "start_time": "2019-05-19T16:32:47.076984Z"
    }
   },
   "outputs": [],
   "source": [
    "steps.current"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:48.590087Z",
     "start_time": "2019-05-19T16:32:47.083965Z"
    }
   },
   "outputs": [],
   "source": [
    "import time\n",
    "\n",
    "for idx in range(5):\n",
    "    steps.current = idx\n",
    "    time.sleep(0.3)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Data Entry"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### AutoComplete"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:48.602055Z",
     "start_time": "2019-05-19T16:32:48.592081Z"
    }
   },
   "outputs": [],
   "source": [
    "antd.AutoComplete(data_source=['A', 'AA', 'AAA'])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 4,
        "height": 4,
        "hidden": false,
        "row": 4,
        "width": 4
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "### Switch"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:48.616018Z",
     "start_time": "2019-05-19T16:32:48.604050Z"
    }
   },
   "outputs": [],
   "source": [
    "s = antd.Switch(checked=True, checked_children='1', un_checked_children='0')\n",
    "s"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:48.622999Z",
     "start_time": "2019-05-19T16:32:48.618013Z"
    },
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": true
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "s.checked = False"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:48.644945Z",
     "start_time": "2019-05-19T16:32:48.624994Z"
    },
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 8,
        "height": 4,
        "hidden": false,
        "row": 4,
        "width": 4
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "widgets.HBox([\n",
    "    antd.Switch(checked=True, checked_children='開', un_checked_children='關', size=\"large\"),\n",
    "    antd.Switch(checked=True, checked_children='1', un_checked_children='0', size=\"default\"),\n",
    "    antd.Switch(checked=True, checked_children='On', un_checked_children='Off', size=\"small\")\n",
    "])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 0,
        "height": 4,
        "hidden": false,
        "row": 8,
        "width": 4
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "### Checkbox"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:48.659901Z",
     "start_time": "2019-05-19T16:32:48.646937Z"
    },
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 4,
        "height": 4,
        "hidden": false,
        "row": 8,
        "width": 4
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "c = antd.Checkbox(description='AAA')\n",
    "c"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:48.671869Z",
     "start_time": "2019-05-19T16:32:48.661896Z"
    }
   },
   "outputs": [],
   "source": [
    "antd.Checkbox(description='AAA')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:48.677852Z",
     "start_time": "2019-05-19T16:32:48.672866Z"
    },
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": true
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "c.checked = False"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Rate"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:48.690818Z",
     "start_time": "2019-05-19T16:32:48.678852Z"
    }
   },
   "outputs": [],
   "source": [
    "antd.Rate(allow_half=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Radio"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:48.713757Z",
     "start_time": "2019-05-19T16:32:48.692814Z"
    }
   },
   "outputs": [],
   "source": [
    "rg = antd.RadioGroup(\n",
    "    value='Orange',\n",
    "    children=[\n",
    "        antd.Radio(content='Apple', value='Apple'),\n",
    "        antd.Radio(content='Pear', value='Pear'),\n",
    "        antd.Radio(content='Orange', value='Orange')\n",
    "    ]\n",
    ")\n",
    "rg"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:48.719740Z",
     "start_time": "2019-05-19T16:32:48.715752Z"
    }
   },
   "outputs": [],
   "source": [
    "rg.value"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 8,
        "height": 4,
        "hidden": false,
        "row": 8,
        "width": 4
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "### Select"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:48.731708Z",
     "start_time": "2019-05-19T16:32:48.720738Z"
    },
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 0,
        "height": 4,
        "hidden": false,
        "row": 12,
        "width": null
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "# Note: SelectOption does not support yet\n",
    "# options = [\n",
    "#     antd.SelectOption(description='AAA', key='0'),\n",
    "#     antd.SelectOption(description='BBB', key='1'),\n",
    "#     antd.SelectOption(description='CCC', key='2')\n",
    "# ]\n",
    "options = ['AAA', 'BBB', 'CCC']\n",
    "\n",
    "sel = antd.Select(options=options, value=['AAA', 'BBB'], mode='multiple', size='small', style={'width': '33%'})\n",
    "sel"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:48.740684Z",
     "start_time": "2019-05-19T16:32:48.733703Z"
    },
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 0,
        "height": 4,
        "hidden": false,
        "row": 16,
        "width": 4
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "sel.value"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Slider"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:48.752652Z",
     "start_time": "2019-05-19T16:32:48.742680Z"
    }
   },
   "outputs": [],
   "source": [
    "antd.Slider(value=10, min=0, max=100)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:48.783570Z",
     "start_time": "2019-05-19T16:32:48.753651Z"
    },
    "scrolled": false
   },
   "outputs": [],
   "source": [
    "widgets.HBox([\n",
    "    antd.Slider(value=0.1, min=0, max=1, step=0.01, vertical=True, tooltip_visible=True, style={'height': '100px'}),\n",
    "    antd.Slider(value=0.35, min=0, max=1, step=0.01, vertical=True, tooltip_visible=True, style={'height': '100px'}),\n",
    "    antd.Slider(value=0.7, min=0, max=1, step=0.01, vertical=True, tooltip_visible=True, style={'height': '100px'}),\n",
    "    antd.Slider(value=0.4, min=0, max=1, step=0.01, vertical=True, tooltip_visible=True, style={'height': '100px'}),\n",
    "    antd.Slider(value=0.25, min=0, max=1, step=0.01, vertical=True, tooltip_visible=True, style={'height': '100px'})\n",
    "])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 4,
        "height": 4,
        "hidden": false,
        "row": 16,
        "width": 4
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "### DatePicker"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:48.824461Z",
     "start_time": "2019-05-19T16:32:48.784569Z"
    },
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 8,
        "height": 5,
        "hidden": false,
        "row": 16,
        "width": null
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "dp = antd.DatePicker(value='2019-01-01', size='small')\n",
    "rp = antd.RangePicker(start_time='2019-01-01', end_time='2019-01-05', size='small')\n",
    "mp = antd.MonthPicker(value='2019-04', size='small')\n",
    "wp = antd.WeekPicker(value='2019-3', size='small')\n",
    "\n",
    "widgets.VBox([dp, rp, mp, wp])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:48.835432Z",
     "start_time": "2019-05-19T16:32:48.828454Z"
    },
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 0,
        "height": 4,
        "hidden": false,
        "row": 20,
        "width": 4
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "dp.value"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:48.847427Z",
     "start_time": "2019-05-19T16:32:48.838425Z"
    },
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 4,
        "height": 4,
        "hidden": false,
        "row": 20,
        "width": 4
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "rp.start_time, rp.end_time"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:48.858390Z",
     "start_time": "2019-05-19T16:32:48.850395Z"
    },
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 8,
        "height": 4,
        "hidden": false,
        "row": 21,
        "width": 4
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "mp.value"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:48.867346Z",
     "start_time": "2019-05-19T16:32:48.860365Z"
    },
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 0,
        "height": 4,
        "hidden": false,
        "row": 24,
        "width": 4
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "wp.value"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### ColorPicker"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:48.881309Z",
     "start_time": "2019-05-19T16:32:48.869341Z"
    },
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "color_picker = antd.ColorPicker()\n",
    "color_picker"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:48.890284Z",
     "start_time": "2019-05-19T16:32:48.884301Z"
    }
   },
   "outputs": [],
   "source": [
    "color_picker.color"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Input & Form"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:48.906242Z",
     "start_time": "2019-05-19T16:32:48.891282Z"
    }
   },
   "outputs": [],
   "source": [
    "i = antd.Input(value='123', class_name='AAA', size='small')\n",
    "i"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:48.914220Z",
     "start_time": "2019-05-19T16:32:48.908237Z"
    }
   },
   "outputs": [],
   "source": [
    "i.value"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:48.928183Z",
     "start_time": "2019-05-19T16:32:48.916215Z"
    }
   },
   "outputs": [],
   "source": [
    "inum = antd.InputNumber(value=10, max=100, min=0, size='small')\n",
    "inum"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:48.936161Z",
     "start_time": "2019-05-19T16:32:48.930178Z"
    }
   },
   "outputs": [],
   "source": [
    "inum.value"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:48.947133Z",
     "start_time": "2019-05-19T16:32:48.937159Z"
    }
   },
   "outputs": [],
   "source": [
    "ta = antd.TextArea(value='123')\n",
    "ta"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:48.955111Z",
     "start_time": "2019-05-19T16:32:48.948132Z"
    }
   },
   "outputs": [],
   "source": [
    "ta.value = 10"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:48.975060Z",
     "start_time": "2019-05-19T16:32:48.956109Z"
    }
   },
   "outputs": [],
   "source": [
    "widgets.VBox([\n",
    "    antd.Search(value='AAA', size='defalut'),\n",
    "    antd.Search(value='AAA', size='small')\n",
    "])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:48.995005Z",
     "start_time": "2019-05-19T16:32:48.977055Z"
    }
   },
   "outputs": [],
   "source": [
    "widgets.VBox([\n",
    "    antd.Password(value='AAA'),\n",
    "    antd.Password(value='AAA', size='small')\n",
    "])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:49.028914Z",
     "start_time": "2019-05-19T16:32:48.997000Z"
    }
   },
   "outputs": [],
   "source": [
    "antd.InputGroup(\n",
    "    compact=True,\n",
    "    children=[\n",
    "        antd.Select(options=options, value=['AAA'], mode='single', style={'width': '30%'}),\n",
    "        antd.Input(value='123', style={'width': '40%'}),\n",
    "        antd.InputNumber(value=10, max=100, min=0, style={'width': '30%'})\n",
    "    ]\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:49.078782Z",
     "start_time": "2019-05-19T16:32:49.031908Z"
    }
   },
   "outputs": [],
   "source": [
    "antd.Form(\n",
    "    label_col={\n",
    "        'xs': {'span': 24},\n",
    "        'sm': {'span': 4}\n",
    "    },\n",
    "    wrapper_col={\n",
    "        'xs': {'span': 24},\n",
    "        'sm': {'span': 10}\n",
    "    },\n",
    "    children=[\n",
    "        antd.FormItem(label=\"Name\", children=[antd.Input(value='My Name')], style={'margin-bottom':'2px'}),\n",
    "        antd.FormItem(label=\"Amount\", children=[antd.InputNumber(value=10, max=100, min=0)], style={'margin-bottom':'2px'}),\n",
    "        antd.FormItem(label=\"Description\", children=[antd.TextArea(value='123')], style={'margin-bottom':'2px'})\n",
    "    ]\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Cascader"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:49.100721Z",
     "start_time": "2019-05-19T16:32:49.080777Z"
    }
   },
   "outputs": [],
   "source": [
    "options = [{\n",
    "    'value': 'zhejiang',\n",
    "    'label': 'Zhejiang',\n",
    "    'children': [{\n",
    "        'value': 'hangzhou',\n",
    "        'label': 'Hangzhou',\n",
    "    }],\n",
    "}, {\n",
    "    'value': 'jiangsu',\n",
    "    'label': 'Jiangsu',\n",
    "    'children': [{\n",
    "        'value': 'nanjing',\n",
    "        'label': 'Nanjing',\n",
    "        'children': [{\n",
    "            'value': 'zhonghuamen',\n",
    "            'label': 'Zhong Hua Men',\n",
    "        }],\n",
    "    }],\n",
    "}]\n",
    "antd.Cascader(options=options)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Transfer"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:49.118674Z",
     "start_time": "2019-05-19T16:32:49.102717Z"
    }
   },
   "outputs": [],
   "source": [
    "data_source = [\n",
    "    {'key': 'A', 'title': 'AAA', 'description': 'AAA_', 'disabled': False},\n",
    "    {'key': 'B', 'title': 'BBB', 'description': 'BBB_', 'disabled': False},\n",
    "    {'key': 'C', 'title': 'CCC', 'description': 'CCC_', 'disabled': False}\n",
    "]\n",
    "tf = antd.Transfer(data_source=data_source, show_search=True, target_keys=['A'])\n",
    "tf"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Upload"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:49.135628Z",
     "start_time": "2019-05-19T16:32:49.120668Z"
    }
   },
   "outputs": [],
   "source": [
    "antd.Upload(\n",
    "    list_type='picture',\n",
    "    child=antd.Button(description='Upload', type='default')\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Data Display"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Avatar"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:49.151588Z",
     "start_time": "2019-05-19T16:32:49.137624Z"
    }
   },
   "outputs": [],
   "source": [
    "antd.Avatar(size='default', icon=\"user\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Badge"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:49.168541Z",
     "start_time": "2019-05-19T16:32:49.154580Z"
    }
   },
   "outputs": [],
   "source": [
    "antd.Badge(count=5, child=antd.Tag(content='Danger'))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Comment"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:49.179512Z",
     "start_time": "2019-05-19T16:32:49.170535Z"
    }
   },
   "outputs": [],
   "source": [
    "import datetime\n",
    "\n",
    "antd.Comment(\n",
    "    author='AN Solo',\n",
    "    avatar='https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',\n",
    "    content=\"\"\"\n",
    "        We supply a series of design principles, practical patterns and high quality design resources \n",
    "        (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.\n",
    "    \"\"\",\n",
    "    datetime=str(datetime.datetime.now())\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Collapse"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:49.203449Z",
     "start_time": "2019-05-19T16:32:49.181507Z"
    },
    "scrolled": false
   },
   "outputs": [],
   "source": [
    "content = \"\"\"\n",
    "A dog is a type of domesticated animal. Known for its loyalty and faithfulness, \n",
    "it can be found as a welcome guest in many households across the world.\n",
    "\"\"\"\n",
    "collapse = antd.Collapse(\n",
    "    accordion=True,\n",
    "#     active_key='A',\n",
    "#     default_active_key='A',\n",
    "    children=[\n",
    "        antd.CollapsePanel(header='This is panel header 1', key='A', content=content),\n",
    "        antd.CollapsePanel(header='This is panel header 2', key='B', content=content),\n",
    "        antd.CollapsePanel(header='This is panel header 3', key='C', content=content)\n",
    "    ]\n",
    ")\n",
    "collapse"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:49.209431Z",
     "start_time": "2019-05-19T16:32:49.204446Z"
    },
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "collapse.children[0]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:49.217411Z",
     "start_time": "2019-05-19T16:32:49.211427Z"
    }
   },
   "outputs": [],
   "source": [
    "#collapse.active_key"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Carousel"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:49.236361Z",
     "start_time": "2019-05-19T16:32:49.218407Z"
    }
   },
   "outputs": [],
   "source": [
    "antd.Carousel(\n",
    "    vertical=True,\n",
    "    children=[\n",
    "        antd.Div(content='123'),\n",
    "        antd.Div(content='123')\n",
    "    ]\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:49.244341Z",
     "start_time": "2019-05-19T16:32:49.238355Z"
    }
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "\n",
    "<style>\n",
    ".ant-carousel .slick-slide {\n",
    "  text-align: center;\n",
    "  height: 160px;\n",
    "  line-height: 160px;\n",
    "  background: #364d79;\n",
    "  overflow: hidden;\n",
    "}\n",
    "\n",
    ".ant-carousel .slick-slide h3 {\n",
    "  color: #fff;\n",
    "}\n",
    "</style>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Card"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:49.264286Z",
     "start_time": "2019-05-19T16:32:49.246334Z"
    }
   },
   "outputs": [],
   "source": [
    "antd.Card(title='Title',\n",
    "          size='small',\n",
    "          extra=antd.Button(content='', icon='setting', type='default', shape='', size='small'),\n",
    "          style={'width': '50%'},\n",
    "          children=[tf]\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:49.281241Z",
     "start_time": "2019-05-19T16:32:49.266281Z"
    }
   },
   "outputs": [],
   "source": [
    "antd.Card(title='Title', size='small', children=[\n",
    "    antd.CardMeta(avatar='😎', title='Card title', description='This is the description')\n",
    "])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Calendar"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:49.292212Z",
     "start_time": "2019-05-19T16:32:49.283235Z"
    }
   },
   "outputs": [],
   "source": [
    "antd.Calendar()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Empty"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:49.305176Z",
     "start_time": "2019-05-19T16:32:49.293208Z"
    }
   },
   "outputs": [],
   "source": [
    "antd.Empty()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### List"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:49.333100Z",
     "start_time": "2019-05-19T16:32:49.307171Z"
    }
   },
   "outputs": [],
   "source": [
    "antd.ANTList(children=[\n",
    "    antd.ANTListItem(content='1'),\n",
    "    antd.ANTListItem(content='2'),\n",
    "    antd.ANTListItem(content='3')\n",
    "])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Popover"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:49.348061Z",
     "start_time": "2019-05-19T16:32:49.334099Z"
    }
   },
   "outputs": [],
   "source": [
    "antd.Popover(\n",
    "    title='Detail', \n",
    "    extra=sel,\n",
    "    trigger='click',\n",
    "    placement='right',\n",
    "    style={'width': '300px'},\n",
    "    children=[\n",
    "        antd.Button(content='Popover', type='primary')\n",
    "    ]\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Statistic"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:49.361027Z",
     "start_time": "2019-05-19T16:32:49.351054Z"
    }
   },
   "outputs": [],
   "source": [
    "price = antd.Statistic(title='Price', value=7199.53, precision=2, suffix='USD')\n",
    "price"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:50.469204Z",
     "start_time": "2019-05-19T16:32:49.363021Z"
    }
   },
   "outputs": [],
   "source": [
    "for idx in range(100):\n",
    "    price.value = idx * 100\n",
    "    time.sleep(0.01)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Tree"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:50.494136Z",
     "start_time": "2019-05-19T16:32:50.470200Z"
    },
    "scrolled": false
   },
   "outputs": [],
   "source": [
    "antd.Tree(\n",
    "    checkable=True,\n",
    "    children=[\n",
    "        antd.TreeNode(title=\"parent 1\", key=\"0-0\", is_leaf=True, children=[\n",
    "            antd.TreeNode(title=\"parent 1-1\", key=\"0-0-0\", is_leaf=True)\n",
    "        ]),\n",
    "        antd.TreeNode(title=\"parent 1\", key=\"0-1\", is_leaf=True)\n",
    "    ]\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:50.506118Z",
     "start_time": "2019-05-19T16:32:50.496132Z"
    }
   },
   "outputs": [],
   "source": [
    "antd.TreeNode(title=\"parent 1-1\", key=\"0-0-0\", is_leaf=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Tooltip"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:50.526108Z",
     "start_time": "2019-05-19T16:32:50.508099Z"
    }
   },
   "outputs": [],
   "source": [
    "antd.Tooltip(title='Something...', children=[antd.Button(content='AAA')])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Timeline"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:50.573941Z",
     "start_time": "2019-05-19T16:32:50.528047Z"
    }
   },
   "outputs": [],
   "source": [
    "antd.Timeline(\n",
    "    mode='alternate',\n",
    "    style={'width': '98%'},\n",
    "    children=[\n",
    "        antd.TimelineItem(children=[\n",
    "            widgets.VBox([\n",
    "                antd.Icon(type='home'), \n",
    "                antd.Slider(value=10, min=0, max=100)\n",
    "            ])\n",
    "        ]),\n",
    "        antd.TimelineItem(children=[antd.Progress(percent=20, type='line', style={'width': '33%'})]),\n",
    "        antd.TimelineItem(children=[antd.Text(content='ipyantd', type=\"danger\")])\n",
    "    ]\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Tag"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:50.754441Z",
     "start_time": "2019-05-19T16:32:50.575917Z"
    }
   },
   "outputs": [],
   "source": [
    "tag_colors = [\n",
    "    'magenta', 'red', 'volcano', 'orange', 'gold', 'lime',\n",
    "    'green', 'cyan', 'blue', 'geekblue', 'purple',\n",
    "    '#f50', '#2db7f5', '#87d068', '#108ee9'\n",
    "]\n",
    "d3_category20 = [\n",
    "    '#1f77b4','#aec7e8','#ff7f0e','#ffbb78','#2ca02c','#98df8a','#d62728','#ff9896','#9467bd','#c5b0d5',\n",
    "    '#1f77b4','#aec7e8','#ff7f0e','#ffbb78','#2ca02c','#98df8a','#d62728','#ff9896','#9467bd','#c5b0d5'\n",
    "]\n",
    "\n",
    "widgets.VBox([\n",
    "    widgets.HBox([\n",
    "        antd.Tag(content=tag_color, color=tag_color) for tag_color in tag_colors\n",
    "    ]),\n",
    "    widgets.HBox([\n",
    "        antd.Tag(content=tag_color, color=tag_color) for tag_color in d3_category20\n",
    "    ])\n",
    "])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Tabs"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:50.804307Z",
     "start_time": "2019-05-19T16:32:50.756435Z"
    }
   },
   "outputs": [],
   "source": [
    "antd.Tabs(\n",
    "    type='line',\n",
    "    tab_position='top',\n",
    "    size='small',\n",
    "    style={\n",
    "        'height': 150\n",
    "    },\n",
    "    children=[\n",
    "        antd.TabPane(tab='A', key='A', content='AAA'),\n",
    "        antd.TabPane(tab='B', key='B', content='BBB'),\n",
    "        antd.TabPane(tab='C', key='C', content='CCC'),\n",
    "        antd.TabPane(tab='D', key='D', content='DDD'),\n",
    "        antd.TabPane(tab='E', key='E', content='EEE')\n",
    "    ]\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Table"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:50.823256Z",
     "start_time": "2019-05-19T16:32:50.806301Z"
    }
   },
   "outputs": [],
   "source": [
    "data_source = [{\n",
    "    'key': '1',\n",
    "    'name': 'XOO',\n",
    "    'age': 32,\n",
    "    'address': 'AAA'\n",
    "}, {\n",
    "    'key': '2',\n",
    "    'name': 'OOO',\n",
    "    'age': 42,\n",
    "    'address': 'BBB'\n",
    "}];\n",
    "\n",
    "columns = [{\n",
    "    'title': 'Name',\n",
    "    'dataIndex': 'name',\n",
    "    'key': 'name',\n",
    "}, {\n",
    "    'title': 'Age',\n",
    "    'dataIndex': 'age',\n",
    "    'key': 'age',\n",
    "}, {\n",
    "    'title': 'Address',\n",
    "    'dataIndex': 'address',\n",
    "    'key': 'address',\n",
    "}];\n",
    "\n",
    "antd.Table(data_source=data_source, columns=columns, bordered=True, size='small')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Feedback"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 4,
        "height": 4,
        "hidden": false,
        "row": 24,
        "width": 4
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "### Progress"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:50.846195Z",
     "start_time": "2019-05-19T16:32:50.825251Z"
    },
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 8,
        "height": 6,
        "hidden": false,
        "row": 25,
        "width": null
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "pg1 = antd.Progress(percent=20, type='line', style={'width': '33%'})\n",
    "pg2 = antd.Progress(percent=100, type='circle', style={'width': '20%'})\n",
    "widgets.VBox([pg1, pg2])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:50.854174Z",
     "start_time": "2019-05-19T16:32:50.848190Z"
    },
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 0,
        "height": 4,
        "hidden": false,
        "row": 28,
        "width": 4
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "pg1.percent"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Drawer"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:50.866142Z",
     "start_time": "2019-05-19T16:32:50.855172Z"
    }
   },
   "outputs": [],
   "source": [
    "drawer = antd.Drawer(title='Test', visible=True)\n",
    "drawer"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:51.876691Z",
     "start_time": "2019-05-19T16:32:50.868137Z"
    }
   },
   "outputs": [],
   "source": [
    "drawer.visible = True\n",
    "time.sleep(1)\n",
    "drawer.visible = False"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:51.920565Z",
     "start_time": "2019-05-19T16:32:51.884675Z"
    }
   },
   "outputs": [],
   "source": [
    "b2 = antd.Button(description='Open')\n",
    "def click(button):\n",
    "    drawer.visible = not drawer.visible\n",
    "b2.on_click(click)\n",
    "b2"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Model"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:51.940514Z",
     "start_time": "2019-05-19T16:32:51.923593Z"
    }
   },
   "outputs": [],
   "source": [
    "antd.Model(title='123', visible=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Popconfirm"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:51.957468Z",
     "start_time": "2019-05-19T16:32:51.944503Z"
    }
   },
   "outputs": [],
   "source": [
    "antd.Popconfirm()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Spin"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:51.972427Z",
     "start_time": "2019-05-19T16:32:51.959464Z"
    }
   },
   "outputs": [],
   "source": [
    "antd.Spin()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Skeleton"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:51.984418Z",
     "start_time": "2019-05-19T16:32:51.974424Z"
    },
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "antd.Skeleton(loading=True, active=True, avatar=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Other"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Anchor"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:52.001373Z",
     "start_time": "2019-05-19T16:32:51.985394Z"
    }
   },
   "outputs": [],
   "source": [
    "antd.Anchor(children=[\n",
    "    antd.AnchorLink(title='Demo A'),\n",
    "    antd.AnchorLink(title='Demo B')\n",
    "])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### BackTop"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:52.011323Z",
     "start_time": "2019-05-19T16:32:52.002346Z"
    }
   },
   "outputs": [],
   "source": [
    "antd.BackTop()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### ConfigProvider"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:52.026283Z",
     "start_time": "2019-05-19T16:32:52.012321Z"
    }
   },
   "outputs": [],
   "source": [
    "antd.ConfigProvider(prefix_cls='AAA', children=[\n",
    "    antd.Button(description='Test')\n",
    "])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Divider"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:52.071163Z",
     "start_time": "2019-05-19T16:32:52.027279Z"
    }
   },
   "outputs": [],
   "source": [
    "widgets.VBox([\n",
    "    antd.Divider(content='Left', orientation='left'),\n",
    "    antd.Divider(content='Center', orientation='center'),\n",
    "    antd.Divider(content='Right', orientation='right', dashed=True),\n",
    "    widgets.HBox([\n",
    "        antd.Text(content='AAA'),\n",
    "        antd.Divider(type='vertical'),\n",
    "        antd.Text(content='BBB'),\n",
    "        antd.Divider(type='vertical'),\n",
    "        antd.Text(content='CCC')\n",
    "    ])\n",
    "])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### LocaleProvider"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:52.076148Z",
     "start_time": "2019-05-19T16:32:52.073158Z"
    }
   },
   "outputs": [],
   "source": [
    "# locale = {\n",
    "#   'locale': 'zh-tw',\n",
    "# }\n",
    "\n",
    "# antd.LocaleProvider(locale=locale, child=antd.Pagination(total=50, default_page_size=10, size='small'))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Chart"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### ReactEcharts"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:52.090139Z",
     "start_time": "2019-05-19T16:32:52.077146Z"
    }
   },
   "outputs": [],
   "source": [
    "option = {\n",
    "    'title': {\n",
    "        'text': 'ECharts 入门示例'\n",
    "    },\n",
    "    'tooltip': {},\n",
    "    'legend': {\n",
    "        'data':['销量']\n",
    "    },\n",
    "    'xAxis': {\n",
    "        'data': [\"衬衫\",\"羊毛衫\",\"雪纺衫\",\"裤子\",\"高跟鞋\",\"袜子\"]\n",
    "    },\n",
    "    'yAxis': {},\n",
    "    'series': [{\n",
    "        'name': '销量',\n",
    "        'type': 'bar',\n",
    "        'data': [5, 20, 36, 10, 10, 20]\n",
    "    }]\n",
    "}\n",
    "\n",
    "antd.ReactEcharts(option=option, theme='shine')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:52.294041Z",
     "start_time": "2019-05-19T16:32:52.091109Z"
    }
   },
   "outputs": [],
   "source": [
    "import pandas as pd"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:52.306009Z",
     "start_time": "2019-05-19T16:32:52.294933Z"
    }
   },
   "outputs": [],
   "source": [
    "df = pd.read_csv('./data/PricesEarnings_2012.csv', index_col=False)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:52.311888Z",
     "start_time": "2019-05-19T16:32:52.306901Z"
    }
   },
   "outputs": [],
   "source": [
    "parallelAxis = [\n",
    "    dict(dim=idx, name=col, type='category')\n",
    "    if col == 'Cities' or col == '' else dict(dim=idx, name=col)\n",
    "    for idx, col in enumerate(df.columns)\n",
    "]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2019-05-19T16:32:52.378736Z",
     "start_time": "2019-05-19T16:32:52.313882Z"
    }
   },
   "outputs": [],
   "source": [
    "option = {\n",
    "    \"animation\": False,\n",
    "    \"brush\": {\n",
    "        \"brushLink\": \"all\",\n",
    "        \"xAxisIndex\": [],\n",
    "        \"yAxisIndex\": [],\n",
    "        \"inBrush\": {\n",
    "            \"opacity\": 1\n",
    "        }\n",
    "    },\n",
    "    \"tooltip\": {\n",
    "        \"trigger\": \"item\"\n",
    "    },\n",
    "    \"visualMap\": {\n",
    "        \"show\": True,\n",
    "        \"type\": 'continuous', # 'continuous', 'piecewise'\n",
    "#         categories: groupCategories,\n",
    "        \"min\": 0,\n",
    "        \"max\": 200000,\n",
    "        \"dimension\": 55,\n",
    "        \"inRange\": {\n",
    "            \"color\": ['#2ca02c','#eac736','#d62728']\n",
    "        },\n",
    "        \"outOfRange\": {\n",
    "            \"color\": ['#2ca02c']\n",
    "        },\n",
    "#         top: 20,\n",
    "#         textStyle: {\n",
    "#             color: '#fff'\n",
    "#         },\n",
    "#         realtime: false\n",
    "        \"orient\": \"horizontal\"\n",
    "    },\n",
    "    \"parallelAxis\": parallelAxis,\n",
    "    \"parallel\": {\n",
    "        \"top\": 40,\n",
    "        \"left\": 40,\n",
    "        \"right\": 40,\n",
    "        \"bottom\": 150,\n",
    "        \"axisExpandable\": True,\n",
    "        \"axisExpandCenter\": 15,\n",
    "        \"axisExpandCount\": 10,\n",
    "        \"axisExpandWidth\": 40,\n",
    "        \"axisExpandTriggerOn\": \"mousemove\",\n",
    "        \"parallelAxisDefault\": {\n",
    "            \"type\": \"value\",\n",
    "            \"name\": \"AQI指数\",\n",
    "            \"nameLocation\": \"start\",\n",
    "            \"nameRotate\": 45,\n",
    "            \"nameTruncate\": {\n",
    "                \"maxWidth\": 250\n",
    "            },\n",
    "            \"nameGap\": 20,\n",
    "            \"splitNumber\": 3,\n",
    "            \"nameTextStyle\": {\n",
    "                \"fontSize\": 10\n",
    "            },\n",
    "            \"axisLine\": {\n",
    "                \"lineStyle\": {\n",
    "                    \"color\": \"#555\"\n",
    "                }\n",
    "            },\n",
    "            \"axisTick\": {\n",
    "                \"show\": False,\n",
    "                \"lineStyle\": {\n",
    "                    \"color\": \"#555\"\n",
    "                }\n",
    "            },\n",
    "            \"splitLine\": {\n",
    "                \"show\": False\n",
    "            },\n",
    "            \"axisLabel\": {\n",
    "                \"textStyle\": {\n",
    "                    \"fontSize\": 9,\n",
    "                    \"color\": \"#555\"\n",
    "                }\n",
    "            }\n",
    "        }\n",
    "    },\n",
    "    \"series\": [{\n",
    "        \"name\": \"parallel\",\n",
    "        \"type\": \"parallel\",\n",
    "        \"smooth\": True,\n",
    "        \"lineStyle\": {\n",
    "            \"normal\": {\n",
    "                \"width\": 0.75,\n",
    "                \"opacity\": 0.3\n",
    "            }\n",
    "        },\n",
    "        \"blendMode\": 'darken',\n",
    "        \"data\": df.values.tolist()\n",
    "    }]\n",
    "}\n",
    "\n",
    "antd.ReactEcharts(option=option, theme='shine', style={'height': 400})"
   ]
  }
 ],
 "metadata": {
  "extensions": {
   "jupyter_dashboards": {
    "activeView": "grid_default",
    "version": 1,
    "views": {
     "grid_default": {
      "cellMargin": 10,
      "defaultCellHeight": 20,
      "maxColumns": 12,
      "name": "grid",
      "type": "grid"
     },
     "report_default": {
      "name": "report",
      "type": "report"
     }
    }
   }
  },
  "kernelspec": {
   "display_name": "Python 3",
   "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.6.5"
  },
  "toc": {
   "base_numbering": 1,
   "nav_menu": {},
   "number_sections": true,
   "sideBar": true,
   "skip_h1_title": false,
   "title_cell": "Table of Contents",
   "title_sidebar": "Contents",
   "toc_cell": false,
   "toc_position": {
    "height": "542px",
    "left": "1230px",
    "top": "143.8px",
    "width": "298px"
   },
   "toc_section_display": true,
   "toc_window_display": true
  },
  "varInspector": {
   "cols": {
    "lenName": 16,
    "lenType": 16,
    "lenVar": 40
   },
   "kernels_config": {
    "python": {
     "delete_cmd_postfix": "",
     "delete_cmd_prefix": "del ",
     "library": "var_list.py",
     "varRefreshCmd": "print(var_dic_list())"
    },
    "r": {
     "delete_cmd_postfix": ") ",
     "delete_cmd_prefix": "rm(",
     "library": "var_list.r",
     "varRefreshCmd": "cat(var_dic_list()) "
    }
   },
   "oldHeight": 400.4,
   "position": {
    "height": "422px",
    "left": "610px",
    "right": "20px",
    "top": "162px",
    "width": "608px"
   },
   "types_to_exclude": [
    "module",
    "function",
    "builtin_function_or_method",
    "instance",
    "_Feature"
   ],
   "varInspector_section_display": "block",
   "window_display": false
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}