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

<head>
  <meta charset="UTF-8">
  <title>株式チャート</title>
  <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>
  <style>
    #container {
      padding: 20px;
      width: 80%;
      margin: 0 auto;
      display: block;
    }
  </style>
</head>

<body style="margin:0;padding:0;">
  <div id="container">Loading....</div>
  <script>
    // データの前処理
    const chartData = {{ chart_data | tojson }};
    const dates = chartData.date.map(date => Date.UTC(new Date(date).getFullYear(), new Date(date).getMonth(), new Date(date).getDate()));

    const options = {
      chart: {
        renderTo: 'container',
        width: 900,
        height: 900
      },
      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]]] }, enableMouseTracking: true
        },
        {
          type: 'line', name: '移動平均線 (5日)', yAxis: 0,
          data: dates.map((date, i) => [date, chartData.ma5[i]]),
          color: 'magenta', lineWidth: 1, enableMouseTracking: true
        },
        {
          type: 'line', name: '移動平均線 (25日)', yAxis: 0,
          data: dates.map((date, i) => [date, chartData.ma25[i]]),
          color: 'limegreen', lineWidth: 1, enableMouseTracking: true
        },
        {
          type: 'line', name: '移動平均線 (75日)', yAxis: 0,
          data: dates.map((date, i) => [date, chartData.ma75[i]]),
          color: 'darkblue', lineWidth: 1, enableMouseTracking: true
        },
        {
          type: 'arearange', name: 'ボリンジャーバンド', yAxis: 0,
          data: dates.map((date, i) => [date,
            chartData.lower2[i], chartData.upper2[i]]),
          color: '#7cb5ec',
          fillOpacity: 0.15,
          lineWidth: 0,
          enableMouseTracking: false
        },
      ],
    };
    document.addEventListener("DOMContentLoaded", function () {
      // チャート表示
      new Highcharts.StockChart(options);
    });
  </script>
</body>

</html>