dashboard.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Collecting plotly\n",
      "  Using cached plotly-5.18.0-py3-none-any.whl (15.6 MB)\n",
      "Collecting panel\n",
      "  Using cached panel-1.3.8-py2.py3-none-any.whl (20.8 MB)\n",
      "Requirement already satisfied: tenacity>=6.2.0 in /opt/homebrew/lib/python3.10/site-packages (from plotly) (8.2.3)\n",
      "Requirement already satisfied: packaging in /opt/homebrew/lib/python3.10/site-packages (from plotly) (23.2)\n",
      "Collecting bokeh<3.4.0,>=3.2.0 (from panel)\n",
      "  Using cached bokeh-3.3.4-py3-none-any.whl (6.8 MB)\n",
      "Collecting param<3.0,>=2.0.0 (from panel)\n",
      "  Using cached param-2.0.2-py3-none-any.whl (113 kB)\n",
      "Collecting pyviz-comms>=2.0.0 (from panel)\n",
      "  Using cached pyviz_comms-3.0.1-py3-none-any.whl (82 kB)\n",
      "Collecting xyzservices>=2021.09.1 (from panel)\n",
      "  Using cached xyzservices-2023.10.1-py3-none-any.whl (56 kB)\n",
      "Collecting markdown (from panel)\n",
      "  Using cached Markdown-3.5.2-py3-none-any.whl (103 kB)\n",
      "Collecting markdown-it-py (from panel)\n",
      "  Using cached markdown_it_py-3.0.0-py3-none-any.whl (87 kB)\n",
      "Collecting linkify-it-py (from panel)\n",
      "  Using cached linkify_it_py-2.0.2-py3-none-any.whl (19 kB)\n",
      "Collecting mdit-py-plugins (from panel)\n",
      "  Using cached mdit_py_plugins-0.4.0-py3-none-any.whl (54 kB)\n",
      "Requirement already satisfied: requests in /opt/homebrew/lib/python3.10/site-packages (from panel) (2.28.2)\n",
      "Requirement already satisfied: tqdm>=4.48.0 in /opt/homebrew/lib/python3.10/site-packages (from panel) (4.65.0)\n",
      "Requirement already satisfied: bleach in /opt/homebrew/lib/python3.10/site-packages (from panel) (6.0.0)\n",
      "Requirement already satisfied: typing-extensions in /opt/homebrew/lib/python3.10/site-packages (from panel) (4.9.0)\n",
      "Requirement already satisfied: pandas>=1.2 in /opt/homebrew/lib/python3.10/site-packages (from panel) (1.5.3)\n",
      "Requirement already satisfied: Jinja2>=2.9 in /opt/homebrew/lib/python3.10/site-packages (from bokeh<3.4.0,>=3.2.0->panel) (3.1.2)\n",
      "Requirement already satisfied: contourpy>=1 in /opt/homebrew/lib/python3.10/site-packages (from bokeh<3.4.0,>=3.2.0->panel) (1.0.7)\n",
      "Requirement already satisfied: numpy>=1.16 in /opt/homebrew/lib/python3.10/site-packages (from bokeh<3.4.0,>=3.2.0->panel) (1.24.2)\n",
      "Requirement already satisfied: pillow>=7.1.0 in /opt/homebrew/lib/python3.10/site-packages (from bokeh<3.4.0,>=3.2.0->panel) (9.4.0)\n",
      "Requirement already satisfied: PyYAML>=3.10 in /opt/homebrew/lib/python3.10/site-packages (from bokeh<3.4.0,>=3.2.0->panel) (6.0)\n",
      "Requirement already satisfied: tornado>=5.1 in /opt/homebrew/lib/python3.10/site-packages (from bokeh<3.4.0,>=3.2.0->panel) (6.2)\n",
      "Requirement already satisfied: python-dateutil>=2.8.1 in /opt/homebrew/lib/python3.10/site-packages (from pandas>=1.2->panel) (2.8.2)\n",
      "Requirement already satisfied: pytz>=2020.1 in /opt/homebrew/lib/python3.10/site-packages (from pandas>=1.2->panel) (2022.7.1)\n",
      "Requirement already satisfied: six>=1.9.0 in /opt/homebrew/lib/python3.10/site-packages (from bleach->panel) (1.16.0)\n",
      "Requirement already satisfied: webencodings in /opt/homebrew/lib/python3.10/site-packages (from bleach->panel) (0.5.1)\n",
      "Collecting uc-micro-py (from linkify-it-py->panel)\n",
      "  Using cached uc_micro_py-1.0.2-py3-none-any.whl (6.2 kB)\n",
      "Collecting mdurl~=0.1 (from markdown-it-py->panel)\n",
      "  Using cached mdurl-0.1.2-py3-none-any.whl (10.0 kB)\n",
      "Requirement already satisfied: charset-normalizer<4,>=2 in /opt/homebrew/lib/python3.10/site-packages (from requests->panel) (3.0.1)\n",
      "Requirement already satisfied: idna<4,>=2.5 in /opt/homebrew/lib/python3.10/site-packages (from requests->panel) (3.4)\n",
      "Requirement already satisfied: urllib3<1.27,>=1.21.1 in /opt/homebrew/lib/python3.10/site-packages (from requests->panel) (1.26.14)\n",
      "Requirement already satisfied: certifi>=2017.4.17 in /opt/homebrew/lib/python3.10/site-packages (from requests->panel) (2022.12.7)\n",
      "Requirement already satisfied: MarkupSafe>=2.0 in /opt/homebrew/lib/python3.10/site-packages (from Jinja2>=2.9->bokeh<3.4.0,>=3.2.0->panel) (2.1.2)\n",
      "Installing collected packages: xyzservices, uc-micro-py, plotly, param, mdurl, markdown, pyviz-comms, markdown-it-py, linkify-it-py, mdit-py-plugins, bokeh, panel\n",
      "Successfully installed bokeh-3.3.4 linkify-it-py-2.0.2 markdown-3.5.2 markdown-it-py-3.0.0 mdit-py-plugins-0.4.0 mdurl-0.1.2 panel-1.3.8 param-2.0.2 plotly-5.18.0 pyviz-comms-3.0.1 uc-micro-py-1.0.2 xyzservices-2023.10.1\n",
      "\n",
      "\u001b[1m[\u001b[0m\u001b[34;49mnotice\u001b[0m\u001b[1;39;49m]\u001b[0m\u001b[39;49m A new release of pip is available: \u001b[0m\u001b[31;49m23.1.2\u001b[0m\u001b[39;49m -> \u001b[0m\u001b[32;49m23.3.2\u001b[0m\n",
      "\u001b[1m[\u001b[0m\u001b[34;49mnotice\u001b[0m\u001b[1;39;49m]\u001b[0m\u001b[39;49m To update, run: \u001b[0m\u001b[32;49mpython3.10 -m pip install --upgrade pip\u001b[0m\n"
     ]
    }
   ],
   "source": [
    "# !pip install plotly panel"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "import pandas as pd\n",
    "import numpy as np\n",
    "import plotly.express as px\n",
    "import panel as pn"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Read transaction data with categories"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 25,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>Date</th>\n",
       "      <th>Name / Description</th>\n",
       "      <th>Expense/Income</th>\n",
       "      <th>Amount (EUR)</th>\n",
       "      <th>Category</th>\n",
       "      <th>Year</th>\n",
       "      <th>Month</th>\n",
       "      <th>Month Name</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>2023-12-30</td>\n",
       "      <td>Belastingdienst</td>\n",
       "      <td>Expense</td>\n",
       "      <td>9.96</td>\n",
       "      <td>Taxes</td>\n",
       "      <td>2023</td>\n",
       "      <td>12</td>\n",
       "      <td>Dec</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>2023-12-30</td>\n",
       "      <td>Tesco Amstelveen</td>\n",
       "      <td>Expense</td>\n",
       "      <td>17.53</td>\n",
       "      <td>Groceries</td>\n",
       "      <td>2023</td>\n",
       "      <td>12</td>\n",
       "      <td>Dec</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>2023-12-30</td>\n",
       "      <td>Monthly Appartment Rent</td>\n",
       "      <td>Expense</td>\n",
       "      <td>451.00</td>\n",
       "      <td>Housing</td>\n",
       "      <td>2023</td>\n",
       "      <td>12</td>\n",
       "      <td>Dec</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>2023-12-30</td>\n",
       "      <td>Vishandel Sier Amstelveen</td>\n",
       "      <td>Expense</td>\n",
       "      <td>12.46</td>\n",
       "      <td>Shopping</td>\n",
       "      <td>2023</td>\n",
       "      <td>12</td>\n",
       "      <td>Dec</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>2023-12-29</td>\n",
       "      <td>Selling Paintings</td>\n",
       "      <td>Income</td>\n",
       "      <td>13.63</td>\n",
       "      <td>Art/Crafts</td>\n",
       "      <td>2023</td>\n",
       "      <td>12</td>\n",
       "      <td>Dec</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>...</th>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1561</th>\n",
       "      <td>2022-01-16</td>\n",
       "      <td>Amazon Lux</td>\n",
       "      <td>Expense</td>\n",
       "      <td>24.11</td>\n",
       "      <td>Online Shopping</td>\n",
       "      <td>2022</td>\n",
       "      <td>1</td>\n",
       "      <td>Jan</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1562</th>\n",
       "      <td>2022-01-15</td>\n",
       "      <td>Classpass* Monthly Missoula Usa</td>\n",
       "      <td>Expense</td>\n",
       "      <td>30.08</td>\n",
       "      <td>Subscription</td>\n",
       "      <td>2022</td>\n",
       "      <td>1</td>\n",
       "      <td>Jan</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1563</th>\n",
       "      <td>2022-01-15</td>\n",
       "      <td>Flowingdata Livermore Usa</td>\n",
       "      <td>Expense</td>\n",
       "      <td>17.98</td>\n",
       "      <td>Business</td>\n",
       "      <td>2022</td>\n",
       "      <td>1</td>\n",
       "      <td>Jan</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1564</th>\n",
       "      <td>2022-01-14</td>\n",
       "      <td>Audible Uk AdblCo/Pymt Gbr</td>\n",
       "      <td>Expense</td>\n",
       "      <td>11.00</td>\n",
       "      <td>Entertainment</td>\n",
       "      <td>2022</td>\n",
       "      <td>1</td>\n",
       "      <td>Jan</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1565</th>\n",
       "      <td>2022-01-14</td>\n",
       "      <td>Gling, Inc Middletown Usa</td>\n",
       "      <td>Expense</td>\n",
       "      <td>14.30</td>\n",
       "      <td>Business</td>\n",
       "      <td>2022</td>\n",
       "      <td>1</td>\n",
       "      <td>Jan</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "<p>1566 rows × 8 columns</p>\n",
       "</div>"
      ],
      "text/plain": [
       "            Date               Name / Description Expense/Income  \\\n",
       "0     2023-12-30                  Belastingdienst        Expense   \n",
       "1     2023-12-30                 Tesco Amstelveen        Expense   \n",
       "2     2023-12-30          Monthly Appartment Rent        Expense   \n",
       "3     2023-12-30        Vishandel Sier Amstelveen        Expense   \n",
       "4     2023-12-29                Selling Paintings         Income   \n",
       "...          ...                              ...            ...   \n",
       "1561  2022-01-16                       Amazon Lux        Expense   \n",
       "1562  2022-01-15  Classpass* Monthly Missoula Usa        Expense   \n",
       "1563  2022-01-15        Flowingdata Livermore Usa        Expense   \n",
       "1564  2022-01-14       Audible Uk AdblCo/Pymt Gbr        Expense   \n",
       "1565  2022-01-14        Gling, Inc Middletown Usa        Expense   \n",
       "\n",
       "      Amount (EUR)         Category  Year  Month Month Name  \n",
       "0             9.96            Taxes  2023     12        Dec  \n",
       "1            17.53        Groceries  2023     12        Dec  \n",
       "2           451.00          Housing  2023     12        Dec  \n",
       "3            12.46         Shopping  2023     12        Dec  \n",
       "4            13.63       Art/Crafts  2023     12        Dec  \n",
       "...            ...              ...   ...    ...        ...  \n",
       "1561         24.11  Online Shopping  2022      1        Jan  \n",
       "1562         30.08     Subscription  2022      1        Jan  \n",
       "1563         17.98         Business  2022      1        Jan  \n",
       "1564         11.00    Entertainment  2022      1        Jan  \n",
       "1565         14.30         Business  2022      1        Jan  \n",
       "\n",
       "[1566 rows x 8 columns]"
      ]
     },
     "execution_count": 25,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# Read transactions_2022_2023_categorized.csv\n",
    "df = pd.read_csv('transactions_2022_2023_categorized.csv')\n",
    "# Add year and month columns\n",
    "df['Year'] = pd.to_datetime(df['Date']).dt.year\n",
    "df['Month'] = pd.to_datetime(df['Date']).dt.month\n",
    "df['Month Name'] = pd.to_datetime(df['Date']).dt.strftime(\"%b\")\n",
    "# Remove \"Transaction\" and \"Transaction vs category\" columns\n",
    "df = df.drop(columns=['Transaction', 'Transaction vs category'])\n",
    "df"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 26,
   "metadata": {},
   "outputs": [],
   "source": [
    "# For Income rows, assign Name / Description to Category\n",
    "df['Category'] = np.where(df['Expense/Income'] == 'Income', df['Name / Description'], df['Category'])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Make pie charts - Income/ Expense breakdown"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 30,
   "metadata": {},
   "outputs": [],
   "source": [
    "def make_pie_chart(df, year, label):\n",
    "    # Filter the dataset for expense transactions\n",
    "    sub_df = df[(df['Expense/Income'] == label) & (df['Year'] == year)]\n",
    "\n",
    "    color_scale = px.colors.qualitative.Set2\n",
    "    \n",
    "    pie_fig = px.pie(sub_df, values='Amount (EUR)', names='Category', color_discrete_sequence = color_scale)\n",
    "    pie_fig.update_traces(textposition='inside', direction ='clockwise', hole=0.3, textinfo=\"label+percent\")\n",
    "\n",
    "    total_expense = df[(df['Expense/Income'] == 'Expense') & (df['Year'] == year)]['Amount (EUR)'].sum() \n",
    "    total_income = df[(df['Expense/Income'] == 'Income') & (df['Year'] == year)]['Amount (EUR)'].sum()\n",
    "    \n",
    "    if label == 'Expense':\n",
    "        total_text = \"€ \" + str(round(total_expense))\n",
    "\n",
    "        # Saving rate:\n",
    "        saving_rate = round((total_income - total_expense)/total_income*100)\n",
    "        saving_rate_text = \": Saving rate \" + str(saving_rate) + \"%\"\n",
    "    else:\n",
    "        saving_rate_text = \"\"\n",
    "        total_text = \"€ \" + str(round(total_income))\n",
    "\n",
    "    pie_fig.update_layout(uniformtext_minsize=10, \n",
    "                        uniformtext_mode='hide',\n",
    "                        title=dict(text=label+\" Breakdown \" + str(year) + saving_rate_text),\n",
    "                        # Add annotations in the center of the donut.\n",
    "                        annotations=[\n",
    "                            dict(\n",
    "                                text=total_text, \n",
    "                                # Square unit grid starting at bottom left of page\n",
    "                                x=0.5, y=0.5, font_size=12,\n",
    "                                # Hide the arrow that points to the [x,y] coordinate\n",
    "                                showarrow=False\n",
    "                            )\n",
    "                        ]\n",
    "                    )\n",
    "    return pie_fig"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 32,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.plotly.v1+json": {
       "config": {
        "plotlyServerURL": "https://plot.ly"
       },
       "data": [
        {
         "direction": "clockwise",
         "domain": {
          "x": [
           0,
           1
          ],
          "y": [
           0,
           1
          ]
         },
         "hole": 0.3,
         "hovertemplate": "Category=%{label}<br>Amount (EUR)=%{value}<extra></extra>",
         "labels": [
          "Consulting",
          "Consulting",
          "Freelancing",
          "Consulting",
          "Consulting",
          "Consulting",
          "Consulting",
          "Freelancing",
          "Miscellaneous",
          "Consulting",
          "Miscellaneous",
          "Miscellaneous",
          "Blogging",
          "Miscellaneous",
          "Blogging",
          "Consulting",
          "Selling Paintings",
          "Consulting",
          "Consulting",
          "Selling Paintings",
          "Consulting",
          "Consulting",
          "Selling Paintings",
          "Blogging",
          "Consulting",
          "Consulting",
          "Consulting",
          "Freelancing",
          "Miscellaneous",
          "Consulting",
          "Consulting",
          "Consulting",
          "Consulting",
          "Consulting",
          "Miscellaneous",
          "Consulting",
          "Consulting",
          "Consulting",
          "Consulting",
          "Blogging",
          "Freelancing",
          "Miscellaneous",
          "Freelancing",
          "Consulting",
          "Freelancing",
          "Consulting",
          "Miscellaneous",
          "Consulting",
          "Selling Paintings",
          "Freelancing",
          "Blogging",
          "Consulting",
          "Selling Paintings",
          "Miscellaneous"
         ],
         "legendgroup": "",
         "name": "",
         "showlegend": true,
         "textinfo": "label+percent",
         "textposition": "inside",
         "type": "pie",
         "values": [
          133.54,
          1323.45,
          2609.65,
          28.53,
          568.93,
          11.03,
          14.36,
          2409.55,
          784.48,
          24.61,
          551.28,
          803.38,
          4044.27,
          390.47,
          381.56,
          26.9,
          2165.95,
          19,
          2419.97,
          326.28,
          371.86,
          28.09,
          86.27,
          109.93,
          2428.16,
          460.14,
          30.86,
          344.86,
          345.71,
          2419.97,
          486.55,
          342.68,
          21.52,
          74.84,
          761.32,
          2418.34,
          17.630000000000003,
          302,
          3818.82,
          613.51,
          16.97,
          234.67,
          4.13,
          3150.76,
          16.18,
          2341.72,
          17.39,
          5.74,
          6.98,
          4.61,
          2341.72,
          22.42,
          2341.72,
          17.65
         ]
        }
       ],
       "layout": {
        "annotations": [
         {
          "font": {
           "size": 12
          },
          "showarrow": false,
          "text": "€ 45043",
          "x": 0.5,
          "y": 0.5
         }
        ],
        "legend": {
         "tracegroupgap": 0
        },
        "margin": {
         "t": 60
        },
        "piecolorway": [
         "rgb(102,194,165)",
         "rgb(252,141,98)",
         "rgb(141,160,203)",
         "rgb(231,138,195)",
         "rgb(166,216,84)",
         "rgb(255,217,47)",
         "rgb(229,196,148)",
         "rgb(179,179,179)"
        ],
        "template": {
         "data": {
          "bar": [
           {
            "error_x": {
             "color": "#2a3f5f"
            },
            "error_y": {
             "color": "#2a3f5f"
            },
            "marker": {
             "line": {
              "color": "#E5ECF6",
              "width": 0.5
             },
             "pattern": {
              "fillmode": "overlay",
              "size": 10,
              "solidity": 0.2
             }
            },
            "type": "bar"
           }
          ],
          "barpolar": [
           {
            "marker": {
             "line": {
              "color": "#E5ECF6",
              "width": 0.5
             },
             "pattern": {
              "fillmode": "overlay",
              "size": 10,
              "solidity": 0.2
             }
            },
            "type": "barpolar"
           }
          ],
          "carpet": [
           {
            "aaxis": {
             "endlinecolor": "#2a3f5f",
             "gridcolor": "white",
             "linecolor": "white",
             "minorgridcolor": "white",
             "startlinecolor": "#2a3f5f"
            },
            "baxis": {
             "endlinecolor": "#2a3f5f",
             "gridcolor": "white",
             "linecolor": "white",
             "minorgridcolor": "white",
             "startlinecolor": "#2a3f5f"
            },
            "type": "carpet"
           }
          ],
          "choropleth": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "type": "choropleth"
           }
          ],
          "contour": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "contour"
           }
          ],
          "contourcarpet": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "type": "contourcarpet"
           }
          ],
          "heatmap": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "heatmap"
           }
          ],
          "heatmapgl": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "heatmapgl"
           }
          ],
          "histogram": [
           {
            "marker": {
             "pattern": {
              "fillmode": "overlay",
              "size": 10,
              "solidity": 0.2
             }
            },
            "type": "histogram"
           }
          ],
          "histogram2d": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "histogram2d"
           }
          ],
          "histogram2dcontour": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "histogram2dcontour"
           }
          ],
          "mesh3d": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "type": "mesh3d"
           }
          ],
          "parcoords": [
           {
            "line": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "parcoords"
           }
          ],
          "pie": [
           {
            "automargin": true,
            "type": "pie"
           }
          ],
          "scatter": [
           {
            "fillpattern": {
             "fillmode": "overlay",
             "size": 10,
             "solidity": 0.2
            },
            "type": "scatter"
           }
          ],
          "scatter3d": [
           {
            "line": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scatter3d"
           }
          ],
          "scattercarpet": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scattercarpet"
           }
          ],
          "scattergeo": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scattergeo"
           }
          ],
          "scattergl": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scattergl"
           }
          ],
          "scattermapbox": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scattermapbox"
           }
          ],
          "scatterpolar": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scatterpolar"
           }
          ],
          "scatterpolargl": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scatterpolargl"
           }
          ],
          "scatterternary": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scatterternary"
           }
          ],
          "surface": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "surface"
           }
          ],
          "table": [
           {
            "cells": {
             "fill": {
              "color": "#EBF0F8"
             },
             "line": {
              "color": "white"
             }
            },
            "header": {
             "fill": {
              "color": "#C8D4E3"
             },
             "line": {
              "color": "white"
             }
            },
            "type": "table"
           }
          ]
         },
         "layout": {
          "annotationdefaults": {
           "arrowcolor": "#2a3f5f",
           "arrowhead": 0,
           "arrowwidth": 1
          },
          "autotypenumbers": "strict",
          "coloraxis": {
           "colorbar": {
            "outlinewidth": 0,
            "ticks": ""
           }
          },
          "colorscale": {
           "diverging": [
            [
             0,
             "#8e0152"
            ],
            [
             0.1,
             "#c51b7d"
            ],
            [
             0.2,
             "#de77ae"
            ],
            [
             0.3,
             "#f1b6da"
            ],
            [
             0.4,
             "#fde0ef"
            ],
            [
             0.5,
             "#f7f7f7"
            ],
            [
             0.6,
             "#e6f5d0"
            ],
            [
             0.7,
             "#b8e186"
            ],
            [
             0.8,
             "#7fbc41"
            ],
            [
             0.9,
             "#4d9221"
            ],
            [
             1,
             "#276419"
            ]
           ],
           "sequential": [
            [
             0,
             "#0d0887"
            ],
            [
             0.1111111111111111,
             "#46039f"
            ],
            [
             0.2222222222222222,
             "#7201a8"
            ],
            [
             0.3333333333333333,
             "#9c179e"
            ],
            [
             0.4444444444444444,
             "#bd3786"
            ],
            [
             0.5555555555555556,
             "#d8576b"
            ],
            [
             0.6666666666666666,
             "#ed7953"
            ],
            [
             0.7777777777777778,
             "#fb9f3a"
            ],
            [
             0.8888888888888888,
             "#fdca26"
            ],
            [
             1,
             "#f0f921"
            ]
           ],
           "sequentialminus": [
            [
             0,
             "#0d0887"
            ],
            [
             0.1111111111111111,
             "#46039f"
            ],
            [
             0.2222222222222222,
             "#7201a8"
            ],
            [
             0.3333333333333333,
             "#9c179e"
            ],
            [
             0.4444444444444444,
             "#bd3786"
            ],
            [
             0.5555555555555556,
             "#d8576b"
            ],
            [
             0.6666666666666666,
             "#ed7953"
            ],
            [
             0.7777777777777778,
             "#fb9f3a"
            ],
            [
             0.8888888888888888,
             "#fdca26"
            ],
            [
             1,
             "#f0f921"
            ]
           ]
          },
          "colorway": [
           "#636efa",
           "#EF553B",
           "#00cc96",
           "#ab63fa",
           "#FFA15A",
           "#19d3f3",
           "#FF6692",
           "#B6E880",
           "#FF97FF",
           "#FECB52"
          ],
          "font": {
           "color": "#2a3f5f"
          },
          "geo": {
           "bgcolor": "white",
           "lakecolor": "white",
           "landcolor": "#E5ECF6",
           "showlakes": true,
           "showland": true,
           "subunitcolor": "white"
          },
          "hoverlabel": {
           "align": "left"
          },
          "hovermode": "closest",
          "mapbox": {
           "style": "light"
          },
          "paper_bgcolor": "white",
          "plot_bgcolor": "#E5ECF6",
          "polar": {
           "angularaxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
           },
           "bgcolor": "#E5ECF6",
           "radialaxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
           }
          },
          "scene": {
           "xaxis": {
            "backgroundcolor": "#E5ECF6",
            "gridcolor": "white",
            "gridwidth": 2,
            "linecolor": "white",
            "showbackground": true,
            "ticks": "",
            "zerolinecolor": "white"
           },
           "yaxis": {
            "backgroundcolor": "#E5ECF6",
            "gridcolor": "white",
            "gridwidth": 2,
            "linecolor": "white",
            "showbackground": true,
            "ticks": "",
            "zerolinecolor": "white"
           },
           "zaxis": {
            "backgroundcolor": "#E5ECF6",
            "gridcolor": "white",
            "gridwidth": 2,
            "linecolor": "white",
            "showbackground": true,
            "ticks": "",
            "zerolinecolor": "white"
           }
          },
          "shapedefaults": {
           "line": {
            "color": "#2a3f5f"
           }
          },
          "ternary": {
           "aaxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
           },
           "baxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
           },
           "bgcolor": "#E5ECF6",
           "caxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
           }
          },
          "title": {
           "x": 0.05
          },
          "xaxis": {
           "automargin": true,
           "gridcolor": "white",
           "linecolor": "white",
           "ticks": "",
           "title": {
            "standoff": 15
           },
           "zerolinecolor": "white",
           "zerolinewidth": 2
          },
          "yaxis": {
           "automargin": true,
           "gridcolor": "white",
           "linecolor": "white",
           "ticks": "",
           "title": {
            "standoff": 15
           },
           "zerolinecolor": "white",
           "zerolinewidth": 2
          }
         }
        },
        "title": {
         "text": "Income Breakdown 2022"
        },
        "uniformtext": {
         "minsize": 10,
         "mode": "hide"
        }
       }
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "income_pie_fig_2022 = make_pie_chart(df, 2022, 'Income')\n",
    "income_pie_fig_2022"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Make bar charts over months in a year"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 33,
   "metadata": {},
   "outputs": [],
   "source": [
    "def make_monthly_bar_chart(df, year, label):\n",
    "    df = df[(df['Expense/Income'] == label) & (df['Year'] == year)]\n",
    "    total_by_month = (df.groupby(['Month', 'Month Name'])['Amount (EUR)'].sum()\n",
    "                        .to_frame()\n",
    "                        .reset_index()\n",
    "                        .sort_values(by='Month')  \n",
    "                        .reset_index(drop=True))\n",
    "    if label == \"Income\":\n",
    "        color_scale = px.colors.sequential.YlGn\n",
    "    if label == \"Expense\":\n",
    "        color_scale = px.colors.sequential.OrRd\n",
    "    \n",
    "    bar_fig = px.bar(total_by_month, x='Month Name', y='Amount (EUR)', text_auto='.2s', title=label+\" per month\", color='Amount (EUR)', color_continuous_scale=color_scale)\n",
    "    # bar_fig.update_traces(marker_color='lightslategrey')\n",
    "    \n",
    "    return bar_fig"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 34,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.plotly.v1+json": {
       "config": {
        "plotlyServerURL": "https://plot.ly"
       },
       "data": [
        {
         "alignmentgroup": "True",
         "hovertemplate": "Month Name=%{x}<br>Amount (EUR)=%{marker.color}<extra></extra>",
         "legendgroup": "",
         "marker": {
          "color": [
           2359.37,
           2381.47,
           2359.1099999999997,
           3405.7400000000002,
           4449.3,
           3499.2900000000004,
           3345.56,
           3609.73,
           3361.3999999999996,
           7812.53,
           3795.31,
           4664.099999999999
          ],
          "coloraxis": "coloraxis",
          "pattern": {
           "shape": ""
          }
         },
         "name": "",
         "offsetgroup": "",
         "orientation": "v",
         "showlegend": false,
         "textposition": "auto",
         "texttemplate": "%{y:.2s}",
         "type": "bar",
         "x": [
          "Jan",
          "Feb",
          "Mar",
          "Apr",
          "May",
          "Jun",
          "Jul",
          "Aug",
          "Sep",
          "Oct",
          "Nov",
          "Dec"
         ],
         "xaxis": "x",
         "y": [
          2359.37,
          2381.47,
          2359.1099999999997,
          3405.7400000000002,
          4449.3,
          3499.2900000000004,
          3345.56,
          3609.73,
          3361.3999999999996,
          7812.53,
          3795.31,
          4664.099999999999
         ],
         "yaxis": "y"
        }
       ],
       "layout": {
        "barmode": "relative",
        "coloraxis": {
         "colorbar": {
          "title": {
           "text": "Amount (EUR)"
          }
         },
         "colorscale": [
          [
           0,
           "rgb(255,255,229)"
          ],
          [
           0.125,
           "rgb(247,252,185)"
          ],
          [
           0.25,
           "rgb(217,240,163)"
          ],
          [
           0.375,
           "rgb(173,221,142)"
          ],
          [
           0.5,
           "rgb(120,198,121)"
          ],
          [
           0.625,
           "rgb(65,171,93)"
          ],
          [
           0.75,
           "rgb(35,132,67)"
          ],
          [
           0.875,
           "rgb(0,104,55)"
          ],
          [
           1,
           "rgb(0,69,41)"
          ]
         ]
        },
        "legend": {
         "tracegroupgap": 0
        },
        "template": {
         "data": {
          "bar": [
           {
            "error_x": {
             "color": "#2a3f5f"
            },
            "error_y": {
             "color": "#2a3f5f"
            },
            "marker": {
             "line": {
              "color": "#E5ECF6",
              "width": 0.5
             },
             "pattern": {
              "fillmode": "overlay",
              "size": 10,
              "solidity": 0.2
             }
            },
            "type": "bar"
           }
          ],
          "barpolar": [
           {
            "marker": {
             "line": {
              "color": "#E5ECF6",
              "width": 0.5
             },
             "pattern": {
              "fillmode": "overlay",
              "size": 10,
              "solidity": 0.2
             }
            },
            "type": "barpolar"
           }
          ],
          "carpet": [
           {
            "aaxis": {
             "endlinecolor": "#2a3f5f",
             "gridcolor": "white",
             "linecolor": "white",
             "minorgridcolor": "white",
             "startlinecolor": "#2a3f5f"
            },
            "baxis": {
             "endlinecolor": "#2a3f5f",
             "gridcolor": "white",
             "linecolor": "white",
             "minorgridcolor": "white",
             "startlinecolor": "#2a3f5f"
            },
            "type": "carpet"
           }
          ],
          "choropleth": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "type": "choropleth"
           }
          ],
          "contour": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "contour"
           }
          ],
          "contourcarpet": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "type": "contourcarpet"
           }
          ],
          "heatmap": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "heatmap"
           }
          ],
          "heatmapgl": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "heatmapgl"
           }
          ],
          "histogram": [
           {
            "marker": {
             "pattern": {
              "fillmode": "overlay",
              "size": 10,
              "solidity": 0.2
             }
            },
            "type": "histogram"
           }
          ],
          "histogram2d": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "histogram2d"
           }
          ],
          "histogram2dcontour": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "histogram2dcontour"
           }
          ],
          "mesh3d": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "type": "mesh3d"
           }
          ],
          "parcoords": [
           {
            "line": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "parcoords"
           }
          ],
          "pie": [
           {
            "automargin": true,
            "type": "pie"
           }
          ],
          "scatter": [
           {
            "fillpattern": {
             "fillmode": "overlay",
             "size": 10,
             "solidity": 0.2
            },
            "type": "scatter"
           }
          ],
          "scatter3d": [
           {
            "line": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scatter3d"
           }
          ],
          "scattercarpet": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scattercarpet"
           }
          ],
          "scattergeo": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scattergeo"
           }
          ],
          "scattergl": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scattergl"
           }
          ],
          "scattermapbox": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scattermapbox"
           }
          ],
          "scatterpolar": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scatterpolar"
           }
          ],
          "scatterpolargl": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scatterpolargl"
           }
          ],
          "scatterternary": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scatterternary"
           }
          ],
          "surface": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "surface"
           }
          ],
          "table": [
           {
            "cells": {
             "fill": {
              "color": "#EBF0F8"
             },
             "line": {
              "color": "white"
             }
            },
            "header": {
             "fill": {
              "color": "#C8D4E3"
             },
             "line": {
              "color": "white"
             }
            },
            "type": "table"
           }
          ]
         },
         "layout": {
          "annotationdefaults": {
           "arrowcolor": "#2a3f5f",
           "arrowhead": 0,
           "arrowwidth": 1
          },
          "autotypenumbers": "strict",
          "coloraxis": {
           "colorbar": {
            "outlinewidth": 0,
            "ticks": ""
           }
          },
          "colorscale": {
           "diverging": [
            [
             0,
             "#8e0152"
            ],
            [
             0.1,
             "#c51b7d"
            ],
            [
             0.2,
             "#de77ae"
            ],
            [
             0.3,
             "#f1b6da"
            ],
            [
             0.4,
             "#fde0ef"
            ],
            [
             0.5,
             "#f7f7f7"
            ],
            [
             0.6,
             "#e6f5d0"
            ],
            [
             0.7,
             "#b8e186"
            ],
            [
             0.8,
             "#7fbc41"
            ],
            [
             0.9,
             "#4d9221"
            ],
            [
             1,
             "#276419"
            ]
           ],
           "sequential": [
            [
             0,
             "#0d0887"
            ],
            [
             0.1111111111111111,
             "#46039f"
            ],
            [
             0.2222222222222222,
             "#7201a8"
            ],
            [
             0.3333333333333333,
             "#9c179e"
            ],
            [
             0.4444444444444444,
             "#bd3786"
            ],
            [
             0.5555555555555556,
             "#d8576b"
            ],
            [
             0.6666666666666666,
             "#ed7953"
            ],
            [
             0.7777777777777778,
             "#fb9f3a"
            ],
            [
             0.8888888888888888,
             "#fdca26"
            ],
            [
             1,
             "#f0f921"
            ]
           ],
           "sequentialminus": [
            [
             0,
             "#0d0887"
            ],
            [
             0.1111111111111111,
             "#46039f"
            ],
            [
             0.2222222222222222,
             "#7201a8"
            ],
            [
             0.3333333333333333,
             "#9c179e"
            ],
            [
             0.4444444444444444,
             "#bd3786"
            ],
            [
             0.5555555555555556,
             "#d8576b"
            ],
            [
             0.6666666666666666,
             "#ed7953"
            ],
            [
             0.7777777777777778,
             "#fb9f3a"
            ],
            [
             0.8888888888888888,
             "#fdca26"
            ],
            [
             1,
             "#f0f921"
            ]
           ]
          },
          "colorway": [
           "#636efa",
           "#EF553B",
           "#00cc96",
           "#ab63fa",
           "#FFA15A",
           "#19d3f3",
           "#FF6692",
           "#B6E880",
           "#FF97FF",
           "#FECB52"
          ],
          "font": {
           "color": "#2a3f5f"
          },
          "geo": {
           "bgcolor": "white",
           "lakecolor": "white",
           "landcolor": "#E5ECF6",
           "showlakes": true,
           "showland": true,
           "subunitcolor": "white"
          },
          "hoverlabel": {
           "align": "left"
          },
          "hovermode": "closest",
          "mapbox": {
           "style": "light"
          },
          "paper_bgcolor": "white",
          "plot_bgcolor": "#E5ECF6",
          "polar": {
           "angularaxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
           },
           "bgcolor": "#E5ECF6",
           "radialaxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
           }
          },
          "scene": {
           "xaxis": {
            "backgroundcolor": "#E5ECF6",
            "gridcolor": "white",
            "gridwidth": 2,
            "linecolor": "white",
            "showbackground": true,
            "ticks": "",
            "zerolinecolor": "white"
           },
           "yaxis": {
            "backgroundcolor": "#E5ECF6",
            "gridcolor": "white",
            "gridwidth": 2,
            "linecolor": "white",
            "showbackground": true,
            "ticks": "",
            "zerolinecolor": "white"
           },
           "zaxis": {
            "backgroundcolor": "#E5ECF6",
            "gridcolor": "white",
            "gridwidth": 2,
            "linecolor": "white",
            "showbackground": true,
            "ticks": "",
            "zerolinecolor": "white"
           }
          },
          "shapedefaults": {
           "line": {
            "color": "#2a3f5f"
           }
          },
          "ternary": {
           "aaxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
           },
           "baxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
           },
           "bgcolor": "#E5ECF6",
           "caxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
           }
          },
          "title": {
           "x": 0.05
          },
          "xaxis": {
           "automargin": true,
           "gridcolor": "white",
           "linecolor": "white",
           "ticks": "",
           "title": {
            "standoff": 15
           },
           "zerolinecolor": "white",
           "zerolinewidth": 2
          },
          "yaxis": {
           "automargin": true,
           "gridcolor": "white",
           "linecolor": "white",
           "ticks": "",
           "title": {
            "standoff": 15
           },
           "zerolinecolor": "white",
           "zerolinewidth": 2
          }
         }
        },
        "title": {
         "text": "Income per month"
        },
        "xaxis": {
         "anchor": "y",
         "domain": [
          0,
          1
         ],
         "title": {
          "text": "Month Name"
         }
        },
        "yaxis": {
         "anchor": "x",
         "domain": [
          0,
          1
         ],
         "title": {
          "text": "Amount (EUR)"
         }
        }
       }
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "income_monthly_2022 = make_monthly_bar_chart(df, 2022, 'Income')\n",
    "income_monthly_2022"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Putting all charts together into tabs for 2022/2023"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 37,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Launching server at http://localhost:49846\n"
     ]
    },
    {
     "data": {
      "text/plain": [
       "<panel.io.server.Server at 0x169d1aa70>"
      ]
     },
     "execution_count": 37,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# Pie charts\n",
    "income_pie_fig_2022 = make_pie_chart(df, 2022, 'Income')\n",
    "expense_pie_fig_2022 = make_pie_chart(df, 2022, 'Expense')  \n",
    "income_pie_fig_2023 = make_pie_chart(df, 2023, 'Income')\n",
    "expense_pie_fig_2023 = make_pie_chart(df, 2023, 'Expense')\n",
    "\n",
    "# Bar charts\n",
    "income_monthly_2022 = make_monthly_bar_chart(df, 2022, 'Income')\n",
    "expense_monthly_2022 = make_monthly_bar_chart(df, 2022, 'Expense')\n",
    "income_monthly_2023 = make_monthly_bar_chart(df, 2023, 'Income')\n",
    "expense_monthly_2023 = make_monthly_bar_chart(df, 2023, 'Expense')\n",
    "\n",
    "# Create tabs\n",
    "tabs = pn.Tabs(\n",
    "                        ('2022', pn.Column(pn.Row(income_pie_fig_2022, expense_pie_fig_2022),\n",
    "                                                pn.Row(income_monthly_2022, expense_monthly_2022))),\n",
    "                        ('2023', pn.Column(pn.Row(income_pie_fig_2023, expense_pie_fig_2023),\n",
    "                                                pn.Row(income_monthly_2023, expense_monthly_2023))\n",
    "                        )\n",
    "                )\n",
    "tabs.show()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Create dashboard"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 39,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Launching server at http://localhost:49885\n"
     ]
    },
    {
     "data": {
      "text/plain": [
       "<panel.io.server.Server at 0x17153a2f0>"
      ]
     },
     "execution_count": 39,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# Dashboard template\n",
    "template = pn.template.FastListTemplate(\n",
    "    title='Personal Finance Dashboard',\n",
    "    sidebar=[pn.pane.Markdown(\"# Income Expense analysis\"), \n",
    "             pn.pane.Markdown(\"Overview of income and expense based on my bank transactions. Categories are obtained using local LLMs.\"),\n",
    "             pn.pane.PNG(\"picture.png\", sizing_mode=\"scale_both\")\n",
    "             ],\n",
    "    main=[pn.Row(pn.Column(pn.Row(tabs)\n",
    "                           )\n",
    "                ),\n",
    "                ],\n",
    "    # accent_base_color=\"#88d8b0\",\n",
    "    header_background=\"#c0b9dd\",\n",
    ")\n",
    "\n",
    "template.show()"
   ]
  },
  {
   "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.10.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}