Django Sales Charts

Open-source Django sample provided by AppSeed on top of Argon Dashboard.

Open-source Sample provided on top of Argon Dashboard Django (free product). Django Argon Charts sample provides functional code that shows different metrics regarding a 12mo timeframe: total sales, total orders, best sale, and best month (in sales value). Information is provided using charts, widgets and a paginated data table that allows editing/adding new sales - App Features:

  • Manage orders and display the information visually using charts and widgets

  • Table Orders store the information - properties:

    • ID, Product Name (mandatory), Price, Created Times, Updated Times.

  • Charts: Line and Bar Charts:

    • Line Chart shows the sales for a 12mo timeframe

    • Bar Chart shows the sales for a 12mo timeframe

  • Widget 1: Total Sales (in value)

  • Widget 2: Peek Sale - transaction with Biggest Value

  • Widget 3: Total Orders (sum up of all transactions)

  • Widget 4: Best Month - selected by the number of orders

Links

Django Charts Argon - Free Sample.

How to use the app

To compile and execute the project in a local environment the workstation must have a few software tools already installed:

  • GIT - command line versioning tool used to clone the sources

  • Python3 - the language used to code the project

Step #1 - Clone the sources

$ # Get the code
$ git clone https://github.com/app-generator/django-argon-charts.git
$ cd django-argon-charts

Step #2 - Prepare the environment and install modules

$ virtualenv env
$ source env/bin/activate
$
$ # Install modules
$ pip3 install -r requirements.txt

Step #3 - Create SQLite database and tables

$ python manage.py makemigrations
$ python manage.py migrate

Step #4 - Create the superuser

$ python manage.py createsuperuser

Start the app, access the admin section and import the Sample File into the orders table.

Note: make sure your are connected with an admin account.

Codebase Structure

< PROJECT ROOT >
|
|-- core/ # Implements app logic
| |-- settings.py # Django app bootstrapper
| |-- static/
| |-- templates/ # Templates used to render pages
|
|-- authentication/ # Handles auth routes (login and register)
| |-- urls.py # Define authentication routes
| |-- forms.py # Define auth forms
|
|-- app/ # A simple app that serve HTML files
| |-- views.py # Serve HTML pages for authenticated users
| |-- templates
| |-- dashboard.html # The dashboard <-------- NEW
|
|-- orders/ # Handles and display ORDERS <-------- NEW
| |-- migrations/ # Handles and display ORDERS <-------- NEW
| | |-- __init__.py
| |-- static/ # order CSS files, JS, and static images
| | |-- orders_assets/
| | | -- jquery/
| | |-- js/
| | |-- order_script.js
| | |-- notify.js
| |-- templates/
| | |-- orders/
| |-- __init__.py # Defines App init <-------- NEW
| |-- admin.py # Defines App admin <-------- NEW
| |-- apps.py # Defines App apps <-------- NEW
| |-- forms.py # Defines App forms <-------- NEW
| |-- models.py # Defines App models <-------- NEW
| |-- signals.py # Defines App signals <-------- NEW
| |-- tests.py # Defines App tests <-------- NEW
| |-- urls.py # Defines App routes <-------- NEW
| |-- views.py # Defines App views <-------- NEW
|
|-- requirements.txt # Development modules - SQLite storage
|-- .env # Inject Configuration via Environment
|-- manage.py # Start the app - Django default start script
|
|-- **************************************

Charts Feature

This section describes the coding process for this feature that allows authenticated users to update their orders and sales.

Orders Table

This table will save the information shown in the charts on the main dashboard - Fields:

  • ID: primary key

  • Product Name: string

  • Product Price: int

  • Created Times: create transaction datetime

  • Updated Times: update transaction datetime

Orders Application

The application that manages and implements all features:

  • Allow users to save and edit a new order

    • Via a popup window/separate window

  • Populate the information on the main dashboard as presented below:

    • Widget 1: Total Sales (in value)

    • Widget 2: Peek Sale - transaction with Biggest Value

    • Widget 3: Total Orders (sum up of all transactions)

    • Widget 4: Best Month - selected by the number of orders

    • Line Chart shows the sales for a 12mo timeframe

    • Bar Chart shows the sales for a 12mo timeframe

Links & Resources: