{"id":16174843,"url":"https://github.com/app-generator/sample-django-charts-argon","last_synced_at":"2025-03-19T00:31:03.642Z","repository":{"id":100503203,"uuid":"353600472","full_name":"app-generator/sample-django-charts-argon","owner":"app-generator","description":"Django Argon Charts - Open-source Django Sample | AppSeed","archived":false,"fork":false,"pushed_at":"2022-11-25T15:57:51.000Z","size":8153,"stargazers_count":24,"open_issues_count":1,"forks_count":9,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-11T05:55:54.592Z","etag":null,"topics":["appseed-sample","argon-dashboard","argon-dashboard-django","argon-design","argon-django-charts","django-argon-dashboard","django-argon-design","django-charts","django-sample","django-sample-charts"],"latest_commit_sha":null,"homepage":"https://bit.ly/3si4e7q","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/app-generator.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-04-01T06:38:23.000Z","updated_at":"2024-01-08T20:29:38.000Z","dependencies_parsed_at":"2023-05-15T11:15:15.936Z","dependency_job_id":null,"html_url":"https://github.com/app-generator/sample-django-charts-argon","commit_stats":null,"previous_names":[],"tags_count":1,"template":true,"template_full_name":"app-generator/django-argon-dashboard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-generator%2Fsample-django-charts-argon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-generator%2Fsample-django-charts-argon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-generator%2Fsample-django-charts-argon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-generator%2Fsample-django-charts-argon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/app-generator","download_url":"https://codeload.github.com/app-generator/sample-django-charts-argon/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243955805,"owners_count":20374373,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["appseed-sample","argon-dashboard","argon-dashboard-django","argon-design","argon-django-charts","django-argon-dashboard","django-argon-design","django-charts","django-sample","django-sample-charts"],"created_at":"2024-10-10T04:43:31.445Z","updated_at":"2025-03-19T00:31:03.636Z","avatar_url":"https://github.com/app-generator.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Django Argon Charts \n\nOpen-source Sample provided on top of **[Argon Dashboard Django](https://bit.ly/3si4e7q)** (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. \n\n- [Django Argon Charts](https://django-argon-charts.appseed-srv1.com) - LIVE deployment\n- [Django Graphs and Charts](https://www.creative-tim.com/blog/django-templates/django-graphs-charts-argon-dashboard/) - a comprehensive blog article\n- [Argon Dashboard Django](https://bit.ly/3si4e7q) - the original starter\n\n\u003cbr /\u003e \n\n\u003e App Features\n\n- ✅ Manage orders and display the information visually using charts and widgets\n- ✅ Table `Orders` store the information - properties:\n    - ID, Product Name (mandatory), Price, Created Times, Updated Times.\n- ✅ `Charts`: Line and Bar Charts:\n    - `Line Chart` shows the sales for a 12mo timeframe\n    - `Bar Chart` shows the sales for a 12mo timeframe\n- ✅ `Widget 1`: Total Sales (in value)\n- ✅ `Widget 2`: Peek Sale - transaction with Biggest Value\n- ✅ `Widget 3`: Total Orders (sum up of all transactions)\n- ✅ `Widget 4`: Best Month - selected by the number of orders\n\n\u003cbr /\u003e\n\n## How to use it\n\n**Clone the sources**\n\n```bash\n$ # Get the code\n$ git clone https://github.com/app-generator/django-argon-charts.git\n$ cd django-argon-charts\n```\n\n\u003cbr /\u003e\n\n**Prepare the environment** and install modules\n\n```bash\n$ # Virtualenv modules installation (Unix based systems)\n$ virtualenv env\n$ source env/bin/activate\n$\n$ # Virtualenv modules installation (Windows based systems)\n$ # virtualenv env\n$ # .\\env\\Scripts\\activate\n$\n$ # Install modules\n$ # SQLIte version\n$ pip3 install -r requirements.txt\n```\n\n\u003cbr /\u003e\n\n**Create SQLite database** an tables\n\n```bash\n$ # Create tables\n$ python manage.py makemigrations\n$ python manage.py migrate\n```\n\n\u003cbr /\u003e\n\n**Create the superuser**\n\n```bash\n$ python manage.py createsuperuser \n```\n\n\u003cbr /\u003e\n\n**Start the app**, access the `admin` section and import the [Sample File](https://github.com/app-generator/django-argon-charts/blob/master/media/sample_data/orders.csv) into the `orders` table. \n\n\u003e Note: make sure your are connected with an `admin` account.   \n\n\u003cbr /\u003e\n\n![Django Argon Charts - how to import data using admin section.](https://raw.githubusercontent.com/app-generator/static/master/samples/django-argon-charts-import-data.gif)\n\n\u003cbr /\u003e\n\n## Codebase structure\n\nThe project is coded using a simple and intuitive structure presented below:\n\n```bash\n\u003c PROJECT ROOT \u003e\n   |\n   |-- core/                               # Implements app logic and serve the static assets\n   |    |-- settings.py                    # Django app bootstrapper\n   |    |-- static/\n   |    |    |-- \u003ccss, JS, images\u003e         # CSS files, Javascripts files\n   |    |-- templates/                     # Templates used to render pages\n   |         |\n   |         |-- includes/                 # HTML chunks and components\n   |         |-- layouts/                  # Master pages\n   |         |-- accounts/                 # Authentication pages\n   |         |\n   |      index.html                       # The default page\n   |       *.html                          # All other HTML pages\n   |\n   |-- authentication/                     # Handles auth routes (login and register)\n   |    |-- urls.py                        # Define authentication routes  \n   |    |-- forms.py                       # Define auth forms  \n   |\n   |-- app/                                # A simple app that serve HTML files\n   |    |-- views.py                       # Serve HTML pages for authenticated users\n   |    |-- urls.py                        # Define some super simple routes  \n   |    |-- templates\n   |         |-- dashboard.html            # The dashboard \u003c-------- NEW \n   |\n   |-- orders/                             # Handles and display ORDERS   \u003c-------- NEW   \n   |    |-- migrations/                    # Handles and display ORDERS   \u003c-------- NEW\n   |    |   |-- __init__.py\n   |    |-- static/                        # order CSS files, Javascripts files and static images\n   |    |   |-- orders_assets/\n   |    |       | -- jquery/\n   |    |       |-- js/\n   |    |           |-- order_script.js\n   |    |           |-- notify.js\n   |    |-- templates/                     # Templates used to render order pages\n   |    |   |-- orders/\n   |    |-- __init__.py                    # Defines App init             \u003c-------- NEW\n   |    |-- admin.py                       # Defines App admin            \u003c-------- NEW\n   |    |-- apps.py                        # Defines App apps             \u003c-------- NEW\n   |    |-- forms.py                       # Defines App forms            \u003c-------- NEW\n   |    |-- models.py                      # Defines App models           \u003c-------- NEW\n   |    |-- signals.py                     # Defines App signals          \u003c-------- NEW\n   |    |-- tests.py                       # Defines App tests            \u003c-------- NEW\n   |    |-- urls.py                        # Defines App routes           \u003c-------- NEW\n   |    |-- views.py                       # Defines App views            \u003c-------- NEW\n   |\n   |-- requirements.txt                    # Development modules - SQLite storage\n   |-- .env                                # Inject Configuration via Environment\n   |-- manage.py                           # Start the app - Django default start script\n   |\n   |-- ************************************************************************\n```\n\n\u003cbr /\u003e\n\n\u003e The bootstrap flow\n\n- Django bootstrapper `manage.py` uses `core/settings.py` as the main configuration file\n- `core/settings.py` loads the app magic from `.env` file\n- Redirect the guest users to Login page\n- Unlock the pages served by *app* node for authenticated users\n\n\u003cbr /\u003e\n\n## Charts Feature\n\nThis section describes the coding process for this feature that allows authenticated users to update their orders and sales.\n\n### `Orders` Table\n\nThis table will save the information shown in the charts on the main dashboard - Fields:\n\n- ID: primary key\n- Product Name: string\n- Product Price: int\n- Created Times: create transaction datetime\n- Updated Times: update transaction datetime\n\n\u003cbr /\u003e\n\n### `Orders` Application\n\nThe application that manages and implements all features:\n\n- Allow users to save and edit a new order\n    - Via a popup window/separate window   \n- Populate the information on the main dashboard as presented below: \n    - Widget 1: Total Sales (in value)\n    - Widget 2: Peek Sale - transaction with Biggest Value\n    - Widget 3: Total Orders (sum up of all transactions)\n    - Widget 4: Best Month - selected by the number of orders\n    - Line Chart shows the sales for a 12mo timeframe\n    - Bar Chart shows the sales for a 12mo timeframe\n\n\u003cbr /\u003e\n\n### Additional help\n\nThis section provides more information (especially for beginners) to understand and use the project much faster.\n\n**How to create a new application in Django**\n\nEach application you write in Django consists of a Python package that follows a certain convention. Django comes with a utility that automatically generates the basic directory structure of an app, so you can focus on writing code rather than creating directories.\n\nTo create your app, make sure you’re in the same directory as `manage.py` and type this command:\n\n```bash\n$ python manage.py startapp orders\n```\n\nThat’ll create a directory `orders`, which is laid out like this:\n\n```bash\n|-- orders/\n    |-- migrations/\n        |-- __init__.py\n    |-- __init__.py\n    |-- admin.py\n    |-- apps.py\n    |-- models.py\n    |-- tests.py\n    |-- views.py\n```\n\nNow, open up `core/settings.py`. It’s a normal Python module with module-level variables representing Django settings.\n\nNote the `INSTALLED_APPS` setting at the top of the file. That holds the names of all Django applications that are activated in this Django instance.\n\nBy default, `INSTALLED_APPS` contains the following apps, all of which come with Django:\n\n- **django.contrib.admin:** The admin site. You’ll use it shortly.\n- **django.contrib.auth:** An authentication system.\n- **django.contrib.contenttypes:** A framework for content types.\n- **django.contrib.sessions:** A session framework.\n- **django.contrib.messages:** A messaging framework.\n- **django.contrib.staticfiles:** A framework for managing static files.\n\n\u003e These applications are included by default as a convenience for the common case.\n\nNow add your created app to the `INSTALLED_APPS`, so you can use it.\n\n`core/settings.py`\n```python\nINSTALLED_APPS = [    \n    'django.contrib.admin',\n    'django.contrib.auth',\n    'django.contrib.contenttypes',\n    'django.contrib.sessions',\n    'django.contrib.messages',\n    'django.contrib.staticfiles',\n    \n    # ...\n    'orders',\n\n]\n```\n\n\u003cbr /\u003e\n\n**How to define a new table**\n\nFirst we need to open and edit the `orders/models.py` file. In our app, we’ll create a model named **Order**.\n\nThese concepts are represented by Python classes. Edit the `orders/models.py` file so it looks like this:\n\n```python\nfrom django.db import models\n\nclass Order(models.Model):\n    product_name = models.CharField(max_length=40)\n    price = models.IntegerField()\n    created_time = models.DateTimeField(db_index=True)\n    updated_time = models.DateTimeField(auto_now=True)\n\n    class Meta:\n        verbose_name = 'order'\n        verbose_name_plural = 'orders'\n```\n\nHere, each model is represented by a class that subclasses `django.db.models.Model`. Each model has a number of class variables, each of which represents a database field in the model.\n\nEach field is represented by an instance of a **Field** class, e.g., **CharField** for character fields and **DateTimeField** for datetimes, and **IntegerField** for numbers. This tells Django what type of data each field holds.\n\nNow Django knows to include the orders app. Let’s run another command:\n\n```bash\n$ python manage.py makemigrations orders\n```\n\nYou should see something similar to the following:\n\n```bash\nMigrations for 'app':\n  app/migrations/0001_initial.py\n    - Create model Order\n```\n\n\u003e By running `makemigrations`, you’re telling Django that you’ve made some changes to your models (in this case, you’ve made new ones) and that you’d like the changes to be stored as a migration.\n\nNow, run migrate again to create those model tables in your database:\n\n```bash\n$ python manage.py migrate\n```\n\n\u003e The `migrate` command takes all the migrations that haven’t been applied and run them against your database. Essentially, synchronizing the changes you made to your models with the schema in the database.\n\n\u003cbr /\u003e\n\n**How to register the table**  in the admin section\n\n- `Easy Way`: It's very simple. first you must import admin from `django.contrib` and the table (`Order`) you want to set up an admin interface and then follow the codes:\n\n```python\nfrom django.contrib import admin\nfrom orders.models import Order\n\nadmin.site.register(Order)\n```\n\n- `Custom way`: In this way you can customize your admin page more. So, first as before you must import admin from `django.contrib` and the table (`Order`) you want to set up an admin interface create a class for your admin page like this:\n\n```python\nfrom django.contrib import admin\nfrom orders.models import Order\n\n@admin.register(Order)\nclass OrderAdmin(admin.ModelAdmin):\n    list_display = ['product_name', 'price', 'created_time']\n    search_fields = ['product_name']\n```\n\nIn this case you have more option to use.\n\n\u003cbr /\u003e\n\n**How to add new data in the table**  in the admin section\n\nThis is so easy. Just go to the admin section and click on the desired app (`Orders`). In this section, you will see the `Add` (`ADD ORDER +`) option. After clicking on it, you can fill the form and click the `Save` button to store your information in the database.\n\n\u003cbr /\u003e\n\n**How to import bulk information** (using import/export module)\n\n`django-import-export` is a Django application and library for importing and exporting data with included admin integration.\n\n- `Installation and configuration`: django-import-export is available on the Python Package Index (PyPI), so it can be installed with standard Python tools like `pip` or `easy_install`:\n\n```bash\n$ pip install django-import-export\n```\n\nNow, you’re good to go, Just you need to add `import_export` to your INSTALLED_APPS:\n\n```python\n# settings.py\nINSTALLED_APPS = (\n    ...\n    'import_export',\n)\n```\n\nAnd let Django collect its static files:\n\n```bash\n$ python manage.py collectstatic\n```\n\nAll prerequisites are set up. Now you can [configure more](https://django-import-export.readthedocs.io/en/latest/installation.html#settings) in your settings file.\n\n- `Getting started`: For example purposes, we’ll use a simplified `orders` app as we made it.\n\nTo integrate `django-import-export` with our `Order` model, we will create a `ModelResource` class in `admin.py` that will describe how this resource can be `imported` or `exported`.\n\n**Import Data:**\n```python\n# orders/admin.py\n\nfrom django.contrib import admin\nfrom import_export import resources\nfrom import_export.admin import ImportMixin\nfrom orders.models import Order\n\nclass OrderResource(resources.ModelResource):\n    class Meta:\n        model = Order\n        fields = ['id', 'product_name', 'price', 'created_time']  # the fields that we want to import\n\n@admin.register(Order)\nclass OrderAdmin(ImportMixin, admin.ModelAdmin):\n    list_display = ['product_name', 'price', 'created_time']\n    search_fields = ['product_name']\n    resource_class = OrderResource\n```\n\nThere you are, Now you can import data from files. [Sample File](https://github.com/app-generator/django-argon-charts/blob/master/media/sample_data/orders.csv).\n\nYou can take a look at the [django-import-export](https://django-import-export.readthedocs.io/en/latest/index.html) document for more information.\n\n\u003cbr /\u003e\n\n### Links \u0026 Resources\n\n- [Django](https://www.djangoproject.com/) - the official website\n- More [Django Templates](https://bit.ly/3aStaNb) provided by Creative-Tim \n- More [Django Dashboards](http://appseed.us/admin-dashboards/django) provided by AppSeed\n\n\u003cbr /\u003e\n\n---\n[Django Argon Charts](https://django-argon-charts.appseed-srv1.com) - Provided by Creative-Tim and AppSeed.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapp-generator%2Fsample-django-charts-argon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapp-generator%2Fsample-django-charts-argon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapp-generator%2Fsample-django-charts-argon/lists"}