{%extends base_html%} {% block title %}Chat模块信息仪表盘{% endblock %} {% block
topbar_title %}Chat信息仪表盘{% endblock %} {% block extra_css %} .stat-card {
align-items: center; justify-content: left; margin-bottom: 5px; } {%endblock%}
{% block content %}
<div class="container">
  <div class="stats-grid">
    <div class="stat-card">
      <div class="stat-icon green">
        <i class="fas fa-arrow-down"></i>
      </div>
      <div class="stat-info">
        <h3>{{ token_prompt }}</h3>
        <p>今日Tokens输入</p>
      </div>
    </div>
    <div class="stat-card">
      <div class="stat-icon orange">
        <i class="fas fa-rocket"></i>
      </div>
      <div class="stat-info">
        <h3>{{ token_completion }}</h3>
        <p>今日Tokens输出</p>
      </div>
    </div>
    <div class="stat-card">
      <div class="stat-icon blue">
        <i class="fas fa-calculator"></i>
      </div>
      <div class="stat-info">
        <h3>{{ usage_count }}</h3>
        <p>今日调用次数</p>
      </div>
    </div>
  </div>

  <div class="charts-grid">
    <div class="chart-card">
      <div class="chart-header">
        <div class="chart-title">Token输入统计</div>
      </div>
      <div class="chart-container">
        <div class="chart-canvas-container">
          <canvas id="inputChart" class="chart-canvas"></canvas>
        </div>
      </div>
    </div>
  </div>
  <div class="charts-grid">
    <div class="chart-card">
      <div class="chart-header">
        <div class="chart-title">Token输出统计</div>
      </div>
      <div class="chart-container">
        <div class="chart-canvas-container">
          <canvas id="outputChart" class="chart-canvas"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %} {%block scripts%}
<script>
  const CHART_DATA_JSON = `{{ chart_data | tojson }}`
  const CHART_DATA = JSON.parse(CHART_DATA_JSON)
  document.addEventListener('DOMContentLoaded', function() {
      initCharts();
  });

  function initCharts() {

      const inputCtx = document.getElementById('inputChart').getContext('2d');
      let inputLabels = [];
      let inputData = [];
      CHART_DATA.forEach(function(item) {
          inputLabels.push(item.date);
          inputData.push(item.token_input);
      });
      const inputChart = new Chart(inputCtx, {
          type: 'line',
          data: {
              labels: inputLabels,
              datasets: [{
                  label: 'Tokens',
                  data: inputData,
                  borderColor: 'rgba(49, 80, 214, 1)',
                  backgroundColor: 'rgba(138, 43, 226, 0.2)',
                  tension: 0.1
              }]
          },
          options: {
              responsive: true,
              maintainAspectRatio: false,
              scales: {
                  y: {
                      beginAtZero: true
                  }
              }
          }
      });

      const outputCtx = document.getElementById('outputChart').getContext('2d');
      let outputLabels = [];
      let outputData = [];
      CHART_DATA.forEach(function(item) {
          outputLabels.push(item.date);
          outputData.push(item.token_output);
      });
      messagesChart = new Chart(outputCtx, {
          type: 'line',
          data: {
              labels: outputLabels,
              datasets: [{
                  label: 'Tokens',
                  data: outputData,
                  borderColor: 'rgba(49, 80, 214, 1)',
                  backgroundColor: 'rgba(138, 43, 226, 0.2)',
                  tension: 0.1
              }]
          },
          options: {
              responsive: true,
              maintainAspectRatio: false,
              scales: {
                  y: {
                      beginAtZero: true
                  }
              }
          }
      });
    }
</script>
{%endblock%}