task-1

data/Task_3.Create a Dash Application.ipynb

@@ -0,0 +1,106 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Here is your task\n",
+    "\n",
+    "1. Your task is to create a Dash app to visualise the data you generated in the last task. Lean on the resources linked below to learn more about the basics of working with Dash. Your application must incorporate the following elements:\n",
+    "    * A header which appropriately titles the visualiser;\n",
+    "    * A line chart which visualises the sales data generated in the last task, sorted by date. Be sure to include appropriate axis labels for the chart.\n",
+    " \n",
+    "2. Recall the original purpose of the Dash app you are building — the goal is to answer Soul Foods’s question: “Were sales higher before or after the Pink Morsel price increase on the 15th of January, 2021?” With the visualiser complete, the answer should be obvious. Congratulations, you just answered a pertinent business question using the awesome power of quantitative data. Soul Foods will be pleased to hear all about it!"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import dash\n",
+    "from dash import dcc\n",
+    "from dash import html\n",
+    "import pandas as pd\n",
+    "import plotly.express as px\n",
+    "\n",
+    "# Read the data\n",
+    "df = pd.read_csv('formatted_data.csv', sep=';',parse_dates=['date'])\n",
+    "\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "\n",
+       "        <iframe\n",
+       "            width=\"100%\"\n",
+       "            height=\"650\"\n",
+       "            src=\"http://127.0.0.1:8050/\"\n",
+       "            frameborder=\"0\"\n",
+       "            allowfullscreen\n",
+       "            \n",
+       "        ></iframe>\n",
+       "        "
+      ],
+      "text/plain": [
+       "<IPython.lib.display.IFrame at 0x1e32398c290>"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "# Initialize the Dash app\n",
+    "app = dash.Dash(__name__)\n",
+    "\n",
+    "# Create a Plotly Express line chart\n",
+    "fig = px.line(df, x='date', y='sales', title='Pink Morsels Sales Over Time',\n",
+    "              labels={'Sales':'Sales','Date':'Date'})\n",
+    "\n",
+    "# Highlight the date of price increase\n",
+    "fig.add_vline(x='2021-01-15', line_width=2, line_dash=\"dash\", line_color=\"red\")\n",
+    "\n",
+    "# Define the layout of the app\n",
+    "app.layout = html.Div(children=[\n",
+    "    html.H1(children='Sales Visualizer for Soul Foods'),\n",
+    "    dcc.Graph(\n",
+    "        id='sales-line-chart',\n",
+    "        figure=fig\n",
+    "    )\n",
+    "])\n",
+    "\n",
+    "if __name__ == '__main__':\n",
+    "    app.run_server(debug=True)\n"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "quantium",
+   "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.12.0"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}

data/Task_4.Improve_Your_Dash_Application.ipynb

@@ -0,0 +1,119 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Here is your task\n",
+    "\n",
+    "\n",
+    "1. Soul Foods would like a way to dig into region-specific sales data for Pink Morsels. To this end, they’d like a radio button in your visualiser which allows them to filter sales data by region. Leaning on the resources linked below, add a radio button with five options to narrow which data appear in the line chart: “north,” “east,” “south,” “west,” and “all.”\n",
+    " \n",
+    "2. Now it’s time to dress up your Dash app! Apply some CSS to each element to make your application more visually appealing. There are no requirements for this step other than that you put effort into making your visualiser interesting. The model answer contains an example styling, but the possibilities are infinite — make your visualiser your own!"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "\n",
+       "        <iframe\n",
+       "            width=\"100%\"\n",
+       "            height=\"650\"\n",
+       "            src=\"http://127.0.0.1:8050/\"\n",
+       "            frameborder=\"0\"\n",
+       "            allowfullscreen\n",
+       "            \n",
+       "        ></iframe>\n",
+       "        "
+      ],
+      "text/plain": [
+       "<IPython.lib.display.IFrame at 0x1d1ff1ff9b0>"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "import dash\n",
+    "from dash import dcc, html, Input, Output\n",
+    "import pandas as pd\n",
+    "import plotly.express as px\n",
+    "\n",
+    "# Read the data\n",
+    "df = pd.read_csv('formatted_data.csv', sep=';', parse_dates=['date'])\n",
+    "# Ensure your CSV has a 'region' column to filter by region\n",
+    "\n",
+    "# Initialize the Dash app\n",
+    "app = dash.Dash(__name__)\n",
+    "\n",
+    "# Define the layout of the app\n",
+    "app.layout = html.Div(children=[\n",
+    "    html.H1(children='Sales Visualizer for Soul Foods'),\n",
+    "\n",
+    "    html.Label('Select Region:'),\n",
+    "    dcc.RadioItems(\n",
+    "        id='region-selector',\n",
+    "        options=[\n",
+    "            {'label': 'North', 'value': 'north'},\n",
+    "            {'label': 'East', 'value': 'east'},\n",
+    "            {'label': 'South', 'value': 'south'},\n",
+    "            {'label': 'West', 'value': 'west'},\n",
+    "            {'label': 'All', 'value': 'all'}\n",
+    "        ],\n",
+    "        value='all',  # Default value\n",
+    "        style={\"padding\": \"20px\"}\n",
+    "    ),\n",
+    "\n",
+    "    dcc.Graph(id='sales-line-chart')\n",
+    "])\n",
+    "\n",
+    "# Callback to update line chart based on selected region\n",
+    "@app.callback(\n",
+    "    Output('sales-line-chart', 'figure'),\n",
+    "    Input('region-selector', 'value')\n",
+    ")\n",
+    "def update_figure(selected_region):\n",
+    "    filtered_df = df if selected_region == 'all' else df[df['region'] == selected_region]\n",
+    "    \n",
+    "    # Create a line chart\n",
+    "    fig = px.line(filtered_df, x='date', y='sales', title='Pink Morsels Sales Over Time',\n",
+    "                  labels={'sales': 'Sales', 'date': 'Date'})\n",
+    "    \n",
+    "    # Highlight the date of price increase\n",
+    "    fig.add_vline(x='2021-01-15', line_width=2, line_dash=\"dash\", line_color=\"red\")\n",
+    "    \n",
+    "    return fig\n",
+    "\n",
+    "if __name__ == '__main__':\n",
+    "    app.run_server(debug=True)"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "quantium",
+   "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.12.0"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}

