{% extends "base.html" %}

{% block title %}
Index - My Flask App
{% endblock %}

{% block content %}
<h1 class="h3 mb-3">Index Page</h3>

  <div class="row">
    <div class="col-xl-6 col-xxl-7">
      <div class="card flex-fill w-100">
        <div class="card-header">
          <h5 class="card-title mb-0">日経平均</h5>
        </div>
        <div class="card-body py-3">
          <div class="chart chart-sm">
            <canvas id="chart-n225"></canvas>
          </div>
        </div>
      </div>
    </div>

    <div class="col-xl-6 col-xxl-7">
      <div class="card flex-fill w-100">
        <div class="card-header">
          <h5 class="card-title mb-0">ダウ平均</h5>
        </div>
        <div class="card-body py-3">
          <div class="chart chart-sm">
            <canvas id="chart-dji"></canvas>
          </div>
        </div>
      </div>
    </div>
  </div>


  <script>
    document.addEventListener("DOMContentLoaded", function () {
      var ctx = document.getElementById("chart-n225").getContext("2d");
      var gradient = ctx.createLinearGradient(0, 0, 0, 225);
      gradient.addColorStop(0, "rgba(215, 227, 244, 1)");
      gradient.addColorStop(1, "rgba(215, 227, 244, 0)");

      const chartData = {{ n225_chart_data | tojson
    }};

    // dateをyyyy-mm-dd に変換
    chartData.date = chartData.date.map(dateString => {
      const date = new Date(dateString);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月は0始まりなので+1
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    });

    // chartDataのdateとcloseをChartに指定して線グラフを表示
    new Chart(document.getElementById("chart-n225"), {
      type: "line",
      data: {
        labels: chartData.date,
        datasets: [{
          label: "日経平均",
          fill: true,
          backgroundColor: gradient,
          borderColor: window.theme.primary,
          data: chartData.close
        }]
      },
      options: {
        maintainAspectRatio: false,
        legend: {
          display: false
        },
        scales: {
          xAxes: [{
            gridLines: {
              color: "rgba(0,0,0,0.0)"
            }
          }],
          yAxes: [{
            ticks: {
              stepSize: 1000
            },
          }]
        }
      }
    });
    });
  </script>


  <script>
    document.addEventListener("DOMContentLoaded", function () {
      var ctx = document.getElementById("chart-dji").getContext("2d");
      var gradient = ctx.createLinearGradient(0, 0, 0, 225);
      gradient.addColorStop(0, "rgba(215, 227, 244, 1)");
      gradient.addColorStop(1, "rgba(215, 227, 244, 0)");

      const chartData = {{ dji_chart_data | tojson
    }};

    // dateをyyyy-mm-dd に変換
    chartData.date = chartData.date.map(dateString => {
      const date = new Date(dateString);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月は0始まりなので+1
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    });

    // chartDataのdateとcloseをChartに指定して線グラフを表示
    new Chart(document.getElementById("chart-dji"), {
      type: "line",
      data: {
        labels: chartData.date,
        datasets: [{
          label: "ダウ平均",
          fill: true,
          backgroundColor: gradient,
          borderColor: window.theme.primary,
          data: chartData.close
        }]
      },
      options: {
        maintainAspectRatio: false,
        legend: {
          display: false
        },
        hover: {
          intersect: true
        },
        scales: {
          xAxes: [{
            gridLines: {
              color: "rgba(0,0,0,0.0)"
            }
          }],
          yAxes: [{
            ticks: {
              stepSize: 1000
            },
            display: true,
          }]
        }
      }
    });
    });
  </script>

  {% endblock %}