admin/templates/stats.html - master - zimaaadev/Parser

admin/templates/stats.html
101 строка3 KB
Иван
upload files
28 ноя 2025, 17:43
28 ноя 2025, 17:43f7878f3
<!-- templates/stats.html -->
{% extends "base.html" %}

{% block title %}Статистика по районам{% endblock %}

{% block content %}
<h2 class="mb-4"><i class="fas fa-chart-bar"></i> Топ районов</h2>
<p class="text-muted">Количество объявлений по районам (ТОП-10).</p>

<div class="row">
  <div class="col-12 col-lg-8 mx-auto">
    <canvas id="districtChart" height="300"></canvas>
  </div>
</div>

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<style>
  .chart-container {
      background-color: var(--card-bg);
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }
</style>

{% block scripts %}
<script>
  const ctx = document.getElementById('districtChart').getContext('2d');
  const chart = new Chart(ctx, {
      type: 'bar',
      data: {
          labels: {{ labels | tojson }},
          datasets: [{
              label: 'Количество объявлений',
              data: {{ values | tojson }},
              backgroundColor: [
                  'rgba(54, 162, 235, 0.7)',
                  'rgba(255, 99, 132, 0.7)',
                  'rgba(75, 192, 192, 0.7)',
                  'rgba(255, 205, 86, 0.7)',
                  'rgba(153, 102, 255, 0.7)',
                  'rgba(255, 159, 64, 0.7)',
                  'rgba(199, 199, 199, 0.7)',
                  'rgba(83, 102, 255, 0.7)',
                  'rgba(40, 167, 69, 0.7)',
                  'rgba(220, 53, 69, 0.7)'
              ],
              borderColor: [
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 99, 132, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(255, 205, 86, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)',
                  'rgba(199, 199, 199, 1)',
                  'rgba(83, 102, 255, 1)',
                  'rgba(40, 167, 69, 1)',
                  'rgba(220, 53, 69, 1)'
              ],
              borderWidth: 1
          }]
      },
      options: {
          responsive: true,
          plugins: {
              legend: {
                  display: false
              },
              tooltip: {
                  callbacks: {
                      label: function(context) {
                          return `Объявлений: ${context.parsed.y}`;
                      }
                  }
              }
          },
          scales: {
              y: {
                  beginAtZero: true,
                  ticks: {
                      precision: 0
                  },
                  title: {
                      display: true,
                      text: 'Количество'
                  }
              },
              x: {
                  title: {
                      display: true,
                      text: 'Район'
                  }
              }
          }
      }
  });
</script>
{% endblock %}
{% endblock %}