feat: initial commit - Band Management application

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/charts/admin.py

@@ -0,0 +1,2 @@
+
+# Register your models here.

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/charts/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class ChartsConfig(AppConfig):
+    default_auto_field = "django.db.models.BigAutoField"
+    name = "apps.charts"

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/charts/models.py

@@ -0,0 +1,2 @@
+
+# Create your models here.

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/charts/templates/charts_apex.html

@@ -0,0 +1,304 @@
+{% extends layout_path %}
+
+{% load static %}
+{% load i18n %}
+
+{% block title %}Apex - Charts{% endblock %}
+
+{% block vendor_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/libs/apex-charts/apex-charts.css' %}" />
+{% endblock vendor_css %}
+
+{% block vendor_js %}
+{{ block.super }}
+<script src="{% static 'vendor/libs/apex-charts/apexcharts.js' %}"></script>
+{% endblock vendor_js %}
+
+{% block page_js %}
+{{ block.super }}
+<script src="{% static 'js/charts-apex.js' %}"></script>
+{% endblock page_js %}
+
+{% block content %}
+
+<div class="row gy-6">
+  <!-- Line Area Chart -->
+  <div class="col-12">
+    <div class="card">
+      <div class="card-header d-flex justify-content-between">
+        <div>
+          <h5 class="card-title mb-0">Last updates</h5>
+          <p class="card-subtitle my-0">Commercial networks</p>
+        </div>
+        <div class="dropdown">
+          <button type="button" class="btn dropdown-toggle px-0" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="icon-base ti tabler-calendar"></i>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end">
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
+            <li>
+              <hr class="dropdown-divider" />
+            </li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="lineAreaChart"></div>
+      </div>
+    </div>
+  </div>
+  <!-- /Line Area Chart -->
+
+  <!-- Bar Chart -->
+  <div class="col-12">
+    <div class="card">
+      <div class="card-header d-flex justify-content-between align-items-md-center align-items-start">
+        <h5 class="card-title mb-0">Data Science</h5>
+        <div class="dropdown">
+          <button type="button" class="btn dropdown-toggle p-0" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="icon-base ti tabler-calendar"></i>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end">
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
+            <li>
+              <hr class="dropdown-divider" />
+            </li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="barChart"></div>
+      </div>
+    </div>
+  </div>
+  <!-- /Bar Chart -->
+
+  <!-- Scatter Chart -->
+  <div class="col-12">
+    <div class="card">
+      <div class="card-header d-flex justify-content-between align-items-center">
+        <h5 class="card-title mb-0">New Technologies Data</h5>
+        <div class="btn-group d-none d-sm-flex" role="group" aria-label="radio toggle button group">
+          <input type="radio" class="btn-check" name="btnradio" id="dailyRadio" checked />
+          <label class="btn btn-outline-secondary" for="dailyRadio">Daily</label>
+
+          <input type="radio" class="btn-check" name="btnradio" id="monthlyRadio" />
+          <label class="btn btn-outline-secondary" for="monthlyRadio">Monthly</label>
+
+          <input type="radio" class="btn-check" name="btnradio" id="yearlyRadio" />
+          <label class="btn btn-outline-secondary" for="yearlyRadio">Yearly</label>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="scatterChart"></div>
+      </div>
+    </div>
+  </div>
+  <!-- /Scatter Chart -->
+
+  <!-- Line Chart -->
+  <div class="col-12">
+    <div class="card">
+      <div class="card-header d-flex justify-content-between">
+        <div>
+          <h5 class="card-title mb-0">Balance</h5>
+          <p class="card-subtitle  my-0">Commercial networks & enterprises</p>
+        </div>
+        <div class="d-sm-flex d-none align-items-center">
+          <h5 class="mb-0 me-4">$ 100,000</h5>
+          <span class="badge bg-label-secondary">
+            <i class="icon-base ti tabler-arrow-down icon-xs text-danger"></i>
+            <span class="align-middle">20%</span>
+          </span>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="lineChart"></div>
+      </div>
+    </div>
+  </div>
+  <!-- /Line Chart -->
+
+  <!-- Bar Chart -->
+  <div class="col-md-6 col-12">
+    <div class="card">
+      <div class="card-header d-flex justify-content-between align-items-center">
+        <div>
+          <p class="card-subtitle text-body-secondary mb-1">Balance</p>
+          <h5 class="card-title mb-0">$74,382.72</h5>
+        </div>
+        <div class="dropdown">
+          <button type="button" class="btn dropdown-toggle px-0" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="icon-base ti tabler-calendar"></i>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end">
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
+            <li>
+              <hr class="dropdown-divider" />
+            </li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="horizontalBarChart"></div>
+      </div>
+    </div>
+  </div>
+  <!-- /Bar Chart -->
+
+  <!-- Candlestick Chart -->
+  <div class="col-md-6 col-12">
+    <div class="card">
+      <div class="card-header d-flex align-items-center justify-content-between">
+        <div>
+          <h5 class="card-title mb-0">Stocks Prices</h5>
+          <p class="card-subtitle my-0">$50,863.98</p>
+        </div>
+        <div class="dropdown">
+          <button type="button" class="btn dropdown-toggle px-0" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="icon-base ti tabler-calendar"></i>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end">
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
+            <li>
+              <hr class="dropdown-divider" />
+            </li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="candleStickChart"></div>
+      </div>
+    </div>
+  </div>
+  <!-- /Candlestick Chart -->
+
+  <!-- Heat map Chart -->
+  <div class="col-md-6 col-12">
+    <div class="card">
+      <div class="card-header d-flex justify-content-between align-items-center">
+        <h5 class="card-title mb-0">Daily Sales States</h5>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="heatChartDd" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-lg"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="heatChartDd">
+            <a class="dropdown-item" href="javascript:void(0);">Last 28 Days</a>
+            <a class="dropdown-item" href="javascript:void(0);">Last Month</a>
+            <a class="dropdown-item" href="javascript:void(0);">Last Year</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="heatMapChart"></div>
+      </div>
+    </div>
+  </div>
+  <!-- /Heat map Chart -->
+
+  <!-- Radial bar Chart -->
+  <div class="col-md-6 col-12">
+    <div class="card">
+      <div class="card-header d-flex align-items-center justify-content-between">
+        <h5 class="card-title mb-0">Statistics</h5>
+        <div class="dropdown">
+          <button type="button" class="btn dropdown-toggle p-0" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="icon-base ti tabler-calendar"></i>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end">
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
+            <li>
+              <hr class="dropdown-divider" />
+            </li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="radialBarChart"></div>
+      </div>
+    </div>
+  </div>
+  <!-- /Radial bar Chart -->
+
+  <!-- Radar Chart -->
+  <div class="col-md-6 col-12">
+    <div class="card">
+      <div class="card-header d-flex justify-content-between align-items-center">
+        <h5 class="card-title mb-0">Mobile Comparison</h5>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="heatChartDd1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-lg"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="heatChartDd1">
+            <a class="dropdown-item" href="javascript:void(0);">Last 28 Days</a>
+            <a class="dropdown-item" href="javascript:void(0);">Last Month</a>
+            <a class="dropdown-item" href="javascript:void(0);">Last Year</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="radarChart"></div>
+      </div>
+    </div>
+  </div>
+  <!-- /Radar Chart -->
+
+  <!-- Donut Chart -->
+  <div class="col-md-6 col-12">
+    <div class="card">
+      <div class="card-header d-flex align-items-center justify-content-between">
+        <div>
+          <h5 class="card-title mb-0">Expense Ratio</h5>
+          <p class="card-subtitle my-0">Spending on various categories</p>
+        </div>
+        <div class="dropdown">
+          <button type="button" class="btn dropdown-toggle px-0" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="icon-base ti tabler-calendar"></i>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end">
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
+            <li>
+              <hr class="dropdown-divider" />
+            </li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="donutChart"></div>
+      </div>
+    </div>
+  </div>
+  <!-- /Donut Chart -->
+</div>
+{% endblock %}

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/charts/templates/charts_chartjs.html

@@ -0,0 +1,264 @@
+{% extends layout_path %}
+
+{% load static %}
+{% load i18n %}
+
+{% block title %}Chart.js - Charts{% endblock %}
+
+{% block vendor_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/libs/chartjs/chartjs.css' %}" />
+{% endblock vendor_css %}
+
+{% block vendor_js %}
+{{ block.super }}
+<script src="{% static 'vendor/libs/chartjs/chartjs.js' %}"></script>
+{% endblock vendor_js %}
+
+{% block page_js %}
+{{ block.super }}
+<script src="{% static 'js/charts-chartjs-legend.js' %}"></script>
+<script src="{% static 'js/charts-chartjs.js' %}"></script>
+{% endblock page_js %}
+
+{% block content %}
+
+<div class="row">
+  <!-- Bar Charts -->
+  <div class="col-xl-6 col-12 mb-6">
+    <div class="card">
+      <div class="card-header header-elements">
+        <h5 class="card-title mb-0">Latest Statistics</h5>
+        <div class="card-action-element ms-auto py-0">
+          <div class="dropdown">
+            <button type="button" class="btn dropdown-toggle px-0" data-bs-toggle="dropdown" aria-expanded="false">
+              <i class="icon-base ti tabler-calendar"></i>
+            </button>
+            <ul class="dropdown-menu dropdown-menu-end">
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
+              <li>
+                <hr class="dropdown-divider" />
+              </li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <canvas id="barChart" class="chartjs" data-height="400"></canvas>
+      </div>
+    </div>
+  </div>
+  <!-- /Bar Charts -->
+
+  <!-- Horizontal Bar Charts -->
+  <div class="col-xl-6 col-12 mb-6">
+    <div class="card">
+      <div class="card-header header-elements">
+        <div class="d-flex flex-column">
+          <p class="card-subtitle text-body-secondary mb-1 mt-0">Balance</p>
+          <h5 class="card-title mb-0">$74,123</h5>
+        </div>
+        <div class="card-action-element ms-auto py-0">
+          <div class="dropdown">
+            <button type="button" class="btn dropdown-toggle px-0" data-bs-toggle="dropdown" aria-expanded="false">
+              <i class="icon-base ti tabler-calendar"></i>
+            </button>
+            <ul class="dropdown-menu dropdown-menu-end">
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
+              <li>
+                <hr class="dropdown-divider" />
+              </li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <canvas id="horizontalBarChart" class="chartjs" data-height="400"></canvas>
+      </div>
+    </div>
+  </div>
+  <!-- /Horizontal Bar Charts -->
+
+  <!-- Line Charts -->
+  <div class="col-12 mb-6">
+    <div class="card">
+      <div class="card-header header-elements">
+        <div>
+          <h5 class="card-title mb-0">Statistics</h5>
+          <p class="text-body-secondary">Commercial networks and enterprises</p>
+        </div>
+        <div class="card-header-elements ms-auto py-0">
+          <h5 class="mb-0 me-4">$ 78,000</h5>
+          <span class="badge bg-label-secondary">
+            <i class="icon-base ti tabler-arrow-up icon-xs text-success"></i>
+            <span class="align-middle">37%</span>
+          </span>
+        </div>
+      </div>
+      <div class="card-body pt-2">
+        <div id="legendContainer" class="custom-legend"></div>
+        <div>
+          <canvas id="lineChart" class="chartjs" data-height="500"></canvas>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- /Line Charts -->
+
+  <!-- Radar Chart -->
+  <div class="col-lg-6 col-12 mb-6">
+    <div class="card">
+      <div class="card-header">
+        <h5 class="card-title mb-0">Radar Chart</h5>
+      </div>
+      <div class="card-body pt-2">
+        <canvas class="chartjs" id="radarChart" data-height="355"></canvas>
+      </div>
+    </div>
+  </div>
+  <!-- /Radar Chart -->
+
+  <!-- Polar Area Chart -->
+  <div class="col-lg-6 col-12 mb-6">
+    <div class="card">
+      <div class="card-header header-elements">
+        <h5 class="card-title mb-0">Average Skills</h5>
+        <div class="card-header-elements ms-auto py-0 dropdown">
+          <button type="button" class="btn dropdown-toggle hide-arrow p-0" id="heat-chart-dd" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-lg"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="heat-chart-dd">
+            <a class="dropdown-item" href="javascript:void(0);">Last 28 Days</a>
+            <a class="dropdown-item" href="javascript:void(0);">Last Month</a>
+            <a class="dropdown-item" href="javascript:void(0);">Last Year</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <canvas id="polarChart" class="chartjs" data-height="337"></canvas>
+      </div>
+    </div>
+  </div>
+  <!-- /Polar Area Chart -->
+
+  <!-- Bubble Chart -->
+  <div class="col-12 mb-6">
+    <div class="card">
+      <div class="card-header header-elements">
+        <h5 class="card-title mb-0">Bubble Chart</h5>
+        <div class="card-header-elements ms-auto py-0">
+          <h5 class="mb-0 me-4">$ 100,000</h5>
+          <span class="badge bg-label-secondary">
+            <i class="icon-base ti tabler-arrow-down icon-xs text-danger"></i>
+            <span class="align-middle">20%</span>
+          </span>
+        </div>
+      </div>
+      <div class="card-body">
+        <canvas id="bubbleChart" class="chartjs" data-height="500"></canvas>
+      </div>
+    </div>
+  </div>
+  <!-- /Bubble Chart -->
+
+  <!-- Line Area Charts -->
+  <div class="col-12 mb-6">
+    <div class="card">
+      <div class="card-header header-elements">
+        <h5 class="card-title mb-0">Data Science</h5>
+        <div class="card-header-elements py-0 ms-auto">
+          <div class="dropdown">
+            <button type="button" class="btn dropdown-toggle p-0" data-bs-toggle="dropdown" aria-expanded="false">
+              <i class="icon-base ti tabler-calendar"></i>
+            </button>
+            <ul class="dropdown-menu dropdown-menu-end">
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
+              <li>
+                <hr class="dropdown-divider" />
+              </li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="card-body pt-2">
+        <div id="legendContainer1" class="custom-legend"></div>
+        <div>
+          <canvas id="lineAreaChart" class="chartjs" data-height="450"></canvas>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- /Line Area Charts -->
+
+  <!-- Doughnut Chart -->
+  <div class="col-lg-4 col-12 mb-6">
+    <div class="card">
+      <h5 class="card-header">User by Devices</h5>
+      <div class="card-body">
+        <canvas id="doughnutChart" class="chartjs mb-6" data-height="350"></canvas>
+        <ul class="doughnut-legend d-flex justify-content-around ps-0 mb-2 pt-1">
+          <li class="ct-series-0 d-flex flex-column">
+            <h5 class="mb-0">Desktop</h5>
+            <span class="badge badge-dot my-2 cursor-pointer rounded-pill" style="background-color: rgb(102, 110, 232);width:35px; height:6px;"></span>
+            <div class="text-body-secondary">80 %</div>
+          </li>
+          <li class="ct-series-1 d-flex flex-column">
+            <h5 class="mb-0">Tablet</h5>
+            <span class="badge badge-dot my-2 cursor-pointer rounded-pill" style="background-color: rgb(40, 208, 148);width:35px; height:6px;"></span>
+            <div class="text-body-secondary">10 %</div>
+          </li>
+          <li class="ct-series-2 d-flex flex-column">
+            <h5 class="mb-0">Mobile</h5>
+            <span class="badge badge-dot my-2 cursor-pointer rounded-pill" style="background-color: rgb(253, 172, 52);width:35px; height:6px;"></span>
+            <div class="text-body-secondary">10 %</div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <!-- /Doughnut Chart -->
+
+  <!-- Scatter Chart -->
+  <div class="col-lg-8 col-12 mb-6">
+    <div class="card">
+      <div class="card-header flex-nowrap header-elements">
+        <h5 class="card-title mb-0">New Product Data</h5>
+        <div class="card-header-elements ms-auto py-0 d-none d-sm-block">
+          <div class="btn-group" role="group" aria-label="radio toggle button group">
+            <input type="radio" class="btn-check" name="btnradio" id="dailyRadio" checked />
+            <label class="btn btn-outline-secondary" for="dailyRadio">Daily</label>
+
+            <input type="radio" class="btn-check" name="btnradio" id="monthlyRadio" />
+            <label class="btn btn-outline-secondary" for="monthlyRadio">Monthly</label>
+
+            <input type="radio" class="btn-check" name="btnradio" id="yearlyRadio" />
+            <label class="btn btn-outline-secondary" for="yearlyRadio">Yearly</label>
+          </div>
+        </div>
+      </div>
+      <div class="card-body pt-2">
+        <div id="legendContainer2" class="custom-legend"></div>
+        <div>
+          <canvas id="scatterChart" class="chartjs" data-height="435"></canvas>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- /Scatter Chart -->
+</div>
+{% endblock %}

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/charts/urls.py

@@ -0,0 +1,17 @@
+from django.urls import path
+from .views import ChartsView
+from django.contrib.auth.decorators import login_required
+
+
+urlpatterns = [
+    path(
+        "charts/apex/",
+        login_required(ChartsView.as_view(template_name="charts_apex.html")),
+        name="charts-apex",
+    ),
+    path(
+        "charts/chartjs/",
+        login_required(ChartsView.as_view(template_name="charts_chartjs.html")),
+        name="charts-chartjs",
+    ),
+]

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/charts/views.py

@@ -0,0 +1,18 @@
+from django.views.generic import TemplateView
+from web_project import TemplateLayout
+
+
+"""
+This file is a view controller for multiple pages as a module.
+Here you can override the page view layout.
+Refer to charts/urls.py file for more pages.
+"""
+
+
+class ChartsView(TemplateView):
+    # Predefined function
+    def get_context_data(self, **kwargs):
+        # A function to init the global layout. It is defined in web_project/__init__.py file
+        context = TemplateLayout.init(self, super().get_context_data(**kwargs))
+
+        return context