<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>逆三尊パターン</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Highchartsのライブラリを読み込み -->
  <link href="https://www.highcharts.com/highslide/highslide.css" rel="stylesheet">
  <script src="https://code.highcharts.com/stock/6/highstock.js"></script>
  <script src="https://code.highcharts.com/6/highcharts-more.js"></script>
  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
  <style>
    #container {
      padding: 20px;
      width: 80%;
      margin: 0 auto;
      display: block;
    }
  </style>
</head>

<body>


  <div id="navbar" class="d-flex align-items-center p-2">
    <h1 class="mb-0 me-2">株式チャート （逆三尊パターン検出）</h1>
    <div class="d-flex align-items-center">
      <div class="dropdown me-1">
        <button class="btn btn-sm btn-secondary btn-no-outline">銘柄選択 ▼</button>
        <div class="dropdown-content">

          {% for s in stocks %}
          <a href="/shoulders/{{ s.code }}" data-stock="{{ s.code }}"
            class="{% if s.code == stock.code %}active{% endif %}">{{
            s.name }} {{ s.code }}</a>

          {% endfor %}

        </div>
      </div>
    </div>
  </div>


  <div id="container">Loading...</div>
  <script>

    // Flaskサーバーから渡されたデータを使用
    const chartData = {{ chart_data | tojson }}
    const patterns = {{ patterns | tojson }};
    const smoothedPrices = {{ smoothed_prices | tojson }};
    const bottoms = {{ bottoms | tojson }};
    const dates = chartData.date.map(date => Date.UTC(new Date(date).getFullYear(), new Date(date).getMonth(), new Date(date).getDate()));


    // パターンの線を作成するためのデータ
    const patternLines = patterns.map(pattern => {
      const [left, center, right] = pattern;
      return [
        [dates[left], smoothedPrices[left]],
        [dates[center], smoothedPrices[center]],
        [dates[right], smoothedPrices[right]]
      ];
    });

    const options = {
      chart: {
        renderTo: 'container',
        width: 900,
        height: 600
      },
      title: {
        text: '{{ stock.name }} {{ stock.code }} （逆三尊パターン検出）'
      },
      rangeSelector: {
        selected: 2,
        inputDateFormat: '%Y-%m-%d',
        inputEditDateFormat: '%Y-%m-%d',
        inputEnabled: true
      },
      xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
          day: '%Y-%m-%d',
          week: '%Y-%m-%d',
          month: '%Y-%m',
          year: '%Y'
        }
      },
      yAxis: [
        {
          title: { text: "株価", align: "middle" },
          labels: {
            align: "center",
            enabled: true,
          },
          height: "100%",
          offset: 30
        },
      ],
      series: [
        {
          type: 'candlestick', name: '株価', yAxis: 0,
          data: dates.map((date, i) => [date, chartData.open[i],
            chartData.high[i], chartData.low[i], chartData.close[i]]),
          dataGrouping: { units: [["day", [1]]] }
        },
        {
          name: '平滑化された株価',
          data: smoothedPrices.map((price, i) => [dates[i], price]),
          tooltip: {
            valueDecimals: 2
          },
          color: 'blue'
        },
        {
          name: 'ボトム',
          type: 'scatter',
          data: bottoms.map(index => [dates[index], smoothedPrices[index]]),
          marker: {
            symbol: 'circle',
            radius: 5,
            fillColor: 'red'
          },
          enableMouseTracking: false
        },
        // パターンの線を描画
        ...patternLines.map((line, index) => ({
          name: '逆三尊パターン',
          type: 'line',
          data: line,
          color: 'red',
          lineWidth: 2,
          marker: {
            enabled: false
          },
          enableMouseTracking: false
        }))
      ]
    };

    document.addEventListener("DOMContentLoaded", function () {
      // チャートの初期化
      new Highcharts.StockChart(options);
    });
  </script>
</body>

</html>