3 Custom components.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipyvuetify as v\n",
    "import traitlets\n",
    "from traitlets import Int, Unicode, List, Dict, Bool"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# URL text box\n",
    "\n",
    "https://vuetifyjs.com/en/components/text-fields"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "v.Col(cols=6, children=[\n",
    "          v.TextField(outlined=True, class_='ma-2', label='URL', placeholder='https://')\n",
    "])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# home listing\n",
    "# https://www.rightmove.co.uk/property-for-sale/property-72921928.html\n",
    "\n",
    "# all listing data: property of Rightmove.co.uk"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "from download_listing import get_listing\n",
    "from pprint import pprint\n",
    "\n",
    "class URLTextField(v.VuetifyTemplate):\n",
    "    url = Unicode('').tag(sync=True, allow_null=True)\n",
    "    loading = Bool(False).tag(sync=True)\n",
    "    template = Unicode('''\n",
    "    <v-text-field\n",
    "            class=\"ma-2\"\n",
    "            v-model=\"url\"\n",
    "            :disabled=\"loading\"\n",
    "            :loading=\"loading\"\n",
    "            label=\"URL\"\n",
    "            placeholder=\"https:// ...\"\n",
    "            outlined\n",
    "            clearable\n",
    "            @change=get_properties(url)\n",
    "    ></v-text-field>\n",
    "    ''').tag(sync=True)\n",
    "    \n",
    "    def vue_get_properties(self, data):\n",
    "        self.loading = True\n",
    "        pprint(get_listing(data))\n",
    "        self.loading = False\n",
    "\n",
    "URLTextField()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Card\n",
    "https://vuetifyjs.com/en/components/cards"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from download_listing import get_listing\n",
    "\n",
    "class URLTextField(v.VuetifyTemplate):\n",
    "    url = Unicode('').tag(sync=True, allow_null=True)\n",
    "    loading = Bool(False).tag(sync=True)\n",
    "    props = List(get_listing('')).tag(sync=True)\n",
    "    show = Bool(False).tag(sync=True)\n",
    "    price_string = Unicode('£1,000,000').tag(sync=True)\n",
    "    template = Unicode('''\n",
    "    <template>\n",
    "    <v-col cols=\"8\">\n",
    "        <v-text-field\n",
    "                class=\"ma-2\"\n",
    "                v-model=\"url\"\n",
    "                :disabled=\"loading\"\n",
    "                :loading=\"loading\"\n",
    "                label=\"URL\"\n",
    "                placeholder=\"https:// ...\"\n",
    "                outlined\n",
    "                clearable\n",
    "                @change=get_properties(url)\n",
    "        ></v-text-field>\n",
    "\n",
    "          <v-card\n",
    "            class=\"mx-auto\"\n",
    "            max-width=\"444\"\n",
    "          >\n",
    "            <v-img\n",
    "              v-bind:src=\"props[3]\"\"\n",
    "              height=\"200px\"\n",
    "            ></v-img>\n",
    "            <v-card-title>\n",
    "              {{ props[1] }}\n",
    "            </v-card-title>\n",
    "            <v-card-subtitle class=\"ma-4\">\n",
    "              {{ price_string }} - {{ props[2] }}\n",
    "            </v-card-subtitle>\n",
    "            <v-card-actions>\n",
    "              <v-btn text v-bind:href=\"url\">View on Rightmove</v-btn>\n",
    "              <v-spacer></v-spacer>\n",
    "              <v-btn\n",
    "                icon\n",
    "                @click=\"show = !show\"\n",
    "              >\n",
    "                <v-icon>{{ show ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>\n",
    "              </v-btn>\n",
    "            </v-card-actions>\n",
    "\n",
    "            <v-expand-transition>\n",
    "              <div v-show=\"show\">\n",
    "                <v-divider></v-divider>\n",
    "                <v-card-text>\n",
    "                  More information ...\n",
    "                </v-card-text>\n",
    "              </div>\n",
    "            </v-expand-transition>\n",
    "          </v-card>\n",
    "    </v-col>\n",
    "    </template>\n",
    "    ''').tag(sync=True)\n",
    "    \n",
    "    def vue_get_properties(self, data):\n",
    "        self.disabled = True\n",
    "        self.loading = True\n",
    "        self.props = list(get_listing(data))\n",
    "        self.price_string = f'£{self.props[0]:,.0f}'\n",
    "        self.disabled = False\n",
    "        self.loading = False\n",
    "\n",
    "u = URLTextField()\n",
    "u"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Sparkline\n",
    "https://vuetifyjs.com/en/components/sparklines"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "%matplotlib inline"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import numpy as np\n",
    "import pandas as pd\n",
    "\n",
    "strange_walk = np.random.beta(2, 3, 10) * 100 * np.random.normal(size=10)\n",
    "strange_walk = pd.Series(strange_walk, name='Strange Walk').cumsum().round(2)\n",
    "\n",
    "strange_walk.plot()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "class SeriesSparkline(v.VuetifyTemplate):\n",
    "    name = Unicode('').tag(sync=True)\n",
    "    value = List([1,2,3]).tag(sync=True)\n",
    "    template = Unicode(\"\"\"\n",
    "    <template>\n",
    "      <v-card\n",
    "        class=\"mx-auto text-center\"\n",
    "        color=\"green\"\n",
    "        dark\n",
    "        max-width=\"600\"\n",
    "      >\n",
    "        <v-card-text>\n",
    "          <v-sheet color=\"rgba(0, 0, 0, .12)\">\n",
    "            <v-sparkline\n",
    "              :value=\"value\"\n",
    "              color=\"rgba(255, 255, 255, .7)\"\n",
    "              height=\"100\"\n",
    "              padding=\"24\"\n",
    "              stroke-linecap=\"round\"\n",
    "              smooth\n",
    "            >\n",
    "              <template v-slot:label=\"item\">\n",
    "                {{ item.value }}\n",
    "              </template>\n",
    "            </v-sparkline>\n",
    "          </v-sheet>\n",
    "        </v-card-text>\n",
    "\n",
    "        <v-card-text>\n",
    "          <div class=\"display-1 font-weight-thin\">{{ name }}</div>\n",
    "        </v-card-text>\n",
    "      </v-card>\n",
    "    </template>\n",
    "    \"\"\").tag(sync=True)\n",
    "    \n",
    "    def __init__(self, *args, \n",
    "                 data=pd.Series(),\n",
    "                 **kwargs):\n",
    "        super().__init__(*args, **kwargs)\n",
    "        self.name = data.name\n",
    "        self.value = data.tolist()\n",
    "        \n",
    "s = SeriesSparkline(data=strange_walk)\n",
    "\n",
    "s"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "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.7.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}