Coalitiewijzer kandidaten.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import pickle\n",
    "from collections import namedtuple\n",
    "\n",
    "import os\n",
    "from urllib.parse import parse_qs\n",
    "\n",
    "import ipywidgets as widgets\n",
    "import ipyvuetify as v\n",
    "import traitlets\n",
    "import ipyvuedraggable as vd\n",
    "\n",
    "import pandas as pd\n",
    "\n",
    "Peiling = namedtuple('Peiling', ['verwacht', 'laag', 'hoog'])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "with open('peilingen.pkl', 'rb') as fh:\n",
    "    numbers = pickle.load(fh)\n",
    "with open('table.pkl', 'rb') as fh:\n",
    "    table = pickle.load(fh)\n",
    "with open('candidates.pkl', 'rb') as fh:\n",
    "    candidates = pickle.load(fh)\n",
    "with open('candidate_plaatsen.pkl', 'rb') as fh:\n",
    "    places = pickle.load(fh)\n",
    "\n",
    "parties = list(numbers.keys())"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "buttons = {party: v.Btn(text=True, style_=\"text-transform: none\", children=[party]) for party in parties}\n",
    "toggle_multi = v.BtnToggle(v_model=url_picked_party_indices, multiple=True, children=list(buttons.values()))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "candidates_df = pd.DataFrame(candidates)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "candidate_list_widgets = {}\n",
    "for party in parties:\n",
    "    party_candidates = candidates_df[candidates_df.partij == party]\n",
    "    candidate_list_widgets[party] = v.List(children=[\n",
    "        v.Subheader(children=[party]),\n",
    "        v.ListItemGroup(v_model=\"selectedItem\", children=[\n",
    "            v.ListItem(children=[\n",
    "                v.ListItemContent(children=[\n",
    "                    v.ListItemTitle(children=[naam])\n",
    "                ])\n",
    "            ])\n",
    "            for naam in party_candidates.naam\n",
    "        ])\n",
    "    ])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "lists_layout = v.Layout()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def on_toggle(btn_toggle, event, data):\n",
    "    selected = tuple(parties[ix] for ix in sorted(data))\n",
    "    peiling = table[selected]\n",
    "\n",
    "    seats.low = peiling.laag\n",
    "    seats.exp = peiling.verwacht\n",
    "    seats.high = peiling.hoog\n",
    "    \n",
    "    lists_layout.children = [candidate_list_widgets[party] for party in selected]\n",
    "    candidate_list_widgets['CU']\n",
    "    \n",
    "    url = base_url\n",
    "    if len(selected) > 0:\n",
    "        url = base_url + \"?\" + \"parties=\" + \",\".join(selected)\n",
    "\n",
    "    share_url.value = f'<a href=\"{url}\">{url}</a>'\n",
    "\n",
    "toggle_multi.on_event('change', on_toggle)\n",
    "if len(url_picked_party_indices) > 0:\n",
    "    on_toggle(None, None, url_picked_party_indices)\n",
    "\n",
    "display(seats)\n",
    "display(v.Layout(children=[toggle_multi]))\n",
    "display(lists_layout)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "ministeries = [\"Algemene Zaken (Minister-president)\",\n",
    "               \"Binnenlandse Zaken en Koninkrijksrelaties\",\n",
    "               \"Buitenlandse Zaken\",\n",
    "               \"Defensie\",\n",
    "               \"Economische Zaken en Klimaat\",\n",
    "               \"Financiën\",\n",
    "               \"Infrastructuur en Waterstaat\",\n",
    "               \"Landbouw, Natuur en Voedselkwaliteit\",\n",
    "               \"Justitie en Veiligheid\",\n",
    "               \"Onderwijs, Cultuur en Wetenschap\",\n",
    "               \"Sociale Zaken en Werkgelegenheid\",\n",
    "               \"Volksgezondheid, Welzijn en Sport\"]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "koning = v.CardText(children=[\n",
    "#     v.Html(children=[\n",
    "#         '<span class=\"subheading\">Koning</span>'\n",
    "#     ]),\n",
    "    v.Subheader(children=[\"Koning\"]),\n",
    "    v.ChipGroup(column=True, children=[\n",
    "        v.Chip(children=[\"Willem-Alexander der Nederlanden\"])\n",
    "    ])\n",
    "])\n",
    "\n",
    "chip1 = True\n",
    "chip_groups = {ministerie: v.CardText(children=[\n",
    "#     v.Html(children=[\n",
    "#         f'<span class=\"subheading\">{ministerie}</span>'\n",
    "#     ]),\n",
    "    v.Subheader(children=[ministerie]),\n",
    "    v.ChipGroup(column=True, children=[\n",
    "        v.Chip(outlined=True, \n",
    "               if_=\"chip1\",\n",
    "               close=True,\n",
    "               children=[\"Test\"])\n",
    "    ])\n",
    "]) for ministerie in ministeries}\n",
    "\n",
    "def on_click_close(*args, **kwargs):\n",
    "    chip1 = False\n",
    "\n",
    "chip_groups['Defensie'].children[1].children[0].on_event('click:close', on_click_close)\n",
    "\n",
    "regering_bar = v.Toolbar(flat=True, dark=True, color=\"deep-purple accent-4\",\n",
    "                         children=[v.ToolbarTitle(children=[\"Regering\"])])\n",
    "    \n",
    "regering = v.Card(_class=\"mx-auto\", max_width=\"400\",\n",
    "                  children=[regering_bar, koning] + list(chip_groups.values()))\n",
    "\n",
    "regering\n",
    "\n",
    "\n",
    "# TIP MAARTEN: maak 1 widget (met template) en denk in termen van data\n",
    "# TIP MARIO: https://github.com/mariobuikhuizen/ipyvuedraggable"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "chip = v.Chip(outlined=True, \n",
    "               close=True,\n",
    "               children=[\"Test\"])\n",
    "\n",
    "def on_clicky_close(widget, event, data):\n",
    "    widget.layout.display = 'none'\n",
    "\n",
    "def on_clicky(*args, **kwargs):\n",
    "    print(\"clikass\")\n",
    "\n",
    "chip.on_event('click:close', on_clicky_close)\n",
    "chip.on_event('click', on_clicky)\n",
    "\n",
    "display(chip)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "class ClosableChip(v.VuetifyTemplate):\n",
    "    chip = traitlets.Bool(True).tag(sync=True)\n",
    "    template = traitlets.Unicode('''\n",
    "<template>\n",
    "    <v-chip\n",
    "      v-if=\"chip\"\n",
    "      close\n",
    "      outlined\n",
    "      @click:close=\"chip = false\"\n",
    "    >\n",
    "</template>\n",
    "''').tag(sync=True)\n",
    "\n",
    "chip = ClosableChip()\n",
    "chip"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Druk op de knoppen om partijen toe te voegen aan je coalitie. Een meerderheid heeft 76 zetels nodig. De helder rode zetel is het verwachte aantal zetels. In licht rood (zijwaarts gekantelde zetels) zie je onder- en bovengrenzen van het verwachte aantal zetels op basis van verschillende peilingen.\n",
    "\n",
    "Press the buttons to add parties to your coalition. A majority coalition needs 76 seats. The bright red seat is the expected number of seats. In light red (tipped sideways seats) we show the lower and upper limits of the expected amount of seats based on different polls."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "display(share_url)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "---\n",
    "\n",
    "Data: [Peilingwijzer (op basis van peilingen I&O Research, Ipsos en Kantar)](https://peilingwijzer.tomlouwerse.nl/). Code: [see blogpost on Medium](https://blog.esciencecenter.nl/coalition-polls-for-the-people-with-coalitiewijzer-68bca83b95e7).\n",
    "\n",
    "By [Patrick Bos](https://twitter.com/egpbos/)\n",
    "\n",
    "[<img src=\"logo.png\" alt=\"Netherlands eScience Center logo\" style=\"height: 1.5em;\" align=\"left\"/>](https://esciencecenter.nl/)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipyvuetify as v\n",
    "import ipyvuedraggable as d\n",
    "from traitlets import (Any, Unicode, List)\n",
    "\n",
    "# Output a dummy Draggable instance, so ipyvue gets loaded. This does not \n",
    "# happen automatically when only VueTemplate is used\n",
    "d.Draggable()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def getItems():\n",
    "    return [\n",
    "        {\n",
    "          'id': 1,\n",
    "          'avatar': \"https://s3.amazonaws.com/vuetify-docs/images/lists/1.jpg\",\n",
    "          'title': \"Brunch this life?\",\n",
    "          'subtitle': \"Subtitle 1\"\n",
    "        },\n",
    "        {\n",
    "          'id': 2,\n",
    "          'avatar': \"https://s3.amazonaws.com/vuetify-docs/images/lists/2.jpg\",\n",
    "          'title': \"Winter Lunch\",\n",
    "          'subtitle': \"Subtitle 2\"\n",
    "        },\n",
    "        {\n",
    "          'id': 3,\n",
    "          'avatar': \"https://s3.amazonaws.com/vuetify-docs/images/lists/3.jpg\",\n",
    "          'title': \"Oui oui\",\n",
    "          'subtitle': \"Subtitle 3\"\n",
    "        }\n",
    "      ]\n",
    "\n",
    "def getItems2():\n",
    "    return [\n",
    "    {\n",
    "      'id': 4,\n",
    "      'avatar': \"https://s3.amazonaws.com/vuetify-docs/images/lists/4.jpg\",\n",
    "      'title': \"Brunch this weekend?\",\n",
    "      'subtitle': \"Subtitle 4\"\n",
    "    },\n",
    "    {\n",
    "      'id': 5,\n",
    "      'avatar': \"https://s3.amazonaws.com/vuetify-docs/images/lists/5.jpg\",\n",
    "      'title': 'Summer BBQ',\n",
    "      'subtitle': \"Subtitle 5\"\n",
    "    }\n",
    "]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "class MyDraggable(v.VuetifyTemplate):\n",
    "    items =  List(getItems()).tag(sync=True)\n",
    "\n",
    "    items2 = List(getItems2()).tag(sync=True)\n",
    "\n",
    "    template = Unicode('''\n",
    "        <v-content>\n",
    "          <v-container fluid>\n",
    "            <v-layout align-start justify-center>\n",
    "              <v-flex xs4 class=\"elevation-1 pa-3 ma-2\">\n",
    "                <v-list two-line>\n",
    "                  <v-subheader>\n",
    "                    FIRST LIST\n",
    "                  </v-subheader>\n",
    "                  <draggable v-model=\"items\" :group=\"{name:'people'}\" style=\"min-height: 10px\">\n",
    "                    <template v-for=\"item in items\">\n",
    "                    <v-list-item :key=\"item.id\">\n",
    "                    <v-list-item-avatar>\n",
    "                      <img :src=\"item.avatar\">\n",
    "                    </v-list-item-avatar>\n",
    "                    <v-list-item-content>\n",
    "                      <v-list-item-title v-html=\"item.title\"></v-list-item-title>\n",
    "                      <v-list-item-sub-title v-html=\"item.subtitle\"></v-list-item-sub-title>\n",
    "                    </v-list-item-content>\n",
    "                  </v-list-item>\n",
    "                </template>\n",
    "                  </draggable>\n",
    "                </v-list>\n",
    "              </v-flex>\n",
    "              <v-flex xs4 class=\"elevation-1 pa-3 ma-2\">\n",
    "                <v-list two-line>\n",
    "                  <v-subheader>\n",
    "                    SECOND LIST\n",
    "                  </v-subheader>\n",
    "                  <draggable v-model=\"items2\" :group=\"{name:'people'}\" style=\"min-height: 10px\">\n",
    "                    <template v-for=\"item in items2\">\n",
    "                  <v-list-item :key=\"item.id\">\n",
    "                    <v-list-item-avatar>\n",
    "                      <img :src=\"item.avatar\">\n",
    "                    </v-list-item-avatar>\n",
    "                    <v-list-item-content>\n",
    "                      <v-list-item-title v-html=\"item.title\"></v-list-item-title>\n",
    "                      <v-list-item-sub-title v-html=\"item.subtitle\"></v-list-item-sub-title>\n",
    "                    </v-list-item-content>\n",
    "                  </v-list-item>\n",
    "                </template>\n",
    "                  </draggable>\n",
    "                </v-list>\n",
    "              </v-flex>\n",
    "            </v-layout>\n",
    "          </v-container>\n",
    "        </v-content>\n",
    "        ''').tag(sync=True)\n",
    "    \n",
    "    \n",
    "MyDraggable()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def makeListItem(item):\n",
    "    return v.ListItem(children=[\n",
    "        v.ListItemAvatar(children=[\n",
    "            v.Html(tag='img', attributes={'src': item['avatar']})\n",
    "        ]),\n",
    "        v.ListItemContent(children=[\n",
    "            v.ListItemTitle(children=[item['title']]),\n",
    "            v.ListItemSubtitle(children=[item['subtitle']])\n",
    "        ])\n",
    "    ])\n",
    "\n",
    "dg1 = d.Draggable(\n",
    "    v_model=getItems(),\n",
    "    group={'name': 'people'},\n",
    "    children=[makeListItem(item) for item in getItems()])\n",
    "\n",
    "def update_dg1(change):\n",
    "    dg1.children=[makeListItem(item) for item in dg1.v_model]\n",
    "    \n",
    "dg1.observe(update_dg1, names=['v_model'])\n",
    "\n",
    "\n",
    "dg2 = d.Draggable(\n",
    "    v_model=getItems2(),\n",
    "    group={'name': 'people'},\n",
    "    children=[makeListItem(item) for item in getItems2()])\n",
    "\n",
    "def update_dg2(change):\n",
    "    dg2.children=[makeListItem(item) for item in dg2.v_model]\n",
    "    \n",
    "dg2.observe(update_dg2, names=['v_model'])\n",
    "\n",
    "\n",
    "v.Content(children=[\n",
    "    v.Container(fluid=True, children=[\n",
    "        v.Layout(align_start=True, justify_center=True, children=[\n",
    "            v.Flex(xs4=True, class_='elevation-1 pa-3 ma-2', children=[\n",
    "                v.List(two_line=True, children=[\n",
    "                    v.Subheader(children=['FIRST LIST']),\n",
    "                    dg1\n",
    "                ])\n",
    "            ]),\n",
    "            v.Flex(xs4=True, class_='elevation-1 pa-3 ma-2', children=[\n",
    "                v.List(two_line=True, children=[\n",
    "                    v.Subheader(children=['SECOND LIST']),\n",
    "                    dg2\n",
    "                ])\n",
    "            ])\n",
    "        ])\n",
    "    ])\n",
    "])\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "class MyDraggableArea(v.VuetifyTemplate):\n",
    "    items =  List(getItems() + getItems2()).tag(sync=True)\n",
    "\n",
    "    items2 = List().tag(sync=True)\n",
    "\n",
    "    template = Unicode('''\n",
    "        <!-- Toplevel draggable is used to cancel drop -->\n",
    "        <draggable id=\"catchAll\" class=\"droptarget\" :group=\"{name:'people'}\">\n",
    "        <v-content>\n",
    "          <v-container fluid>\n",
    "            <v-layout align-start justify-center>\n",
    "              <v-flex xs4 class=\"elevation-1 pa-3 ma-2\">\n",
    "                <v-list two-line>\n",
    "                  <v-subheader>\n",
    "                    FIRST LIST\n",
    "                  </v-subheader>\n",
    "                  <draggable\n",
    "                      id=\"source\"\n",
    "                      :move=\"checkMove\"\n",
    "                      v-model=\"items\" \n",
    "                      :group=\"{name:'people', pull:'clone'}\"\n",
    "                      style=\"min-height: 10px\">\n",
    "                    <template v-for=\"item in items\">\n",
    "                    <v-list-item :key=\"item.id\">\n",
    "                    <v-list-item-avatar>\n",
    "                      <img :src=\"item.avatar\">\n",
    "                    </v-list-item-avatar>\n",
    "                    <v-list-item-content>\n",
    "                      <v-list-item-title v-html=\"item.title\"></v-list-item-title>\n",
    "                      <v-list-item-subtitle v-html=\"item.subtitle\"></v-list-item-sub-title>\n",
    "                    </v-list-item-content>\n",
    "                  </v-list-item>\n",
    "                </template>\n",
    "                  </draggable>\n",
    "                </v-list>\n",
    "              </v-flex>\n",
    "              <v-flex xs4 class=\"elevation-1 pa-3 ma-2\">\n",
    "                <v-list two-line>\n",
    "                  <v-subheader>\n",
    "                    DROP AREA\n",
    "                  </v-subheader>\n",
    "                  <draggable v-model=\"items2\" :group=\"{name:'people'}\" class=\"droptarget\">\n",
    "                    <div class=\"droparea\">Nr of items: {{ items2.length }}</div>\n",
    "                  </draggable>\n",
    "                </v-list>\n",
    "              </v-flex>\n",
    "            </v-layout>\n",
    "          </v-container>\n",
    "        </v-content>\n",
    "        </draggable>\n",
    "        ''').tag(sync=True)\n",
    "\n",
    "    css = Unicode('''\n",
    "        /* Hide dragged element in target */\n",
    "        .droptarget > [draggable=true] {\n",
    "            display: none;\n",
    "        }\n",
    "\n",
    "        .sortable-ghost.no-drop {\n",
    "           cursor: no-drop;\n",
    "        }\n",
    "\n",
    "        .droparea {\n",
    "            height: 200px;\n",
    "            border: 1px solid black;\n",
    "        }\n",
    "    ''').tag(sync=True)\n",
    "\n",
    "\n",
    "    methods = Unicode('''{\n",
    "        checkMove(e) {\n",
    "            duplicate = this.items2.some(item => item.id === e.draggedContext.element.id)\n",
    "            canMove = e.to.id !== \"source\" && !duplicate;\n",
    "            cancelDrop = e.to.id === \"catchAll\"\n",
    "\n",
    "            if (canMove && !cancelDrop) {\n",
    "                e.dragged.classList.remove('no-drop')\n",
    "            } else {\n",
    "                e.dragged.classList.add('no-drop')\n",
    "            }\n",
    "\n",
    "            return canMove;\n",
    "        },\n",
    "    }''').tag(sync=True)\n",
    "    \n",
    "\n",
    "MyDraggableArea()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}