{%extends base_html%} {% block title %}Chat模块信息仪表盘{% endblock %} {% block
topbar_title %}Chat信息仪表盘{% endblock %} {% block extra_css %}
<style>
  .stat-card {
    align-items: center;
    justify-content: left;
    margin-bottom: 5px;
  }
</style>
{%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%}