data/Task_5.Test_Your_Dash_Application.ipynb

@@ -0,0 +1,91 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Here is your task\n",
+    "\n",
+    "1. Your task is to create a test suite to verify your Dash app is working as expected. Using the standard Dash testing framework (documentation linked in the resources below) write three tests which ensure the following:\n",
+    "The header is present.\n",
+    "The visualisation is present.\n",
+    "The region picker is present.\n",
+    "\n",
+    "2. Execute your test suite using Pytest and ensure each test passes."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from selenium.webdriver.common.by import By\n",
+    "import dash.testing.wait as wait\n",
+    "from dash.testing.application_runners import import_app\n",
+    "\n",
+    "\n",
+    "def test_header_presence(dash_duo):\n",
+    "    app = import_app(\"app\")\n",
+    "    dash_duo.start_server(app)\n",
+    "\n",
+    "    # Check for header presence by text\n",
+    "    header = dash_duo.find_element(\"h1\")\n",
+    "    assert header.text == \"Sales Visualizer for Soul Foods\", \"The header should be present and correct.\"\n",
+    "\n",
+    "\n",
+    "def test_visualisation_presence(dash_duo):\n",
+    "    app = import_app(\"app\")\n",
+    "    dash_duo.start_server(app)\n",
+    "\n",
+    "    # Check for the presence of the Plotly graph\n",
+    "    wait.until(\n",
+    "        lambda: dash_duo.find_element(\"#sales-line-chart .plotly-graph-div\"),\n",
+    "        timeout=10,\n",
+    "    ), \"The visualization should be present.\"\n",
+    "\n",
+    "\n",
+    "def test_region_picker_presence(dash_duo):\n",
+    "    app = import_app(\"app\")\n",
+    "    dash_duo.start_server(app)\n",
+    "\n",
+    "    # Check for the region picker radio items\n",
+    "    region_picker = dash_duo.find_element(\"#region-selector\")\n",
+    "    assert region_picker, \"The region picker should be present.\"\n",
+    "\n",
+    "    # Optionally, verify that all expected radio items are present\n",
+    "    radio_items = dash_duo.find_elements(By.CSS_SELECTOR, \"#region-selector label\")\n",
+    "    expected_labels = ['North', 'East', 'South', 'West', 'All']\n",
+    "    assert len(radio_items) == len(expected_labels), \"All region picker options should be present.\"\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "quantium",
+   "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.12.0"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}

data/app.py

@@ -0,0 +1,52 @@
+import dash
+from dash import dcc, html, Input, Output
+import pandas as pd
+import plotly.express as px
+
+# Read the data
+df = pd.read_csv('formatted_data.csv', sep=';', parse_dates=['date'])
+# Ensure your CSV has a 'region' column to filter by region
+
+# Initialize the Dash app
+app = dash.Dash(__name__)
+
+# Define the layout of the app
+app.layout = html.Div(children=[
+    html.H1(children='Sales Visualizer for Soul Foods'),
+
+    html.Label('Select Region:'),
+    dcc.RadioItems(
+        id='region-selector',
+        options=[
+            {'label': 'North', 'value': 'north'},
+            {'label': 'East', 'value': 'east'},
+            {'label': 'South', 'value': 'south'},
+            {'label': 'West', 'value': 'west'},
+            {'label': 'All', 'value': 'all'}
+        ],
+        value='all',  # Default value
+        style={"padding": "20px"}
+    ),
+
+    dcc.Graph(id='sales-line-chart')
+])
+
+# Callback to update line chart based on selected region
+@app.callback(
+    Output('sales-line-chart', 'figure'),
+    Input('region-selector', 'value')
+)
+def update_figure(selected_region):
+    filtered_df = df if selected_region == 'all' else df[df['region'] == selected_region]
+
+    # Create a line chart
+    fig = px.line(filtered_df, x='date', y='sales', title='Pink Morsels Sales Over Time',
+                  labels={'sales': 'Sales', 'date': 'Date'})
+
+    # Highlight the date of price increase
+    fig.add_vline(x='2021-01-15', line_width=2, line_dash="dash", line_color="red")
+
+    return fig
+
+if __name__ == '__main__':
+    app.run_server(debug=True)