Supermarket_dash.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "80016a34-e483-4c94-be2a-e57f269929d3",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Displaying graphs\n",
    "import plotly.io as pio\n",
    "pio.renderers.default = 'iframe'"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "03dd61a9-b987-43e2-bb75-633ef26f1d55",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Data\n",
    "import pandas as pd\n",
    "from datetime import datetime\n",
    "\n",
    "# Charts\n",
    "import plotly.express as px\n",
    "import plotly.graph_objects as go\n",
    "\n",
    "# Dash\n",
    "import dash\n",
    "import dash_core_components as dcc\n",
    "import dash_html_components as html\n",
    "from dash.dependencies import Input, Output"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "5f138644-f336-4429-a67c-1a09ed3ae0b2",
   "metadata": {},
   "outputs": [],
   "source": [
    "sales_df = pd.read_csv('supermarket_sales - Sheet1.csv')"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "07ed0b4b-3656-47e0-8822-7040c9989bbf",
   "metadata": {},
   "source": [
    "Attribute information:\n",
    "\n",
    "- Invoice id: Computer generated sales slip invoice identification number.\n",
    "- Branch: Branch of supercenter (3 branches are available identified by A, B and C).\n",
    "- City: Location of supercenters.\n",
    "- Customer type: Type of customers, recorded by Members for customers using member card and Normal for without member card.\n",
    "- Gender: Gender type of customer\n",
    "- Product line: General item categorization groups - Electronic accessories, Fashion accessories, Food and beverages, Health and beauty, Home and lifestyle, Sports and travel.\n",
    "- Unit price: Price of each product in dollars.\n",
    "- Quantity: Number of products purchased by customer.\n",
    "- Tax: 5% tax fee for customer buying.\n",
    "- Total: Total price including tax.\n",
    "- Date: Date of purchase (Record available from January 2019 to March 2019).\n",
    "- Time: Purchase time (10am to 9pm).\n",
    "- Payment: Payment used by customer for purchase (3 methods are available – Cash, Credit card and Ewallet).\n",
    "- COGS: Cost of goods sold.\n",
    "- Gross margin percentage: Gross margin percentage.\n",
    "- Gross income: Gross income.\n",
    "- Rating: Customer stratification rating on their overall shopping experience (On a scale of 1 to 10)."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5d0b9005-98f2-4287-b3b3-4fe7343fcf60",
   "metadata": {},
   "source": [
    "There are no gaps in the dataframe, nothing needs to be deleted"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "25f9619a-1d7e-48bc-9ac0-a5733f692b20",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "<class 'pandas.core.frame.DataFrame'>\n",
      "RangeIndex: 1000 entries, 0 to 999\n",
      "Data columns (total 17 columns):\n",
      " #   Column                   Non-Null Count  Dtype  \n",
      "---  ------                   --------------  -----  \n",
      " 0   Invoice ID               1000 non-null   object \n",
      " 1   Branch                   1000 non-null   object \n",
      " 2   City                     1000 non-null   object \n",
      " 3   Customer type            1000 non-null   object \n",
      " 4   Gender                   1000 non-null   object \n",
      " 5   Product line             1000 non-null   object \n",
      " 6   Unit price               1000 non-null   float64\n",
      " 7   Quantity                 1000 non-null   int64  \n",
      " 8   Tax 5%                   1000 non-null   float64\n",
      " 9   Total                    1000 non-null   float64\n",
      " 10  Date                     1000 non-null   object \n",
      " 11  Time                     1000 non-null   object \n",
      " 12  Payment                  1000 non-null   object \n",
      " 13  cogs                     1000 non-null   float64\n",
      " 14  gross margin percentage  1000 non-null   float64\n",
      " 15  gross income             1000 non-null   float64\n",
      " 16  Rating                   1000 non-null   float64\n",
      "dtypes: float64(7), int64(1), object(9)\n",
      "memory usage: 132.9+ KB\n"
     ]
    }
   ],
   "source": [
    "sales_df.info()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a4ca8183-99a8-49d3-90ae-493cbc9519b0",
   "metadata": {},
   "source": [
    "In order to create a good dashboard, you need to not only understand the dataframe, you need to become a dataframe"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "023f36ce-f5e9-4ec5-a8bc-1e21747531d7",
   "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>Invoice ID</th>\n",
       "      <th>Branch</th>\n",
       "      <th>City</th>\n",
       "      <th>Customer type</th>\n",
       "      <th>Gender</th>\n",
       "      <th>Product line</th>\n",
       "      <th>Unit price</th>\n",
       "      <th>Quantity</th>\n",
       "      <th>Tax 5%</th>\n",
       "      <th>Total</th>\n",
       "      <th>Date</th>\n",
       "      <th>Time</th>\n",
       "      <th>Payment</th>\n",
       "      <th>cogs</th>\n",
       "      <th>gross margin percentage</th>\n",
       "      <th>gross income</th>\n",
       "      <th>Rating</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>750-67-8428</td>\n",
       "      <td>A</td>\n",
       "      <td>Yangon</td>\n",
       "      <td>Member</td>\n",
       "      <td>Female</td>\n",
       "      <td>Health and beauty</td>\n",
       "      <td>74.69</td>\n",
       "      <td>7</td>\n",
       "      <td>26.1415</td>\n",
       "      <td>548.9715</td>\n",
       "      <td>1/5/2019</td>\n",
       "      <td>13:08</td>\n",
       "      <td>Ewallet</td>\n",
       "      <td>522.83</td>\n",
       "      <td>4.761905</td>\n",
       "      <td>26.1415</td>\n",
       "      <td>9.1</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>226-31-3081</td>\n",
       "      <td>C</td>\n",
       "      <td>Naypyitaw</td>\n",
       "      <td>Normal</td>\n",
       "      <td>Female</td>\n",
       "      <td>Electronic accessories</td>\n",
       "      <td>15.28</td>\n",
       "      <td>5</td>\n",
       "      <td>3.8200</td>\n",
       "      <td>80.2200</td>\n",
       "      <td>3/8/2019</td>\n",
       "      <td>10:29</td>\n",
       "      <td>Cash</td>\n",
       "      <td>76.40</td>\n",
       "      <td>4.761905</td>\n",
       "      <td>3.8200</td>\n",
       "      <td>9.6</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>631-41-3108</td>\n",
       "      <td>A</td>\n",
       "      <td>Yangon</td>\n",
       "      <td>Normal</td>\n",
       "      <td>Male</td>\n",
       "      <td>Home and lifestyle</td>\n",
       "      <td>46.33</td>\n",
       "      <td>7</td>\n",
       "      <td>16.2155</td>\n",
       "      <td>340.5255</td>\n",
       "      <td>3/3/2019</td>\n",
       "      <td>13:23</td>\n",
       "      <td>Credit card</td>\n",
       "      <td>324.31</td>\n",
       "      <td>4.761905</td>\n",
       "      <td>16.2155</td>\n",
       "      <td>7.4</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>123-19-1176</td>\n",
       "      <td>A</td>\n",
       "      <td>Yangon</td>\n",
       "      <td>Member</td>\n",
       "      <td>Male</td>\n",
       "      <td>Health and beauty</td>\n",
       "      <td>58.22</td>\n",
       "      <td>8</td>\n",
       "      <td>23.2880</td>\n",
       "      <td>489.0480</td>\n",
       "      <td>1/27/2019</td>\n",
       "      <td>20:33</td>\n",
       "      <td>Ewallet</td>\n",
       "      <td>465.76</td>\n",
       "      <td>4.761905</td>\n",
       "      <td>23.2880</td>\n",
       "      <td>8.4</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>373-73-7910</td>\n",
       "      <td>A</td>\n",
       "      <td>Yangon</td>\n",
       "      <td>Normal</td>\n",
       "      <td>Male</td>\n",
       "      <td>Sports and travel</td>\n",
       "      <td>86.31</td>\n",
       "      <td>7</td>\n",
       "      <td>30.2085</td>\n",
       "      <td>634.3785</td>\n",
       "      <td>2/8/2019</td>\n",
       "      <td>10:37</td>\n",
       "      <td>Ewallet</td>\n",
       "      <td>604.17</td>\n",
       "      <td>4.761905</td>\n",
       "      <td>30.2085</td>\n",
       "      <td>5.3</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "    Invoice ID Branch       City Customer type  Gender  \\\n",
       "0  750-67-8428      A     Yangon        Member  Female   \n",
       "1  226-31-3081      C  Naypyitaw        Normal  Female   \n",
       "2  631-41-3108      A     Yangon        Normal    Male   \n",
       "3  123-19-1176      A     Yangon        Member    Male   \n",
       "4  373-73-7910      A     Yangon        Normal    Male   \n",
       "\n",
       "             Product line  Unit price  Quantity   Tax 5%     Total       Date  \\\n",
       "0       Health and beauty       74.69         7  26.1415  548.9715   1/5/2019   \n",
       "1  Electronic accessories       15.28         5   3.8200   80.2200   3/8/2019   \n",
       "2      Home and lifestyle       46.33         7  16.2155  340.5255   3/3/2019   \n",
       "3       Health and beauty       58.22         8  23.2880  489.0480  1/27/2019   \n",
       "4       Sports and travel       86.31         7  30.2085  634.3785   2/8/2019   \n",
       "\n",
       "    Time      Payment    cogs  gross margin percentage  gross income  Rating  \n",
       "0  13:08      Ewallet  522.83                 4.761905       26.1415     9.1  \n",
       "1  10:29         Cash   76.40                 4.761905        3.8200     9.6  \n",
       "2  13:23  Credit card  324.31                 4.761905       16.2155     7.4  \n",
       "3  20:33      Ewallet  465.76                 4.761905       23.2880     8.4  \n",
       "4  10:37      Ewallet  604.17                 4.761905       30.2085     5.3  "
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "sales_df.head(5)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a300c6b0-bb4b-49d5-aed7-0ee37e6c130b",
   "metadata": {},
   "source": [
    "Branch totally coincides City"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "id": "efcdc982-a23f-423c-9c79-88726822dc61",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "['Yangon']\n",
      "['Mandalay']\n",
      "['Naypyitaw']\n"
     ]
    }
   ],
   "source": [
    "print(sales_df[sales_df['Branch'] == 'A'].City.unique())\n",
    "print(sales_df[sales_df['Branch'] == 'B'].City.unique())\n",
    "print(sales_df[sales_df['Branch'] == 'C'].City.unique())"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "fe3dc4b1-aff4-4473-be1d-3ad5d20b0b63",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "array(['Health and beauty', 'Electronic accessories',\n",
       "       'Home and lifestyle', 'Sports and travel', 'Food and beverages',\n",
       "       'Fashion accessories'], dtype=object)"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "sales_df['Product line'].unique()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "0e793555-4203-46f4-bc46-c032b8771b64",
   "metadata": {},
   "source": [
    "# CSS styles"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "76d150b8-e770-4c95-9b80-5a6249e1ebe8",
   "metadata": {},
   "source": [
    "It's just that all css styles are in one place"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "id": "e9696c40-7aa6-495e-9bfd-2fb517187eaf",
   "metadata": {},
   "outputs": [],
   "source": [
    "for_sale_smile = {'fontSize':'48px',\n",
    "                  'margin':'30px auto 0',\n",
    "                  'textAlign':'center',}\n",
    "\n",
    "for_header_title = {'color':'#FFFFFF',\n",
    "                    'fontSize':'48px',\n",
    "                    'fontWeight':'bold',\n",
    "                    'textAlign':'center',\n",
    "                    'margin':'0 auto',}\n",
    "\n",
    "for_header_description = {'color':'#FFFFFF',\n",
    "                          'margin':'4px auto 50px',\n",
    "                          'textAlign':'center',\n",
    "                          'maxWidth':'450px',}\n",
    "\n",
    "for_header = {'backgroundColor': '#4CAF50',\n",
    "              'display':'flex',\n",
    "              'flexDirection':'column',\n",
    "              'justifyContent':'center',}\n",
    "\n",
    "for_head_block = {'color':'#212121',\n",
    "                  'fontSize':'28px',\n",
    "                  'fontWeight':'bold',\n",
    "                  'textAlign':'start',\n",
    "                  'fontFamily': 'Arial',\n",
    "                  'margin':'0 auto',}\n",
    "\n",
    "for_descr_present = {'color':'#757575',\n",
    "                     'fontSize':'20px',\n",
    "                     'fontFamily': 'Arial',\n",
    "                     'textAlign':'start',\n",
    "                     'margin':'0 auto',}\n",
    "\n",
    "# if the indicator has increased\n",
    "for_present_green = {'color':'#009900',\n",
    "                     'fontSize':'22px',\n",
    "                     'fontFamily': 'Arial',\n",
    "                     'textAlign':'start',\n",
    "                     'margin':'0 auto',}\n",
    "\n",
    "# if the indicator has decreased\n",
    "for_present_red = {'color':'#990000',\n",
    "                   'fontSize':'22px',\n",
    "                   'fontFamily': 'Arial',\n",
    "                   'textAlign':'start',\n",
    "                   'margin':'0 auto',}\n",
    "\n",
    "\n",
    "for_previous_green = {'color':'#009900',\n",
    "                      'fontSize':'20px',\n",
    "                      'textAlign':'center',\n",
    "                      'fontFamily': 'Arial',\n",
    "                      'textAlign':'start',\n",
    "                      'margin':'0 auto',}\n",
    "\n",
    "\n",
    "for_previous_red = {'color':'#990000',\n",
    "                    'fontSize':'20px',\n",
    "                    'textAlign':'center',\n",
    "                    'fontFamily': 'Arial',\n",
    "                    'textAlign':'start',\n",
    "                    'margin':'0 auto',}\n",
    "\n",
    "for_percent_green = {'color':'#009900',\n",
    "                     'fontSize':'24px',\n",
    "                     'fontFamily': 'Arial',\n",
    "                     'position': 'absolute',\n",
    "                     'top':'70px',\n",
    "                     'right':'10px',\n",
    "                     'margin':'0 auto',}\n",
    "\n",
    "for_percent_red = {'color':'#990000',\n",
    "                   'fontSize':'24px',\n",
    "                   'fontFamily': 'Arial',\n",
    "                   'position': 'absolute',\n",
    "                   'top':'70px',\n",
    "                   'right':'10px',\n",
    "                   'margin':'0 auto',}\n",
    "\n",
    "for_stat_text = {'backgroundColor':'#FFFFFF',\n",
    "                 'width':'320px',\n",
    "                 'borderStyle': 'outset',\n",
    "                 'borderWidth': '10px',\n",
    "                 'borderColor': '#4CAF50 #388E3C',\n",
    "                 'padding':'10px',\n",
    "                 'position':'relative',\n",
    "                 'margin':'15px auto 0',}\n",
    "\n",
    "for_main_texts = {'padding':'10px',\n",
    "                  'width':'96%',\n",
    "                  'border': '5px solid transparent',\n",
    "                  'borderImage': 'linear-gradient(to right,#388E3C 10%,  transparent 30%, transparent 70%, #388E3C 90%)',\n",
    "                  'borderImageSlice': '1',\n",
    "                  'margin':'15px auto 0',}\n",
    "\n",
    "\n",
    "for_radio_text = {'fontSize':'26px',\n",
    "                  'padding':'2px',\n",
    "                  'fontFamily': 'Arial',\n",
    "                  'borderWidth':'10px',\n",
    "                  'borderColor': '#C8E6C9',\n",
    "                  'borderStyle': 'outset',\n",
    "                  'marginLeft':'5px',\n",
    "                  'marginRight':'5px',}\n",
    "\n",
    "for_radio_div = {'display':'flex',\n",
    "                 'flexDirection':'row',\n",
    "                 'justifyContent':'center',}\n",
    "\n",
    "for_div_texts = {'display':'flex',\n",
    "                 'flexDirection':'row',\n",
    "                 'justifyContent':'space-evenly',}\n",
    "\n",
    "for_bar1_knopki = {'display':'flex',\n",
    "                   'flexDirection':'row',\n",
    "                   'justifyContent':'space-evenly',\n",
    "                   'width':'98%',\n",
    "                   'margin':'15px auto 0',}\n",
    "\n",
    "for_bar1_div = {'backgroundColor':'#FFFFFF',\n",
    "                'width':'43%',\n",
    "                'boxShadow': '#388E3C 0px 5px 15px',\n",
    "                'margin':'0px auto',}\n",
    "\n",
    "for_box_div = {'backgroundColor':'#FFFFFF',\n",
    "               'width':'55%',\n",
    "               'boxShadow': '#388E3C 0px 5px 15px',\n",
    "               'margin':'0px auto',}\n",
    "\n",
    "for_box_drop = {'fontSize':'20px',\n",
    "                'width':'200px',\n",
    "                'fontFamily': 'Arial',}\n",
    "\n",
    "for_box_radio = {'fontSize':'20px',\n",
    "                 'marginLeft':'10px',\n",
    "                 'fontFamily': 'Arial',}\n",
    "\n",
    "for_box_radio_label = {'marginLeft':'5px',} \n",
    "\n",
    "for_bar1_drop = {'fontSize':'20px',\n",
    "                 'fontFamily': 'Arial',}\n",
    "\n",
    "for_knopki_div = {'display':'flex',\n",
    "                  'flexDirection':'row',}\n",
    "\n",
    "for_bar2_div = {'backgroundColor':'#FFFFFF',\n",
    "                'width':'55%',\n",
    "                'boxShadow': '#388E3C 0px 5px 15px',\n",
    "                'margin':'0px auto',}\n",
    "\n",
    "for_bar3_div = {'backgroundColor':'#FFFFFF',\n",
    "                'width':'43%',\n",
    "                'boxShadow': '#388E3C 0px 5px 15px',\n",
    "                'margin':'0px auto',}\n",
    "\n",
    "for_bar23_div ={'display':'flex',\n",
    "                'flexDirection':'row',\n",
    "                'justifyContent':'space-evenly',\n",
    "                'width':'98%',\n",
    "                'margin':'15px auto 5px',}\n",
    "\n",
    "# background styles\n",
    "main_div_style = {'backgroundColor':'#FFFFFF', \n",
    "                  'padding':'0', \n",
    "                  'width':'100%', \n",
    "                  'height':'100%',\n",
    "                  'display':'flex',\n",
    "                  'position':'fixed',\n",
    "                  'flexDirection':'column',\n",
    "                  'top':'0',\n",
    "                  'left':'0',\n",
    "                  'bottom':'0','overflow':'auto',}\n",
    "\n",
    "for_descr_previous = {'color':'#757575',\n",
    "                      'fontSize':'16px',\n",
    "                      'fontFamily': 'Arial',\n",
    "                      'textAlign':'start',\n",
    "                      'margin':'0 auto',}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "69339728-36dd-4f4f-9ce8-5588407b56f9",
   "metadata": {},
   "source": [
    "# Data processing"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1e34b42e-5767-417f-9d0b-f5b27d981ccb",
   "metadata": {},
   "source": [
    "Convert Date to datetime format"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "50757321-aa9e-449d-9c11-dfdb3f12011c",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "2019-01-01 00:00:00\n",
      "2019-03-30 00:00:00\n"
     ]
    }
   ],
   "source": [
    "sales_df['Date'] = pd.to_datetime(sales_df['Date'])\n",
    "sales_df['Time'] = pd.to_datetime(sales_df['Time'])\n",
    "\n",
    "# Needed for two graphs\n",
    "sales_df['day_name'] = sales_df['Date'].dt.day_of_week\n",
    "sales_df['hour'] = sales_df['Time'].dt.hour\n",
    "\n",
    "print(sales_df['Date'].min())\n",
    "print(sales_df['Date'].max())"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ac4315b6-8351-41bb-bda7-f22f44da9261",
   "metadata": {},
   "source": [
    "Outcome dictionary with keys:\n",
    "\n",
    "On years:\n",
    "'prev', 'pres', \n",
    "\n",
    "On years and cities:\n",
    "'prev_Yangon', 'prev_Mandalay', 'prev_Naypyitaw', 'pres_Yangon', 'pres_Mandalay', 'pres_Naypyitaw'"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "id": "443c8178-9335-447b-91c6-834511dc50bd",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "['prev_all',\n",
       " 'pres_all',\n",
       " 'prev_Yangon',\n",
       " 'prev_Mandalay',\n",
       " 'prev_Naypyitaw',\n",
       " 'pres_Yangon',\n",
       " 'pres_Mandalay',\n",
       " 'pres_Naypyitaw']"
      ]
     },
     "execution_count": 8,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# The beginning of the previous month\n",
    "previous_month = datetime.fromisoformat('2019-02-01')\n",
    "# The beginning of the present month\n",
    "present_month = datetime.fromisoformat('2019-03-01')\n",
    "\n",
    "df_dict = {}\n",
    "\n",
    "# Needed to simplify calculations and charting\n",
    "sales_df['ones'] = 1\n",
    "\n",
    "df_dict['prev_all'] = sales_df[(sales_df['Date'] >= previous_month) & (sales_df['Date'] < present_month)]\n",
    "df_dict['pres_all'] = sales_df[sales_df['Date'] >= present_month]\n",
    "\n",
    "city_list = ['Yangon', 'Mandalay', 'Naypyitaw']\n",
    "section_list = ['cogs', 'Quantity', 'Rating', 'ones']\n",
    "\n",
    "# Formation of a dictionary with dataframes\n",
    "for i in list(df_dict):\n",
    "    for z in city_list:\n",
    "        i_df = df_dict[i]\n",
    "        df_dict[i[:-3] + z] = i_df[i_df['City'] == z]\n",
    "\n",
    "list(df_dict)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "351323ce-9b0b-4bfc-8480-3a06c6507a36",
   "metadata": {},
   "source": [
    "Creating a convenient dataframe with all the values you need for a dashboard"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "id": "1e926b9f-90bc-4ad0-b2e1-7f212ae710b7",
   "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>present</th>\n",
       "      <th>city</th>\n",
       "      <th>cogs</th>\n",
       "      <th>Quantity</th>\n",
       "      <th>Rating</th>\n",
       "      <th>ones</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>False</td>\n",
       "      <td>all</td>\n",
       "      <td>92589.88</td>\n",
       "      <td>1654</td>\n",
       "      <td>7.07</td>\n",
       "      <td>303</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>True</td>\n",
       "      <td>all</td>\n",
       "      <td>104243.34</td>\n",
       "      <td>1891</td>\n",
       "      <td>6.84</td>\n",
       "      <td>345</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>False</td>\n",
       "      <td>Yangon</td>\n",
       "      <td>28438.21</td>\n",
       "      <td>493</td>\n",
       "      <td>7.01</td>\n",
       "      <td>94</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>False</td>\n",
       "      <td>Mandalay</td>\n",
       "      <td>32785.02</td>\n",
       "      <td>624</td>\n",
       "      <td>7.01</td>\n",
       "      <td>109</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>False</td>\n",
       "      <td>Naypyitaw</td>\n",
       "      <td>31366.65</td>\n",
       "      <td>537</td>\n",
       "      <td>7.20</td>\n",
       "      <td>100</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>5</th>\n",
       "      <td>True</td>\n",
       "      <td>Yangon</td>\n",
       "      <td>35865.83</td>\n",
       "      <td>681</td>\n",
       "      <td>6.99</td>\n",
       "      <td>127</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>6</th>\n",
       "      <td>True</td>\n",
       "      <td>Mandalay</td>\n",
       "      <td>32949.85</td>\n",
       "      <td>596</td>\n",
       "      <td>6.65</td>\n",
       "      <td>112</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>7</th>\n",
       "      <td>True</td>\n",
       "      <td>Naypyitaw</td>\n",
       "      <td>35427.66</td>\n",
       "      <td>614</td>\n",
       "      <td>6.86</td>\n",
       "      <td>106</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "   present       city       cogs  Quantity  Rating  ones\n",
       "0    False        all   92589.88      1654    7.07   303\n",
       "1     True        all  104243.34      1891    6.84   345\n",
       "2    False     Yangon   28438.21       493    7.01    94\n",
       "3    False   Mandalay   32785.02       624    7.01   109\n",
       "4    False  Naypyitaw   31366.65       537    7.20   100\n",
       "5     True     Yangon   35865.83       681    6.99   127\n",
       "6     True   Mandalay   32949.85       596    6.65   112\n",
       "7     True  Naypyitaw   35427.66       614    6.86   106"
      ]
     },
     "execution_count": 9,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "stat_dict = {'present':[False, True, False, False, False, True, True, True],\n",
    "             'city':['all', 'all', 'Yangon', 'Mandalay', 'Naypyitaw', 'Yangon', 'Mandalay', 'Naypyitaw']}\n",
    "\n",
    "for x in section_list:\n",
    "    x_list = []\n",
    "    for c in list(df_dict):\n",
    "        c_df = df_dict[c][x]\n",
    "        if x == 'Rating':\n",
    "            ss = c_df.sum()/len(c_df)\n",
    "        else:\n",
    "            ss = c_df.sum()\n",
    "            \n",
    "        x_list.append(round(ss, 2))\n",
    "    \n",
    "    stat_dict[x] = x_list.copy()\n",
    "\n",
    "stat_df = pd.DataFrame(stat_dict)\n",
    "stat_df"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "id": "de0f4fdc-576e-496d-a907-63c5fd73192e",
   "metadata": {},
   "outputs": [],
   "source": [
    "city_df_1 = stat_df[(stat_df['city'] != 'all') & (stat_df['present'] == True)]\n",
    "city_df_2 = stat_df[(stat_df['city'] != 'all') & (stat_df['present'] == False)]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "id": "655467df-b865-4dc6-a20b-180eeb11b26b",
   "metadata": {},
   "outputs": [],
   "source": [
    "# It is necessary to calculate how many percent the indicator has increased or decreased\n",
    "def num_str(n1, n2):\n",
    "    if n1 > n2:\n",
    "        perc = (n1-n2)/n2*100\n",
    "        symb = '▲'\n",
    "        col = 'green'\n",
    "        \n",
    "    elif n1 < n2:\n",
    "        perc = (n2-n1)/n2*100\n",
    "        symb = '▼'\n",
    "        col = 'red'\n",
    "\n",
    "    \n",
    "    perc_symb = symb + ' ' + str(round(perc,2)) + '%'\n",
    "    return [str(n1), str(n2), perc_symb, col]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "id": "46762638-f813-4533-9fdb-b9f02e732456",
   "metadata": {},
   "outputs": [],
   "source": [
    "selection_name = {'cogs':'Cost of goods sold', \n",
    "                  'Quantity':'Quantity of goods sold',\n",
    "                  'Rating':'Rating of goods sold',\n",
    "                  'ones':'Quantity of orders'}\n",
    "\n",
    "emoji_s = {'cogs':'💲', 'Quantity':'📦', 'Rating':'⭐', 'ones':'🛍️'}\n",
    "\n",
    "city_list = ['Yangon', 'Mandalay', 'Naypyitaw']\n",
    "section_list = ['cogs', 'Quantity', 'Rating', 'ones']\n",
    "\n",
    "\n",
    "# Dicts with css styles\n",
    "pres_css_dict = {'green':for_present_green,\n",
    "                 'red':for_present_red}\n",
    "\n",
    "prev_css_dict = {'green':for_previous_green,\n",
    "                 'red':for_previous_red}\n",
    "\n",
    "percent_css_dict = {'green':for_percent_green,\n",
    "                    'red':for_percent_red}\n",
    "\n",
    "html_city_dict = {}\n",
    "\n",
    "# Forming html blocks with statistics\n",
    "for v in city_list:\n",
    "    row_df_1 = city_df_1[city_df_1['city'] == v]\n",
    "    row_df_2 = city_df_2[city_df_2['city'] == v]\n",
    "    \n",
    "    section_block = []\n",
    "    for b in section_list:\n",
    "        row_1 = row_df_1[b].iloc[0]\n",
    "        row_2 = row_df_2[b].iloc[0]\n",
    "        res_mas = num_str(row_1, row_2)\n",
    "        \n",
    "        html_list = [html.P(children = selection_name[b], style = for_head_block),\n",
    "                     html.P(children = 'In last month', style = for_descr_present),\n",
    "                     html.P(children = emoji_s[b] + ' ' + res_mas[0], style = pres_css_dict[res_mas[3]]),\n",
    "                     html.P(children = 'In previous month', style = for_descr_present),\n",
    "                     html.P(children = emoji_s[b] + ' ' + res_mas[1], style = prev_css_dict[res_mas[3]]),\n",
    "                     html.P(children = res_mas[2], style = percent_css_dict[res_mas[3]])]\n",
    "        \n",
    "        section_block.append(html.Div(children = html_list.copy(), style = for_stat_text))\n",
    "    \n",
    "    html_city_dict[v] = html.Div(children = section_block, style = for_div_texts)\n",
    "        "
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8a6ed51d-15d2-4add-af39-ce6f4b2ff12c",
   "metadata": {},
   "source": [
    "# Additional Bars"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "id": "272ffe78-047e-44c9-a020-b7a5e449c3eb",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<iframe\n",
       "    scrolling=\"no\"\n",
       "    width=\"100%\"\n",
       "    height=\"545px\"\n",
       "    src=\"iframe_figures/figure_14.html\"\n",
       "    frameborder=\"0\"\n",
       "    allowfullscreen\n",
       "></iframe>\n"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "bar_2 = px.bar(data_frame=sales_df, \n",
    "               x='hour', y='ones',color = 'City', barmode='group',\n",
    "               labels={'ones':'Number of orders',\n",
    "                       'hour':'Hour'},\n",
    "               title='Number of orders by hour',\n",
    "               template='plotly_white')\n",
    "bar_2.update_traces(opacity=0.6, marker_line_width=0)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "id": "b9a8ef21-14c2-44ed-b66c-aa225db59c02",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<iframe\n",
       "    scrolling=\"no\"\n",
       "    width=\"100%\"\n",
       "    height=\"545px\"\n",
       "    src=\"iframe_figures/figure_15.html\"\n",
       "    frameborder=\"0\"\n",
       "    allowfullscreen\n",
       "></iframe>\n"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "bar_3 = px.bar(data_frame=sales_df, \n",
    "               x='day_name', y='ones',color = 'City', barmode='group',\n",
    "               labels={'ones':'Number of orders',\n",
    "                       'day_name':'Day of week'},\n",
    "               title='Number of orders by day of week',\n",
    "               template='plotly_white')\n",
    "bar_3.update_xaxes(\n",
    "    ticktext=['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],\n",
    "    tickvals=[0,1,2,3,4,5,6])\n",
    "bar_3.update_traces(opacity=0.6, marker_line_width=0)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "475c6aed-6941-4456-9854-474ac99e36bd",
   "metadata": {},
   "source": [
    "# Dash App"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "82154698-3f3a-4486-b071-e2da64ef9ea3",
   "metadata": {},
   "outputs": [],
   "source": [
    "app = dash.Dash(__name__)\n",
    "server = app.server \n",
    "app.title = \"Supermarket sales\"\n",
    "\n",
    "text_descr_1 = 'A small dashboard that shows statistics from the kaggle dataset'\n",
    "text_descr_2 = ': https://www.kaggle.com/aungpyaeap/supermarket-sales'\n",
    "\n",
    "sales_text = html.Div(children=[html.P(children='🛒', className='game_smile', style=for_sale_smile ), \n",
    "                                html.H1(children='Supermarket sales', \n",
    "                                        className='header_title', style=for_header_title),\n",
    "                                html.P(children=text_descr_1 + text_descr_2, \n",
    "                                       className='header_description', style=for_header_description),],\n",
    "                      className='header', style=for_header)\n",
    "\n",
    "text_div = html.Div(children=[dcc.RadioItems(id='radio-text', \n",
    "                                             options=[{'label':'Yangon',\n",
    "                                                       'value':'Yangon'},\n",
    "                                                      {'label':'Mandalay',\n",
    "                                                       'value':'Mandalay'},\n",
    "                                                      {'label':'Naypyitaw', \n",
    "                                                       'value':'Naypyitaw'}],\n",
    "                                             value='Yangon',\n",
    "                                             labelStyle=for_radio_text, style=for_radio_div),\n",
    "                              html.Div(id='text-block-output')],\n",
    "                    className='main_texts',\n",
    "                    style=for_main_texts)\n",
    "\n",
    "bar1_div = html.Div(children=[dcc.Dropdown(id='dropdown1-bar',\n",
    "                                           options=[{'label':'The number of orders (Gender)',\n",
    "                                                     'value':'Gender'},\n",
    "                                                    {'label':'The number of orders (City)',\n",
    "                                                     'value':'City'},\n",
    "                                                    {'label':'The number of orders (Customer type)',\n",
    "                                                     'value':'Customer type'},\n",
    "                                                    {'label':'The number of orders (Product line)',\n",
    "                                                     'value':'Product line'},\n",
    "                                                    {'label':'The number of orders (Payment)',\n",
    "                                                     'value':'Payment'}],\n",
    "                                           value='Product line',\n",
    "                                           style=for_bar1_drop),\n",
    "                              dcc.Graph(id='dropdown-bar1-output')],\n",
    "                    className='bar1_div',\n",
    "                    style=for_bar1_div)\n",
    "\n",
    "knopki_div = html.Div(children=[dcc.Dropdown(id='box-drop',\n",
    "                                             options=[{'label':'Gender',\n",
    "                                                       'value':'Gender'},\n",
    "                                                      {'label':'City',\n",
    "                                                       'value':'City'},\n",
    "                                                      {'label':'Customer type',\n",
    "                                                       'value':'Customer type'},\n",
    "                                                      {'label':'Product line',\n",
    "                                                       'value':'Product line'},\n",
    "                                                      {'label':'Payment',\n",
    "                                                       'value':'Payment'}],\n",
    "                                             value='Product line', \n",
    "                                             style=for_box_drop),\n",
    "                                \n",
    "                                dcc.RadioItems(id='box-radio',\n",
    "                                               options=[{'label':'💲 Cost',\n",
    "                                                         'value':'cogs'},\n",
    "                                                        {'label':'📦 Goods',\n",
    "                                                         'value':'Quantity'},\n",
    "                                                        {'label':'⭐ Rating',\n",
    "                                                         'value':'Rating'}],\n",
    "                                               value='cogs', \n",
    "                                               labelStyle=for_box_radio_label,\n",
    "                                               style=for_box_radio)],\n",
    "                      style=for_knopki_div)\n",
    "\n",
    "box_div = html.Div(children=[knopki_div,\n",
    "                             dcc.Graph(id='box-output')],\n",
    "                   style=for_box_div)\n",
    "\n",
    "bar1_box_div = html.Div(children=[bar1_div, box_div], \n",
    "                        style=for_bar1_knopki)\n",
    "\n",
    "bar2_div = dcc.Graph(figure=bar_2, \n",
    "                     style=for_bar2_div)\n",
    "\n",
    "bar3_div = dcc.Graph(figure=bar_3, \n",
    "                     style=for_bar3_div)\n",
    "\n",
    "bar23_div = html.Div(children=[bar2_div, bar3_div], \n",
    "                     style=for_bar23_div)\n",
    "\n",
    "app.layout = html.Div(id = \"main_div\", children=[sales_text, text_div, bar1_box_div, bar23_div], \n",
    "                      style = main_div_style)\n",
    "\n",
    "\n",
    "# text dropdown\n",
    "@app.callback(Output('text-block-output', 'children'),\n",
    "              [Input('radio-text','value')])\n",
    "def update_text(value):\n",
    "    return html_city_dict[value]\n",
    "\n",
    "@app.callback(Output('dropdown-bar1-output', 'figure'),\n",
    "              [Input('dropdown1-bar','value')])\n",
    "def update_text(value):\n",
    "    bar_drop = px.bar(data_frame=sales_df, \n",
    "                      x='City', \n",
    "                      y='ones', \n",
    "                      color=value,\n",
    "                      barmode='group',\n",
    "                      labels={'ones':'Number of orders'},\n",
    "                      title='Number of orders (%s)' % value,\n",
    "                      template='plotly_white')\n",
    "    bar_drop.update_traces(opacity=0.6, marker_line_width=0)\n",
    "    return bar_drop\n",
    "\n",
    "@app.callback(Output('box-output', 'figure'),\n",
    "              [Input('box-drop','value'),\n",
    "               Input('box-radio','value')])\n",
    "def update_text(box_drop_value, box_radio_value):\n",
    "    title_dict = {'cogs': 'Cost',\n",
    "                  'Quantity':'Quantity',\n",
    "                  'Rating':'Rating'}\n",
    "    box_knop = px.box(data_frame=sales_df, \n",
    "               x='City', y=box_radio_value, color = box_drop_value,\n",
    "               labels={'cogs':'Cost of goods sold, $',\n",
    "                       'Quantity':'Quantity of goods sold',\n",
    "                       'Rating':'Rating of goods sold'},\n",
    "               title='%s of goods sold' % title_dict[box_radio_value],\n",
    "               template='plotly_white')\n",
    "    box_knop.update_traces(opacity=0.6)\n",
    "    return box_knop\n",
    "        \n",
    "\n",
    "if __name__ == \"__main__\":\n",
    "    app.run_server(port = 8080)"
   ]
  }
 ],
 "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.8.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}