admin/view/template/extension/task_manager/task_report.twig

Вот содержимое файла admin/view/template/extension/task_manager/task_report.twig:

{% extends 'common/column_left.twig' %}

{% block content %}
  <div id="content">
    <div class="page-header">
      <div class="container-fluid">
        <h1>{{ heading_title }}</h1>
        <ul class="breadcrumb">
          <li><a href="{{ home }}">{{ text_home }}</a></li>
          <li><a href="{{ extension }}">{{ text_extension }}</a></li>
          <li><a href="{{ task_manager }}">{{ heading_title }}</a></li>
          <li class="active">{{ text_task_report }}</li>
        </ul>
      </div>
    </div>

    <div class="container-fluid">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title"><i class="fa fa-bar-chart"></i> {{ text_task_report }}</h3>
        </div>
        <div class="panel-body">
          <div id="chart" style="width: 100%; height: 400px;"></div>
        </div>
        <div class="panel-footer">
          <form action="{{ export }}" method="post" class="form-inline">
            <button type="submit" class="btn btn-success">{{ text_export_pdf }}</button>
            <button type="submit" class="btn btn-success" formaction="{{ export_csv }}">{{ text_export_csv }}</button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
      var ctx = document.getElementById('chart').getContext('2d');
      var chartData = {
        labels: {{ chart_labels|json_encode }},
        datasets: [{
          label: '{{ text_task_status }}',
          data: {{ chart_data|json_encode }},
          backgroundColor: 'rgba(75, 192, 192, 0.2)',
          borderColor: 'rgba(75, 192, 192, 1)',
          borderWidth: 1
        }]
      };
      
      var chartOptions = {
        responsive: true,
        maintainAspectRatio: false
      };

      var chart = new Chart(ctx, {
        type: 'bar',
        data: chartData,
        options: chartOptions
      });
    });
  </script>
{% endblock %}

Объяснение:

• Шаблон расширяет common/column_left.twig для добавления панели навигации.

• Внутри блока content отображается:

  • Заголовок страницы и хлебные крошки.

  • График, построенный с использованием Chart.js, который отображает статистику по задачам.

  • Кнопки для экспорта данных в PDF и CSV формат.

• Переменные:

  • chart_labels: Массив меток для оси X графика.

  • chart_data: Массив данных для отображения на графике.

  • text_task_status: Заголовок для графика (например, "Статус задач").

  • export: URL для экспорта данных в PDF.

  • export_csv: URL для экспорта данных в CSV.

  • text_export_pdf: Текст кнопки для экспорта в PDF.

  • text_export_csv: Текст кнопки для экспорта в CSV.

Этот шаблон показывает график с использованием данных, а также предоставляет возможность экспортировать отчеты в два популярных формата: PDF и CSV.